es-grid-template 1.3.1 → 1.3.2

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -5,18 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react2 = require("@floating-ui/react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../utils");
 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 TooltipStyle = _styledComponents.default.div.withConfig({
-  displayName: "TooltipStyle",
-  componentId: "es-grid-template__sc-ibhq66-0"
-})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
+// import styled from "styled-components";
+
+// const TooltipStyle = styled.div`
+//   width: max-content;
+//   background-color: #444;
+//   color: white;
+//   font-size: 90%;
+//   padding: 4px 8px;
+//   border-radius: 4px;
+//   opacity: 0.9;
+//   z-index: 9999;
+//   max-width: 450px;
+// `
+
 const HeaderContent = props => {
   const {
     t
@@ -33,54 +40,45 @@ const HeaderContent = props => {
   const tooltip = _react.default.useMemo(() => {
     return headerTooltip ?? columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip]);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = (0, _react2.useFloating)({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement: "top",
-    whileElementsMounted: _react2.autoUpdate,
-    middleware: [(0, _react2.offset)(5), (0, _react2.flip)({
-      fallbackAxisSideDirection: "start"
-    }), (0, _react2.shift)()]
-  });
-  const hover = (0, _react2.useHover)(context, {
-    move: false
-  });
-  const focus = (0, _react2.useFocus)(context);
-  const dismiss = (0, _react2.useDismiss)(context);
-  const role = (0, _react2.useRole)(context, {
-    role: "tooltip"
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = (0, _react2.useInteractions)([hover, focus, dismiss, role]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    tabIndex: -1,
-    style: {
-      flex: 1,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      wordBreak: 'keep-all'
-    }
+  //
+  //
+  // const [isOpen, setIsOpen] = useState(false)
+  //
+  // const { refs, floatingStyles, context } = useFloating({
+  //   open: isOpen,
+  //   onOpenChange: setIsOpen,
+  //   placement: "top",
+  //   whileElementsMounted: autoUpdate,
+  //   middleware: [
+  //     offset(5),
+  //     flip({
+  //       fallbackAxisSideDirection: "start"
+  //     }),
+  //     shift()
+  //   ]
+  // })
+  //
+  // const hover = useHover(context, { move: false })
+  // const focus = useFocus(context)
+  // const dismiss = useDismiss(context)
+  // const role = useRole(context, { role: "tooltip" })
+  //
+  // const { getReferenceProps, getFloatingProps } = useInteractions([
+  //   hover,
+  //   focus,
+  //   dismiss,
+  //   role
+  // ])
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    // ref={refs.setReference}
+    // tabIndex={-1}
+    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
-    ,
-    className: (0, _classnames.default)('', {})
-  }), headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/_react.default.createElement(_react2.FloatingPortal, {
-    root: document.body
-  }, /*#__PURE__*/_react.default.createElement(TooltipStyle, (0, _extends2.default)({
-    className: "Tooltip",
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex: 1999
-    }
-  }, getFloatingProps()), headerTooltip && typeof headerTooltip === 'function' ? headerTooltip() : t ? t(tooltip) : tooltip)));
+    className: (0, _classnames.default)('', {}),
+    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-content": tooltip,
+    "data-tooltip-offset": 16
+  }, headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text));
 };
 var _default = exports.default = HeaderContent;

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

@@ -55,11 +55,26 @@ const useColumns = config => {
     rowKey
   } = config;
 
+  // const mergedColumns = React.useMemo(
+  //   () => getMergedColumns<RecordType>(rawMergedColumns || []),
+  //   [rawMergedColumns],
+  // );
+  //
+  // const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(() =>
+  //   collectFilterStates(mergedColumns, true),
+  // );
+
   // ====================== Selections ======================
 
-  const handleSearch = (selectedKeys, confirm) => {
-    confirm();
-  };
+  // const handleSearch = (
+  //   selectedKeys: string[],
+  //   confirm: any,
+  // ) => {
+  //
+  //   confirm()
+  //
+  // }
+
   const getColumnSearchProps = (0, _react.useCallback)(column => ({
     filterDropdown: ({
       setSelectedKeys,
@@ -106,10 +121,9 @@ const useColumns = config => {
       }, /*#__PURE__*/React.createElement(_antd.Button, {
         type: "primary",
         onClick: () => {
-          confirm({
-            closeDropdown: false
-          });
-          handleSearch(selectedKeys, confirm);
+          // confirm({closeDropdown: false})
+          confirm();
+          // handleSearch(selectedKeys as string[], confirm)
         },
         icon: /*#__PURE__*/React.createElement(_icons.SearchOutlined, null),
         size: "small",
@@ -200,7 +214,7 @@ const useColumns = config => {
             }
           };
         }
-        if (col.key === 'command') {
+        if (col.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({

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

@@ -72,3 +72,11 @@ export declare const isEditable: <RecordType>(column: ColumnTable, rowData: Reco
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
 export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];
 export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any) => any;
+export declare const filterDataByColumns: (data: any[], queries: any) => any[];
+export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
+export declare const removeFieldRecursive: (data: any[], field: string) => any[];
+export declare const filterDataByColumns3: (data: any[], queries: any[]) => any[];
+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 function invalidDate(date: any): boolean;

package/lib/grid-component/hooks/utils.js

@@ -6,11 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addRowIdArray = void 0;
 exports.addRows8 = addRows8;
-exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
+exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = void 0;
+exports.compareDate = compareDate;
+exports.compareDates = compareDates;
+exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
 exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeColumns = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isEditable = exports.isDisable = exports.isColor = exports.isArraysEqual = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.invalidDate = invalidDate;
+exports.isColor = exports.isArraysEqual = void 0;
+exports.isDateString = isDateString;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.removeFieldRecursive = exports.removeColumns = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -872,4 +879,264 @@ const findItemPath = (tree, targetItem, rowKey) => {
   dfs(tree);
   return result;
 };
-exports.findItemPath = findItemPath;
+exports.findItemPath = findItemPath;
+const filterDataByColumns = (data, queries) => {
+  if (!queries || queries.length === 0) {
+    return data;
+  }
+  return data.filter(item => {
+    let result = null;
+    for (const query of queries) {
+      const {
+        field,
+        value,
+        operator,
+        predicate
+      } = query;
+      const itemValue = item[field];
+      let condition = false;
+
+      // Normalize string values for comparison
+      const itemStr = itemValue?.toString().toLowerCase?.();
+      const queryStr = value?.toString().toLowerCase?.();
+      switch (operator.toLowerCase()) {
+        case "equal":
+          if (isDateString(value)) {
+            condition = compareDate(itemValue, value);
+          } else {
+            condition = itemValue == value;
+          }
+          break;
+        case "notequal":
+          if (isDateString(value)) {
+            condition = !compareDate(itemValue, value);
+          } else {
+            condition = itemValue != value;
+          }
+          break;
+        case "greaterthan":
+          condition = itemValue > value;
+          break;
+        case "greaterthanorequal":
+          condition = itemValue >= value;
+          break;
+        case "lessthan":
+          condition = itemValue < value;
+          break;
+        case "lessthanorequal":
+          condition = itemValue <= value;
+          break;
+        case "contains":
+          condition = itemStr?.includes(queryStr);
+          break;
+        case "startswith":
+          condition = itemStr?.startsWith(queryStr);
+          break;
+        case "endswith":
+          condition = itemStr?.endsWith(queryStr);
+          break;
+        default:
+          console.warn(`Unknown operator: ${operator}`);
+          break;
+      }
+      if (predicate === "and") {
+        result = result === null ? condition : result && condition;
+      } else if (predicate === "or") {
+        result = result === null ? condition : result || condition;
+      }
+    }
+    return result;
+  });
+};
+exports.filterDataByColumns = filterDataByColumns;
+const filterDataByColumns2 = (data, queries) => {
+  if (!queries || queries.length === 0) {
+    return data;
+  }
+  return data.filter(item => {
+    // Nếu isFilterState = true thì giữ lại dòng này, không cần kiểm tra filter
+    if (item.isFilterState) {
+      return true;
+    }
+    let result = null;
+    for (const query of queries) {
+      const {
+        field,
+        value,
+        operator,
+        predicate
+      } = query;
+      const itemValue = item[field];
+      let condition = false;
+
+      // Normalize string values for comparison
+      const itemStr = itemValue?.toString().toLowerCase?.();
+      const queryStr = value?.toString().toLowerCase?.();
+      switch (operator.toLowerCase()) {
+        case "equal":
+          condition = isDateString(value) ? compareDate(itemValue, value) : itemValue == value;
+          break;
+        case "notequal":
+          condition = isDateString(value) ? !compareDate(itemValue, value) : itemValue != value;
+          break;
+        case "greaterthan":
+          condition = itemValue > value;
+          break;
+        case "greaterthanorequal":
+          condition = itemValue >= value;
+          break;
+        case "lessthan":
+          condition = itemValue < value;
+          break;
+        case "lessthanorequal":
+          condition = itemValue <= value;
+          break;
+        case "contains":
+          condition = itemStr?.includes(queryStr);
+          break;
+        case "startswith":
+          condition = itemStr?.startsWith(queryStr);
+          break;
+        case "endswith":
+          condition = itemStr?.endsWith(queryStr);
+          break;
+        default:
+          console.warn(`Unknown operator: ${operator}`);
+          break;
+      }
+
+      // Áp dụng toán tử logic (and/or)
+      if (predicate === "and") {
+        result = result === null ? condition : result && condition;
+      } else if (predicate === "or") {
+        result = result === null ? condition : result || condition;
+      }
+    }
+    return result;
+  });
+};
+exports.filterDataByColumns2 = filterDataByColumns2;
+const removeFieldRecursive = (data, field) => {
+  return data.map(item => {
+    const {
+      [field]: _,
+      ...rest
+    } = item;
+    if (rest.children && Array.isArray(rest.children)) {
+      rest.children = removeFieldRecursive(rest.children, field);
+    }
+    return rest;
+  });
+};
+exports.removeFieldRecursive = removeFieldRecursive;
+const filterDataByColumns3 = (data, queries) => {
+  if (!queries || queries.length === 0) {
+    return data;
+  }
+  return data.filter(item => {
+    if (item.isFilterState === true) {
+      return true;
+    }
+    let result = null;
+    for (const query of queries) {
+      const {
+        field,
+        value,
+        operator,
+        predicate
+      } = query;
+      const itemValue = item[field];
+      let condition = false;
+      const isDateComparison = isDate(itemValue) || isDateString(value);
+      const itemDate = isDateComparison ? new Date(itemValue) : null;
+      const queryDate = isDateComparison ? parseToDate(value) : null;
+      const itemStr = itemValue?.toString().toLowerCase?.();
+      const queryStr = value?.toString().toLowerCase?.();
+      switch (operator.toLowerCase()) {
+        case "equal":
+          condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue == value;
+          break;
+        case "notequal":
+          condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue != value;
+          break;
+        case "greaterthan":
+          // @ts-ignore
+          condition = isDateComparison ? itemDate > queryDate : itemValue > value;
+
+          // condition = isDateComparison ? invalidDate(itemDate) && invalidDate(queryDate) && itemDate > queryDate : itemValue > value;
+          break;
+        case "greaterthanorequal":
+          // @ts-ignore
+          condition = isDateComparison ? itemDate >= queryDate : itemValue >= value;
+          break;
+        case "lessthan":
+          // @ts-ignore
+          condition = isDateComparison ? itemDate < queryDate : itemValue < value;
+          break;
+        case "lessthanorequal":
+          // @ts-ignore
+          condition = isDateComparison ? itemDate <= queryDate : itemValue <= value;
+          break;
+        case "contains":
+          condition = itemStr?.includes(queryStr);
+          break;
+        case "startswith":
+          condition = itemStr?.startsWith(queryStr);
+          break;
+        case "endswith":
+          condition = itemStr?.endsWith(queryStr);
+          break;
+        default:
+          console.warn(`Unknown operator: ${operator}`);
+          break;
+      }
+      if (predicate === "and") {
+        result = result === null ? condition : result && condition;
+      } else if (predicate === "or") {
+        result = result === null ? condition : result || condition;
+      }
+    }
+    return result;
+  });
+};
+
+// ======= Helper functions ========
+
+// Kiểm tra có phải Date object không
+exports.filterDataByColumns3 = filterDataByColumns3;
+function isDate(value) {
+  return value instanceof Date || !isNaN(Date.parse(value));
+}
+
+// Chuỗi MM/YYYY → Date
+function isDateString(str) {
+  return typeof str === "string" && (/^\d{2}\/\d{4}$/.test(str) || /^\d{4}-\d{2}-\d{2}$/.test(str));
+}
+
+// // Helper: check if a string is in MM/YYYY format
+// export function isDateString(str: any) {
+//   return typeof str === "string" && /^\d{2}\/\d{4}$/.test(str);
+// }
+
+function parseToDate(str) {
+  if (/^\d{2}\/\d{4}$/.test(str)) {
+    const [month, year] = str.split('/');
+    return new Date(parseInt(year), parseInt(month) - 1, 1);
+  }
+  return new Date(str);
+}
+
+// So sánh ngày (cùng ngày/tháng/năm)
+function compareDates(date1, date2) {
+  return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+
+// Helper: compare MM/YYYY date string with itemValue
+function compareDate(itemValue, value) {
+  const [month, year] = value.split('/').map(Number);
+  const date = new Date(itemValue);
+  return date.getMonth() + 1 === month && date.getFullYear() === year;
+}
+function invalidDate(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    t?: any;
+    format?: any;
+    min: number | string | undefined;
+    max: number | string | undefined;
+    onChange?: (values: any[]) => void;
+};
+declare const NumberRange: (props: Props) => React.JSX.Element;
+export default NumberRange;

package/lib/grid-component/number-range/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNumericComponent = require("react-numeric-component");
+var _rcMasterUi = require("rc-master-ui");
+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 NumberRange = props => {
+  const {
+    t,
+    max,
+    min,
+    onChange
+  } = props;
+  const values = _react.default.useMemo(() => [min, max], [min, max]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: '',
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+    // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+    ,
+    allowNegative: true,
+    customInput: _rcMasterUi.Input,
+    className: ' rounded-0 input-element form-control',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue, max]);
+    },
+    placeholder: t ? t('Min') : 'Min',
+    autoFocus: true
+  })), /*#__PURE__*/_react.default.createElement("span", null, "-"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
+    value: values[1] ?? ''
+    // value={max}
+    // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+    // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+    ,
+    allowNegative: true,
+    customInput: _rcMasterUi.Input,
+    className: ' rounded-0 input-element form-control',
+    onValueChange: vals => {
+      // setValues([values[0], vals.floatValue])
+      onChange?.([min, vals.floatValue]);
+    },
+    placeholder: t ? t('Max') : 'Max'
+  }))));
+};
+var _default = exports.default = NumberRange;

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

@@ -3,11 +3,14 @@ import type { ColumnsTable, GridTableProps } from "../type";
 import type { GetRowKey } from "../type";
 type Props<T> = GridTableProps<T> & {
     tableRef: any;
+    triggerFilter?: (queries: any) => void;
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;