es-grid-template 1.2.0 → 1.2.2

package/lib/grid-component/hooks/useColumns.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SELECTION_COLUMN = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _antd = require("antd");
+var _rcMasterUi = require("rc-master-ui");
+var _utils = require("./utils");
+var _constant = require("./constant");
+var _columns = require("./columns");
+var _icons = require("@ant-design/icons");
+var _becoxyIcons = require("becoxy-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _HeaderContent = _interopRequireDefault(require("./content/HeaderContent"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type {Key} from 'react';
+
+// import Command from "../Command";
+
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
+
+// const EMPTY_LIST: React.Key[] = [];
+
+const useColumns = config => {
+  // const {
+  //   preserveSelectedRowKeys,
+  //   selectedRowKeys,
+  //   defaultSelectedRowKeys,
+  //   onSelectMultiple,
+  //   columnWidth: selectionColWidth,
+  //   type: selectionType,
+  //   selections,
+  //   fixed,
+  // } = rowSelection || {};
+
+  const {
+    t,
+    dataSourceFilter,
+    buddhistLocale,
+    locale,
+    sortMultiple,
+    format,
+    handleResize,
+    groupAble,
+    groupColumns,
+    groupSetting
+  } = config;
+
+  // ====================== Selections ======================
+
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+  };
+  const getColumnSearchProps = (0, _react.useCallback)(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      // close,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      const type = (0, _utils.getTypeFilter)(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(_rcMasterUi.Select, {
+        options: (0, _constant.translateOption)(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(_antd.Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(_antd.Button, {
+        type: "primary",
+        onClick: () => {
+          confirm({
+            closeDropdown: false
+          });
+          handleSearch(selectedKeys, confirm);
+        },
+        icon: /*#__PURE__*/React.createElement(_icons.SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
+        }
+      }, t ? t("Clear") : 'Clear')));
+    },
+    filterIcon: filtered => /*#__PURE__*/React.createElement(_becoxyIcons.FilterFill, {
+      fontSize: 12
+      // onClick={() => {
+      //   onFilterClick?.(column, onFilterCallback)
+      // }}
+      ,
+      style: {
+        color: filtered ? '#E3165B' : '#283046'
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [buddhistLocale, dataSourceFilter, locale, t]);
+
+  // ======================= Columns ========================
+  const transformColumns = (0, _react.useCallback)(columns => {
+    // >>>>>>>>>>> Support selection
+    const cloneColumns = [...columns];
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+
+    // ===================== Render =====================
+
+    const convertColumns = cols => {
+      return cols.map(col => {
+        const colIndex = (0, _columns.flatColumns2)(cols).findIndex(it => it.field === col.field);
+        if (col === SELECTION_COLUMN) {
+          return SELECTION_COLUMN;
+        }
+        const transformedColumn = {
+          ...col,
+          dataIndex: col.field ?? col.dataIndex,
+          key: col.field ?? col.dataIndex ?? col.key,
+          // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+          // title: () => (<span>aaa</span>),
+          title: () => /*#__PURE__*/React.createElement(_HeaderContent.default, {
+            column: {
+              ...col
+            },
+            t: t
+          }),
+          // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
+          ellipsis: col.ellipsis !== false,
+          align: col.textAlign ?? col.align,
+          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+        };
+        if (transformedColumn.children && transformedColumn.children?.length) {
+          return {
+            ...transformedColumn,
+            children: convertColumns(transformedColumn.children)
+          };
+        }
+        if (["index", "#"].includes(col.field)) {
+          return {
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number'
+            }),
+            render: (_, __, rowIndex) => rowIndex + 1
+          };
+        }
+        if (col.key === 'command') {
+          return {
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number',
+              style: {
+                padding: '2px 8px'
+              }
+            })
+          };
+        }
+        return {
+          ...transformedColumn,
+          ...(transformedColumn.allowFiltering === false ? {} : {
+            ...getColumnSearchProps(col)
+          }),
+          sorter: col.sorter === false ? undefined : {
+            compare: a => a,
+            multiple: sortMultiple ? colIndex : undefined
+          },
+          sortIcon: args => {
+            const {
+              sortOrder
+            } = args;
+            return /*#__PURE__*/React.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
+              fontSize: 15,
+              style: {
+                display: 'flex',
+                opacity: 0,
+                marginLeft: 4
+              },
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: true
+              })
+            }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === ASCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
+              fontSize: 15,
+              color: '#000'
+            })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
+              className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === DESCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(_becoxyIcons.ArrowDown, {
+              fontSize: 15,
+              color: '#000'
+            })));
+          },
+          onHeaderCell: () => ({
+            width: col.width,
+            onResize: handleResize?.(col)
+          }),
+          onCell: data => {
+            return {
+              colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
+              zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
+              className: (0, _classnames.default)('', {
+                'cell-group': data.children,
+                'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
+              })
+            };
+          },
+          render: (value, record, rowIndex) => {
+            if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+              if (record.children) {
+                return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+              }
+              if (groupColumns?.includes(col.field)) {
+                return '';
+              }
+              return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+            }
+            if (col.field === firstNonGroupColumn?.field && record.children) {
+              const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
+              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format));
+            }
+            return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+          },
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+        };
+      });
+    };
+    return convertColumns(cloneColumns);
+  }, [format, getColumnSearchProps, groupAble, groupColumns, groupSetting, handleResize, sortMultiple, t]);
+  return [transformColumns];
+};
+var _default = exports.default = useColumns;

package/lib/grid-component/hooks/utils.d.ts

@@ -5,6 +5,7 @@ import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../typ
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
+import type { ColumnsTable } from "./../index";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
@@ -19,6 +20,7 @@ export declare const getAllVisibleKeys: (columns: any[]) => any[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -38,6 +40,29 @@ export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'nu
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
-export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: keyof RecordType, data?: RecordType[]) => RecordType[];
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
 export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;
+export declare const getDefaultValue: (defaultValue: any) => AnyObject;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
+export declare const findItemByKey: (array: any, key: string | number, value: any) => any;
+export declare const getLastSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getFirstSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getRowsPasteIndex: (pasteRows: any) => number[];
+export declare function addRows8(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
+export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];