feat(Form): 动态列表增加上移/下移/置顶/置底功能

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -1,9 +1,17 @@
 import React, {useState} from 'react';
-import {Form, Button, Toast, Slider} from '@uiw/react-native';
+import {Form, Button, Toast, Slider, Flex} from '@uiw/react-native';
 import {Text, View} from 'react-native';
 import Layout, {Container} from '../../Layout';
 const {Body, Footer} = Layout;
 
+interface actionProps {
+  remove: () => void;
+  moveUp: () => void;
+  moveDown: () => void;
+  moveToTop: () => void;
+  moveToBottom: () => void;
+}
+
 const FormDemo = () => {
   const form = Form.useForm({
     changeValidate: true,
@@ -119,14 +127,26 @@ const FormDemo = () => {
       type: 'cardList',
       field: 'cardList',
       name: '联系人集合',
-      renderHeader: (i: number, {remove}: {remove: () => void}) => (
+      renderHeader: (i: number, {remove, moveUp, moveDown, moveToTop, moveToBottom}: actionProps) => (
         <View style={{marginTop: 12, display: 'flex', justifyContent: 'space-between', flexDirection: 'row'}}>
           <View>
             <Text>{`联系人${i + 1}`}</Text>
           </View>
-          <View>
+          <Flex>
+            <Text style={{marginRight: 5}} onPress={() => moveUp()}>
+              上移
+            </Text>
+            <Text style={{marginRight: 5}} onPress={() => moveDown()}>
+              下移
+            </Text>
+            <Text style={{marginRight: 5}} onPress={() => moveToTop()}>
+              置顶
+            </Text>
+            <Text style={{marginRight: 5}} onPress={() => moveToBottom()}>
+              置底
+            </Text>
             <Text onPress={() => remove()}>删除</Text>
-          </View>
+          </Flex>
         </View>
       ),
       renderAdd: ({add}: {add: () => void}) => (

packages/core/src/Form/README.md

@@ -151,37 +151,50 @@ const FormDemo = () => {
 <!--DemoStart--> 
 ```jsx
 import { SafeAreaView,View,Text } from 'react-native';
-import { Form,Button } from '@uiw/react-native';
+import { Form,Button,Flex } from '@uiw/react-native';
 
 const FormDemo = () => {
   const form = Form.useForm({
     changeValidate: true,
   });
   const initialValues = {name: ''};
   const items = [
-       {
+    {
       type: 'cardList',
       field: 'cardList',
       name: '联系人集合',
-      renderHeader: (i: number, { remove }: { remove: () => void }) => (
-        <View style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}>
-          <View><Text>{`联系人${i + 1}`}</Text></View>
-          <View><Text onPress={() => remove()}>删除</Text></View>
+      renderHeader: (i, { remove ,moveUp,moveDown,moveToTop,moveToBottom }) => (
+        <View style={{marginTop: 12, display: 'flex', justifyContent: 'space-between', flexDirection: 'row'}}>
+          <View>
+            <Text>{`联系人${i + 1}`}</Text>
+          </View>
+          <Flex>
+            <Text style={{marginRight:5}}  onPress={() => moveUp()}>上移</Text>
+            <Text style={{marginRight:5}}  onPress={() => moveDown()}>下移</Text>
+            <Text style={{marginRight:5}}  onPress={() => moveToTop()}>置顶</Text>
+            <Text style={{marginRight:5}}  onPress={() => moveToBottom()}>置底</Text>
+            <Text onPress={() => remove()}>删除</Text>
+          </Flex>
         </View>
       ),
-      renderAdd: ({ add }: { add: () => void }) => (
-        <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 12 }}>
-          <Button onPress={() => add()} type="primary" size="default">
+      renderAdd: ({add}: {add: () => void}) => (
+        <View style={{marginTop: 12}}>
+          <Button onPress={() => add()} type="primary" size="default" bordered={false}>
             新增数据
           </Button>
         </View>
       ),
       items: [
         {
           type: 'input',
-          field: 'cardListItem1',
+          field: 'name',
           name: '联系人姓名',
         },
+        {
+          type: 'input',
+          field: 'phone',
+          name: '联系人电话',
+        },
       ],
     },
   ];

packages/core/src/Form/formList.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from 'react';
 import { KeyType, FormItemsProps } from './types';
 import { isObjectEmpty } from './utils/is';
 import { Context } from './hooks/context';
-import Button from '../Button';
 import Card from '../Card';
 import Label from './comps/label';
 import Tip from './comps/tip';
@@ -26,10 +25,38 @@ const FormList = ({
 
   const { field, items = [], renderAdd, renderHeader } = formListValue;
 
-  const handleOperate = (type = '', index?: number) => {
+  const handleOperate = (type = '', index: number) => {
     let list = store[field] || [];
     if (type === 'add') list.push({});
     if (type === 'delete') list.splice(index, 1);
+    // 下移
+    if (type === 'moveDown') {
+      if (index !== list.length - 1) {
+        list[index] = list.splice(index + 1, 1, list[index])[0];
+      } else {
+        list.unshift(list.splice(index, 1)[0]);
+      }
+    }
+    // 上移
+    if (type === 'moveUp') {
+      if (index !== 0) {
+        list[index] = list.splice(index - 1, 1, list[index])[0];
+      } else {
+        list.push(list.shift());
+      }
+    }
+    // 置顶
+    if (type === 'moveToTop') {
+      if (index !== 0) {
+        list.unshift(list.splice(index, 1)[0]);
+      }
+    }
+    // 置底
+    if (type === 'moveToBottom') {
+      if (index !== list.length - 1) {
+        list.push(list.splice(index, 1)[0]);
+      }
+    }
     updateStore?.({ store: { ...store, [field]: list } });
   };
 
@@ -84,11 +111,17 @@ const FormList = ({
     <SafeAreaView style={styles.warpper}>
       {(store[field] || []).map((item: Record<string, unknown>, index: number) => (
         <React.Fragment key={index}>
-          {renderHeader?.(index, { remove: () => handleOperate('delete', index) })}
+          {renderHeader?.(index, {
+            remove: () => handleOperate('delete', index),
+            moveUp: () => handleOperate('moveUp', index),
+            moveDown: () => handleOperate('moveDown', index),
+            moveToTop: () => handleOperate('moveToTop', index),
+            moveToBottom: () => handleOperate('moveToBottom', index),
+          })}
           <Card>{_render(index)}</Card>
         </React.Fragment>
       ))}
-      {renderAdd?.({ add: () => handleOperate('add') })}
+      {renderAdd?.({ add: () => handleOperate('add', 0) })}
     </SafeAreaView>
   );
 };

packages/core/src/Form/types/index.tsx

@@ -33,6 +33,14 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
   mode?: 'default' | 'card';
 }
 
+interface actionProps {
+  remove: () => void;
+  moveUp: () => void;
+  moveDown: () => void;
+  moveToTop: () => void;
+  moveToBottom: () => void;
+}
+
 interface FormItemsProps {
   field: string;
   type: string;
@@ -41,7 +49,7 @@ interface FormItemsProps {
   options?: Array<{ label: string; value: KeyType | any }>;
   attr?: any;
   required?: boolean;
-  renderHeader?: (index: number, { remove }: { remove: () => void }) => React.ReactNode;
+  renderHeader?: (index: number, { remove, moveUp, moveDown }: actionProps) => React.ReactNode;
   renderAdd?: ({ add }: { add: () => void }) => React.ReactNode;
   items?: Omit<FormItemsProps, 'validate' | 'required'>[];
   hide?: boolean;