es-grid-template 1.3.0 → 1.3.2

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.findItemByKey = void 0;
+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");
@@ -850,4 +857,286 @@ exports.isArraysEqual = isArraysEqual;
 const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };
-exports.editAbleColumns = editAbleColumns;
+exports.editAbleColumns = editAbleColumns;
+const findItemPath = (tree, targetItem, rowKey) => {
+  let result = null;
+  function dfs(nodes, path = []) {
+    for (let i = 0; i < nodes.length; i++) {
+      const currentPath = [...path, i + 1];
+      const node = nodes[i];
+      if (node?.[rowKey] === targetItem?.[rowKey]) {
+        result = currentPath.join('.');
+        return true;
+      }
+      if (node?.children) {
+        if (dfs(node.children, currentPath)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  dfs(tree);
+  return result;
+};
+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/styles.scss

@@ -133,6 +133,21 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
   .#{$prefix}-table-tbody {
 
+
+    .#{$prefix}-table-cell {
+      line-height: 22px;
+
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
+      &.#{$prefix}-table-cell-fix-left-last {
+        .#{$prefix}-table-cell-content {
+        }
+      }
+
+    }
+
     .#{$prefix}-table-row {
 
       &.#{$prefix}-table-row-selected {
@@ -212,6 +227,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-cell-content {
+        line-height: 22px;
+      }
+
       &.#{$prefix}-table-cell-fix-left-last {
         .#{$prefix}-table-cell-content {
           //overflow: visible;
@@ -604,6 +623,10 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
+    .ui-rc_cell-content.disable {
+      background-color: #f0f0f0;
+    }
+
     .ui-rc_cell-content--index {
       &.focus {
         background-color: $cell-index-focus-bg;
@@ -688,6 +711,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
               transition: 0.3s;
               white-space: nowrap;
               overflow: hidden;
+              line-height: 22px;
             }
           }
         }

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;