@pisell/materials 1.0.215 → 1.0.217

package/lib/components/table/Table/index.js

@@ -32,26 +32,31 @@ __export(Table_exports, {
   default: () => Table_default
 });
 module.exports = __toCommonJS(Table_exports);
-var import_hooks = require("../../../hooks");
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
 var import_ahooks = require("ahooks");
 var import_model = require("../model");
-var import_index = require("./index.less");
 var import_BasicTable = __toESM(require("../BasicTable"));
 var import_SortRow = __toESM(require("./tableConfig/SortRow"));
-var import_body = __toESM(require("./tableConfig/body"));
-var import_header = __toESM(require("./tableConfig/header"));
 var import_Pagination = require("../../Pagination");
-var import_stringFilter = __toESM(require("../TableFilter/stringFilter"));
-var import_numberFilter = __toESM(require("../TableFilter/numberFilter"));
-var import_selectFilter = __toESM(require("../TableFilter/selectFilter"));
-var import_SortIcon = __toESM(require("../TableFilter/SortIcon"));
-var GridViewTable = ({ tableProps }) => {
+var import_locales = require("../../../locales");
+var import_useTransDataSource = __toESM(require("../hooks/useTransDataSource"));
+var import_useTransColumns = __toESM(require("../hooks/useTransColumns"));
+var import_useGenTableComponents = __toESM(require("../hooks/useGenTableComponents"));
+var import_useGenScroll = __toESM(require("../hooks/useGenScroll"));
+var import_hooks = require("../../../hooks");
+var import_index = require("./index.less");
+var GridViewTable = ({ tableProps, filter, setTableSetting }) => {
+  var _a, _b;
   const responsive = (0, import_hooks.useResponsive)();
   const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
-  const { dataSource, defaultColumns } = state;
+  const form = import_antd.Form.useFormInstance();
+  const column_setting = import_antd.Form.useWatch("column_setting", { form, preserve: true }) || [];
+  const tableWrapRef = (0, import_react.useRef)(null);
+  const { height } = (0, import_ahooks.useSize)(tableWrapRef) || {};
+  const { dataSource: defaultDataSource, originDataSource } = state;
   const handleSave = (0, import_ahooks.useMemoizedFn)((row) => {
-    const newData = [...dataSource];
+    const newData = [...defaultDataSource];
     const index = newData.findIndex((item2) => row.key === item2.key);
     const item = newData[index];
     newData.splice(index, 1, {
@@ -64,73 +69,45 @@ var GridViewTable = ({ tableProps }) => {
     });
   });
   const handleResize = (index) => (e, { size }) => {
-    const nextColumns = [...defaultColumns];
+    const nextColumns = [...columns];
     nextColumns[index] = {
       ...nextColumns[index],
       width: size.width
     };
-    dispatch({
-      type: "setDefaultColumns",
-      payload: nextColumns
-    });
+    form.setFieldValue("column_setting", nextColumns);
+    setTableSetting(form.getFieldsValue());
   };
-  const columns = (0, import_react.useMemo)(() => {
-    return defaultColumns.map((col, index) => {
-      var _a;
-      if (!col.editable) {
-        return col;
-      }
-      const item = {
-        editable: col.editable || true,
-        dataIndex: col.dataIndex,
-        title: col.title,
-        field_type: col.field_type,
-        lock: col.lock,
-        width: col.width || 0,
-        action: col.action || "",
-        render: col.render,
-        contentClassName: col.contentClassName || ""
-      };
-      let filterObj = {};
-      if (col.defaultFilters) {
-        if (col.field_type === "number") {
-          filterObj = (0, import_numberFilter.default)({ dataIndex: col.dataIndex });
-        }
-        if (col.field_type === "text") {
-          filterObj = (0, import_stringFilter.default)({ dataIndex: col.dataIndex });
-        }
-      }
-      if (((_a = col.filters) == null ? void 0 : _a.length) > 0) {
-        filterObj = {
-          ...(0, import_selectFilter.default)({
-            dataIndex: col.dataIndex,
-            filters: col.filters
-          }),
-          filters: col.filters
-        };
-      }
-      return {
-        ...col,
-        ...filterObj,
-        sortIcon: (props) => /* @__PURE__ */ import_react.default.createElement(import_SortIcon.default, { ...props }),
-        onCell: (record) => ({
-          record,
-          ...item,
-          handleSave
-        }),
-        onHeaderCell: (record) => ({
-          record,
-          ...item,
-          onResize: handleResize(index)
-        })
-      };
-    });
-  }, [defaultColumns]);
+  const { columns } = (0, import_useTransColumns.default)({
+    columns: column_setting,
+    form,
+    localPagination: !!((_a = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _a.localPagination),
+    handleResize,
+    handleSave,
+    dragSort: tableProps == null ? void 0 : tableProps.dragSort
+  });
+  const dataSource = (0, import_useTransDataSource.default)({
+    dataSource: originDataSource,
+    form,
+    localPagination: !!((_b = tableProps == null ? void 0 : tableProps.pagination) == null ? void 0 : _b.localPagination),
+    rowKey: tableProps.rowKey,
+    filter
+  });
+  const components = (0, import_useGenTableComponents.default)({
+    form
+  });
+  const scroll = (0, import_useGenScroll.default)({
+    wrapHeight: height || 500,
+    scroll: tableProps.scroll,
+    columns
+  });
   const showTotal = (0, import_react.useCallback)(
     (total, range, pageSize) => {
       let start = range[0] - 1;
       let _current = start / pageSize + 1;
-      return `Page ${_current} of ${Math.ceil(total / pageSize)}`;
+      return (0, import_locales.getText)("table-pagination-total")(
+        _current,
+        Math.ceil(total / pageSize)
+      );
     },
     []
   );
@@ -144,28 +121,24 @@ var GridViewTable = ({ tableProps }) => {
       showTotal
     };
   }, [responsive, tableProps.pagination]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-table-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_SortRow.default, null, /* @__PURE__ */ import_react.default.createElement(
-    import_BasicTable.default,
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "materials-grid-table-wrap", ref: tableWrapRef }, /* @__PURE__ */ import_react.default.createElement(
+    import_SortRow.default,
     {
-      dataSource,
-      columns,
-      className: "grid-view-table",
-      components: {
-        header: {
-          row: import_header.default.Row,
-          cell: import_header.default.Cell
-        },
-        body: {
-          row: import_body.default.Row,
-          cell: import_body.default.Coll
-        }
-      },
-      ...tableProps,
-      scroll: {
-        x: "max-content"
-      },
-      pagination: _paginationConfig
-    }
-  )));
+      rowKey: tableProps.rowKey,
+      onSortChange: tableProps.onSortChange
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_BasicTable.default,
+      {
+        dataSource,
+        columns,
+        className: "grid-view-table",
+        components,
+        ...tableProps,
+        scroll,
+        pagination: _paginationConfig
+      }
+    )
+  ));
 };
-var Table_default = GridViewTable;
+var Table_default = (0, import_react.memo)(GridViewTable);

package/lib/components/table/Table/index.less

@@ -7,9 +7,16 @@
   .grid-view-table {
     // margin-top: 20px;
     // width: max-content;
-
   }
 
+  .pisell-lowcode-table-group-row-wrap {
+    .pisell-lowcode-table-cell {
+      margin-top: 12px;
+    }
+  }
+}
 
-
-}
+.materials-grid-table-wrap {
+  flex: 1;
+  overflow: auto;
+}

package/lib/components/table/Table/tableConfig/SortRow/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import "./index.less";
-declare const SortRow: ({ children }: any) => JSX.Element;
+declare const SortRow: ({ children, rowKey, onSortChange }: any) => React.JSX.Element;
 export default SortRow;

package/lib/components/table/Table/tableConfig/SortRow/index.js

@@ -32,24 +32,58 @@ __export(SortRow_exports, {
   default: () => SortRow_default
 });
 module.exports = __toCommonJS(SortRow_exports);
-var import_hooks = require("../../../../../hooks");
-var import_model = require("../../../model");
-var import_index = require("./index.less");
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
 var import_core = require("@dnd-kit/core");
 var import_modifiers = require("@dnd-kit/modifiers");
 var import_sortable = require("@dnd-kit/sortable");
-var SortRow = ({ children }) => {
+var import_utils2 = require("../../utils");
+var import_hooks = require("../../../../../hooks");
+var import_model = require("../../../model");
+var import_index = require("./index.less");
+var SortRow = ({ children, rowKey, onSortChange }) => {
   const { state, dispatch } = (0, import_hooks.useSharedState)(import_model.Context);
-  const { dataSource } = state;
-  const onDragEnd = ({ active, over }) => {
+  const { originDataSource } = state;
+  const oldOriginDataSource = (0, import_react.useRef)(null);
+  const onDragEnd = async ({ active, over }) => {
     if (active.id !== (over == null ? void 0 : over.id)) {
+      const activeIndex = originDataSource.findIndex(
+        (i) => (0, import_utils2.getIdByRowKey)(i, rowKey) === active.id
+      );
+      const overIndex = originDataSource.findIndex(
+        (i) => (0, import_utils2.getIdByRowKey)(i, rowKey) === (over == null ? void 0 : over.id)
+      );
+      const newData = (0, import_sortable.arrayMove)(originDataSource, activeIndex, overIndex);
+      dispatch({
+        type: "setOriginDataSource",
+        payload: newData
+      });
+      if ((0, import_utils.isFunction)(onSortChange)) {
+        oldOriginDataSource.current = originDataSource;
+        const isError = await onSortChange({
+          fromIndex: activeIndex,
+          toIndex: overIndex,
+          dataSource: newData,
+          fromId: active.id,
+          toId: over == null ? void 0 : over.id,
+          fromItem: originDataSource[activeIndex],
+          toItem: originDataSource[overIndex]
+        });
+        if (isError) {
+          dispatch({
+            type: "setOriginDataSource",
+            payload: oldOriginDataSource.current
+          });
+        } else {
+          oldOriginDataSource.current = null;
+        }
+      }
     }
   };
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid-view-table-wrap" }, /* @__PURE__ */ import_react.default.createElement(import_core.DndContext, { modifiers: [import_modifiers.restrictToVerticalAxis], onDragEnd }, /* @__PURE__ */ import_react.default.createElement(
     import_sortable.SortableContext,
     {
-      items: dataSource.map((i) => i.key),
+      items: originDataSource.map((i) => (0, import_utils2.getIdByRowKey)(i, rowKey)),
       strategy: import_sortable.verticalListSortingStrategy
     },
     children

package/lib/components/table/Table/tableConfig/body/CellContent/index.less

@@ -6,7 +6,6 @@
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  padding: 12px;
 
   &.focus {
     box-shadow: rgb(22, 110, 225) 0px 0px 0px 1px !important;

package/lib/components/table/Table/tableConfig/body/CellProvider/index.js

@@ -52,7 +52,8 @@ var CellProvider = (props) => {
     handleSave,
     render
   } = props;
-  if (render) {
+  const { __is_group } = record || {};
+  if (render || __is_group) {
     return children;
   }
   const [editing, setEditing] = (0, import_react.useState)(false);

package/lib/components/table/Table/tableConfig/body/CellProvider/index.less

@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  padding: 12px;
+  padding: 0;
 
   &.focus {
     box-shadow: var(--theme-color) 0px 0px 0px 1px !important;

package/lib/components/table/Table/tableConfig/body/index.d.ts

@@ -8,11 +8,14 @@ interface Item {
     age: string;
     address: string;
 }
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     index: number;
     "data-row-key": string;
+    __is_group?: boolean;
+    __table_group_field?: string;
+    __table_data_source_children?: Record<string, any>[];
 }
-interface EditableCellProps {
+export interface EditableCellProps {
     title: React.ReactNode;
     editable: boolean;
     children: React.ReactNode;

package/lib/components/table/Table/tableConfig/body/index.js

@@ -34,16 +34,67 @@ __export(body_exports, {
 });
 module.exports = __toCommonJS(body_exports);
 var import_antd = require("antd");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_icons = require("@ant-design/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_CellProvider = __toESM(require("./CellProvider"));
+var import_locales = require("../../../../../locales");
 var import_index = require("./index.less");
 var EditableContext = import_react.default.createContext(
   null
 );
-var EditableRow = ({ index, ...props }) => {
+var EditableRow = ({
+  index,
+  __is_group,
+  children,
+  // __table_group_field,
+  // __table_data_source_children,
+  ...props
+}) => {
   const [form] = import_antd.Form.useForm();
-  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, component: false }, /* @__PURE__ */ import_react.default.createElement(EditableContext.Provider, { value: form }, /* @__PURE__ */ import_react.default.createElement("tr", { ...props })));
+  const parentForm = import_antd.Form.useFormInstance();
+  const order_by = import_antd.Form.useWatch("order_by", parentForm);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({
+    id: props["data-row-key"]
+  });
+  const style = {
+    ...props.style,
+    transform: import_utilities.CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
+    transition,
+    ...isDragging ? { position: "relative", zIndex: 9999 } : {}
+  };
+  const cells = (0, import_react.useMemo)(() => {
+    if (__is_group) {
+      return children;
+    }
+    return import_react.default.Children.map(children, (child) => {
+      if (child.key === "__sort") {
+        const handleIcon = order_by ? /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: (0, import_locales.getText)("table-column-drag-sort-disabled-tip") }, /* @__PURE__ */ import_react.default.createElement(import_icons.MenuOutlined, { style: { touchAction: "none", cursor: "move" } })) : /* @__PURE__ */ import_react.default.createElement(
+          import_icons.MenuOutlined,
+          {
+            ref: setActivatorNodeRef,
+            style: { touchAction: "none", cursor: "move" },
+            ...listeners
+          }
+        );
+        return import_react.default.cloneElement(child, {
+          children: handleIcon
+        });
+      }
+      return child;
+    });
+  }, [__is_group, children, order_by, setActivatorNodeRef, listeners]);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, component: false }, /* @__PURE__ */ import_react.default.createElement(EditableContext.Provider, { value: form }, __is_group && /* @__PURE__ */ import_react.default.createElement("tr", { style: { height: 12 } }), /* @__PURE__ */ import_react.default.createElement("tr", { ...props, ref: setNodeRef, style, ...attributes }, cells)));
 };
 var EditableCell = (props) => {
   const {

package/lib/components/table/Table/tableConfig/body/index.less

@@ -5,6 +5,6 @@
 
 .materials-grid-table-cell {
   height: 1px;
-  padding: 0 !important;
+  padding: 12px;
 
 }

package/lib/components/table/Table/tableConfig/header/CellProvider/index.less

@@ -2,7 +2,7 @@
   height: 44px;
   display: flex;
   align-items: center;
-  padding: 0 14px;
+  padding: 0;
 
   .field-icon {
     font-size: 18px;

package/lib/components/table/Table/tableConfig/header/index.d.ts

@@ -1,6 +1,6 @@
 import "react-resizable/css/styles.css";
 import React from "react";
-interface CustomHeaderCellProps {
+export interface CustomHeaderCellProps {
     children: React.ReactNode;
     dataIndex: any;
     record: object;

package/lib/components/table/Table/tableConfig/summary/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const summary: (props: any) => JSX.Element;
+import React from "react";
+declare const summary: (props: any) => React.JSX.Element;
 export default summary;

package/lib/components/table/Table/utils.d.ts

@@ -1 +1,146 @@
+import { GroupValue } from "../Actions/component/Group/PopoverContent";
+import { FilterItemProps, FilterType } from "../../filter/types";
+import { ColumnSettingType, DataSourceGroupType, GallerySettingValueType, ModeType, SortType } from "../types";
 export declare const calcFilterSort: ({ dataSource, filter, sort, columns }: any) => any;
+/**
+ * 合并列设置
+ * @param defaultColumns 默认列设置
+ * @param tableId 表ID
+ * @returns 合并后的列设置
+ */
+export declare const mergeColumnSetting: ({ columns, tableId, currentViewMode, }: {
+    columns: Record<string, any>[];
+    tableId?: string | undefined;
+    currentViewMode: ModeType;
+}) => Record<string, any>[];
+/**
+ * 对数据源进行排序
+ * @param dataSource 数据源数组
+ * @param sortObj 排序对象，包含排序的键、值和类型
+ * @returns 排序后的数据源数组
+ */
+export declare const sortDataSource: (dataSource: Record<string, any>[], sortObj: {
+    sortKey: string;
+    sortValue: "asc" | "desc";
+    sortType: "date" | "string" | "number";
+}) => Record<string, any>[];
+/**
+ * 根据行键获取 ID
+ * @param item 记录对象
+ * @param rowKey 行键，可以是字符串或函数
+ * @returns 返回 ID
+ */
+export declare const getIdByRowKey: (item: Record<string, any>, rowKey: string | ((params: any) => string)) => any;
+/**
+ * 根据分组条件对数据源进行分组
+ * @param dataSource 数据源
+ * @param group 分组条件
+ * @param rowKey 行键生成函数或字符串
+ * @returns 返回分组后的数据源
+ */
+export declare const groupDataSource: (dataSource: Record<string, any>[], group: GroupValue, rowKey: string | ((params: any) => string)) => Record<string, any>[];
+declare type ViewSetting = {
+    order_by: string;
+    group_by: GroupValue;
+    column_setting: Record<string, any>[];
+    gallery_setting: GallerySettingValueType;
+    filters: any;
+    filter_setting: {
+        quickFilter: FilterItemProps[];
+        otherFilter: FilterItemProps[];
+    };
+};
+/**
+ * 本地存储的表格设置对象
+ */
+declare type TableSettingObjType = {
+    view_mode: ModeType;
+} & {
+    [K in ModeType]: ViewSetting;
+};
+/**
+ * 将表格设置保存到本地存储
+ * @param tableId 表格id
+ * @param tableSettingObj 表格设置对象
+ */
+export declare const setTableSettingToLocalStorage: ({ tableId, tableSettingObj, currentViewMode, }: {
+    tableId: string;
+    tableSettingObj: Partial<ViewSetting & {
+        view_mode: ModeType;
+    }>;
+    currentViewMode: ModeType;
+}) => void;
+/**
+ * 从本地存储中获取表格设置, 全部配置
+ * @param tableId 表格ID
+ * @returns 表格设置对象
+ */
+export declare const getTableSettingFromLocalStorage: (tableId?: string) => Partial<TableSettingObjType>;
+/**
+ * 从LocalStorage读取表当前视图模式
+ * @param tableId
+ */
+export declare const getCurrentViewModeFromLocalStorage: (tableId?: string) => ModeType | undefined;
+/**
+ * 根据视图模式获取配置
+ * @param tableId
+ * @param currentViewMode
+ */
+export declare const getTableSettingByCurrentViewMode: (tableId: string, currentViewMode: ModeType) => ViewSetting | undefined;
+/**
+ * 将表单值保存到本地存储中
+ * @param tableId 表单ID
+ * @param allValues 表单所有值
+ * @param keys 存储的键名
+ */
+export declare const setFormValuesToLocalStorage: ({ tableId, allValues, keys, currentViewMode, }: {
+    tableId?: string | undefined;
+    allValues?: Record<string, any> | undefined;
+    keys?: string[] | undefined;
+    currentViewMode: ModeType;
+}) => void;
+/**
+ * 合并筛选设置
+ * @param list 列表数据
+ * @param quickFilterMaxLength 快速筛选最大长度
+ * @param tableId 表ID
+ * @returns 返回合并后的筛选设置
+ */
+export declare const mergeFilterSetting: ({ list, quickFilterMaxLength, tableId, sortButtonShow, currentViewMode, }: {
+    list: FilterItemProps[];
+    quickFilterMaxLength: number;
+    tableId?: string | undefined;
+    sortButtonShow: boolean;
+    currentViewMode: ModeType;
+}) => {
+    quickFilter: FilterItemProps[];
+    otherFilter: FilterItemProps[];
+    notSortFilter: FilterItemProps[];
+};
+/**
+ * 过滤数据源
+ * @param dataSource 数据源
+ * @param filters 过滤条件
+ * @param filterLocalArr 本地过滤项
+ * @returns 过滤后的数据源
+ */
+export declare const filterDataSource: (dataSource: Record<string, any>[], filters: Record<string, any>, filterLocalArr: FilterItemProps[]) => Record<string, any>[];
+/**
+ * 根据模式获取设置键数组
+ * @param filter 筛选器
+ * @param columnSetting 列设置
+ * @param dataSourceGroup 数据源分组
+ * @param sort 排序
+ * @param mode 模式，可选值为 "localStorage" 或 "remote"
+ * @returns 返回设置键数组
+ */
+export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourceGroup, sort, mode, currentViewMode, }: {
+    filter?: FilterType | undefined;
+    columnSetting?: ColumnSettingType | undefined;
+    dataSourceGroup?: DataSourceGroupType | undefined;
+    sort?: SortType | undefined;
+    mode: "" | "localStorage" | "remote";
+    currentViewMode: ModeType;
+}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
+export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
+export {};