@pisell/materials 1.0.295 → 1.0.296

package/lib/components/batch-editor/index.js

@@ -0,0 +1,357 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/batch-editor/index.tsx
+var batch_editor_exports = {};
+__export(batch_editor_exports, {
+  default: () => batch_editor_default
+});
+module.exports = __toCommonJS(batch_editor_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_ahooks = require("ahooks");
+var import_table = __toESM(require("../table"));
+var import_fields = __toESM(require("./fields"));
+var import_Price = __toESM(require("./fields/Price"));
+var import_locales = require("../../locales/index");
+var import_index = require("./index.less");
+var BatchEditor = (props) => {
+  var _a;
+  const { columns, dataSource = [], onChange, rowKey, otherTableProps } = props;
+  const [form] = import_antd.Form.useForm();
+  const [openModal, setOpenModal] = (0, import_react.useState)(false);
+  const [selectList, setSelectList] = (0, import_react.useState)([]);
+  const renderColumnItem = (0, import_react.useCallback)(
+    (_item) => {
+      return (text, record) => {
+        if (!_item.type) {
+          const Com2 = import_fields.default["text"];
+          return /* @__PURE__ */ import_react.default.createElement("div", { className: "editor-item" }, /* @__PURE__ */ import_react.default.createElement(Com2, null, text));
+        }
+        if ((record.disabledList || []).includes(_item.dataIndex)) {
+          return /* @__PURE__ */ import_react.default.createElement("div", { className: "editor-item", style: { padding: `0 11px` } }, /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Tooltip,
+            {
+              overlay: (record == null ? void 0 : record.disabledTexts) ? (
+                //@ts-ignore
+                (record == null ? void 0 : record.disabledTexts[_item.dataIndex]) || text
+              ) : text
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "name" }, (record == null ? void 0 : record.disabledTexts) ? (
+              //@ts-ignore
+              (record == null ? void 0 : record.disabledTexts[_item.dataIndex]) || text
+            ) : text)
+          ));
+        }
+        const Com = import_fields.default[_item.type];
+        if (Com) {
+          return /* @__PURE__ */ import_react.default.createElement("div", { className: "editor-item" }, /* @__PURE__ */ import_react.default.createElement(
+            Com,
+            {
+              status: record.status,
+              value: text,
+              onChange: (e) => {
+                handleChange(e, _item.dataIndex, record[rowKey]);
+              }
+            }
+          ));
+        }
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: "editor-item" }, "-");
+      };
+    },
+    [dataSource, rowKey, columns]
+  );
+  const _onChange = (newDataSource) => {
+    onChange == null ? void 0 : onChange(newDataSource);
+  };
+  const handleChange = (val, key, id) => {
+    let _dataSource = JSON.parse(JSON.stringify(dataSource));
+    let fn = (_list) => {
+      for (let d of _list) {
+        if (d[rowKey] === id) {
+          d[key] = val;
+          break;
+        }
+        if (d.children && d.children.length) {
+          fn(d.children);
+        }
+      }
+    };
+    fn(_dataSource || []);
+    _onChange(_dataSource);
+  };
+  const handleBatchEditChange = (val, key) => {
+    let _dataSource = JSON.parse(JSON.stringify(dataSource));
+    let fn = (_list) => {
+      for (let d of _list) {
+        if (selectList.includes(d[rowKey]) && !(d.disabledList || []).includes(key)) {
+          d[key] = val;
+        }
+        if (d.children && d.children.length) {
+          fn(d.children);
+        }
+      }
+    };
+    fn(_dataSource || []);
+    _onChange(_dataSource);
+  };
+  const handleRemove = (ids) => {
+    let _dataSource = JSON.parse(JSON.stringify(dataSource));
+    if (_dataSource.some((d) => ids.includes(d[rowKey]))) {
+      _dataSource = _dataSource.filter((d) => !ids.includes(d[rowKey]));
+    } else {
+      _dataSource.forEach((d) => {
+        if (d.children) {
+          d.children = d.children.filter((d2) => !ids.includes(d2[rowKey]));
+        }
+      });
+    }
+    _onChange(_dataSource);
+  };
+  const setDebounceValue = (0, import_ahooks.useDebounceFn)(
+    (_dataSource) => {
+      _onChange(_dataSource);
+    },
+    {
+      wait: 300
+    }
+  );
+  const renderPopoverContent = (0, import_react.useCallback)(
+    (_item) => {
+      const Com = import_fields.default[_item.type];
+      let val;
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "batch-popover-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "editor-item" }, /* @__PURE__ */ import_react.default.createElement(
+        Com,
+        {
+          onBlur: () => {
+            if (val !== void 0) {
+              handleBatchEditChange(val, _item.dataIndex);
+            }
+          },
+          onChange: (e) => {
+            val = e;
+          }
+        }
+      )));
+    },
+    [dataSource, selectList]
+  );
+  const renderColumnTitle = (0, import_react.useCallback)(
+    (item) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "column-title" }, /* @__PURE__ */ import_react.default.createElement("span", null, item.title), selectList.length && item.batchEdit ? /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Popover,
+        {
+          destroyTooltipOnHide: true,
+          trigger: ["click"],
+          placement: "bottom",
+          title: `${(0, import_locales.getText)("batch-editor-batch-edit")}: ${item.title}`,
+          content: renderPopoverContent(item)
+        },
+        /* @__PURE__ */ import_react.default.createElement("a", null, (0, import_locales.getText)("batch-editor-batch-edit"))
+      ) : null);
+    },
+    [dataSource, rowKey, selectList]
+  );
+  const _columns = (0, import_react.useMemo)(() => {
+    return columns.filter((d) => !d.hide).map((d) => {
+      return {
+        ...d,
+        titleStr: d.title,
+        title: renderColumnTitle(d),
+        render: renderColumnItem(d)
+      };
+    }).concat([
+      {
+        title: (0, import_locales.getText)("batch-editor-actions"),
+        dataIndex: rowKey,
+        key: "actions",
+        align: "center",
+        fixed: "right",
+        width: 100,
+        dataSource,
+        selectList,
+        render: (text, record) => {
+          return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Button,
+            {
+              onClick: () => {
+                handleRemove([text]);
+              }
+            },
+            (0, import_locales.getText)("batch-editor-remove")
+          ));
+        }
+      }
+    ]);
+  }, [renderColumnItem, rowKey, dataSource, selectList]);
+  const selectOptions = (0, import_react.useMemo)(() => {
+    return _columns.filter((d) => d.batchEdit).map((d) => {
+      return {
+        label: d.titleStr,
+        value: d.dataIndex
+      };
+    });
+  }, [_columns]);
+  const onFinish = (values) => {
+    handleBatchEditChange(values.value, values.key);
+    onCancel();
+    setSelectList([]);
+  };
+  const onCancel = () => {
+    form.resetFields();
+    setOpenModal(false);
+  };
+  const onOpenMOdal = () => {
+    setOpenModal(true);
+    form.setFieldsValue({
+      key: selectOptions[0].value
+    });
+  };
+  const modalTitle = (0, import_react.useMemo)(() => {
+    var _a2, _b;
+    let str = "";
+    let selectItems = [];
+    selectList.forEach((item) => {
+      let productItem = dataSource.find((d) => d[rowKey] === item);
+      if (productItem) {
+        selectItems.push(productItem);
+      } else {
+        dataSource.forEach((d) => {
+          if (d.children) {
+            let childProductItem = d.children.find(
+              (t) => t[rowKey] === item
+            );
+            if (childProductItem) {
+              selectItems.push(childProductItem);
+            }
+          }
+        });
+      }
+    });
+    str = ``;
+    if (selectItems.length > 1) {
+      str = (0, import_locales.getText)("batch-editor-quick-edit-title")(
+        (_a2 = selectItems[0]) == null ? void 0 : _a2.title,
+        selectItems.length
+      );
+    } else {
+      str = (0, import_locales.getText)("batch-editor-quick-edit-title-2")((_b = selectItems[0]) == null ? void 0 : _b.title);
+    }
+    return str;
+  }, [selectList, dataSource]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_table.default,
+    {
+      actionButtons: !!selectList.length && [
+        {
+          title: (0, import_locales.getText)("batch-editor-batch-remove"),
+          size: "large",
+          onClick: () => {
+            handleRemove(selectList);
+            setSelectList([]);
+          }
+        },
+        {
+          title: (0, import_locales.getText)("batch-editor-batch-edit"),
+          onClick: onOpenMOdal,
+          size: "large",
+          type: "primary"
+        }
+      ],
+      bordered: true,
+      dataSource,
+      columns: _columns,
+      size: "small",
+      className: "batch-editor-table",
+      rowKey,
+      rowSelection: {
+        type: "checkbox",
+        selectedRowKeys: selectList,
+        onChange: (keys) => {
+          setSelectList(keys);
+        }
+      },
+      scroll: { x: _columns.length * 200 },
+      pagination: { localPagination: true },
+      ...otherTableProps,
+      onValuesChange: (values) => {
+        var _a2;
+        setSelectList([]);
+        (_a2 = otherTableProps == null ? void 0 : otherTableProps.onValuesChange) == null ? void 0 : _a2.call(otherTableProps, values);
+      },
+      filter: {
+        show: true,
+        sortButtonShow: false,
+        quickFilterMaxLength: 3,
+        storageMode: "localStorage",
+        ...otherTableProps == null ? void 0 : otherTableProps.filter,
+        list: [
+          {
+            type: "search",
+            name: "keywords",
+            key: "keywords",
+            localFilter: true,
+            other: {
+              trigger: ["onChange"],
+              size: "large",
+              onChange: () => {
+                setSelectList([]);
+              }
+            }
+          },
+          ...(_a = otherTableProps == null ? void 0 : otherTableProps.filter) == null ? void 0 : _a.list
+        ]
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      title: (0, import_locales.getText)("batch-editor-quick-edit"),
+      open: openModal,
+      footer: null,
+      onCancel: () => {
+        setOpenModal(false);
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "title", style: { marginBottom: 20 } }, modalTitle),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { layout: "vertical", form, onFinish }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: (0, import_locales.getText)("batch-editor-what-price"), name: "key" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { size: "large", options: selectOptions })), /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { label: (0, import_locales.getText)("batch-editor-price"), name: "value" }, /* @__PURE__ */ import_react.default.createElement(import_Price.default, null))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "", style: { display: "flex", gap: 20, width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "large", style: { flex: 1 }, onClick: onCancel }, (0, import_locales.getText)("batch-editor-cancel")), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        size: "large",
+        type: "primary",
+        onClick: () => {
+          form.submit();
+        },
+        style: { flex: 1 }
+      },
+      (0, import_locales.getText)("batch-editor-confirm")
+    ))
+  ));
+};
+var batch_editor_default = BatchEditor;

package/lib/components/batch-editor/index.less

@@ -0,0 +1,48 @@
+.batch-editor-table {
+
+  :global {
+
+    // .ant-table-tbody .ant-table-cell {
+    //   display: flex;
+    //   align-items: center;
+    // }
+    .ant-table-cell-with-append {
+      display: flex;
+      align-items: center;
+      height: 95px;
+    }
+  }
+
+  .column-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    word-wrap: normal !important;
+    word-break: normal !important;
+
+    .icon {
+      cursor: pointer;
+    }
+  }
+
+  .editor-item {
+    flex: 1;
+    cursor: pointer;
+    min-height: 40px;
+
+    .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      max-width: 240px;
+    }
+  }
+
+  :global {
+    .batch-popover-content {
+      width: 250px;
+      height: 50px;
+    }
+  }
+}

package/lib/components/table/hooks/useTransDataSource.js

@@ -84,6 +84,7 @@ var useTransDataSource = (params) => {
     filterLocalArr,
     filters
   ]);
+  console.log("dataSourcedataSource", dataSource);
   return dataSource;
 };
 var useTransDataSource_default = useTransDataSource;

package/lib/components/table/index.js

@@ -122,9 +122,18 @@ var GridView = (0, import_model.Provider)(
       }
       return viewMode || defaultViewMode;
     }, [viewMode, defaultViewMode, multiple]);
+    const removeTitleColumns = (0, import_react.useMemo)(() => {
+      let _columns = columns.map((item) => {
+        return {
+          ...item,
+          title: void 0
+        };
+      });
+      return _columns;
+    }, [columns]);
     const currentSettingHash = (0, import_react.useMemo)(() => {
-      return currentSettingKey || (0, import_utils.getHash)(columns) || "";
-    }, [currentSettingKey, JSON.stringify(columns)]);
+      return currentSettingKey || (0, import_utils.getHash)(removeTitleColumns) || "";
+    }, [currentSettingKey, JSON.stringify(removeTitleColumns)]);
     (0, import_react.useEffect)(() => {
       const setting = (0, import_utils.getTableSettingFromLocalStorage)(tableId);
       if (setting.currentSettingHash !== currentSettingHash) {
@@ -242,8 +251,11 @@ var GridView = (0, import_model.Provider)(
     }, [currentViewMode]);
     (0, import_react.useEffect)(() => {
       form.setFieldValue("column_setting", {});
-      form.setFieldValue("column_setting", tableSettingRef.current.column_setting);
-    }, [(0, import_utils.stringify)(columns)]);
+      form.setFieldValue(
+        "column_setting",
+        tableSettingRef.current.column_setting
+      );
+    }, [(0, import_utils.stringify)(removeTitleColumns)]);
     (0, import_react.useEffect)(() => {
       form.setFieldsValue(initialValuesRef.current);
     }, [JSON.stringify(propsFilter)]);

package/lib/index.d.ts

@@ -78,3 +78,4 @@ export { default as VirtualKeyboard } from "./components/virtual-keyboard";
 export { default as VirtualKeyboardTime } from "./components/virtual-keyboard/Time";
 export { default as SelectTime } from "./components/select-time";
 export { default as AutoCompleteNumber } from "./components/auto-complete-number";
+export { default as BatchEditor } from "./components/batch-editor";

package/lib/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   AutoCompleteNumber: () => import_auto_complete_number.default,
   Avatar: () => import_antd4.Avatar,
   Badge: () => import_antd5.Badge,
+  BatchEditor: () => import_batch_editor.default,
   Breadcrumb: () => import_antd6.Breadcrumb,
   Button: () => import_button.default,
   Calendar: () => import_calendar.default,
@@ -191,6 +192,7 @@ var import_virtual_keyboard = __toESM(require("./components/virtual-keyboard"));
 var import_Time = __toESM(require("./components/virtual-keyboard/Time"));
 var import_select_time = __toESM(require("./components/select-time"));
 var import_auto_complete_number = __toESM(require("./components/auto-complete-number"));
+var import_batch_editor = __toESM(require("./components/batch-editor"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -200,6 +202,7 @@ var import_auto_complete_number = __toESM(require("./components/auto-complete-nu
   AutoCompleteNumber,
   Avatar,
   Badge,
+  BatchEditor,
   Breadcrumb,
   Button,
   Calendar,

package/lib/locales/en-US.d.ts

@@ -37,5 +37,16 @@ declare const _default: {
     "table-action-range-picker-presets-last-90-day": string;
     "virtual-keyboard-time-now": string;
     "virtual-keyboard-time-ok": string;
+    'batch-editor-batch-edit': string;
+    'batch-editor-actions': string;
+    'batch-editor-remove': string;
+    'batch-editor-price': string;
+    'batch-editor-cancel': string;
+    'batch-editor-confirm': string;
+    'batch-editor-batch-remove': string;
+    'batch-editor-quick-edit': string;
+    'batch-editor-what-price': string;
+    'batch-editor-quick-edit-title': (product: string, num: string) => string;
+    'batch-editor-quick-edit-title-2': (product: string) => string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -60,5 +60,16 @@ var en_US_default = {
   "table-action-range-picker-presets-last-30-day": "Last 30 Days",
   "table-action-range-picker-presets-last-90-day": "Last 90 Days",
   "virtual-keyboard-time-now": "Now",
-  "virtual-keyboard-time-ok": "OK"
+  "virtual-keyboard-time-ok": "OK",
+  "batch-editor-batch-edit": "Batch edit",
+  "batch-editor-actions": "Actions",
+  "batch-editor-remove": "Remove",
+  "batch-editor-price": "Price",
+  "batch-editor-cancel": "Cancel",
+  "batch-editor-confirm": "Confirm",
+  "batch-editor-batch-remove": "Batch remove",
+  "batch-editor-quick-edit": "Quick edit",
+  "batch-editor-what-price": "What price",
+  "batch-editor-quick-edit-title": (product, num) => `You have selected ${num} products including ${product}`,
+  "batch-editor-quick-edit-title-2": (product) => `You have selected ${product}`
 };

package/lib/locales/zh-CN.d.ts

@@ -37,5 +37,16 @@ declare const _default: {
     "table-action-range-picker-presets-last-90-day": string;
     "virtual-keyboard-time-now": string;
     "virtual-keyboard-time-ok": string;
+    'batch-editor-batch-edit': string;
+    'batch-editor-actions': string;
+    'batch-editor-remove': string;
+    'batch-editor-price': string;
+    'batch-editor-cancel': string;
+    'batch-editor-confirm': string;
+    'batch-editor-batch-remove': string;
+    'batch-editor-quick-edit': string;
+    'batch-editor-what-price': string;
+    'batch-editor-quick-edit-title': (product: string, num: string) => string;
+    'batch-editor-quick-edit-title-2': (product: string) => string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -60,5 +60,16 @@ var zh_CN_default = {
   "table-action-range-picker-presets-last-30-day": "过去30天",
   "table-action-range-picker-presets-last-90-day": "过去90天",
   "virtual-keyboard-time-now": "此刻",
-  "virtual-keyboard-time-ok": "确定"
+  "virtual-keyboard-time-ok": "确定",
+  "batch-editor-batch-edit": "批量编辑",
+  "batch-editor-actions": "操作",
+  "batch-editor-remove": "删除",
+  "batch-editor-price": "价格",
+  "batch-editor-cancel": "取消",
+  "batch-editor-confirm": "确认",
+  "batch-editor-batch-remove": "批量移除",
+  "batch-editor-quick-edit": "快速编辑",
+  "batch-editor-what-price": "什么价格",
+  "batch-editor-quick-edit-title": (product, num) => `您已选择 ${product} 等${num}件商品`,
+  "batch-editor-quick-edit-title-2": (product) => `您已选择 ${product}`
 };

package/lib/locales/zh-TW.d.ts

@@ -37,5 +37,16 @@ declare const _default: {
     "table-action-range-picker-presets-last-90-day": string;
     "virtual-keyboard-time-now": string;
     "virtual-keyboard-time-ok": string;
+    'batch-editor-batch-edit': string;
+    'batch-editor-actions': string;
+    'batch-editor-remove': string;
+    'batch-editor-price': string;
+    'batch-editor-cancel': string;
+    'batch-editor-confirm': string;
+    'batch-editor-batch-remove': string;
+    'batch-editor-what-price': string;
+    'batch-editor-quick-edit': string;
+    'batch-editor-quick-edit-title': (product: string, num: string) => string;
+    'batch-editor-quick-edit-title-2': (product: string) => string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -60,5 +60,16 @@ var zh_TW_default = {
   "table-action-range-picker-presets-last-30-day": "過去30天",
   "table-action-range-picker-presets-last-90-day": "過去90天",
   "virtual-keyboard-time-now": "此刻",
-  "virtual-keyboard-time-ok": "確定"
+  "virtual-keyboard-time-ok": "確定",
+  "batch-editor-batch-edit": "批量編輯",
+  "batch-editor-actions": "操作",
+  "batch-editor-remove": "刪除",
+  "batch-editor-price": "價格",
+  "batch-editor-cancel": "取消",
+  "batch-editor-confirm": "確認",
+  "batch-editor-batch-remove": "批量移除",
+  "batch-editor-what-price": "什麼價格",
+  "batch-editor-quick-edit": "快速編輯",
+  "batch-editor-quick-edit-title": (product, num) => `您已選擇 ${product} 等${num}件產品`,
+  "batch-editor-quick-edit-title-2": (product) => `您已選擇 ${product}`
 };

package/lowcode/batch-editor/meta.ts

@@ -0,0 +1,93 @@
+
+import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
+
+const BatchEditorMeta: ComponentMetadata = {
+  "componentName": "BatchEditor",
+  "title": "BatchEditor",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@pisell/private-materials",
+    "version": "1.0.4",
+    "exportName": "BatchEditor",
+    "main": "src/index.ts",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "columns",
+            "zh-CN": "columns"
+          }
+        },
+        "name": "columns",
+        "setter": ["JsonSetter", "VariableSetter"],
+      },
+
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "dataSource",
+            "zh-CN": "dataSource"
+          }
+        },
+        "name": "dataSource",
+        "setter": ["JsonSetter", "VariableSetter"],
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "rowKey",
+            "zh-CN": "rowKey"
+          }
+        },
+        "name": "rowKey",
+        "setter": {
+          "componentName": "StringSetter",
+          "initialValue": "id"
+        }
+      },
+
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "otherTableProps",
+            "zh-CN": "otherTableProps"
+          }
+        },
+        "name": "otherTableProps",
+        "setter": ["JsonSetter", "VariableSetter"],
+      },
+    ],
+    "supports": {
+      "style": true,
+      "events": [{
+        "name": "onChange"
+      }]
+    },
+    "component": {}
+  }
+};
+const snippets: Snippet[] = [
+  {
+    "title": "BatchEditor",
+    "screenshot": "",
+    "schema": {
+      "componentName": "BatchEditor",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...BatchEditorMeta,
+  snippets
+};