Merge pull request #1504 from alibaba/fix-drawer-list

feat: 重构 drawerList
alibaba · Mar 23, 2024 · 18e277a · 18e277a
2 parents 001ae85 + cffd069
commit 18e277a
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 60 deletions.
diff --git a/packages/form-render/src/render-core/FieldItem/main.tsx b/packages/form-render/src/render-core/FieldItem/main.tsx
@@ -174,7 +174,6 @@ export default (props: any) => {
   const initialValue = schema.default ?? schema.defaultValue;
   const classRest = { 'fr-hide-label': label === 'fr-hide-label', 'fr-inline-field': inlineSelf, 'fr-field-visibility': !visible, [schema.className] : !! schema.className };
 
-  debugger;
   const formItem = (
     <Form.Item
       className={classnames('fr-field', classRest)}

diff --git a/packages/form-render/src/render-core/FieldList/index.tsx b/packages/form-render/src/render-core/FieldList/index.tsx
@@ -12,10 +12,10 @@ export default (props: any) => {
   const { schema, rootPath } = props;
   const { items, ...listSchema } = schema || {};
 
-  const store = useContext(FRContext);
+  const store:any = useContext(FRContext);
   const { schema: formSchema } = store.getState();
 
-  const configCtx = useContext(ConfigContext);
+  const configCtx: any = useContext(ConfigContext);
   const mustacheDisabled = configCtx?.globalConfig?.mustacheDisabled;
   const dependencies = schema?.dependencies;
 

diff --git a/packages/form-render/src/render-core/FieldList/main.tsx b/packages/form-render/src/render-core/FieldList/main.tsx
@@ -12,7 +12,7 @@ export default (props: any) => {
   const [_, setListData] = useState([]);
   const { configContext } = props;
 
-  const store = useContext(FRContext);
+  const store: any = useContext(FRContext);
 
   const formCtx: any = useStore(store, (state: any) => state.context);
   const upperCtx: any = useContext(UpperContext);

diff --git a/packages/form-render/src/utils/index.ts b/packages/form-render/src/utils/index.ts
@@ -92,8 +92,6 @@ export function isCheckBoxType(schema: any, readOnly: boolean) {
   }
 }
 
-
-
 export const translation = (configCtx: any) => (key: string) => {
   const locale = configCtx?.locale.FormRender;
   return locale[key];

diff --git a/packages/form-render/src/widgets/listDrawer/drawerForm.tsx b/packages/form-render/src/widgets/listDrawer/drawerForm.tsx
@@ -1,57 +1,34 @@
 import React, { useContext } from 'react';
 import { Button, Drawer, Space, ConfigProvider } from 'antd';
-import FRender, { useForm } from '../../index';
 import { translation } from '../utils';
 
 const DrawerForm = (props: any) => {
-  const { schema, widgets, onClose, data, configContext } = props;
+  const { children, onConfirm, onClose } = props;
 
-  const form: any = useForm();
   const configCtx = useContext(ConfigProvider.ConfigContext);
   const t = translation(configCtx);
 
-  const handleFinish = (data: any) => {
-    onClose(data);
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  let drawerProps: any = {
-    open: true
-  };
+  let drawerProps: any = { open: true };
   if ((window as any).antdVersion === 'v4')  {
-    drawerProps = {
-      visible: true
-    };
+    drawerProps = { visible: true };
   }
 
   return (
     <Drawer
       {...drawerProps}
       width={600}
       title={t('operate')}
-      onClose={handleClose}
+      onClose={onClose}
       extra={
         <Space>
-          <Button onClick={handleClose}>{t('cancel')}</Button>
-          <Button type="primary" onClick={form.submit}>
+          <Button onClick={onClose}>{t('cancel')}</Button>
+          <Button type='primary' onClick={onConfirm}>
             {t('confirm')}
           </Button>
         </Space>
       }
     >
-      <FRender
-        schema={schema.items}
-        initialValues={data}
-        form={form}
-        labelCol={{ span: 8 }}
-        widgets={widgets}
-        onFinish={handleFinish}
-        locale={configContext?.locale}
-        maxWidth='auto'
-      />
+      {children}
     </Drawer>
   );
 }

diff --git a/packages/form-render/src/widgets/listDrawer/index.tsx b/packages/form-render/src/widgets/listDrawer/index.tsx
@@ -2,13 +2,12 @@
 
 
 
-import React, { useState, useRef, useContext } from 'react';
-import { Space, Table, Form, Button, Popconfirm, ConfigProvider, Tooltip, Divider } from 'antd';
+import React, { useState, useRef } from 'react';
+import { Space, Table, Form, Button, Popconfirm, Tooltip, Divider } from 'antd';
 import { ArrowDownOutlined, ArrowUpOutlined, PlusOutlined, InfoCircleOutlined, CloseOutlined, CopyOutlined } from '@ant-design/icons';
 import type { FormListFieldData, FormListOperation, TableColumnsType } from 'antd';
 import FormDrawer from './drawerForm';
 import FButton from '../components/FButton';
-import { translation } from '../utils';
 import './index.less';
 
 interface Props {
@@ -61,6 +60,7 @@ const TableList: React.FC<Props> = (props: any) => {
     hideAdd,
     hideEdit,
 
+    operation,
     addItem,
     copyItem,
     moveItem,
@@ -69,17 +69,11 @@ const TableList: React.FC<Props> = (props: any) => {
   } = props;
 
   const { colHeaderText, ...otherActionColumnProps } = actionColumnProps;
-
-
-  const configCtx = useContext(ConfigProvider.ConfigContext);
-  const t = translation(configCtx);
-
   const paginationConfig = {
     size: 'small',
     hideOnSinglePage: true,
     ...pagination,
   };
-
   const columnSchema = schema?.items?.properties || {};
 
   const [visible, setVisible] = useState(false);
@@ -92,23 +86,23 @@ const TableList: React.FC<Props> = (props: any) => {
   };
 
   const handleAdd = () => {
-    indexRef.current = -1;
     setVisible(true);
+    addItem();
   };
 
-  const handleDrawerClose = (data: any) => {
-    setVisible(false);
-    setItemData(null);
-    if (!data) {
-      return;
-    }
-
-    if (indexRef.current === -1) {
-      addItem(data);
+  const handleRepeal = () => {
+    if (!indexRef.current && indexRef.current !== 0) {
+      operation.remove(fields.length-1);
     } else {
-      form.setFieldValue([...rootPath, indexRef.current], data);
+      form.setFieldValue([...rootPath, indexRef.current], itemData);
     }
-    indexRef.current === null;
+    hanldeConfirm();
+  };
+
+  const hanldeConfirm = () => {
+    setItemData(null);
+    setVisible(false);
+    indexRef.current = null;
   };
 
   const columns: TableColumnsType<FormListFieldData> = Object.keys(columnSchema).map(dataIndex => {
@@ -228,8 +222,11 @@ const TableList: React.FC<Props> = (props: any) => {
           data={itemData}
           widgets={widgets}
           configContext={configContext}
-          onClose={handleDrawerClose}
-        />
+          onClose={handleRepeal}
+          onConfirm={hanldeConfirm}
+        >
+          {renderCore({ schema: schema.items, parentPath: [fields.length - 1], rootPath: [...rootPath, fields.length - 1] })}
+        </FormDrawer>
       )}
     </div>
   );

diff --git a/packages/form-render/src/widgets/utils/hooks.ts b/packages/form-render/src/widgets/utils/hooks.ts
@@ -0,0 +1,17 @@
+import { message } from 'antd';
+import { useReducer, useRef, useEffect, useState } from 'react';
+
+export function usePrevious(value: any) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+// 类似于class component的setState
+export const useSet = (initState: any) => {
+  return useReducer((state: any, newState: any) => {
+    return { ...state, ...newState };
+  }, initState);
+};
diff --git a/packages/form-render/src/withProvider.tsx b/packages/form-render/src/withProvider.tsx
@@ -59,7 +59,7 @@ export default function withProvider<T>(Element: React.ComponentType<T>, default
 
     const langPack: any = { 
       ...antdLocale,
-      "FormRender": locales[locale],
+      'FormRender': locales[locale],
       ...configProvider?.locale
     };