es-grid-template 1.3.0 → 1.3.2

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

@@ -787,4 +787,281 @@ export const isArraysEqual = (arr1, arr2) => {
 };
 export const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
-};
+};
+export 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;
+};
+export 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;
+  });
+};
+export 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;
+  });
+};
+export 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;
+  });
+};
+export 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
+function isDate(value) {
+  return value instanceof Date || !isNaN(Date.parse(value));
+}
+
+// Chuỗi MM/YYYY → Date
+export 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)
+export 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
+export function compareDate(itemValue, value) {
+  const [month, year] = value.split('/').map(Number);
+  const date = new Date(itemValue);
+  return date.getMonth() + 1 === month && date.getFullYear() === year;
+}
+export function invalidDate(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}

package/es/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/es/grid-component/number-range/index.js

@@ -0,0 +1,59 @@
+import React, { Fragment } from "react";
+import { NumericFormat } from "react-numeric-component";
+import { Input } from "rc-master-ui";
+const NumberRange = props => {
+  const {
+    t,
+    max,
+    min,
+    onChange
+  } = props;
+  const values = React.useMemo(() => [min, max], [min, max]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: '',
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+    // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+    ,
+    allowNegative: true,
+    customInput: 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.createElement("span", null, "-"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[1] ?? ''
+    // value={max}
+    // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
+    // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
+    ,
+    allowNegative: true,
+    customInput: Input,
+    className: ' rounded-0 input-element form-control',
+    onValueChange: vals => {
+      // setValues([values[0], vals.floatValue])
+      onChange?.([min, vals.floatValue]);
+    },
+    placeholder: t ? t('Max') : 'Max'
+  }))));
+};
+export default NumberRange;

package/es/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/es/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;