Skip to content

Commit

Permalink
Merge pull request #947 from chainapsis/retto/KM-111
Browse files Browse the repository at this point in the history 
[KM-111] 기존 모달을 v2 모달로 교체 했습니다
  • Loading branch information
@HeesungB
HeesungB authored Dec 10, 2023
2 parents b53b0c9 + 49690a4 commit c94f9ef
Show file tree
Hide file tree
Showing 8 changed files with 355 additions and 569 deletions.
235 changes: 94 additions & 141 deletions packages/mobile/src/components/select-modal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import React, {FunctionComponent, useEffect, useRef, useState} from 'react';
import {observer} from 'mobx-react-lite';
import {useIntl} from 'react-intl';
import {EmitterSubscription, Keyboard, Platform, Text} from 'react-native';
import {Text} from 'react-native';
import {Gutter} from '../gutter';
import {useStyle} from '../../styles';
import {BottomSheetFlatList, useBottomSheet} from '@gorhom/bottom-sheet';
import {Box} from '../box';
import {RectButton} from '../rect-button';
import {Column, Columns} from '../column';
import {ChainImageFallback} from '../image';
import {TextButton} from '../text-button';
import {ArrowDownFillIcon} from '../icon/arrow-donw-fill';
import {BottomSheetSearchTextInput} from '../input/bottom-sheet-search-input';
import {TextInput} from 'react-native-gesture-handler';
import {ScrollView, TextInput} from 'react-native-gesture-handler';
import {SearchTextInput} from '../input/search-text-input';
import {registerCardModal} from '../modal/card';

export interface SelectModalItem {
key: string;
Expand Down Expand Up @@ -62,69 +61,48 @@ export const SelectModalCommonButton: FunctionComponent<{
);
});

export const SelectModal: FunctionComponent<{
title: string;
items: SelectModalItem[];
placeholder?: string;
onSelect: (item: SelectModalItem) => void;
}> = observer(({items, title, placeholder, onSelect}) => {
const style = useStyle();
const [search, setSearch] = useState('');
const searchRef = useRef<TextInput>(null);
const intl = useIntl();
const bottom = useBottomSheet();
export const SelectModal = registerCardModal(
observer<{
title: string;
items: SelectModalItem[];
placeholder?: string;
isOpen: boolean;
onSelect: (item: SelectModalItem) => void;
}>(({items, title, placeholder, onSelect}) => {
const style = useStyle();
const [search, setSearch] = useState('');
const searchRef = useRef<TextInput>(null);
const intl = useIntl();

useEffect(() => {
searchRef.current?.focus();
}, [searchRef]);

//NOTE - https://github.com/gorhom/react-native-bottom-sheet/issues/1072
// android에서 키보드가 열렸을때 modal을 close 트리거 할 경우
// 키보드가 먼저 사라지면서 bottomSheet높이가 다시 설정되고 리렌더링 되는 버그가 있음
// 그래서 setTimeout으로 키보드를 먼저 닫은뒤 bottomSheet을 닫도록 설정함
useEffect(() => {
let keyboardDidHideListener: EmitterSubscription;
if (Platform.OS === 'android') {
keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
setTimeout(() => {
bottom.close();
}, 0);
});
}

return () => {
if (Platform.OS === 'android') {
keyboardDidHideListener.remove();
}
};
}, [bottom]);
useEffect(() => {
searchRef.current?.focus();
}, [searchRef]);

const filtered = search
? items.filter(item => {
const trimmedSearchText = search.trim();
if (trimmedSearchText.length > 0) {
return (
typeof item.label === 'string' &&
item.label.toLowerCase().includes(trimmedSearchText.toLowerCase())
);
}
})
: items;
const filtered = search
? items.filter(item => {
const trimmedSearchText = search.trim();
if (trimmedSearchText.length > 0) {
return (
typeof item.label === 'string' &&
item.label.toLowerCase().includes(trimmedSearchText.toLowerCase())
);
}
})
: items;

return (
<React.Fragment>
<Box paddingX={12}>
<Text
style={style.flatten([
'text-center',
'subtitle1',
'color-text-high',
'padding-8',
])}>
{title}
</Text>
<Gutter size={12} />
{Platform.OS === 'android' ? (
return (
<Box>
<Box paddingX={12}>
<Text
style={style.flatten([
'text-center',
'subtitle1',
'color-text-high',
'padding-8',
])}>
{title}
</Text>
<Gutter size={12} />
<SearchTextInput
ref={searchRef}
value={search}
Expand All @@ -134,82 +112,57 @@ export const SelectModal: FunctionComponent<{
}}
placeholder={placeholder}
/>
) : (
<BottomSheetSearchTextInput
ref={searchRef}
value={search}
onChange={e => {
e.preventDefault();
setSearch(e.nativeEvent.text);
}}
placeholder={placeholder}
onSubmitEditing={() => {
bottom.snapToIndex(0);
}}
/>
)}

<Gutter size={12} />
</Box>
<BottomSheetFlatList
data={filtered}
renderItem={({item}) => {
return (
<RectButton
underlayColor={style.get('color-gray-550').color}
rippleColor={style.get('color-gray-550').color}
activeOpacity={1}
style={style.flatten(['background-color-gray-600'])}
onPress={async () => {
onSelect(item);
//NOTE - https://github.com/gorhom/react-native-bottom-sheet/issues/1072
// android에서 키보드가 열렸을때 modal을 close 트리거 할 경우
// 키보드가 먼저 사라지면서 bottomSheet높이가 다시 설정되고 리렌더링 되는 버그가 있음
// 그래서 setTimeout으로 키보드를 먼저 닫은뒤 bottomSheet을 닫도록 설정함
if (Platform.OS === 'android') {
if (Keyboard.isVisible()) {
Keyboard.dismiss();
return;
}
bottom.close();
return;
}
bottom.close();
}}>
<Box
paddingY={14}
paddingLeft={16}
paddingRight={8}
borderRadius={6}
height={74}
alignY="center"
alignX="center">
<Columns sum={1} alignY="center" gutter={8}>
<Box>
<ChainImageFallback
style={{
width: 32,
height: 32,
}}
src={item.imageUrl}
alt="chain icon"
<Gutter size={12} />
</Box>
<ScrollView style={{height: 250}}>
{filtered.map(item => {
return (
<RectButton
underlayColor={style.get('color-gray-550').color}
rippleColor={style.get('color-gray-550').color}
activeOpacity={1}
style={style.flatten(['background-color-gray-600'])}
onPress={() => {
onSelect(item);
}}
key={item.key}>
<Box
paddingY={14}
paddingLeft={16}
paddingRight={8}
borderRadius={6}
height={74}
alignY="center"
alignX="center">
<Columns sum={1} alignY="center" gutter={8}>
<Box>
<ChainImageFallback
style={{
width: 32,
height: 32,
}}
src={item.imageUrl}
alt="chain icon"
/>
</Box>
<Text
style={style.flatten(['subtitle3', 'color-text-high'])}>
{item.label}
</Text>
<Column weight={2} />
<TextButton
text={intl.formatMessage({
id: 'page.setting.token.add.contract-item.select-button',
})}
/>
</Box>
<Text style={style.flatten(['subtitle3', 'color-text-high'])}>
{item.label}
</Text>
<Column weight={2} />
<TextButton
text={intl.formatMessage({
id: 'page.setting.token.add.contract-item.select-button',
})}
/>
</Columns>
</Box>
</RectButton>
);
}}
/>
</React.Fragment>
);
});
</Columns>
</Box>
</RectButton>
);
})}
</ScrollView>
</Box>
);
}),
);
Loading

0 comments on commit c94f9ef

Please sign in to comment.