我的列表菜单列表新增“新建列表”菜单

publish/changeLog.md

@@ -11,6 +11,7 @@
 - 新增启用竖屏首页横向滚动设置，默认开启（原来的行为），如果你不想要竖屏的首页左右滑动则可以关闭此设置（#397）
 - 新增“使用系统文件选择器”设置，默认启用，启用该选项后，导入备份文件、自定义源等操作将不需要申请存储权限，但可能在某些系统上不可用
 - 播放详情页新增桌面歌词显示/隐藏切换按钮，长按可切换歌词锁定状态
+- 我的列表菜单列表新增“新建列表”菜单
 - 添加 Android 5 特别版（版本号包含`android_5`）与墨·状态栏特别版（版本号包含`sl`）的 release 构建
 
 ### 优化

src/screens/Home/Views/Mylist/MyList/ListMenu.tsx

@@ -19,6 +19,7 @@ const menuItemWidth = scaleSizeW(110)
 
 
 export interface ListMenuProps {
+  onNew: (position: number) => void
   onRename: (listInfo: LX.List.UserListInfo) => void
   onImport: (listInfo: LX.List.MyListInfo, index: number) => void
   onExport: (listInfo: LX.List.MyListInfo, index: number) => void
@@ -35,6 +36,7 @@ export type {
 }
 
 export default forwardRef<ListMenuType, ListMenuProps>(({
+  onNew,
   onRename,
   onImport,
   onExport,
@@ -81,6 +83,7 @@ export default forwardRef<ListMenuType, ListMenuProps>(({
     }
 
     setMenus([
+      { action: 'new', label: t('list_create') },
       { action: 'rename', disabled: !rename, label: t('list_rename') },
       { action: 'local_file', disabled: !local_file, label: t('list_select_local_file') },
       { action: 'sync', disabled: !sync || !local_file, label: t('list_sync') },
@@ -94,6 +97,9 @@ export default forwardRef<ListMenuType, ListMenuProps>(({
   const handleMenuPress = ({ action }: typeof menus[number]) => {
     const selectInfo = selectInfoRef.current
     switch (action) {
+      case 'new':
+        onNew(Math.max(selectInfo.index - 1, 0))
+        break
       case 'rename':
         onRename(selectInfo.listInfo as LX.List.UserListInfo)
         break

src/screens/Home/Views/Mylist/MyList/ListNameEdit.tsx

@@ -3,7 +3,7 @@ import ConfirmAlert, { type ConfirmAlertType } from '@/components/common/Confirm
 import Text from '@/components/common/Text'
 import { View } from 'react-native'
 import Input, { type InputType } from '@/components/common/Input'
-import { updateUserList } from '@/core/list'
+import { createUserList, updateUserList } from '@/core/list'
 import { createStyle } from '@/utils/tools'
 import { useTheme } from '@/store/theme/hook'
 
@@ -24,7 +24,7 @@ const NameInput = forwardRef<NameInputType, {}>((props, ref) => {
     },
     setName(text) {
       setText(text)
-      setPlaceholder(text)
+      setPlaceholder(text || global.i18n.t('list_create_input_placeholder'))
     },
     focus() {
       inputRef.current?.focus()
@@ -44,6 +44,7 @@ const NameInput = forwardRef<NameInputType, {}>((props, ref) => {
 
 
 export interface ListNameEditType {
+  showCreate: (position: number) => void
   show: (listInfo: LX.List.UserListInfo) => void
 }
 const initSelectInfo = {}
@@ -52,20 +53,33 @@ const initSelectInfo = {}
 export default forwardRef<ListNameEditType, {}>((props, ref) => {
   const alertRef = useRef<ConfirmAlertType>(null)
   const nameInputRef = useRef<NameInputType>(null)
+  const [position, setPosition] = useState(0)
   const selectedListInfo = useRef<LX.List.UserListInfo>(initSelectInfo as LX.List.UserListInfo)
   const [visible, setVisible] = useState(false)
 
   const handleShow = () => {
     alertRef.current?.setVisible(true)
+    const name = position == -1 ? '' : (selectedListInfo.current.name ?? '')
     requestAnimationFrame(() => {
-      nameInputRef.current?.setName(selectedListInfo.current.name ?? '')
+      nameInputRef.current?.setName(name)
       setTimeout(() => {
         nameInputRef.current?.focus()
       }, 300)
     })
   }
   useImperativeHandle(ref, () => ({
+    showCreate(position) {
+      setPosition(position)
+      if (visible) handleShow()
+      else {
+        setVisible(true)
+        requestAnimationFrame(() => {
+          handleShow()
+        })
+      }
+    },
     show(listInfo) {
+      setPosition(-1)
       selectedListInfo.current = listInfo
       if (visible) handleShow()
       else {
@@ -81,7 +95,12 @@ export default forwardRef<ListNameEditType, {}>((props, ref) => {
     let name = nameInputRef.current?.getText() ?? ''
     if (!name.length) return
     if (name.length > 100) name = name.substring(0, 100)
-    void updateUserList([{ ...selectedListInfo.current, name }])
+    if (position == -1) {
+      void updateUserList([{ ...selectedListInfo.current, name }])
+    } else {
+      const now = Date.now()
+      void createUserList(position, [{ id: `userlist_${now}`, name, locationUpdateTime: now }])
+    }
     alertRef.current?.setVisible(false)
   }
 
@@ -92,7 +111,7 @@ export default forwardRef<ListNameEditType, {}>((props, ref) => {
           onConfirm={handleRename}
         >
           <View style={styles.renameContent}>
-            <Text style={{ marginBottom: 5 }}>{global.i18n.t('list_rename_title')}</Text>
+            <Text style={{ marginBottom: 5 }}>{ position == -1 ? global.i18n.t('list_rename_title') : global.i18n.t('list_create')}</Text>
             <NameInput ref={nameInputRef} />
           </View>
         </ConfirmAlert>

src/screens/Home/Views/Mylist/MyList/index.tsx

@@ -41,6 +41,7 @@ export default () => {
           <ListImportExport ref={listImportExportRef} />
           <ListMenu
             ref={listMenuRef}
+            onNew={index => listNameEditRef.current?.showCreate(index)}
             onRename={info => listNameEditRef.current?.show(info)}
             onImport={(info, position) => listImportExportRef.current?.import(info, position)}
             onExport={(info, position) => listImportExportRef.current?.export(info, position)}