@hzab/list-render 1.12.5 → 1.12.6

package/docs/form-linkage.md

@@ -1,293 +0,0 @@
-# 表单联动
-
-- 通过 配置响应器 实现
-
-#### 表单项显隐
-
-1. Schema JSON 配置页面
-2. 选中需要控制显隐的表单项
-3. 点击属性配置 -> 字段属性 -> 配置响应器
-4. 按需选择依赖字段 menuType（需要监听的字段，可根据该字段的值改变显隐状态）
-5. 属性响应器 -> 显示/隐藏 -> 输入框中输入 $deps.menuType === 'C' （$deps 表示表单中的字段，$deps.menuType 表示监听 menuType 表单项，如果 menuType 的值为 'C' 时展示当前表单项，否时隐藏当前表单项（perms））
-
-- test.schema.json
-
-```JSON
-{
-  "form": {
-    "labelCol": 6,
-    "wrapperCol": 12
-  },
-  "schema": {
-    "type": "object",
-    "properties": {
-      "menuType": {
-        "type": "string | number",
-        "title": "菜单类型",
-        "x-decorator": "FormItem",
-        "x-component": "Radio.Group",
-        "enum": [
-          {
-            "children": [],
-            "label": "目录",
-            "value": "M"
-          },
-          {
-            "children": [],
-            "label": "菜单",
-            "value": "C"
-          },
-          {
-            "children": [],
-            "label": "按钮",
-            "value": "F"
-          }
-        ],
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "name": "menuType",
-        "default": "M",
-        "x-designable-id": "5gkoosg4b2k",
-        "x-index": 0,
-        "inTable": false
-      },
-      "perms": {
-        "type": "string",
-        "title": "权限字符",
-        "x-decorator": "FormItem",
-        "x-component": "Input",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "name": "perms",
-        "required": true,
-        "x-designable-id": "xzy6veht5hc",
-        "x-index": 1,
-        "x-reactions": {
-          "dependencies": [
-            {
-              "property": "value",
-              "type": "string | number",
-              "source": "menuType",
-              "name": "menuType"
-            }
-          ],
-          "fulfill": {
-            "state": {
-              "visible": "{{$deps.menuType === \"C\"}}"
-            }
-          }
-        }
-      }
-    },
-    "x-designable-id": "ivyw5onkhz8"
-  }
-}
-```
-
-#### 表单项数据
-
-##### 根据其他表单项改变当前表单项数值
-
-```JSON
-{
-  "form": {},
-  "schema": {
-    "type": "object",
-    "properties": {
-      "test": {
-        "type": "string",
-        "title": "test",
-        "x-decorator": "FormItem",
-        "x-component": "Input",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "x-reactions": {},
-        "x-designable-id": "1zlm9bu3fpg",
-        "x-index": 0,
-        "name": "test",
-        "x-display": "visible"
-      },
-      "watch": {
-        "type": "string",
-        "title": "watch",
-        "x-decorator": "FormItem",
-        "x-component": "Input",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "name": "watch",
-        "x-reactions": {
-          "dependencies": [
-            {
-              "property": "value",
-              "type": "string",
-              "source": "test",
-              "name": "test"
-            }
-          ],
-          "fulfill": {
-            "state": {
-              "value": "{{$deps.test + 10}}"
-            }
-          }
-        },
-        "x-designable-id": "ri912mmvcz2",
-        "x-index": 1
-      }
-    },
-    "x-designable-id": "ldzb3lu81dx"
-  }
-}
-```
-
-##### 根据其他表单项改变当前 select 数据
-
-```JSX
-// RemoteData
-import listSchema from "./list.schema.json";
-
-const schemaScope = {
-  // 动态获取 select 数据
-  fetchSelectOptions(field, query) {
-    field.loading = true;
-    fetch(
-      `//some.domain/getSomething?test=${query.test}`
-    )
-      .then((response) => response.json())
-      .then(
-        ({ data }) => {
-          // field 目标组件的 配置参数
-          console.log("fetchSelectOptions field", field);
-          // 通过 select 可直接通过 field.dataSource 进行选项数据的配置
-          field.dataSource = data;
-          field.loading = false;
-        },
-        () => {
-          field.loading = false;
-        }
-      );
-  },
-  // 动态获取 treeSelect 数据
-  fetchMenuTree(field, query) {
-    field.loading = true;
-    fetch(
-      `//some.domain/getSomething?test=${query.test}`
-    )
-      .then((response) => response.json())
-      .then(
-        ({ data }) => {
-          // field 目标组件的 配置参数
-          console.log("fetchMenuTree field", field);
-          // 通过 field.component[1] 可以动态配置目标组件的 props
-          console.log("fetchMenuTree field.component[1]", field.component[1]);
-          // 树选择器 数据源，需要通过 field.component[1] 进行配置
-          field.component[1].treeData = data;
-          field.loading = false;
-        },
-        () => {
-          field.loading = false;
-        }
-      );
-  },
-};
-
-function RemoteData() {
-  const listDM = useMemo(
-    () =>
-      new DataModule({
-        getListApi: "/api/v1/user/list",
-        getApi: "/api/v1/user/list/:id",
-        createApi: "/api/v1/user/list",
-        updateApi: "/api/v1/user/list/:id",
-        deleteApi: "/api/v1/user/list/:id",
-      }),
-    []
-  );
-  return (
-    <ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
-  );
-}
-
-export default RemoteData;
-
-```
-
-```JSON
-{
-  "form": {
-    "labelCol": 6,
-    "wrapperCol": 12
-  },
-  "schema": {
-    "type": "object",
-    "properties": {
-      "test": {
-        "type": "string",
-        "title": "test",
-        "x-decorator": "FormItem",
-        "x-component": "Input",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "x-reactions": {},
-        "x-designable-id": "1zlm9bu3fpg",
-        "x-index": 0,
-        "name": "test",
-        "x-display": "visible"
-      },
-      "watch": {
-        "title": "watch",
-        "x-decorator": "FormItem",
-        "x-component": "Select",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "name": "watch",
-        "x-designable-id": "jvjf7fkpke9",
-        "x-index": 1,
-        "x-reactions": {
-          "dependencies": [
-            {
-              "property": "value",
-              "type": "string",
-              "source": "test",
-              "name": "test"
-            }
-          ],
-          "fulfill": {
-            "run": "$effect(() => {\n  try {\n    fetchSelectOptions && fetchSelectOptions($self, { test: $deps.test })\n  } catch (e) {}\n}, [$deps.test])\n"
-          }
-        }
-      },
-      "treeSelect": {
-        "title": "TreeSelect",
-        "x-decorator": "FormItem",
-        "x-component": "TreeSelect",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "x-designable-id": "303l866v0lj",
-        "x-index": 2,
-        "name": "treeSelect",
-        "x-reactions": {
-          "dependencies": [
-            {
-              "property": "value",
-              "type": "string",
-              "source": "test",
-              "name": "test"
-            }
-          ],
-          "fulfill": {
-            "run": "$effect(() => {\r\n  try {\r\n    fetchMenuTree && fetchMenuTree($self, { test: $deps.test })\r\n  } catch (e) {}\r\n}, [$deps.test])\r\n"
-          }
-        }
-      }
-    },
-    "x-designable-id": "ldzb3lu81dx"
-  }
-}
-```

package/docs/remote-data.md

@@ -1,124 +0,0 @@
-# 远程数据源
-
-#### select 数据源
-
-- RemoteData.jsx
-
-```JSX
-// RemoteData
-import listSchema from "./list.schema.json";
-
-const schemaScope = {
-  // 动态获取 select 数据
-  fetchSelectOptions(field, query) {
-    field.loading = true;
-    fetch(
-      `//some.domain/getSomething?test=${query.test}`
-    )
-      .then((response) => response.json())
-      .then(
-        ({ data }) => {
-          // field 目标组件的 配置参数
-          console.log("fetchSelectOptions field", field);
-          // 通过 select 可直接通过 field.dataSource 进行选项数据的配置
-          field.dataSource = data;
-          field.loading = false;
-        },
-        () => {
-          field.loading = false;
-        }
-      );
-  },
-  // 动态获取 treeSelect 数据
-  fetchMenuTree(field, query) {
-    field.loading = true;
-    fetch(
-      `//some.domain/getSomething?test=${query.test}`
-    )
-      .then((response) => response.json())
-      .then(
-        ({ data }) => {
-          // field 目标组件的 配置参数
-          console.log("fetchMenuTree field", field);
-          // 通过 field.component[1] 可以动态配置目标组件的 props
-          console.log("fetchMenuTree field.component[1]", field.component[1]);
-          // 树选择器 数据源，需要通过 field.component[1] 进行配置
-          field.component[1].treeData = data;
-          field.loading = false;
-        },
-        () => {
-          field.loading = false;
-        }
-      );
-  },
-};
-
-function RemoteData() {
-  const listDM = useMemo(
-    () =>
-      new DataModule({
-        getListApi: "/api/v1/user/list",
-        getApi: "/api/v1/user/list/:id",
-        createApi: "/api/v1/user/list",
-        updateApi: "/api/v1/user/list/:id",
-        deleteApi: "/api/v1/user/list/:id",
-      }),
-    []
-  );
-  return (
-    <ListRender model={listDM} schema={listSchema} schemaScope={schemaScope} />
-  );
-}
-
-export default RemoteData;
-
-```
-
-- list.schema.json
-
-```JSON
-{
-  "form": {},
-  "schema": {
-    "type": "object",
-    "properties": {
-      "parentId": {
-        "type": "string",
-        "title": "上级菜单",
-        "x-decorator": "FormItem",
-        "x-component": "TreeSelect",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "x-reactions": {
-          "fulfill": {
-            "run": "try {fetchMenuTree && fetchMenuTree($self);}catch(e){}"
-          }
-        },
-        "name": "parentId",
-        "x-designable-id": "i012z5nbd5z",
-        "x-index": 0
-      },
-      "select": {
-        "title": "select",
-        "x-decorator": "FormItem",
-        "x-component": "Select",
-        "x-validator": [],
-        "x-component-props": {},
-        "x-decorator-props": {},
-        "name": "select",
-        "x-designable-id": "jvjf7fkpke9",
-        "x-index": 1,
-        "x-reactions": {
-          "dependencies": [],
-          "fulfill": {
-            "run": "$effect(() => {\n  try {\n    fetchSelectOptions && fetchSelectOptions($self);\n  } catch (e) {}\n}, [])\n"
-          }
-        }
-      }
-    },
-    "x-designable-id": "ldzb3lu81dx"
-  }
-}
-
-```

package/docs/table.md

@@ -1,86 +0,0 @@
-# 表格相关
-
-## query 相关
-
-#### 设置过滤项
-
-```JSX
-<ListRender
-  schema={schema}
-  model={listDM}
-  // 字段为 search 的 query
-  search="模糊搜索"
-  // 传入 schema 中所需表单项的 name
-  filters={["userId"]}
- />
-```
-
-#### 开启重置按钮
-
-```JSX
-<ListRender
-  schema={schema}
-  model={listDM}
-  // 字段为 search 的 query
-  search="模糊搜索"
-  // 传入 schema 中所需表单项的 name
-  filters={["userId"]}
-  queryConf={{
-    hasReset: true
-  }}
- />
-```
-
-## 顶部操作栏（新增按钮附近）
-
-#### 新增按钮右侧添加其他组件
-
-- 使用 Slots 实现
-
-```JSX
-const Slots = {
-  headerActionSuffix() {
-    return (<div>headerActionPrefix</div>)
-  },
-};
-
-<ListRender schema={schema} model={listDM} Slots={Slots} />
-```
-
-## table 相关
-
-#### 手动发起请求
-
-```JSX
-
-// 手动发起请求
-useEffect(() => {
-  // 重置 pageNum 为1，并发起请求
-  listRef.current?.onSearch();
-  // 请求当前页数据
-  listRef.current?.getList();
-}, []);
-
-<ListRender
-  ref={listRef}
-  schema={schema}
-  model={listDM}
-  // 关闭自动发起请求
-  closeAutoRequest={false}
- />
-```
-
-#### 编辑按钮左侧添加组件
-
-```JSX
-const Slots = {
-  actionPrefixSlot(props) {
-    const { text, record, index, onEdit, onDel } = props;
-    return (<div>actionPrefixSlot</div>)
-  },
-};
-
-<ListRender schema={schema} model={listDM} Slots={Slots} />
-```
-
-## 新增、编辑表单相关