@pisell/materials 1.0.215 → 1.0.217

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

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/hooks/useTransFilterSetting.ts
+var useTransFilterSetting_exports = {};
+__export(useTransFilterSetting_exports, {
+  default: () => useTransFilterSetting_default
+});
+module.exports = __toCommonJS(useTransFilterSetting_exports);
+var import_react = require("react");
+var useTransFilterSetting = (params) => {
+  const { filter, originColumnsMap } = params;
+  return (0, import_react.useMemo)(() => {
+    if (filter && filter.show && filter.list) {
+      return {
+        ...filter,
+        list: filter.list.map((item) => {
+          let { name, label, columnKey, isCustom } = item;
+          if (!isCustom && columnKey && originColumnsMap.has(columnKey)) {
+            const column = originColumnsMap.get(columnKey);
+            name = column.dataIndex || name;
+            label = column.title || label;
+          }
+          return {
+            ...item,
+            name,
+            label
+          };
+        })
+      };
+    }
+    return filter;
+  }, [filter, originColumnsMap]);
+};
+var useTransFilterSetting_default = useTransFilterSetting;

package/lib/components/table/hooks/useTransSortSetting.d.ts

@@ -0,0 +1,7 @@
+import { SortType } from "../types";
+declare type UseTransSortSettingParams = {
+    sort: SortType;
+    originColumnsMap: Map<string, any>;
+};
+declare const useTransSortSetting: (params: UseTransSortSettingParams) => SortType;
+export default useTransSortSetting;

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

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/hooks/useTransSortSetting.ts
+var useTransSortSetting_exports = {};
+__export(useTransSortSetting_exports, {
+  default: () => useTransSortSetting_default
+});
+module.exports = __toCommonJS(useTransSortSetting_exports);
+var import_react = require("react");
+var useTransSortSetting = (params) => {
+  const { sort, originColumnsMap } = params;
+  return (0, import_react.useMemo)(() => {
+    if (sort && sort.show && sort.list) {
+      return {
+        ...sort,
+        list: sort.list.map((item) => {
+          let { name, label, columnKey, isCustom } = item;
+          if (!isCustom && columnKey && originColumnsMap.has(columnKey)) {
+            const column = originColumnsMap.get(columnKey);
+            name = column.dataIndex || name;
+            label = column.title || label;
+          }
+          return {
+            ...item,
+            name,
+            label
+          };
+        })
+      };
+    }
+    return sort;
+  }, [sort, originColumnsMap]);
+};
+var useTransSortSetting_default = useTransSortSetting;

package/lib/components/table/hooks/useTriggerValuesChange.d.ts

@@ -0,0 +1,16 @@
+import { FilterType } from "../../filter/types";
+import { ColumnSettingType, DataSourceGroupType, ModeType, SortType } from "../types";
+declare type UseTriggerValuesChangeProps = {
+    filter: FilterType;
+    columnSetting?: ColumnSettingType;
+    dataSourceGroup?: DataSourceGroupType;
+    sort?: SortType;
+    currentViewMode: ModeType;
+};
+/**
+ * 判断是否触发值变化
+ * @param params 参数对象，包含 filter、columnSetting、dataSourceGroup、sort
+ * @returns 返回一个函数，用于判断是否触发值变化
+ */
+declare const useTriggerValuesChange: (params: UseTriggerValuesChangeProps) => (changedValues: Record<string, any>, values: Record<string, any>) => boolean | undefined;
+export default useTriggerValuesChange;

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

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/hooks/useTriggerValuesChange.ts
+var useTriggerValuesChange_exports = {};
+__export(useTriggerValuesChange_exports, {
+  default: () => useTriggerValuesChange_default
+});
+module.exports = __toCommonJS(useTriggerValuesChange_exports);
+var import_react = require("react");
+var import_utils = require("../Table/utils");
+var useTriggerValuesChange = (params) => {
+  const { filter, columnSetting, dataSourceGroup, sort, currentViewMode } = params;
+  const { list, show } = filter || {};
+  const getIsTriggerValuesChange = (0, import_react.useCallback)(
+    (changedValues, values) => {
+      var _a;
+      const keys = (0, import_utils.getSettingKeyArrByMode)({
+        filter,
+        columnSetting,
+        dataSourceGroup,
+        sort,
+        mode: "remote",
+        currentViewMode
+      });
+      const changedKey = Object.keys(changedValues)[0];
+      if (changedKey === "pagination") {
+        return true;
+      }
+      if (changedKey === "view_mode") {
+        return false;
+      }
+      if (changedKey === "filters") {
+        const filterKey = ((_a = Object.keys(changedValues.filters)) == null ? void 0 : _a[0]) || "";
+        if (show && (list == null ? void 0 : list.length)) {
+          const remoteFilterKeys = list.filter((item) => !item.localFilter).map((item) => item.name);
+          return remoteFilterKeys.includes(filterKey);
+        }
+      }
+      if (keys.includes(changedKey)) {
+        return true;
+      }
+    },
+    [filter, columnSetting, dataSourceGroup, sort]
+  );
+  return getIsTriggerValuesChange;
+};
+var useTriggerValuesChange_default = useTriggerValuesChange;

package/lib/components/table/index.d.ts

@@ -1,18 +1,4 @@
 import React from "react";
 import "./index.less";
-declare type GridViewProps = {
-    columns: any;
-    dataSource: any[];
-    dispatch: any;
-    style: any;
-    pagination: any;
-    filter: any;
-    buttons: any;
-    sort: any;
-    title: any;
-    onValuesChange: (changedValues: any, values: any) => void;
-    summary: any;
-    utils: any;
-};
-declare const GridView: React.FC<GridViewProps>;
-export default GridView;
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/table/index.js

@@ -34,94 +34,252 @@ __export(table_exports, {
 module.exports = __toCommonJS(table_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_View = __toESM(require("./View"));
 var import_Header = __toESM(require("./Header"));
 var import_Actions = __toESM(require("./Actions"));
 var import_Summary = __toESM(require("./Summary"));
-var import_Table = __toESM(require("./Table"));
 var import_hooks = require("../../hooks");
-var import_index = require("./index.less");
 var import_model = require("./model");
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
-var GridView = (0, import_model.Provider)((props) => {
-  var _a;
-  const modal = (0, import_hooks.useSharedState)(import_model.Context);
-  const [form] = import_antd.Form.useForm();
-  const {
-    dataSource,
-    columns,
-    dispatch,
-    style,
-    filter,
-    sort,
-    buttons,
-    title,
-    summary,
-    onValuesChange,
-    // pagination,
-    ...other
-  } = props;
-  const context = (0, import_useEngineContext.default)();
-  const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
-  (0, import_react.useEffect)(() => {
-    modal.dispatch({
-      type: "setUtils",
-      payload: utils || {}
+var import_useTableSetting = __toESM(require("./hooks/useTableSetting"));
+var import_useTriggerValuesChange = __toESM(require("./hooks/useTriggerValuesChange"));
+var import_utils = require("./Table/utils");
+var import_useTransSortSetting = __toESM(require("./hooks/useTransSortSetting"));
+var import_useTransFilterSetting = __toESM(require("./hooks/useTransFilterSetting"));
+var import_useTransDataSourceGroupSetting = __toESM(require("./hooks/useTransDataSourceGroupSetting"));
+var import_index = require("./index.less");
+var defaultView = {
+  defaultViewMode: "grid",
+  multiple: false,
+  modeList: []
+};
+var GridView = (0, import_model.Provider)(
+  (0, import_react.forwardRef)((props, ref) => {
+    var _a, _b, _c, _d, _e, _f;
+    const {
+      dataSource,
+      columns,
+      dispatch,
+      style,
+      filter: propsFilter,
+      sort: propsSort,
+      buttons,
+      actionButtons,
+      title,
+      summary,
+      onValuesChange,
+      columnSetting,
+      dataSourceGroup: propsDataSourceGroup,
+      view = defaultView,
+      gallery,
+      // pagination,
+      ...other
+    } = props;
+    const modal = (0, import_hooks.useSharedState)(import_model.Context);
+    const [form] = import_antd.Form.useForm();
+    const { defaultViewMode, multiple } = view;
+    const viewMode = import_antd.Form.useWatch("view_mode", { form, preserve: true });
+    const context = (0, import_useEngineContext.default)();
+    const wrapRef = (0, import_react.useRef)(null);
+    const initialValuesRef = (0, import_react.useRef)({});
+    const utils = (_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils;
+    const tableId = (0, import_react.useMemo)(() => {
+      if (props.__designMode === "design") {
+        return "designMode-mock-table-id";
+      }
+      return props.__id;
+    }, [props.__id, props.__designMode]);
+    const originColumnsMap = (0, import_react.useMemo)(
+      () => new Map(
+        columns.map((item) => [item.key, (0, import_model.formatColumn)(item)])
+      ),
+      [columns]
+    );
+    const sort = (0, import_useTransSortSetting.default)({
+      sort: propsSort,
+      originColumnsMap
     });
-  }, [utils]);
-  (0, import_react.useEffect)(() => {
-    modal.dispatch({
-      type: "setDefaultColumns",
-      payload: columns
+    const filter = (0, import_useTransFilterSetting.default)({
+      filter: propsFilter,
+      originColumnsMap
     });
-  }, [columns]);
-  (0, import_react.useEffect)(() => {
-    modal.dispatch({
-      type: "setDataSource",
-      payload: dataSource
+    const dataSourceGroup = (0, import_useTransDataSourceGroupSetting.default)({
+      dataSourceGroup: propsDataSourceGroup,
+      originColumnsMap
     });
-  }, [dataSource]);
-  (0, import_react.useEffect)(() => {
-  }, [filter]);
-  const initialValues = (0, import_react.useMemo)(
-    () => ((filter == null ? void 0 : filter.list) || []).reduce(
-      (p, c) => {
-        var _a2;
-        return {
-          ...p,
-          [c.name]: (_a2 = c == null ? void 0 : c.other) == null ? void 0 : _a2.defaultValue
-        };
-      },
-      {}
-    ),
-    [filter == null ? void 0 : filter.list]
-  );
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Form,
-    {
-      form,
-      layout: "vertical",
-      onValuesChange: (cur, values) => {
-        var _a2;
-        let _values = { ...values };
-        const currentKey = Object.keys(cur)[0];
-        if (currentKey !== "pagination") {
-          _values.pagination = {
-            ..._values.pagination,
-            page: 1
+    const currentViewMode = (0, import_react.useMemo)(() => {
+      const localCurrentMode = (0, import_utils.getCurrentViewModeFromLocalStorage)(tableId);
+      if (multiple) {
+        return viewMode || localCurrentMode;
+      }
+      return viewMode || defaultViewMode;
+    }, [viewMode, defaultViewMode, multiple]);
+    const { setTableSetting, tableSetting } = (0, import_useTableSetting.default)({
+      tableId,
+      filter,
+      columns,
+      columnSetting,
+      dataSourceGroup,
+      sort,
+      view,
+      currentViewMode,
+      gallery
+    });
+    const getIsTriggerValuesChange = (0, import_useTriggerValuesChange.default)({
+      filter,
+      columnSetting,
+      dataSourceGroup,
+      sort,
+      currentViewMode
+    });
+    (0, import_react.useEffect)(() => {
+      modal.dispatch({
+        type: "setUtils",
+        payload: utils || {}
+      });
+    }, [utils]);
+    (0, import_react.useEffect)(() => {
+      modal.dispatch({
+        type: "setDefaultColumns",
+        payload: (0, import_utils.mergeColumnSetting)({ columns, tableId, currentViewMode })
+      });
+      modal.dispatch({
+        type: "setOriginColumns",
+        payload: columns
+      });
+    }, [columns, tableId, currentViewMode]);
+    (0, import_react.useEffect)(() => {
+      modal.dispatch({
+        type: "setDataSource",
+        payload: dataSource
+      });
+      modal.dispatch({
+        type: "setOriginDataSource",
+        payload: dataSource
+      });
+    }, [dataSource]);
+    (0, import_react.useEffect)(() => {
+      modal.dispatch({
+        type: "setTableId",
+        payload: tableId
+      });
+    }, [tableId]);
+    (0, import_react.useEffect)(() => {
+      var _a2;
+      modal.dispatch({
+        type: "setLocalPagination",
+        payload: (_a2 = other == null ? void 0 : other.pagination) == null ? void 0 : _a2.localPagination
+      });
+    }, [(_b = other == null ? void 0 : other.pagination) == null ? void 0 : _b.localPagination]);
+    (0, import_react.useEffect)(() => {
+      setTimeout(() => {
+        document.body.id = "body";
+      }, 200);
+    }, [filter]);
+    const initialValues = (0, import_react.useMemo)(() => {
+      var _a2, _b2;
+      let defaultValues = ((filter == null ? void 0 : filter.list) || []).reduce(
+        (p, c) => {
+          var _a3;
+          return {
+            ...p,
+            [c.name]: (_a3 = c == null ? void 0 : c.other) == null ? void 0 : _a3.defaultValue
           };
-        } else {
-          if ((_a2 = other == null ? void 0 : other.pagination) == null ? void 0 : _a2.localPagination) {
-            return;
+        },
+        {
+          pagination: {
+            page: ((_a2 = other.pagination) == null ? void 0 : _a2.current) || 1,
+            size: ((_b2 = other.pagination) == null ? void 0 : _b2.pageSize) || 10
           }
         }
-        form.setFieldsValue({
-          pagination: _values.pagination
-        });
-        onValuesChange(cur, values);
+      );
+      defaultValues = {
+        ...defaultValues,
+        ...tableSetting
+      };
+      return defaultValues;
+    }, [
+      filter == null ? void 0 : filter.list,
+      (_c = other.pagination) == null ? void 0 : _c.localPagination,
+      tableSetting,
+      (_d = other.pagination) == null ? void 0 : _d.current,
+      (_e = other.pagination) == null ? void 0 : _e.pageSize
+    ]);
+    initialValuesRef.current = initialValues;
+    (0, import_react.useImperativeHandle)(ref, () => {
+      if (wrapRef.current) {
+        wrapRef.current.formInstance = form;
+      }
+      return wrapRef.current;
+    });
+    (0, import_react.useEffect)(() => {
+      form.resetFields();
+      form.setFieldsValue(initialValuesRef.current);
+    }, [currentViewMode, JSON.stringify(columns)]);
+    (0, import_react.useEffect)(() => {
+      form.setFieldsValue(initialValuesRef.current);
+    }, [propsFilter]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form,
+      {
+        form,
+        layout: "vertical",
+        onValuesChange: (cur, values) => {
+          var _a2;
+          let _values = {
+            ...form.getFieldsValue(true),
+            ...values.filters || {}
+          };
+          let _cur = {
+            ...cur,
+            ...cur.filters || {}
+          };
+          const currentKey = Object.keys(cur)[0];
+          if (currentKey !== "pagination") {
+            _values.pagination = {
+              ..._values.pagination,
+              page: 1
+            };
+          } else {
+            if ((_a2 = other == null ? void 0 : other.pagination) == null ? void 0 : _a2.localPagination) {
+              return;
+            }
+          }
+          setTableSetting(_values);
+          form.setFieldsValue({
+            pagination: _values.pagination
+          });
+          if (!getIsTriggerValuesChange(cur, values)) {
+            return;
+          }
+          onValuesChange == null ? void 0 : onValuesChange((0, import_utils.omit)(_cur, ["filters"]), _values);
+        },
+        className: "materials-grid-form-wrap"
       },
-      initialValues
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid", style }, /* @__PURE__ */ import_react.default.createElement(import_Header.default, { title, buttons }), /* @__PURE__ */ import_react.default.createElement(import_Actions.default, { filter, sort }), /* @__PURE__ */ import_react.default.createElement(import_Summary.default, { summary }), /* @__PURE__ */ import_react.default.createElement(import_Table.default, { tableProps: other }))
-  );
-});
-var table_default = GridView;
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid", style, ref: wrapRef }, /* @__PURE__ */ import_react.default.createElement(import_Header.default, { title, buttons }), /* @__PURE__ */ import_react.default.createElement(
+        import_Actions.default,
+        {
+          view,
+          buttons: actionButtons,
+          columnSetting,
+          dataSourceGroup,
+          filter,
+          sort,
+          tableId,
+          localPagination: (_f = other == null ? void 0 : other.pagination) == null ? void 0 : _f.localPagination,
+          gallery
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(import_Summary.default, { summary }), /* @__PURE__ */ import_react.default.createElement(
+        import_View.default,
+        {
+          ...props,
+          filter,
+          sort,
+          setTableSetting,
+          dataSourceGroup
+        }
+      ))
+    );
+  })
+);
+var table_default = (0, import_react.forwardRef)(GridView);

package/lib/components/table/index.less

@@ -1,8 +1,21 @@
+.materials-grid-form-wrap {
+  height: 100%;
+  flex: 1;
+}
 .materials-grid {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+  .pisell-lowcode-table-thead {
+    .pisell-lowcode-table-cell {
+      padding: 0 14px;
+      height: 44px;
+    }
+  }
+  .pisell-lowcode-table-cell {
+    padding: 12px;
+  }
   .pisell-lowcode-table-filter-column {
     align-items: center;
     .pisell-lowcode-dropdown-trigger {
@@ -52,4 +65,14 @@
     cursor: pointer;
     color: #7F56D9
   }
+
+  .pisell-lowcode-table-wrapper .pisell-lowcode-table.pisell-lowcode-table-bordered >.pisell-lowcode-table-container {
+    border-left: none;
+  }
+  .pisell-lowcode-table-wrapper .pisell-lowcode-table-thead tr td:first-child {
+    border-left: 1px solid #EAECF0;
+  }
+  .pisell-lowcode-table-wrapper .pisell-lowcode-table-thead tr th:first-child {
+    border-left: 1px solid #EAECF0;
+  }
 }

package/lib/components/table/model.d.ts

@@ -1,15 +1,20 @@
 /// <reference types="react" />
-import { FilterItemProps } from "./Actions/Filter/Dropdown";
+import { FilterItemProps } from "../filter/components/Dropdown";
 interface FormState {
+    tableId: string;
     dataSource: any[];
+    originDataSource: any[];
     defaultColumns: any[];
+    originColumns: any[];
+    originColumnsMap: Map<string, any>;
     currentCell: any;
     setting: any;
     quickFilter: FilterItemProps[];
     otherFilter: FilterItemProps[];
     utils: any;
+    localPagination: boolean;
 }
-export declare const Provider: (ComponentUi: any) => (props: any) => JSX.Element, Context: import("react").Context<{
+export declare const Provider: (ComponentUi: any) => (props: any, ref: any) => import("react").JSX.Element, Context: import("react").Context<{
     state: FormState;
 } & {
     dispatch: (params: {
@@ -17,4 +22,5 @@ export declare const Provider: (ComponentUi: any) => (props: any) => JSX.Element
         payload: any;
     }) => void;
 }>;
+export declare const formatColumn: (item: any) => any;
 export {};