Commit 0b91d18f authored by XieZhiXiong's avatar XieZhiXiong

feat: 添加国家/区号选择弹窗组件

parent 2e3344f8
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import useAppStyle from '../../hooks/useAppStyle';
import Popup from '../Popup';
import Radio from '../Radio';
import styles from './styles';
export type AreaCodeOption = {
/**
* 区号,唯一值
*/
code: string;
/**
* 区域名称
*/
name?: string;
/**
* 电话号码长度
*/
phoneLength?: number;
};
interface AreaCodePopupProps {
/**
* 是否可见
*/
visible: boolean;
/**
* 关闭触发事件
*/
onClose?: () => void;
/**
* 选项
*/
options: AreaCodeOption[];
/**
* 选中值
*/
value?: AreaCodeOption;
/**
* 选择触发时间
*/
onChange?: (value: AreaCodeOption) => void;
}
const AreaCodePopup: React.FC<AreaCodePopupProps> = props => {
const { visible, onClose, options = [], value, onChange } = props;
const [current, setCurrent] = useState('');
const myStyle = useAppStyle(styles);
const safeInset = useSafeAreaInsets();
const handleClose = () => {
onClose?.();
};
useEffect(() => {
if ('value' in props) {
if (value?.code) {
setCurrent(value?.code);
}
}
}, [value]);
const triggerChange = (next: AreaCodeOption) => {
if (onChange) {
onChange(next);
}
};
const handleAreaChange = (next: string) => {
setCurrent(next);
const entity = options.find(item => item.code === next);
if (entity) {
triggerChange(entity);
}
handleClose();
};
return (
<Popup
title="选择国家/地区"
visible={visible}
onClose={handleClose}
useModal
>
<Radio.Group value={current} onChange={handleAreaChange}>
<ScrollView style={myStyle['areaCodePopup-list']}>
{options?.map(item => (
<TouchableOpacity
key={item.code}
style={myStyle['areaCodePopup-list-item']}
activeOpacity={0.8}
onPress={() => handleAreaChange(item.code)}
>
<View style={myStyle['areaCodePopup-list-item-center']}>
<Text style={myStyle['areaCodePopup-list-item-name']}>
{item.name}
</Text>
<Text style={myStyle['areaCodePopup-list-item-code']}>
{item.code}
</Text>
</View>
<View style={myStyle['areaCodePopup-list-item-right']}>
<Radio
value={item.code}
color="transparent"
swooshColor="#00A98F"
/>
</View>
</TouchableOpacity>
))}
<View style={{ paddingBottom: safeInset.bottom || 40 }} />
</ScrollView>
</Radio.Group>
</Popup>
);
};
export default AreaCodePopup;
import { StyleSheet } from 'react-native';
import { ThemeStyle } from '../../constants/theme';
import themeLayout from '../../constants/theme/layout';
export default (theme: ThemeStyle) =>
StyleSheet.create({
areaCodePopup: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: themeLayout['padding-xs'],
},
'areaCodePopup-list': {
paddingHorizontal: themeLayout['padding-s'],
paddingTop: themeLayout['padding-s'],
height: 400,
backgroundColor: theme.colors.background,
},
'areaCodePopup-list-item': {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: themeLayout['padding-m'],
backgroundColor: theme.colors.background,
borderBottomWidth: 0.5,
borderBottomColor: theme.colors.border,
},
'areaCodePopup-list-item-left': {
alignSelf: 'flex-start',
marginRight: themeLayout['margin-xs'],
},
'areaCodePopup-list-item-center': {
flex: 1,
flexDirection: 'row',
},
'areaCodePopup-list-item-right': {
marginLeft: themeLayout['margin-s'],
},
'areaCodePopup-list-item-icon': {
width: 24,
height: 24,
borderRadius: 24,
overflow: 'hidden',
backgroundColor: theme.colors.primary,
alignItems: 'center',
justifyContent: 'center',
},
'areaCodePopup-list-item-name': {
fontSize: 14,
color: '#00A98F',
marginRight: themeLayout['margin-xs'],
},
'areaCodePopup-list-item-code': {
fontSize: 14,
color: theme.fonts.black1,
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment