es-grid-template 0.0.7 → 0.0.13

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.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 = []) {
@@ -146,15 +149,14 @@ const updateColumns = (columns, includes) => {
       ...column
     };
     let hasVisibleChild = false;
+    if (!column.key && !column.dataIndex) {
+      return column;
+    }
     if (newColumn.children) {
       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;
     }
@@ -181,15 +183,19 @@ 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) {
+  if (col?.typeFilter) {
     return col.typeFilter;
   }
-  const type = col.type ?? '';
+  const type = col?.type ?? 'Text';
   switch (type) {
     case "number":
       return 'Number';
@@ -203,7 +209,7 @@ const getTypeFilter = col => {
       return 'Checkbox';
 
     // case "week": return ''
-    // case "month": return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY'
+    // case "month": return 'Month'
     // case "quarter": return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY'
     // case "year": return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY'
     // case "time": return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm'
@@ -212,4 +218,140 @@ const getTypeFilter = col => {
       return 'Text';
   }
 };
-exports.getTypeFilter = getTypeFilter;
+exports.getTypeFilter = getTypeFilter;
+const updateArrayByKey = (arr, element, key) => {
+  if (arr) {
+    return arr.map(item => {
+      if (item[key] === element[key]) {
+        return {
+          ...item,
+          ...element
+        };
+      } else if (item.children && item.children.length > 0) {
+        item.children = updateArrayByKey(item.children, element, key);
+      }
+      return item;
+    });
+  } else {
+    return [];
+  }
+};
+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;

package/lib/grid-component/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _InternalTable = _interopRequireDefault(require("./InternalTable"));
+var _default = exports.default = _InternalTable.default;

package/lib/grid-component/rc-table/Grid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { GridTableProps } from "../type";
+type Props<T> = GridTableProps<T> & {
+    setColumns?: any;
+    tableRef: any;
+};
+declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default Grid;

package/lib/grid-component/rc-table/Grid.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _GridStyle = require("../GridStyle");
+var _TableGrid = _interopRequireDefault(require("../TableGrid"));
+var _EditableCell = _interopRequireDefault(require("../EditableCell"));
+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 Grid = props => {
+  const {
+    columns,
+    height,
+    tableRef,
+    className,
+    components,
+    ...rest
+  } = props;
+
+  // const transformColumns = React.useCallback((cols: ColumnsTable<RecordType>): ColumnsTable<RecordType> => {
+  //   return cols.map((column) => {
+  //
+  //     if (column?.children && column?.children.length > 0) {
+  //       return {
+  //         ...column,
+  //         children: transformColumns(column?.children) // Xử lý đệ quy cho cấp con
+  //       }
+  //     }
+  //
+  //     if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+  //       return {
+  //         ...column,
+  //         render: (value: any, record: any, rowIndex: number) => {
+  //           return rowIndex + 1
+  //         }
+  //       }
+  //     }
+  //
+  //     return {
+  //       ...column,
+  //     }
+  //   })
+  // }, [])
+  //
+  //
+  // const mergedColumns = useMemo(() => {
+  //
+  //   // @ts-ignore
+  //   return transformColumns(columns ?? [])
+  //
+  // }, [transformColumns, columns])
+
+  const addFilter = _react.default.useCallback(cols => {
+    return cols.map(column => {
+      // @ts-ignore
+      if (!column?.dataIndex && !column?.key) {
+        return column;
+      }
+      // @ts-ignore
+      if (column?.children && column?.children.length > 0) {
+        return {
+          ...column,
+          // @ts-ignore
+          children: addFilter(column?.children) // Xử lý đệ quy cho cấp con
+        };
+      }
+      // @ts-ignore
+      if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+        return {
+          ...column,
+          render: (value, record, rowIndex) => {
+            return rowIndex + 1;
+          }
+        };
+      }
+      return {
+        ...column
+      };
+    });
+  }, []);
+  const tmpColumns = (0, _react.useMemo)(() => {
+    // @ts-ignore
+    return addFilter(columns ?? []);
+  }, [addFilter, columns]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
+    heightTable: height,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    tableRef: tableRef,
+    components: {
+      ...components,
+      body: {
+        cell: _EditableCell.default
+      }
+    }
+    // columns={mergedColumns}
+    ,
+    columns: tmpColumns
+  }))));
+};
+var _default = exports.default = Grid;

package/lib/grid-component/rc-table/GridEdit.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import type { TableEditProps } from "../type";
+type Props<RecordType> = TableEditProps<RecordType> & {
+    tableRef: any;
+};
+declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default GridEdit;