1import React, {useState} from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx, {vmax} from '@/utils/rpx'; 4import {fontSizeConst} from '@/constants/uiConst'; 5import useColors from '@/hooks/useColors'; 6 7import PanelBase from '../base/panelBase'; 8import {TextInput} from 'react-native-gesture-handler'; 9import {hidePanel} from '../usePanel'; 10import PanelHeader from '../base/panelHeader'; 11import MusicSheet from '@/core/musicSheet'; 12 13interface ICreateMusicSheetProps { 14 defaultName?: string; 15 onSheetCreated?: (sheetId: string) => void; 16 onCancel?: () => void; 17} 18 19export default function CreateMusicSheet(props: ICreateMusicSheetProps) { 20 const {onSheetCreated, onCancel, defaultName = '新建歌单'} = props; 21 22 const [input, setInput] = useState(''); 23 const colors = useColors(); 24 25 return ( 26 <PanelBase 27 height={vmax(30)} 28 keyboardAvoidBehavior="height" 29 renderBody={() => ( 30 <> 31 <PanelHeader 32 title="新建歌单" 33 onCancel={() => { 34 onCancel ? onCancel() : hidePanel(); 35 }} 36 onOk={async () => { 37 const sheetId = await MusicSheet.addSheet( 38 input || defaultName, 39 ); 40 onSheetCreated?.(sheetId); 41 hidePanel(); 42 }} 43 /> 44 <TextInput 45 value={input} 46 onChangeText={_ => { 47 setInput(_); 48 }} 49 autoFocus 50 accessible 51 accessibilityLabel="输入框" 52 accessibilityHint={'新建歌单'} 53 style={[ 54 style.input, 55 { 56 color: colors.text, 57 backgroundColor: colors.placeholder, 58 }, 59 ]} 60 placeholderTextColor={colors.textSecondary} 61 placeholder={defaultName} 62 maxLength={200} 63 /> 64 </> 65 )} 66 /> 67 ); 68} 69 70const style = StyleSheet.create({ 71 wrapper: { 72 width: rpx(750), 73 }, 74 operations: { 75 width: rpx(750), 76 paddingHorizontal: rpx(24), 77 flexDirection: 'row', 78 height: rpx(100), 79 alignItems: 'center', 80 justifyContent: 'space-between', 81 }, 82 input: { 83 margin: rpx(24), 84 borderRadius: rpx(12), 85 fontSize: fontSizeConst.content, 86 lineHeight: fontSizeConst.content * 1.5, 87 padding: rpx(12), 88 }, 89}); 90