es-grid-template 1.8.64 → 1.8.66

package/es/table-virtuoso/hook/constant.js

@@ -0,0 +1,240 @@
+export const defaultWidth = 100;
+export const defaultRowHeight = 35;
+export const numberOperator = [{
+  value: 'equal',
+  label: 'Equal',
+  key: '=='
+}, {
+  value: 'greaterthan',
+  label: 'Greater than',
+  key: '>'
+}, {
+  value: 'greaterthanorequal',
+  label: 'Greater than or equal',
+  key: '>='
+}, {
+  value: 'lessthan',
+  label: 'Less than',
+  key: '<'
+}, {
+  value: 'lessthanorequal',
+  label: 'Less than or equal',
+  key: '<='
+}, {
+  value: 'notequal',
+  label: 'Not equal',
+  key: '!='
+}];
+export const stringOperator = [{
+  value: 'startswith',
+  key: '_=',
+  label: 'Starts with'
+}, {
+  value: 'endswith',
+  key: '|=',
+  label: 'Ends with'
+}, {
+  value: 'contains',
+  key: '~=',
+  label: 'Contains'
+}, {
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}];
+export const dateOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less than'
+}];
+export const dateTimeOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}, {
+  value: 'greaterthan',
+  key: '>',
+  label: 'Greater than'
+}, {
+  value: 'lessthan',
+  key: '<',
+  label: 'Less than'
+}];
+export const booleanOperator = [{
+  value: 'equal',
+  key: '==',
+  label: 'Equal'
+}, {
+  value: 'notequal',
+  key: '!=',
+  label: 'Not equal'
+}];
+export const translateOption = (options, t) => {
+  if (!t) {
+    return options;
+  }
+  return options.map(it => ({
+    ...it,
+    label: t(it.label)
+  }));
+};
+export const transferFontSize = {
+  6: 8,
+  7: 9,
+  8: 11,
+  9: 12,
+  10: 13,
+  11: 15,
+  12: 16,
+  13: 17,
+  14: 19,
+  15: 20,
+  16: 21,
+  17: 23,
+  18: 24,
+  19: 25,
+  20: 27,
+  21: 28,
+  22: 29,
+  24: 32,
+  26: 35,
+  27: 36,
+  28: 37
+};
+export const defaultDateFormat = 'd/m/Y';
+export const defaultDateTimeFormat = 'd/m/Y H:i';
+export const defaultTimeFormat = 'H:i';
+export const defaultPageSizes = [20, 30, 50, 100];
+export const alignToFlex = {
+  center: 'center',
+  left: 'start',
+  right: 'end'
+};
+export const optionsSize = [{
+  label: 'letter',
+  value: 'letter',
+  width: 21.59,
+  height: 27.94
+}, {
+  label: 'A3',
+  value: 'a3',
+  width: 27.94,
+  height: 42
+}, {
+  label: 'A4',
+  value: 'a4',
+  width: 21,
+  height: 29.7
+}];
+export const paperSize = {
+  a4: {
+    width: 21,
+    height: 29.7
+  },
+  a3: {
+    width: 27.94,
+    height: 42
+  },
+  letter: {
+    width: 21.59,
+    height: 27.94
+  }
+};
+export const optionFont = [{
+  value: 'Times New Roman',
+  label: 'Times New Roman'
+}, {
+  value: 'Calibri',
+  label: 'Calibri (Body)'
+}];
+// portrait' | 'landscape'
+export const optionsPaperOrientation = [{
+  value: 'portrait',
+  label: 'portrait'
+}, {
+  value: 'landscape',
+  label: 'landscape'
+}];
+export const optionFontSize = [{
+  value: 8,
+  label: '8'
+}, {
+  value: 9,
+  label: '9'
+}, {
+  value: 10,
+  label: '10'
+}, {
+  value: 11,
+  label: '11'
+}, {
+  value: 12,
+  label: '12'
+}, {
+  value: 13,
+  label: '13'
+}, {
+  value: 14,
+  label: '14'
+}, {
+  value: 16,
+  label: '16'
+}, {
+  value: 18,
+  label: '18'
+}, {
+  value: 24,
+  label: '24'
+}, {
+  value: 36,
+  label: '36'
+}, {
+  value: 48,
+  label: '48'
+}];
+
+/**
+ * Sort order for BaseTable
+ */
+const SortOrder = {
+  /**
+   * Sort data in ascending order
+   */
+  ascend: 'Ascending',
+  /**
+   * Sort data in descending order
+   */
+  descend: 'Descending'
+};
+export default SortOrder;
+export const valueToBoolean = {
+  true: true,
+  false: false,
+  1: true,
+  0: false
+};
+export const booleanToValue = {
+  true: 1,
+  false: 0
+};
+export const nonActionColumn = ['#', 'command', 'selection_column'];

package/es/table-virtuoso/hook/convert.d.ts

@@ -0,0 +1 @@
+export declare function convertColumns(columns: any[]): any[];

package/es/table-virtuoso/hook/convert.js

@@ -0,0 +1,28 @@
+import { createColumnHelper } from '@tanstack/react-table';
+const columnHelper = createColumnHelper();
+export function convertColumns(columns) {
+  return columns.map(col => {
+    if (col.columns) {
+      // Group column
+      return columnHelper.group({
+        ...col,
+        columns: convertColumns(col.columns) // đệ quy
+      });
+    } else {
+      // Accessor column
+      let accessor;
+
+      // Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
+      if (col.accessorKey) {
+        accessor = col.accessorKey;
+      } else if (col.id) {
+        accessor = row => row[col.id];
+      } else {
+        throw new Error('Column không có accessorKey hoặc id');
+      }
+      return columnHelper.accessor(accessor, {
+        ...col
+      });
+    }
+  });
+}

package/es/table-virtuoso/hook/useColumns.d.ts

@@ -0,0 +1,28 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../table-component/type';
+import type { Cell, ColumnDef } from '@tanstack/react-table';
+export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+    t?: any;
+    columns: ColumnsTable<T>;
+    format?: IFormat;
+    editAble?: boolean;
+}): ColumnDef<T, any>[];
+export type ToggleRow<T> = {
+    e: any;
+    cell: Cell<T, unknown>;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+};
+export declare const toggleRowSelection: <T>(props: ToggleRow<T>) => void;

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

@@ -0,0 +1,302 @@
+import React, { Fragment } from 'react';
+// import ControlCheckbox from '../components/ControlCheckbox'
+import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
+import { numericFormatter } from 'react-numeric-component';
+import dayjs from 'dayjs';
+import moment from 'moment';
+import ControlCheckbox from "../../table-component/components/ControlCheckbox";
+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,
+  format,
+  editAble
+}) {
+  return sortByType(columns).map(col => {
+    const {
+      headerText,
+      headerTemplate,
+      field,
+      width,
+      allowResizing,
+      minWidth,
+      template,
+      allowSortering,
+      allowFiltering
+    } = 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;
+          // return field
+        }
+      },
+      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: allowSortering !== false,
+      // enableSorting: false,
+      // enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
+      enableColumnFilter: allowFiltering !== false
+    };
+    if (children) {
+      newCol.size = undefined;
+      // @ts-ignore
+      newCol.columns = convertToTanStackColumns({
+        columns: children,
+        editAble,
+        format,
+        t
+      });
+    }
+    const meta = {
+      ...restProps
+    };
+    if (Object.keys(meta).length > 0) {
+      newCol.meta = meta;
+    }
+    return newCol;
+  });
+}
+export const toggleRowSelection = props => {
+  const {
+    selectionSettings,
+    cell,
+    isSelectionChange,
+    e,
+    setIsSelectionChange
+  } = props;
+  const {
+    row
+  } = cell;
+  const {
+    rowsData
+  } = isSelectionChange ?? {};
+  const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
+  if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // xóa row ra list selected 
+      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      const checkedRows = [...prevSelected, row];
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
+      });
+    }
+    return;
+  }
+  if (row.subRows && row.subRows.length > 0) {
+    // click vào row cha
+
+    const allChild = getAllChildren(row);
+    toggleRowAndChildren(row, !row.getIsSelected());
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+      const newRowsSelected = excludeItems(prevSelected, [...allChild, row]);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      if (row.subRows && row.subRows.length > 0) {
+        checkedRows = [...prevSelected, row, ...allChild];
+      } else {
+        checkedRows = [...prevSelected, row];
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  } else {
+    // click vào row không có cha
+
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      const rowParent = row.getParentRow();
+      // const rowParent1 = row.getParentRows()
+
+      let newCheckedRows = [];
+      if (rowParent) {}
+      if (rowParent && countUnselectedChildren(row) === 1) {
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
+      } else {
+        // xóa row ra list selected 
+        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newCheckedRows ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      const rowParent = row.getParentRow();
+
+      // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
+      if (rowParent && !rowParent.getIsSelected() && countUnselectedChildren(row) === 1) {
+        rowParent.toggleSelected(!rowParent.getIsSelected());
+        checkedRows = [...prevSelected, row, rowParent];
+      } else {
+        // chỉ thêm vào row hiện tại
+
+        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
+        if (isInclude > -1) {
+          // cập nhật data row hiện tại
+
+          prevSelected[isInclude] = row;
+          checkedRows = [...prevSelected];
+        } else {
+          checkedRows = [...prevSelected, row];
+        }
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  }
+};

package/es/table-virtuoso/hook/useFilterOperator.d.ts

@@ -0,0 +1,7 @@
+import type { Table } from '@tanstack/react-table';
+import type { FilterOperator } from '../../table-component/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-virtuoso/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());
+  }
+}