mirror of
https://github.com/ikun0014/lx-music-mobile.git
synced 2025-07-04 15:28:55 +08:00
131 lines
3.5 KiB
JavaScript
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>
|
|
)
|
|
}
|