|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import React, { useEffect, useMemo, useRef, useState } from 'react' |
|
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' |
|
|
|
import { |
|
|
|
import { |
|
|
|
View, |
|
|
|
View, |
|
|
|
Text, |
|
|
|
Text, |
|
|
|
@ -7,7 +7,6 @@ import { |
|
|
|
TouchableOpacity, |
|
|
|
TouchableOpacity, |
|
|
|
Dimensions, |
|
|
|
Dimensions, |
|
|
|
} from 'react-native' |
|
|
|
} from 'react-native' |
|
|
|
import RBSheet from 'react-native-raw-bottom-sheet' |
|
|
|
|
|
|
|
import _ from 'lodash' |
|
|
|
import _ from 'lodash' |
|
|
|
|
|
|
|
|
|
|
|
import { contactsService, tasksService } from '@/services/domain' |
|
|
|
import { contactsService, tasksService } from '@/services/domain' |
|
|
|
@ -16,6 +15,7 @@ import { |
|
|
|
Button, |
|
|
|
Button, |
|
|
|
isAndroid, |
|
|
|
isAndroid, |
|
|
|
IShortUser, |
|
|
|
IShortUser, |
|
|
|
|
|
|
|
KeyboardSpacer, |
|
|
|
SearchForm, |
|
|
|
SearchForm, |
|
|
|
Txt, |
|
|
|
Txt, |
|
|
|
useEventsListener, |
|
|
|
useEventsListener, |
|
|
|
@ -26,6 +26,11 @@ import { selectUserModalTransforms } from './transforms' |
|
|
|
import { usersService } from '@/services/domain/users.service' |
|
|
|
import { usersService } from '@/services/domain/users.service' |
|
|
|
import { FetchType } from './intefaces' |
|
|
|
import { FetchType } from './intefaces' |
|
|
|
import { PartialTheme } from '@/shared/themes/interfaces' |
|
|
|
import { PartialTheme } from '@/shared/themes/interfaces' |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
BottomSheetModal, |
|
|
|
|
|
|
|
BottomSheetBackdrop, |
|
|
|
|
|
|
|
BottomSheetTextInput, |
|
|
|
|
|
|
|
} from '@gorhom/bottom-sheet' |
|
|
|
|
|
|
|
|
|
|
|
const screenHeight = Dimensions.get('screen').height |
|
|
|
const screenHeight = Dimensions.get('screen').height |
|
|
|
|
|
|
|
|
|
|
|
@ -40,13 +45,14 @@ const api = { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const SelectUserModalSmart = () => { |
|
|
|
export const SelectUserModalSmart = () => { |
|
|
|
const { styles } = useTheme(createStyles) |
|
|
|
const { styles, theme } = useTheme(createStyles) |
|
|
|
const sheetRef = useRef<RBSheet>(null) |
|
|
|
const sheetRef = useRef<BottomSheetModal>(null) |
|
|
|
const settingsRef = useRef<ISettingsProps>({ callback: null }) |
|
|
|
const settingsRef = useRef<ISettingsProps>({ callback: null }) |
|
|
|
const [type, setType] = useState<FetchType>(null) |
|
|
|
const [type, setType] = useState<FetchType>(null) |
|
|
|
const [title, setTitle] = useState<string>('') |
|
|
|
const [title, setTitle] = useState<string>('') |
|
|
|
|
|
|
|
const [isFocus, setFocus] = useState(false) |
|
|
|
|
|
|
|
|
|
|
|
const [modalHeight, setModalHeight] = useState(screenHeight - $size(250)) |
|
|
|
const [modalHeight, setModalHeight] = useState(screenHeight - 100) |
|
|
|
|
|
|
|
|
|
|
|
const [selectedItem, selectItem] = useState<IShortUser>({} as any) |
|
|
|
const [selectedItem, selectItem] = useState<IShortUser>({} as any) |
|
|
|
const [searchString, setsearchString] = useState<string>() |
|
|
|
const [searchString, setsearchString] = useState<string>() |
|
|
|
@ -66,7 +72,7 @@ export const SelectUserModalSmart = () => { |
|
|
|
callback: data.callback, |
|
|
|
callback: data.callback, |
|
|
|
} |
|
|
|
} |
|
|
|
setType(_.defaultTo(data.type, 'users')) |
|
|
|
setType(_.defaultTo(data.type, 'users')) |
|
|
|
sheetRef.current.open() |
|
|
|
sheetRef.current.present() |
|
|
|
if (data.title) setTitle(data.title) |
|
|
|
if (data.title) setTitle(data.title) |
|
|
|
} catch (e) { |
|
|
|
} catch (e) { |
|
|
|
console.log(e) |
|
|
|
console.log(e) |
|
|
|
@ -87,6 +93,17 @@ export const SelectUserModalSmart = () => { |
|
|
|
if (!_.isEmpty(selectedItem)) settingsRef.current.callback(selectedItem) |
|
|
|
if (!_.isEmpty(selectedItem)) settingsRef.current.callback(selectedItem) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const renderBackdrop = useCallback( |
|
|
|
|
|
|
|
props => ( |
|
|
|
|
|
|
|
<BottomSheetBackdrop |
|
|
|
|
|
|
|
{...props} |
|
|
|
|
|
|
|
disappearsOnIndex={-1} |
|
|
|
|
|
|
|
appearsOnIndex={0} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
[], |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
const renderItem = ({ item }) => { |
|
|
|
const renderItem = ({ item }) => { |
|
|
|
const isActive = selectedItem.id === item.id |
|
|
|
const isActive = selectedItem.id === item.id |
|
|
|
|
|
|
|
|
|
|
|
@ -113,36 +130,30 @@ export const SelectUserModalSmart = () => { |
|
|
|
searchValue={searchString} |
|
|
|
searchValue={searchString} |
|
|
|
placeholder="Пошук" |
|
|
|
placeholder="Пошук" |
|
|
|
onChange={setsearchString} |
|
|
|
onChange={setsearchString} |
|
|
|
onFocus={() => |
|
|
|
onFocus={() => setFocus(true)} |
|
|
|
setModalHeight(screenHeight - 220 - $size(100)) |
|
|
|
onBlur={() => setFocus(false)} |
|
|
|
} |
|
|
|
|
|
|
|
onBlur={() => setModalHeight(screenHeight - $size(250))} |
|
|
|
|
|
|
|
paddingHorizontal={0} |
|
|
|
paddingHorizontal={0} |
|
|
|
borderBottom={false} |
|
|
|
borderBottom={false} |
|
|
|
|
|
|
|
customInputComponent={BottomSheetTextInput} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</View> |
|
|
|
</View> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<RBSheet |
|
|
|
<BottomSheetModal |
|
|
|
|
|
|
|
name="select-user-modal" |
|
|
|
|
|
|
|
index={0} |
|
|
|
ref={sheetRef} |
|
|
|
ref={sheetRef} |
|
|
|
height={modalHeight} |
|
|
|
snapPoints={[modalHeight]} |
|
|
|
dragFromTopOnly={true} |
|
|
|
backgroundStyle={[ |
|
|
|
closeOnDragDown={true} |
|
|
|
styles.container, |
|
|
|
closeOnPressBack={true} |
|
|
|
isFocus ? styles.containerFocus : null, |
|
|
|
closeOnPressMask={true} |
|
|
|
]} |
|
|
|
animationType="fade" |
|
|
|
backdropComponent={renderBackdrop} |
|
|
|
onClose={() => { |
|
|
|
keyboardBehavior="fillParent" |
|
|
|
setModalHeight(screenHeight - $size(250)) |
|
|
|
keyboardBlurBehavior="restore" |
|
|
|
}} |
|
|
|
handleIndicatorStyle={isFocus ? { display: 'none' } : null}> |
|
|
|
customStyles={{ |
|
|
|
|
|
|
|
container: { ...styles.container, height: modalHeight }, |
|
|
|
|
|
|
|
draggableIcon: { |
|
|
|
|
|
|
|
width: $size(70), |
|
|
|
|
|
|
|
height: $size(2), |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}}> |
|
|
|
|
|
|
|
<FlatList |
|
|
|
<FlatList |
|
|
|
style={styles.list} |
|
|
|
style={styles.list} |
|
|
|
data={list.items} |
|
|
|
data={list.items} |
|
|
|
@ -151,17 +162,20 @@ export const SelectUserModalSmart = () => { |
|
|
|
stickyHeaderIndices={[0]} |
|
|
|
stickyHeaderIndices={[0]} |
|
|
|
onEndReached={() => list.loadMore()} |
|
|
|
onEndReached={() => list.loadMore()} |
|
|
|
showsVerticalScrollIndicator={false} |
|
|
|
showsVerticalScrollIndicator={false} |
|
|
|
|
|
|
|
contentContainerStyle={styles.listContent} |
|
|
|
|
|
|
|
keyboardShouldPersistTaps="handled" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
<View style={styles.content}> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
title="Вибрати" |
|
|
|
title="Вибрати" |
|
|
|
type="primary" |
|
|
|
type="primary" |
|
|
|
onPress={() => { |
|
|
|
onPress={() => { |
|
|
|
confirm() |
|
|
|
confirm() |
|
|
|
sheetRef.current.close() |
|
|
|
sheetRef.current.close() |
|
|
|
}} |
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</RBSheet> |
|
|
|
</View> |
|
|
|
|
|
|
|
</BottomSheetModal> |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -170,11 +184,13 @@ const createStyles = (theme: PartialTheme) => |
|
|
|
container: { |
|
|
|
container: { |
|
|
|
borderTopRightRadius: 35, |
|
|
|
borderTopRightRadius: 35, |
|
|
|
borderTopLeftRadius: 35, |
|
|
|
borderTopLeftRadius: 35, |
|
|
|
paddingHorizontal: $size(20), |
|
|
|
|
|
|
|
paddingBottom: $size(30), |
|
|
|
|
|
|
|
backgroundColor: theme.$layoutBg, |
|
|
|
backgroundColor: theme.$layoutBg, |
|
|
|
marginTop: isAndroid($size(20), 0), |
|
|
|
marginTop: isAndroid($size(20), 0), |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
containerFocus: { |
|
|
|
|
|
|
|
borderTopRightRadius: 0, |
|
|
|
|
|
|
|
borderTopLeftRadius: 0, |
|
|
|
|
|
|
|
}, |
|
|
|
title: { |
|
|
|
title: { |
|
|
|
textAlign: 'center', |
|
|
|
textAlign: 'center', |
|
|
|
paddingVertical: 15, |
|
|
|
paddingVertical: 15, |
|
|
|
@ -182,6 +198,13 @@ const createStyles = (theme: PartialTheme) => |
|
|
|
fontSize: $size(22, 14), |
|
|
|
fontSize: $size(22, 14), |
|
|
|
color: theme.$textPrimary, |
|
|
|
color: theme.$textPrimary, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
listContent: { |
|
|
|
|
|
|
|
paddingHorizontal: $size(20), |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
content: { |
|
|
|
|
|
|
|
paddingHorizontal: $size(20), |
|
|
|
|
|
|
|
paddingBottom: $size(30), |
|
|
|
|
|
|
|
}, |
|
|
|
list: { |
|
|
|
list: { |
|
|
|
flex: 1, |
|
|
|
flex: 1, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
Vitalik
3 years ago