@hzab/list-render 1.10.0-beta7 → 1.10.0

package/package.json

@@ -1,66 +1,66 @@
-{
-  "name": "@hzab/list-render",
-  "version": "1.10.0-beta7",
-  "description": "",
-  "main": "src",
-  "scripts": {
-    "dev": "webpack serve -c ./config/webpack.config.js --env local",
-    "build": "webpack -c ./config/webpack.config.js --env production",
-    "publish-beta": "npm publish --beta",
-    "publish-patch": "npm version patch && npm publish --access public",
-    "publish-minor": "npm version minor && npm publish --access public",
-    "publish-major": "npm version major && npm publish --access public"
-  },
-  "files": [
-    "src",
-    "docs",
-    "CHANGELOG.md"
-  ],
-  "keywords": [],
-  "author": "CaiYansong",
-  "license": "ISC",
-  "devDependencies": {
-    "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^1.7.4",
-    "@hzab/form-render": "^1.6.12",
-    "@hzab/formily-result-utils": "^1.2.0",
-    "@hzab/permissions": "^1.0.0",
-    "@hzab/schema-descriptions": "^1.3.0",
-    "@hzab/webpack-config": "^0.7.2",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
-    "antd": "^4.24.12",
-    "axios": "^1.4.0",
-    "eslint": "^8.30.0",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
-    "less": "^4.1.3",
-    "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.8.1",
-    "typescript": "^4.9.4"
-  },
-  "peerDependencies": {
-    "@formily/core": "2.3.1",
-    "@formily/react": "2.3.1",
-    "@formily/reactive-react": "2.3.1",
-    "@hzab/data-model": ">=1.7.4",
-    "@hzab/form-render": ">=1.0.0",
-    "@hzab/formily-result-utils": ">=1.2.0",
-    "@hzab/schema-descriptions": ">=1.0.0",
-    "antd": "4.x",
-    "axios": ">=1.4.0",
-    "c-formily-antd": "2.3.1",
-    "lodash": ">=4.17.21",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "directories": {
-    "lib": "lib"
-  },
-  "dependencies": {
-    "array-move": "^4.0.0",
-    "react-sortable-hoc": "^2.0.0"
-  }
-}
+{
+  "name": "@hzab/list-render",
+  "version": "1.10.0",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-beta": "npm publish --beta",
+    "publish-patch": "npm version patch && npm publish --access public",
+    "publish-minor": "npm version minor && npm publish --access public",
+    "publish-major": "npm version major && npm publish --access public"
+  },
+  "files": [
+    "src",
+    "docs",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@ant-design/icons": "^4.8.1",
+    "@hzab/data-model": "^1.7.4",
+    "@hzab/form-render": "^1.6.12",
+    "@hzab/formily-result-utils": "^1.2.0",
+    "@hzab/permissions": "^1.0.0",
+    "@hzab/schema-descriptions": "^1.3.0",
+    "@hzab/webpack-config": "^0.7.2",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.24.12",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "less": "^4.1.3",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.8.1",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "@formily/core": "2.3.1",
+    "@formily/react": "2.3.1",
+    "@formily/reactive-react": "2.3.1",
+    "@hzab/data-model": ">=1.7.4",
+    "@hzab/form-render": ">=1.0.0",
+    "@hzab/formily-result-utils": ">=1.2.0",
+    "@hzab/schema-descriptions": ">=1.0.0",
+    "antd": "4.x",
+    "axios": ">=1.4.0",
+    "c-formily-antd": "2.3.1",
+    "lodash": ">=4.17.21",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "dependencies": {
+    "array-move": "^4.0.0",
+    "react-sortable-hoc": "^2.0.0"
+  }
+}

package/src/components/Formily/FormilyEditTable.tsx

@@ -1,252 +1,252 @@
-import React, { useState, useCallback, useRef } from "react";
-import { Card, Slider, Rate, Form, Button } from "antd";
-import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
-import { cloneDeep } from "lodash";
-
-import { antdComponents, customComponents } from "@hzab/form-render";
-
-export interface Item {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-}
-
-export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
-  SchemaField: any;
-  field: {
-    type: string;
-    name: string;
-  };
-  editing: boolean;
-  dataIndex: string;
-  title: any;
-  inputType: "number" | "text";
-  record: Item;
-  index: number;
-  editable: boolean;
-  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string) => void;
-  onSave: () => void;
-  onCancel: () => void;
-  topProps: {
-    config: { hasEdit: boolean | Function };
-    editMode: "modal" | "line" | "line-cell" | "cell";
-  };
-  children: React.ReactNode;
-}
-
-export const EditableCell: React.FC<EditableCellProps> = ({
-  SchemaField,
-  field,
-  editing,
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  onEdit,
-  onSave,
-  onCancel,
-  editable,
-  topProps,
-  children,
-  ...restProps
-}) => {
-  const fPattern = field?.["x-pattern"];
-  const fDisplay = field?.["x-display"];
-  const { editMode = "modal" } = topProps || {};
-  const { hasEdit } = topProps?.config || {};
-
-  // 弹窗编辑模式
-  if (editMode === "modal") {
-    return <td {...restProps}>{children}</td>;
-  }
-  // 无编辑权限或禁止编辑
-  const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-  let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
-  if (!_editable) {
-    return <td {...restProps}>{children}</td>;
-  }
-
-  // 编辑中状态
-  if (editing) {
-    // 使用 Schema 渲染模式
-    return (
-      <td {...restProps}>
-        <div className="editable-table-cell table-cell-editing">
-          <SchemaField
-            schema={{
-              type: "object",
-              properties: {
-                [field.name]: { ...field, title: "" },
-              },
-            }}
-          />
-          {editMode !== "line" ? (
-            <div className="cell-editing-actions">
-              <CheckOutlined className="table-cell-confirm-icon" onClick={onSave} />
-              <CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
-            </div>
-          ) : null}
-        </div>
-      </td>
-    );
-  }
-
-  // 行内单元格编辑按钮
-  const showEditIcon = editMode === "line-cell" || editMode === "cell";
-  if (showEditIcon) {
-    return (
-      <td {...restProps}>
-        <div
-          className="editable-table-cell"
-          onDoubleClick={(e) => {
-            e?.preventDefault();
-            e?.stopPropagation();
-            onEdit(record, dataIndex);
-          }}
-        >
-          {children}
-          <EditOutlined
-            className="table-cell-edit-icon"
-            onClick={(e) => {
-              e?.preventDefault();
-              e?.stopPropagation();
-              onEdit(record, dataIndex);
-            }}
-          />
-        </div>
-      </td>
-    );
-  }
-  return <td {...restProps}>{children}</td>;
-};
-
-export const useEditTable = (props) => {
-  const { topProps, idKey, columns, onEditSubmit, formRender } = props;
-  const { editMode = "modal" } = topProps || {};
-
-  // 创建 formily 表单相关参数
-  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
-  const schemaScopeRef = useRef<{ _$tempData: Object }>();
-  if (props.schemaScope && !schemaScopeRef.current) {
-    schemaScopeRef.current = props.schemaScope;
-  } else if (!schemaScopeRef.current) {
-    schemaScopeRef.current = { _$tempData: {} };
-  }
-  if (!schemaScopeRef.current?._$tempData) {
-    schemaScopeRef.current._$tempData = {};
-  }
-  const SchemaField = useCallback(
-    createSchemaField({
-      components: {
-        // Upload,
-        Card,
-        Slider,
-        Rate,
-        ...antdComponents,
-        ...customComponents,
-        ...props.components,
-      },
-      scope: schemaScopeRef.current,
-    }),
-    [],
-  );
-
-  // 是否可编辑状态逻辑处理
-  const [editingId, setEditingId] = useState("");
-  // 当前编辑的字段
-  const [editingKey, setEditingKey] = useState("");
-  /** 判断当前 行 是否处于编辑状态 */
-  const isEditing = (record: Item) => record[idKey] === editingId;
-  /** 判断当前 单元格 是否处于编辑状态 */
-  const isEditingCell = (key) => key === editingKey;
-
-  /**
-   * 点击编辑按钮
-   * @param record
-   */
-  const onEdit = async (record: Partial<Item> & { key: React.Key }, key) => {
-    const value = await (props.onEdit && props.onEdit(record));
-    formRender?.setValues(value);
-    setEditingId(record[idKey]);
-    editMode === "cell" && setEditingKey(key);
-  };
-
-  const onCancel = () => {
-    setEditingId("");
-    setEditingKey("");
-  };
-
-  /**
-   * 保存数据
-   */
-  const onSave = async () => {
-    try {
-      // 点击保存，数据抛出
-      (await formRender?.validate()) as Item;
-      onEditSubmit && onEditSubmit(formRender.values);
-      // 清除编辑目标
-      setEditingId("");
-      setEditingKey("");
-    } catch (errInfo) {
-      console.error("Validate Failed:", errInfo);
-    }
-  };
-
-  const mergedColumns = cloneDeep(columns)?.map((col) => {
-    const isActions = col.key === "_$actions";
-    if (!col.editable && !isActions) {
-      return col;
-    }
-
-    const resCol = {
-      ...col,
-      onCell: (record: Item, ...args) => ({
-        ...(col.onCell ? col.onCell(record, ...args) : {}),
-        record,
-        SchemaField,
-        field: col.field,
-        dataIndex: col.dataIndex,
-        title: col.title,
-        editable: col.editable,
-        editing: isActions
-          ? false
-          : editMode === "cell"
-          ? isEditing(record) && isEditingCell(col.dataIndex)
-          : isEditing(record),
-        topProps: props.topProps,
-        onEdit,
-        onSave,
-        onCancel,
-      }),
-    };
-    // 操作列编辑态改成保存、取消按钮
-    if (isActions) {
-      resCol.render = (record, index) => {
-        // 编辑态操作栏变成保存和取消按钮
-        if (editMode === "line" && record[idKey] === editingId) {
-          return (
-            <div className="edit-table-actions">
-              <Button type="link" onClick={onSave}>
-                保存
-              </Button>
-              <Button type="text" onClick={onCancel}>
-                取消
-              </Button>
-            </div>
-          );
-        }
-        return col.render(record, index);
-      };
-    }
-    return resCol;
-  });
-
-  return {
-    onEdit,
-    SchemaField,
-    mergedColumns,
-  };
-};
+import React, { useState, useCallback, useRef } from "react";
+import { Card, Slider, Rate, Form, Button } from "antd";
+import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
+import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
+import { cloneDeep } from "lodash";
+
+import { antdComponents, customComponents } from "@hzab/form-render";
+
+export interface Item {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  SchemaField: any;
+  field: {
+    type: string;
+    name: string;
+  };
+  editing: boolean;
+  dataIndex: string;
+  title: any;
+  inputType: "number" | "text";
+  record: Item;
+  index: number;
+  editable: boolean;
+  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  topProps: {
+    config: { hasEdit: boolean | Function };
+    editMode: "modal" | "line" | "line-cell" | "cell";
+  };
+  children: React.ReactNode;
+}
+
+export const EditableCell: React.FC<EditableCellProps> = ({
+  SchemaField,
+  field,
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  onEdit,
+  onSave,
+  onCancel,
+  editable,
+  topProps,
+  children,
+  ...restProps
+}) => {
+  const fPattern = field?.["x-pattern"];
+  const fDisplay = field?.["x-display"];
+  const { editMode = "modal" } = topProps || {};
+  const { hasEdit } = topProps?.config || {};
+
+  // 弹窗编辑模式
+  if (editMode === "modal") {
+    return <td {...restProps}>{children}</td>;
+  }
+  // 无编辑权限或禁止编辑
+  const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+  let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
+  if (!_editable) {
+    return <td {...restProps}>{children}</td>;
+  }
+
+  // 编辑中状态
+  if (editing) {
+    // 使用 Schema 渲染模式
+    return (
+      <td {...restProps}>
+        <div className="editable-table-cell table-cell-editing">
+          <SchemaField
+            schema={{
+              type: "object",
+              properties: {
+                [field.name]: { ...field, title: "" },
+              },
+            }}
+          />
+          {editMode !== "line" ? (
+            <div className="cell-editing-actions">
+              <CheckOutlined className="table-cell-confirm-icon" onClick={onSave} />
+              <CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
+            </div>
+          ) : null}
+        </div>
+      </td>
+    );
+  }
+
+  // 行内单元格编辑按钮
+  const showEditIcon = editMode === "line-cell" || editMode === "cell";
+  if (showEditIcon) {
+    return (
+      <td {...restProps}>
+        <div
+          className="editable-table-cell"
+          onDoubleClick={(e) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+            onEdit(record, dataIndex);
+          }}
+        >
+          {children}
+          <EditOutlined
+            className="table-cell-edit-icon"
+            onClick={(e) => {
+              e?.preventDefault();
+              e?.stopPropagation();
+              onEdit(record, dataIndex);
+            }}
+          />
+        </div>
+      </td>
+    );
+  }
+  return <td {...restProps}>{children}</td>;
+};
+
+export const useEditTable = (props) => {
+  const { topProps, idKey, columns, onEditSubmit, formRender } = props;
+  const { editMode = "modal" } = topProps || {};
+
+  // 创建 formily 表单相关参数
+  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
+  const schemaScopeRef = useRef<{ _$tempData: Object }>();
+  if (props.schemaScope && !schemaScopeRef.current) {
+    schemaScopeRef.current = props.schemaScope;
+  } else if (!schemaScopeRef.current) {
+    schemaScopeRef.current = { _$tempData: {} };
+  }
+  if (!schemaScopeRef.current?._$tempData) {
+    schemaScopeRef.current._$tempData = {};
+  }
+  const SchemaField = useCallback(
+    createSchemaField({
+      components: {
+        // Upload,
+        Card,
+        Slider,
+        Rate,
+        ...antdComponents,
+        ...customComponents,
+        ...props.components,
+      },
+      scope: schemaScopeRef.current,
+    }),
+    [],
+  );
+
+  // 是否可编辑状态逻辑处理
+  const [editingId, setEditingId] = useState("");
+  // 当前编辑的字段
+  const [editingKey, setEditingKey] = useState("");
+  /** 判断当前 行 是否处于编辑状态 */
+  const isEditing = (record: Item) => record[idKey] === editingId;
+  /** 判断当前 单元格 是否处于编辑状态 */
+  const isEditingCell = (key) => key === editingKey;
+
+  /**
+   * 点击编辑按钮
+   * @param record
+   */
+  const onEdit = async (record: Partial<Item> & { key: React.Key }, key) => {
+    const value = await (props.onEdit && props.onEdit(record));
+    formRender?.setValues(value);
+    setEditingId(record[idKey]);
+    editMode === "cell" && setEditingKey(key);
+  };
+
+  const onCancel = () => {
+    setEditingId("");
+    setEditingKey("");
+  };
+
+  /**
+   * 保存数据
+   */
+  const onSave = async () => {
+    try {
+      // 点击保存，数据抛出
+      (await formRender?.validate()) as Item;
+      onEditSubmit && onEditSubmit(formRender.values);
+      // 清除编辑目标
+      setEditingId("");
+      setEditingKey("");
+    } catch (errInfo) {
+      console.error("Validate Failed:", errInfo);
+    }
+  };
+
+  const mergedColumns = cloneDeep(columns)?.map((col) => {
+    const isActions = col.key === "_$actions";
+    if (!col.editable && !isActions) {
+      return col;
+    }
+
+    const resCol = {
+      ...col,
+      onCell: (record: Item, ...args) => ({
+        ...(col.onCell ? col.onCell(record, ...args) : {}),
+        record,
+        SchemaField,
+        field: col.field,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editable: col.editable,
+        editing: isActions
+          ? false
+          : editMode === "cell"
+          ? isEditing(record) && isEditingCell(col.dataIndex)
+          : isEditing(record),
+        topProps: props.topProps,
+        onEdit,
+        onSave,
+        onCancel,
+      }),
+    };
+    // 操作列编辑态改成保存、取消按钮
+    if (isActions) {
+      resCol.render = (record, index) => {
+        // 编辑态操作栏变成保存和取消按钮
+        if (editMode === "line" && record[idKey] === editingId) {
+          return (
+            <div className="edit-table-actions">
+              <Button type="link" onClick={onSave}>
+                保存
+              </Button>
+              <Button type="text" onClick={onCancel}>
+                取消
+              </Button>
+            </div>
+          );
+        }
+        return col.render(record, index);
+      };
+    }
+    return resCol;
+  });
+
+  return {
+    onEdit,
+    SchemaField,
+    mergedColumns,
+  };
+};