es-grid-template 0.0.8 → 0.0.13

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

@@ -0,0 +1,435 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flatColumns = flatColumns;
+exports.renderFilter = exports.renderContent = exports.getValueCell = void 0;
+var _utils = require("../utils");
+var _reactNumericComponent = require("react-numeric-component");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment/moment"));
+var _react = _interopRequireWildcard(require("react"));
+var _rcMasterUi = require("rc-master-ui");
+var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
+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 * as React from 'react'
+
+const {
+  RangePicker
+} = _rcMasterUi.DatePicker;
+function flatColumns(columns, parentKey = 'key') {
+  // @ts-ignore
+  return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
+    const {
+      fixed
+    } = column;
+    // Convert `fixed='true'` to `fixed='left'` instead
+    const parsedFixed = fixed === true ? 'left' : fixed;
+    const mergedKey = `${parentKey}-${index}`;
+    const subColumns = column.children;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
+        fixed: parsedFixed,
+        ...subColum
+      }))];
+    }
+    return [...list, {
+      key: mergedKey,
+      ...column,
+      fixed: parsedFixed
+    }];
+  }, []);
+}
+const getValueCell = (column, value, format) => {
+  switch (column?.type) {
+    case 'number':
+      const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
+      const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
+      const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
+      const content = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
+      const numericFormatProps = {
+        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
+        prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
+        suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
+        decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
+        fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+      };
+      return !(0, _utils.isEmpty)(content) ? (0, _reactNumericComponent.numericFormatter)(content, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? 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(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (0, _utils.isColor)(value) ? /*#__PURE__*/_react.default.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: value,
+          border: '1px solid #f0f0f0'
+        }
+      }) : '');
+    case 'checkbox':
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
+        checked: !!content,
+        readOnly: true,
+        type: "checkbox"
+      });
+    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.getValueCell = getValueCell;
+const renderContent = (column, value, record, index, format) => {
+  const cellValue = value instanceof Date ? (0, _utils.getDateString)(column, value) : value;
+  const content = getValueCell(column, cellValue, format);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
+};
+exports.renderContent = renderContent;
+const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
+  const type = (0, _utils.getTypeFilter)(column);
+  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const options = find ? find.data : [];
+  switch (type) {
+    case 'Number':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        // allowNegative={col.format && col.format.allowNegative === true}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: values => {
+          // onChangeValueFilter(type, values.floatValue)
+          setSelectedKeys(values.floatValue || values.floatValue === 0 ? [values.floatValue] : []);
+        }
+      }))));
+    case 'NumberRange':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1 d-flex flex-column gap-1'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[0]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control'
+        // onValueChange={(values: any) => {
+        //   onChangeValueFilter(type, values.floatValue, 'min')
+        // }}
+        ,
+        placeholder: 'Min',
+        autoFocus: true
+      })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+        value: selectedKeys[1]
+        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+        ,
+        allowNegative: true,
+        customInput: _rcMasterUi.Input,
+        className: ' rounded-0 input-element form-control',
+        onValueChange: () => {
+          // onChangeValueFilter(type, values.floatValue, 'max')
+        },
+        placeholder: 'Max'
+      })))));
+    case 'Date':
+      const dateValue = selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: dateValue,
+        defaultValue: dateValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'DateRange':
+      const dateRangeValue = [selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateRangeFormat) : '', selectedKeys[1] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[1]), dateRangeFormat) : ''];
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(RangePicker, {
+        format: {
+          format: dateRangeFormat,
+          type: 'mask'
+        }
+        // defaultValue={dateRangeValue}
+        ,
+        value: dateRangeValue,
+        placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
+        popupStyle: {
+          zIndex: 9999
+        },
+        onChange: (value, dateString) => {
+          const newDateRangeValue = dateString[0] ? [dateString[0] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[0], dateRangeFormat)).format() : '', dateString[1] ? (0, _moment.default)((0, _utils.convertDayjsToDate)(dateString[1], dateRangeFormat)).format() : ''] : '';
+
+          // setSelectedKeys(newDateValue ? [newDateValue] : [])
+          setSelectedKeys(newDateRangeValue);
+        },
+        style: {
+          width: '100%'
+        }
+        // popupClassName={'adv-popup-container'}
+        // getPopupContainer={() => menuRef.current}
+      }))));
+    case 'Week':
+      const weekValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'week',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: weekValue,
+        defaultValue: weekValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      }))));
+    case 'Month':
+      const monthValue = !(0, _utils.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+        format: {
+          format: dateFormat,
+          type: 'mask'
+        },
+        picker: 'month',
+        locale: buddhistLocale,
+        style: {
+          width: '100%',
+          height: '100%'
+        },
+        value: monthValue,
+        defaultValue: monthValue,
+        placeholder: column?.placeholder,
+        onChange: (date, dateString) => {
+          const newDateValue = dateString ?? null;
+          setSelectedKeys(newDateValue ? [newDateValue] : []);
+        }
+      })));
+
+    // case 'Quarter':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    // case 'Year':
+    //
+    //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+    //
+    //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+    //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+    //
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //
+    //
+    //         <div className={'mb-1'}>
+    //
+    //           <DatePicker
+    //             format={{
+    //               format: dateFormat,
+    //               type: 'mask'
+    //             }}
+    //             locale={buddhistLocale}
+    //             style={{width: '100%', height: '100%'}}
+    //             value={pickerValue}
+    //             defaultValue={pickerValue}
+    //             placeholder={column.placeholder}
+    //             onChange={(date, dateString) => {
+    //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+    //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+    //
+    //             }}
+    //
+    //           />
+    //         </div>
+    //
+    //
+    //       </div>
+    //     </Fragment>
+    //   )
+
+    case 'Dropdown':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
+      // options={translateOption(numberOperator, t)}
+      , {
+        options: options,
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: selectedKeys[0],
+        onChange: val => {
+          // setOperatorKey(val)
+          setSelectedKeys(val ? [val] : []);
+        },
+        showSearch: true,
+        allowClear: true
+      }))));
+
+    // case 'DropTree':
+    //   return (
+    //     <Fragment>
+    //       <div>
+    //         {col.filterOption && col.filterOption.showOperator === false ? (
+    //           ''
+    //         ) : (
+    //           <div className={'mb-1'}>
+    //             <Select
+    //               options={translateOption(numberOperator, t)}
+    //               // options={t ? numberOperator.map((it: any) => ({...it, label: t(it.label)})) : numberOperator}
+    //
+    //               classNamePrefix='select'
+    //               className={`react-select`}
+    //               value={translateOption(numberOperator, t).find(
+    //                 ope => ope.value === (operator ? operator : getDefaultOperator(col))
+    //               )}
+    //               onChange={(val: any) => {
+    //                 setCurrentFilter((prevState: any) => ({ ...prevState, operator: val.value }))
+    //               }}
+    //             />
+    //           </div>
+    //         )}
+    //
+    //         <div className={'mb-1'}>
+    //           <Input
+    //             placeholder={'Nhập giá trị'}
+    //             value={value}
+    //             onChange={(val: any) => {
+    //               onChangeValueFilter(type, val.value)
+    //             }}
+    //           />
+    //         </div>
+    //
+    //         <div className={'d-flex justify-content-end'}>
+    //           <Button color='flat-primary' className={'me-1 be-button'} onClick={(e: any) => handleOnFilter(e)}>
+    //             {t ? t('Filter') : 'Filter'}
+    //           </Button>
+    //           <Button color='flat-secondary' className={'be-button'} onClick={(e: any) => handleClearFilter(e)}>
+    //             {t ? t('Delete') : 'Delete'}
+    //           </Button>
+    //         </div>
+    //       </div>
+    //     </Fragment>
+    //   )
+    //
+    case 'Checkbox':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default
+      // column={column}
+      , {
+        locale: {
+          filterTitle: 'Chọn tất cả',
+          filterCheckall: 'Chọn tất cả'
+        },
+        selectedKeys: selectedKeys,
+        onSelect: setSelectedKeys,
+        options: options,
+        filterMultiple: true,
+        open: visible,
+        searchValue: searchValue,
+        setSearchValue: setSearchValue
+      })))));
+    case 'Text':
+    default:
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
+        placeholder: `Search ${column?.dataIndex}`,
+        value: selectedKeys[0],
+        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
+        ,
+        onPressEnter: () => confirm(),
+        allowClear: true
+      }))));
+  }
+};
+exports.renderFilter = renderFilter;

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

@@ -0,0 +1,35 @@
+import type * as React from "react";
+import dayjs from "dayjs";
+import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
+import type { ColumnEditType, ColumnsType, ColumnTable } from "../type";
+import type { SelectionSettings } from "../type";
+import type { AnyObject } from "../type";
+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;
+export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const isEmpty: (d: any) => boolean;
+export declare const isNullOrUndefined: (d: any) => boolean;
+export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
+export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+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 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;
+export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
+export declare const getDateString: <T>(column: ColumnTable<T>, value: any) => string;
+export declare const getEditType: <T>(column: ColumnEditType<T>, rowData?: any) => EditType | ((rowData?: any) => EditType);
+export declare const isDisable: <T>(column: ColumnEditType<T>, rowData?: any) => boolean;
+export declare const checkFieldKey: (key: string | undefined) => string;
+export declare const convertLabelToTitle: (data: any[]) => any[];
+export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
+export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
+export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+export declare const isObjEmpty: (obj: any) => boolean;
+export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
+export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];

package/lib/{hooks → grid-component/hooks}/utils.js

@@ -4,10 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDatepickerFormat = exports.getAllVisibleKeys = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.checkThousandSeparator = exports.checkDecimalSeparator = void 0;
+exports.getEditType = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.customWeekStartEndFormat = exports.convertLabelToTitle = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.updateColumns = exports.updateArrayByKey = exports.sumDataByField = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = void 0;
+exports.updateData = exports.updateColumns = exports.updateArrayByKey = exports.totalFixedWidth = exports.sumDataByField = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isDisable = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment/moment"));
+var _uuid = require("uuid");
+const newGuid = () => {
+  for (let i = 0; i < 20; i++) {
+    // @ts-ignore
+    // const id = crypto.randomUUID()
+    return (0, _uuid.v4)();
+  }
+};
+exports.newGuid = newGuid;
 const sumDataByField = (data, field) => {
   if (data && data.length > 0) {
     return data.reduce((accumulator, currentValue) => {
@@ -55,17 +65,11 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
 };
 exports.checkDecimalSeparator = checkDecimalSeparator;
 const isEmpty = d => {
-  if (d === null || d === undefined || d === '') {
-    return true;
-  }
-  return false;
+  return d === null || d === undefined || d === '';
 };
 exports.isEmpty = isEmpty;
 const isNullOrUndefined = d => {
-  if (d === null || d === undefined) {
-    return true;
-  }
-  return false;
+  return d === null || d === undefined;
 };
 exports.isNullOrUndefined = isNullOrUndefined;
 const convertDayjsToDate = (dateString, format) => {
@@ -120,8 +124,7 @@ exports.getAllVisibleKeys = getAllVisibleKeys;
 const getVisibleColumnKeys = columns => {
   const allKeys = getAllVisibleKeys(columns);
   const allParentKeys = getHiddenParentKeys(columns);
-  const rs = allKeys.filter(item => !allParentKeys.includes(item));
-  return rs;
+  return allKeys.filter(item => !allParentKeys.includes(item));
 };
 exports.getVisibleColumnKeys = getVisibleColumnKeys;
 function getHiddenParentKeys(columns, parentKeys = []) {
@@ -153,11 +156,7 @@ const updateColumns = (columns, includes) => {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-    if (newColumn.key && !includes.includes(newColumn.key)) {
-      newColumn.hidden = true;
-    } else {
-      newColumn.hidden = false;
-    }
+    newColumn.hidden = newColumn.key && !includes.includes(newColumn.key);
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.hidden = !hasVisibleChild;
     }
@@ -184,10 +183,14 @@ const getDatepickerFormat = (type, col) => {
     case "time":
       return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm';
     default:
-      return undefined;
+      return 'DD/MM/YYYY';
   }
 };
 exports.getDatepickerFormat = getDatepickerFormat;
+const customWeekStartEndFormat = (value, weekFormat) => {
+  return `${(0, _dayjs.default)(value).startOf('week').format(weekFormat)} ~ ${(0, _dayjs.default)(value).endOf('week').format(weekFormat)}`;
+};
+exports.customWeekStartEndFormat = customWeekStartEndFormat;
 const getTypeFilter = col => {
   if (col?.typeFilter) {
     return col.typeFilter;
@@ -233,4 +236,122 @@ const updateArrayByKey = (arr, element, key) => {
     return [];
   }
 };
-exports.updateArrayByKey = updateArrayByKey;
+exports.updateArrayByKey = updateArrayByKey;
+const getDateString = (column, value) => {
+  if (value instanceof Date) {
+    return (0, _moment.default)(value).format();
+  }
+  return value;
+};
+exports.getDateString = getDateString;
+const getEditType = (column, rowData) => {
+  if (column && typeof column.editType === 'function') {
+    return column.editType(rowData);
+  }
+  return column.editType;
+};
+exports.getEditType = getEditType;
+const isDisable = (column, rowData) => {
+  if (column && typeof column?.disable === 'function') {
+    return column.disable(rowData);
+  }
+  return !!column?.disable;
+};
+exports.isDisable = isDisable;
+const checkFieldKey = key => {
+  if (key) {
+    return key;
+  } else {
+    return 'value';
+  }
+};
+exports.checkFieldKey = checkFieldKey;
+const convertLabelToTitle = data => {
+  return data.map(item => {
+    const {
+      label,
+      title,
+      value,
+      ...rest
+    } = item;
+    const newItem = {
+      ...rest,
+      value,
+      key: value,
+      title: title ? title : label
+    };
+    if (item.children) {
+      newItem.children = convertLabelToTitle(item.children);
+    }
+    return newItem;
+  });
+};
+exports.convertLabelToTitle = convertLabelToTitle;
+const convertArrayWithIndent = (inputArray, parentIndent = 0) => {
+  if (inputArray) {
+    return inputArray.map(item => {
+      const indent = parentIndent;
+      if (item.children && item.children.length > 0) {
+        item.children = convertArrayWithIndent(item.children, indent + 1);
+      }
+      return {
+        ...item,
+        indent,
+        rowId: item.rowId ? item.rowId : item.id ? item.id : newGuid()
+      };
+    });
+  } else {
+    return [];
+  }
+};
+exports.convertArrayWithIndent = convertArrayWithIndent;
+const getTemplate = template => {
+  if (template && typeof template === 'function') {
+    return template();
+  }
+  return template;
+};
+exports.getTemplate = getTemplate;
+const totalFixedWidth = (columns, type, selectionSettings) => {
+  const totalFixedLeftWidth = columns.filter(column => column.fixed === type) // Lọc các cột có fixed
+  .reduce((sum, column) => {
+    const width = typeof column.width === 'number' ? column.width : parseInt(column.width, 10) || 0; // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
+    return sum + width;
+  }, 0);
+  const selectColumnWidth = !selectionSettings?.mode ? 0.0000001 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
+  return totalFixedLeftWidth + selectColumnWidth;
+};
+exports.totalFixedWidth = totalFixedWidth;
+const isObjEmpty = obj => {
+  if (isNullOrUndefined(obj)) {
+    return true;
+  } else {
+    return Object.keys(obj).length === 0;
+  }
+};
+exports.isObjEmpty = isObjEmpty;
+const getColumnsVisible = (columns, index) => {
+  const itemsBeforeIndex = columns.slice(0, index);
+  const itemsAfterIndex = columns.slice(index);
+  itemsAfterIndex.map(it => {
+    if (it.hidden !== false) {
+      itemsBeforeIndex.push(it);
+    }
+  });
+  return itemsBeforeIndex;
+};
+exports.getColumnsVisible = getColumnsVisible;
+const updateData = (initData, rows, key) => {
+  const updatedData = initData.map(item => {
+    const newData = rows.find(row => row[key] === item[key]);
+    return newData ? {
+      ...item,
+      ...newData
+    } : item;
+  });
+
+  // Thêm các phần tử mới chưa có trong initialData
+  const newRows = rows.filter(row => !initData.some(item => item[key] === row[key]));
+  return [...updatedData, ...newRows];
+};
+exports.updateData = updateData;

package/lib/grid-component/index.d.ts

@@ -0,0 +1,2 @@
+import InternalTable from './InternalTable';
+export default InternalTable;