es-grid-template 1.7.23 → 1.7.25

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

@@ -0,0 +1,169 @@
+import React, { Fragment } from 'react';
+import ControlCheckbox from "../components/ControlCheckbox";
+import { checkDecimalSeparator, checkThousandSeparator, getFormat, isColor, isEmpty, sortByType } from "./utils";
+import { numericFormatter } from 'react-numeric-component';
+import dayjs from 'dayjs';
+import moment from 'moment';
+export 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 = 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: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: 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 = !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 !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? moment(value).format('yyyy') : '';
+      return /*#__PURE__*/React.createElement(Fragment, null, year);
+    case 'datetime':
+      return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: isColor(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
+        }
+      }));
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(ControlCheckbox, {
+        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;
+  }
+};
+export function convertToTanStackColumns({
+  t,
+  columns,
+  // expanded,
+  // setExpanded,
+  // expandable,
+  format,
+  editAble
+}) {
+  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
+
+  return sortByType(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 t ? t(headerText) : headerText;
+        }
+      },
+      cell: props => {
+        const {
+          getValue,
+          cell
+        } = 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.createElement(Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
+        }
+      },
+      enableResizing: allowResizing !== false,
+      enableHiding: false,
+      // enableResizing: true,
+      id: field,
+      size: width,
+      accessorKey: field ?? '',
+      sortDescFirst: false,
+      minSize: minWidth,
+      // maxSize: maxWidth,
+      enableSorting: allowSorter !== false || col.sorter !== false
+    };
+    if (children) {
+      // @ts-ignore
+      newCol.columns = convertToTanStackColumns({
+        columns: children,
+        editAble,
+        format,
+        t
+      });
+    }
+    const meta = {
+      ...restProps
+    };
+    if (Object.keys(meta).length > 0) {
+      newCol.meta = meta;
+    }
+    return newCol;
+  });
+}

package/es/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/es/table-component/hook/useFilterOperator.js

@@ -0,0 +1,33 @@
+export 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
+  };
+}
+export 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/es/table-component/hook/utils.d.ts

@@ -0,0 +1,133 @@
+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";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { TreeDataNode } from "antd";
+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 const getAllVisibleKeys1: (columns: ColumnTable[]) => any[];
+export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
+export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
+export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function isObjEqual(obj1: any, obj2: any): boolean;
+export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
+export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];
+export declare const updateColumns1: (columns: ColumnTable[], includes: string[]) => ColumnTable[];
+export declare const convertToObj: (arr: any) => {
+    [k: string]: any;
+};
+export declare const getDiffent2Array: (a: any[], b: any[]) => any[];