feat: 解决 listTab 点击切换重逢渲染

alibaba · Jun 26, 2023 · 9322b11 · 9322b11
1 parent d605545
commit 9322b11
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 40 deletions.
diff --git a/docs/form-render/index.md b/docs/form-render/index.md
@@ -40,25 +40,99 @@ npm i form-render --save
  * transform: true
  * defaultShowCode: true
  */
-import React from 'react';
 import FormRender, { useForm } from 'form-render';
-import schema from './schema/simple';
+
+import React, { useEffect, useState } from 'react';
+import { Button, Drawer, Select, Input } from 'antd';
+
+const options = [{label:'ceshi1',value:1},{label:'ceshi2',value:2},{label:'ceshi3',value:3}];
+
+const CaptchaInput = (props) => {
+ const { value, onChange, addons } = props;
+
+ useEffect(() => {
+ console.log('addons.dataIndex', JSON.stringify(addons));
+ }, [addons]);
+
+ useEffect(()=>{
+ console.log('value',value)
+ },[value])
+
+ const sendCaptcha = (phone: string) => {
+ console.log('send captcha to:', phone);
+ };
+
+ return (
+ <>
+ <Input
+ value={value}
+ placeholder="请输入手机号"
+ onChange={(e) => onChange(e.target.value)}
+ />
+ <Button onClick={() => sendCaptcha(value)}>发送验证码</Button>
+ </>
+ );
+ };
+
+
 
 export default () => {
  const form = useForm();
+ const [visible, setVisible] = useState(false);
 
  const onFinish = (formData) => {
  console.log('formData:', formData);
  };
 
+ const schema = {
+ type: 'object',
+ displayType: 'row',
+ properties: {
+ list: {
+ title: '对象数组',
+ description: '对象数组嵌套功能',
+ type: 'array',
+ widget: 'tabList',
+ props: {
+ tabName: `组件`,
+ },
+ items: {
+ type: 'object',
+ properties: {
+ iii: {
+ bind: 'root',
+ widget: 'CaptchaInput',
+ fieldCol: 24,
+ },
+ },
+ },
+ },
+ },
+ };
+
+ const init =()=>{
+ form.setValueByPath('list', [{iii:123},{iii:333333}, {iii:292929}]);
+ }
+
+ useEffect(()=>{
+ visible&&init();
+ },[visible])
+
  return (
- <FormRender 
- form={form} 
- schema={schema} 
- onFinish={onFinish} 
- maxWidth={360} 
- footer={true}
- />
+ <>
+ <Button onClick={()=>setVisible(true)}>编辑</Button>
+ <Drawer open={visible} width={1200} onClose={()=>setVisible(false)}>
+ <FormRender
+ schema={schema}
+ form={form}
+ widgets={{ CaptchaInput }}
+ onFinish={onFinish}
+ />
+ <Button type="primary" onClick={form.submit}>
+ 提交
+ </Button>
+ </Drawer>
+ </>
  );
 }
 ```

diff --git a/packages/form-render/src/widgets/listTab/index.tsx b/packages/form-render/src/widgets/listTab/index.tsx
@@ -36,7 +36,6 @@ const TabList: React.FC<ListTabProps> = (props) => {
  tabItemProps = {}
  } = props;
 
- const [activeKey, setActiveKey] = useState('0');
  const configCtx = useContext(ConfigProvider.ConfigContext);
  const t = translation(configCtx);
 
@@ -48,15 +47,13 @@ const TabList: React.FC<ListTabProps> = (props) => {
 
  const handleDelete = (targetKey: number) => {
  removeItem(targetKey);
- setActiveKey(`${targetKey > 1 ? targetKey - 1 : 0}`);
+
  }
 
  const handleEdit = (targetKey, action) => {
  if (action === 'add') {
  if ((!schema.max || fields.length < schema.max) && !readOnly && !hideAdd) {
- addItem()
- const currentKey = fields.length;
- setActiveKey(`${currentKey}`);
+ addItem();
  }
  } else if (action === 'remove') {
  return null
@@ -77,32 +74,28 @@ const TabList: React.FC<ListTabProps> = (props) => {
  }
 
  return (
- <>
- <Tabs
- className='fr-tab-list'
- type={'editable-card'}
- onChange={setActiveKey}
- activeKey={activeKey + ''}
- onEdit={handleEdit}
- hideAdd={readOnly || hideAdd}
- >
- {fields.map(({ key, name }) => {
- return (
- <TabPane
- {...tabItemProps}
- tab={getCurrentTabPaneName(name)}
- key={name}
- className='fr-list-item'
- closeIcon={renderClose(name)}
- >
- <div style={{ flex: 1 }}>
- {renderCore({ schema, parentPath: [name], rootPath: [...rootPath, name] })}
- </div>
- </TabPane>
- );
- })}
- </Tabs>
- </>
+ <Tabs
+ className='fr-tab-list'
+ type={'editable-card'}
+ onEdit={handleEdit}
+ hideAdd={readOnly || hideAdd}
+ >
+ {fields.map(({ key, name }) => {
+ return (
+ <TabPane
+ {...tabItemProps}
+ tab={getCurrentTabPaneName(name)}
+ key={name}
+ className='fr-list-item'
+ closeIcon={renderClose(name)}
+ >
+ <div style={{ flex: 1 }}>
+ {renderCore({ schema, parentPath: [name], rootPath: [...rootPath, name] })}
+ </div>
+ </TabPane>
+ );
+ })}
+ </Tabs>
  );
 }