docs(filterrules): add more data example (#415)

Author: LuckyFBB

src/filterRules/demos/basicMore.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Alert, Input } from 'antd';
+import { FilterRules } from 'dt-react-component';
+import { IComponentProps } from 'dt-react-component/filterRules';
+
+import { INIT_ROW_VALUES, IRow, MORE_INIT_DATA } from './constants';
+
+const MyInput = ({ rowValues: { input }, rowKey, onChange }: IComponentProps<IRow>) => (
+    <Input value={input} onChange={(e) => onChange?.(rowKey, { input: e.target.value })} />
+);
+
+export default () => {
+    const [data, setData] = useState(MORE_INIT_DATA);
+
+    return (
+        <>
+            <Alert
+                message="可以通过操作按钮增加删除数据，切换且或节点内容"
+                style={{ marginBottom: 16 }}
+            />
+            <FilterRules<IRow>
+                component={(props) => <MyInput {...props} />}
+                value={data}
+                onChange={(value: any) => setData(value)}
+                initValues={INIT_ROW_VALUES}
+            />
+        </>
+    );
+};

src/filterRules/demos/constants.ts

@@ -12,4 +12,40 @@ export const INIT_DATA = {
     },
 };
 
+export const MORE_INIT_DATA = {
+    key: shortid(),
+    level: 1,
+    type: 1,
+    children: [
+        {
+            rowValues: {
+                input: '',
+            },
+            key: shortid(),
+            level: 1,
+        },
+        {
+            key: shortid(),
+            type: 2,
+            level: 2,
+            children: [
+                {
+                    key: shortid(),
+                    level: 2,
+                    rowValues: {
+                        input: '',
+                    },
+                },
+                {
+                    key: shortid(),
+                    rowValues: {
+                        input: '',
+                    },
+                    level: 2,
+                },
+            ],
+        },
+    ],
+};
+
 export type IRow = typeof INIT_ROW_VALUES;

src/filterRules/index.md

@@ -17,6 +17,7 @@ demo:
 ## 示例
 
 <code src="./demos/basic.tsx" >受控方式使用</code>
+<code src="./demos/basicMore.tsx" >多条数据的使用</code>
 <code src="./demos/basicUnController.tsx" >非受控方式使用</code>
 <code src="./demos/basicCheck.tsx" >查看数据</code>