es-grid-template 1.3.1 → 1.3.2

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

@@ -1,15 +1,20 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useState } from "react";
+import React, { Fragment } from "react";
 import classnames from "classnames";
-import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
-// useClick
-} from "@floating-ui/react";
-import styled from "styled-components";
+
+// import styled from "styled-components";
 import { getTemplate } from "../utils";
-const TooltipStyle = styled.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;"]);
+// 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
@@ -26,54 +31,45 @@ const HeaderContent = props => {
   const tooltip = React.useMemo(() => {
     return headerTooltip ?? columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip]);
-  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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    // ref={refs.setReference}
+    // tabIndex={-1}
+    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
     // style={{flex: 1}}
-    ,
-    className: classnames('', {})
-  }), headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/React.createElement(FloatingPortal, {
-    root: document.body
-  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
-    className: "Tooltip",
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex: 1999
-    }
-  }, getFloatingProps()), headerTooltip && typeof headerTooltip === 'function' ? headerTooltip() : t ? t(tooltip) : tooltip)));
+    className: classnames('', {}),
+    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-content": tooltip,
+    "data-tooltip-offset": 16
+  }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));
 };
 export default HeaderContent;

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

@@ -44,11 +44,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 = useCallback(column => ({
     filterDropdown: ({
       setSelectedKeys,
@@ -95,10 +110,9 @@ const useColumns = config => {
       }, /*#__PURE__*/React.createElement(Button, {
         type: "primary",
         onClick: () => {
-          confirm({
-            closeDropdown: false
-          });
-          handleSearch(selectedKeys, confirm);
+          // confirm({closeDropdown: false})
+          confirm();
+          // handleSearch(selectedKeys as string[], confirm)
         },
         icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
         size: "small",
@@ -189,7 +203,7 @@ const useColumns = config => {
             }
           };
         }
-        if (col.key === 'command') {
+        if (col.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({

package/es/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/es/grid-component/hooks/utils.js

@@ -808,4 +808,260 @@ export const findItemPath = (tree, targetItem, rowKey) => {
   }
   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/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;