2022-04-06 10:58:16 +08:00

131 lines
3.5 KiB
JavaScript

import React, { useMemo } from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
import Modal from './Modal'
import { Icon } from '@/components/common/Icon'
import { useGetter } from '@/store'
import { useKeyboard } from '@/utils/hooks'
import StatusBar from '@/components/common/StatusBar'
const styles = StyleSheet.create({
centeredView: {
flex: 1,
// justifyContent: 'flex-end',
// alignItems: 'center',
},
modalView: {
elevation: 6,
flexGrow: 0,
flexShrink: 1,
},
header: {
flex: 0,
flexDirection: 'row',
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
},
title: {
fontSize: 13,
paddingLeft: 10,
paddingRight: 25,
paddingTop: 10,
paddingBottom: 10,
// lineHeight: 20,
},
closeBtn: {
position: 'absolute',
right: 0,
// borderTopRightRadius: 8,
flexGrow: 0,
flexShrink: 0,
height: 30,
width: 30,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#eee',
},
})
export default ({
visible = false,
hide = () => {},
keyHide = true,
bgHide = true,
closeBtn = true,
position = 'bottom',
title = '',
children,
}) => {
const theme = useGetter('common', 'theme')
const { keyboardShown, keyboardHeight } = useKeyboard()
const closeBtnComponent = useMemo(() => closeBtn ? <TouchableOpacity style={styles.closeBtn} onPress={hide}><Icon name="close" style={{ color: theme.normal50, fontSize: 12 }} /></TouchableOpacity> : null, [closeBtn, hide, theme])
const [centeredViewStyle, modalViewStyle] = useMemo(() => {
switch (position) {
case 'top':
return [
{ justifyContent: 'flex-start' },
{
width: '100%',
maxHeight: '78%',
minHeight: '20%',
backgroundColor: 'white',
paddingTop: StatusBar.currentHeight,
},
]
case 'left':
return [
{ flexDirection: 'row', justifyContent: 'flex-start' },
{
minWidth: '45%',
maxWidth: '78%',
height: '100%',
backgroundColor: 'white',
paddingTop: StatusBar.currentHeight,
},
]
case 'right':
return [
{ flexDirection: 'row', justifyContent: 'flex-end' },
{
minWidth: '45%',
maxWidth: '78%',
height: '100%',
backgroundColor: 'white',
paddingTop: StatusBar.currentHeight,
},
]
case 'bottom':
default:
return [
{ justifyContent: 'flex-end' },
{
width: '100%',
maxHeight: '78%',
minHeight: '20%',
backgroundColor: 'white',
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
},
]
}
}, [position])
return (
<Modal visible={visible} hideModal={hide} keyHide={keyHide} bgHide={bgHide} bgColor="rgba(0,0,0,0.2)">
<StatusBar />
<View style={{ ...styles.centeredView, ...centeredViewStyle, paddingBottom: keyboardShown ? keyboardHeight : 0 }}>
<View style={{ ...styles.modalView, ...modalViewStyle, backgroundColor: theme.primary }} onStartShouldSetResponder={() => true}>
<View style={styles.header}>
<Text style={{ ...styles.title, color: theme.normal40 }} numberOfLines={1}>{title}</Text>
{closeBtnComponent}
</View>
{children}
</View>
</View>
</Modal>
)
}