es-grid-template 1.7.22 → 1.7.24

package/lib/table-component/hook/useColumns.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToTanStackColumns = convertToTanStackColumns;
+exports.renderValueCell = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
+var _utils = require("./utils");
+var _reactNumericComponent = require("react-numeric-component");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment"));
+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; }
+const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
+  switch (column?.type) {
+    case 'number':
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = (0, _utils.getFormat)(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const numericFormatProps = {
+        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      // }
+
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? (0, _moment.default)(value).format('yyyy') : '';
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
+    case 'datetime':
+      return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: (0, _utils.isColor)(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
+        }
+      }));
+    case 'checkbox':
+      // return (
+      //   <Checkbox
+      //     checked={!!value}
+      //
+      //   />
+      // )
+
+      return /*#__PURE__*/_react.default.createElement(_ControlCheckbox.default, {
+        column: column,
+        record: record,
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        checked: !!value,
+        checkValue: value,
+        editAble: editAble
+      });
+    case 'file':
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+exports.renderValueCell = renderValueCell;
+function convertToTanStackColumns({
+  columns,
+  expanded,
+  setExpanded,
+  expandable,
+  format,
+  editAble
+}) {
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  return columns.map(col => {
+    const {
+      headerText,
+      headerTemplate,
+      field,
+      width,
+      allowResizing,
+      minWidth,
+      template,
+      allowSorter
+    } = col;
+    const {
+      children,
+      ...restProps
+    } = col;
+    const newCol = {
+      header: () => {
+        if (headerTemplate) {
+          if (typeof headerTemplate === 'function') {
+            return headerTemplate(col);
+          } else {
+            return headerTemplate;
+          }
+        } else {
+          return headerText;
+        }
+      },
+      cell: props => {
+        const {
+          getValue,
+          cell,
+          row
+        } = props;
+        const cellValue = props.renderValue() ?? null;
+        const record = cell.row.original;
+        const colIndex = cell.column.getIndex();
+        const rowIndex = cell.row.index;
+        if (template) {
+          if (typeof template === 'function') {
+            return template({
+              field: field ?? '',
+              index: cell.row.index,
+              rowData: cell.row.original,
+              value: getValue()
+            });
+          } else {
+            return template;
+          }
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
+            className: "ui-rc-table-row-expand-trigger",
+            style: {
+              paddingLeft: `${row.depth * 25}px`
+            }
+          }, /*#__PURE__*/_react.default.createElement("div", null, row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+            // onClick: row.getToggleExpandedHandler(),
+            onClick: () => {
+              const keys = Object.keys(expanded);
+              // @ts-ignore
+              const tmp = {
+                ...expanded
+              };
+              if (keys.includes(row.id)) {
+                delete tmp[row.id];
+                setExpanded(tmp);
+              } else {
+                setExpanded(old => ({
+                  ...old,
+                  [row.id]: true
+                }));
+              }
+            },
+            style: {
+              cursor: "pointer"
+            },
+            className: "ui-rc-table-row-expand"
+          }, row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+          }) : /*#__PURE__*/_react.default.createElement("span", {
+            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+          })) : /*#__PURE__*/_react.default.createElement("span", {
+            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+          }))), renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
+        }
+      },
+      enableResizing: allowResizing !== false,
+      // enableResizing: true,
+      id: field,
+      size: width,
+      accessorKey: field ?? '',
+      sortDescFirst: false,
+      minSize: minWidth,
+      // maxSize: maxWidth,
+      enableSorting: allowSorter !== false || col.sorter !== false
+    };
+
+    // if (field) {
+    //   // @ts-ignore
+    //   newCol.accessorKey = field;
+
+    // }
+
+    if (children) {
+      // @ts-ignore
+      newCol.columns = convertToTanStackColumns(children);
+    }
+    const meta = {
+      ...restProps
+    };
+    if (Object.keys(meta).length > 0) {
+      newCol.meta = meta;
+    }
+    return newCol;
+  });
+}

package/lib/table-component/hook/useFilterOperator.d.ts

@@ -0,0 +1,7 @@
+import { Table } from '@tanstack/react-table';
+import type { FilterOperator } from '../type';
+export declare function useFilterOperator(table: Table<any>): {
+    setFilterOperator: (columnId: string, operator: FilterOperator) => void;
+    getFilterOperator: (columnId: string) => FilterOperator;
+};
+export declare function customStringFilterFn(row: any, columnId: any, filterValue: any): boolean;

package/lib/table-component/hook/useFilterOperator.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.customStringFilterFn = customStringFilterFn;
+exports.useFilterOperator = useFilterOperator;
+function useFilterOperator(table) {
+  const setFilterOperator = (columnId, operator) => {
+    const filters = table.getState().columnFilters;
+    const next = filters.map(f => f.id === columnId ? {
+      ...f,
+      operator
+    } : f);
+    table.setColumnFilters(next);
+  };
+  const getFilterOperator = columnId => {
+    const filters = table.getState().columnFilters;
+    return filters.find(f => f.id === columnId)?.operator ?? 'contains';
+  };
+  return {
+    setFilterOperator,
+    getFilterOperator
+  };
+}
+function customStringFilterFn(row, columnId, filterValue) {
+  const filters = row.table.getState().columnFilters;
+  const operator = filters.find(f => f.id === columnId)?.operator ?? 'contains';
+  const cellValue = String(row.getValue(columnId) ?? '');
+  switch (operator) {
+    case 'equal':
+      return cellValue === filterValue;
+    case 'startsWith':
+      return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
+    case 'endsWith':
+      return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
+    default:
+      return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+  }
+}

package/lib/table-component/hook/utils.d.ts

@@ -0,0 +1,121 @@
+import type { Table } from "@tanstack/react-table";
+import { type Column } from "@tanstack/react-table";
+import type { VirtualItem } from "@tanstack/react-virtual";
+import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../type";
+import { type CSSProperties } from "react";
+import dayjs from "dayjs";
+import type { IPositionCell } from "../useContext";
+export declare const newGuid: () => any;
+export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
+export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
+export declare const getCommonPinningStyles: (column: Column<any>) => CSSProperties;
+export declare const sumSize: (items: any) => number;
+export declare const appendIfNotExists: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
+export declare const getNewItemsOnly: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
+export declare const extendsObject: <T extends AnyObject = AnyObject>(...list: T[]) => AnyObject;
+export declare const isEmpty: (d: any) => boolean;
+export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: string;
+};
+export declare function convertFormat(formatStr: string): string;
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getTypeFilter: (col: any) => TypeFilter;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
+export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
+export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare function getFixedFields(columns: ColumnTable[], type: 'left' | 'right'): string[];
+export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
+export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
+export declare function isEqualSet(setA: any, setB: any): boolean;
+export declare const getLastSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
+export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare function getColIdsBetween(table: Table<any>, a: string, b: string): string[];
+export declare function getRowIdsBetween(table: Table<any>, a: string, b: string): string[];
+export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
+export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];
+export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
+export declare function updateOrInsert(dataArray: any[], dataFilter: any[]): any[];
+export declare const findItemByKey: (array: any, key: string | number, value: any) => any;
+export declare const isFormattedNumber: (str: string) => boolean;
+export declare const detectSeparators: (str: string) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+};
+export declare function isDateString(str: any): boolean;
+export declare function compareDates(date1: any, date2: any): boolean;
+export declare function compareDate(itemValue: any, value: any): boolean;
+export declare const removeVietnameseTones: (str: any) => any;
+export declare const shouldInclude: (item: any, queries: any[]) => any;
+export declare function sortData(data: any[], sorter: Sorter[]): any[];
+export declare function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined): any[];
+export declare const getAllRowKey: (data: any[]) => any[];
+export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const checkFieldKey: (key: string | undefined) => string;
+export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
+export declare const convertLabelToTitle: (data: any[]) => any[];
+export declare const isNullOrUndefined: (d: any) => boolean;
+export declare const isObjEmpty: (obj: any) => boolean;
+export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => boolean;
+export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
+export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
+export declare const getDefaultValue: (defaultValue: any) => AnyObject;
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
+export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined) => RangeState;
+export declare function addRowsDownWithCtrl(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsDown(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsUpWithCtrl(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare const convertFilters: (filters: any[]) => any[];
+export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
+export declare const getAllVisibleKeys: (columns: any[]) => any[];
+export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
+export declare function isObjEqual(obj1: any, obj2: any): boolean;