es-grid-template 1.3.0 → 1.3.2

package/es/grid-component/TableGrid.d.ts

@@ -5,12 +5,15 @@ import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
+    triggerFilter?: (queries: any) => void;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     tableRef: any;
     bottomToolbar?: () => React.ReactElement;
     getRowKey: GetRowKey<T>;
     rowSelection?: any;
     groupToolbar?: () => React.ReactNode;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -8,8 +8,11 @@ import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
 import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
+// filterDataByColumns2,
+filterDataByColumns3,
 // convertFlatColumn,
 isEmpty,
+// newGuid,
 // removeColumns,
 sumDataByField
 // updateArrayByKey
@@ -21,6 +24,7 @@ import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import AdvanceFilter from "./AdvanceFilter";
+import { Tooltip } from "react-tooltip";
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -44,6 +48,40 @@ const convertFilters = filters => {
         predicate: "and",
         operator: "lessthanorequal"
       });
+    } else if (column?.typeFilter === "NumberRange") {
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && !filteredKeys[1]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        });
+      }
+      if ((filteredKeys[1] || filteredKeys[1] === 0) && !filteredKeys[0]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && (filteredKeys[1] || filteredKeys[1] === 0)) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        }, {
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
     } else if (column?.typeFilter === 'Checkbox') {
       filteredKeys.forEach(value => {
         result.push({
@@ -111,6 +149,7 @@ const TableGrid = props => {
     showColumnChoose,
     showAdvanceFilter,
     onFilter,
+    triggerFilter,
     selectionSettings,
     rowSelection,
     rowSelected,
@@ -132,6 +171,7 @@ const TableGrid = props => {
     groupColumns,
     groupToolbar,
     showEmptyText,
+    setIsFilter,
     ...rest
   } = props;
   const {
@@ -158,6 +198,7 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
+  const [filterStates, setFilterState] = React.useState(null);
 
   // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
 
@@ -294,6 +335,18 @@ const TableGrid = props => {
   const handleChange = sorter => {
     onSorter?.(sorter);
   };
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.(convertFilters(queries));
+    } else {
+      setFilterState(convertFilters(queries));
+      if (queries && queries.length > 0) {
+        setIsFilter?.(true);
+      } else {
+        setIsFilter?.(false);
+      }
+    }
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
@@ -305,6 +358,9 @@ const TableGrid = props => {
   }), /*#__PURE__*/React.createElement(Table, _extends({
     ref: tableRef
   }, rest, {
+    tableLayout: 'fixed'
+    // id={newGuid()}
+    ,
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {
@@ -316,7 +372,8 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
+    dataSource: columns && columns.length > 0 && loading !== true ? filterDataByColumns3(dataSource, filterStates) : []
+    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
     className: classNames(className, {
@@ -351,10 +408,13 @@ const TableGrid = props => {
       // checkStrictly: false,
 
       hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
-    },
-    onScroll: () => {
-      setMenuVisible(false);
-    },
+    }
+
+    // onScroll={() => {
+    //   setMenuVisible(false)
+    // }}
+    ,
+
     summary: () => {
       if (typeof summary === 'function') {
         return summary(dataSource);
@@ -393,7 +453,9 @@ const TableGrid = props => {
       ...pagination
     },
     onFilter: val => {
-      onFilter?.(convertFilters(val));
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
     },
     onChange: (paging, filters, sorter) => handleChange(sorter),
     title: showToolbar === false ? undefined : () => {
@@ -455,6 +517,8 @@ const TableGrid = props => {
     // @ts-ignore
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), bottomToolbar?.());
+  }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
+    id: "tooltip-header"
+  }));
 };
 export default TableGrid;

package/es/grid-component/hooks/columns/index.js

@@ -6,6 +6,7 @@ import React, { Fragment } from "react";
 import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
+import NumberRange from "../../number-range";
 const {
   RangePicker
 } = DatePicker;
@@ -131,11 +132,6 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
-
-  // console.log('dataSourceFilter', dataSourceFilter)
-  // console.log('options', options)
-  // console.log('column', column)
-
   switch (type) {
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -155,39 +151,15 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         }
       }))));
     case 'NumberRange':
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: 'mb-1 d-flex flex-column gap-1'
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 8
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          console.log('NumberRange', vals);
+          setSelectedKeys(vals);
         }
-      }, /*#__PURE__*/React.createElement(NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: Input,
-        className: ' rounded-0 input-element form-control'
-        // onValueChange={(values: any) => {
-        //   onChangeValueFilter(type, values.floatValue, 'min')
-        // }}
-        ,
-        placeholder: t ? t('Min') : 'Min',
-        autoFocus: true
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
-        value: selectedKeys[1]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: Input,
-        className: ' rounded-0 input-element form-control',
-        onValueChange: () => {
-          // onChangeValueFilter(type, values.floatValue, 'max')
-        },
-        placeholder: t ? t('Max') : 'Max'
-      })))));
+      })));
     case 'Date':
       const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -438,16 +410,13 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Checkbox':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter
-      // locale={{
-      //   filterTitle: 'Chọn tất cả',
-      //   filterCheckall: 'Chọn tất cả'
-      // }}
-      , {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys,
-        options: options,
+        onSelect: setSelectedKeys
+        // options={options}
+        ,
+        options: column.source ? column.source : options ?? [],
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,

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.d.ts

@@ -1,7 +1,8 @@
 import type { AnyObject, IGroupSetting } from "../type";
 export declare const SELECTION_COLUMN: {};
-interface UseColumnsConfig {
+interface UseColumnsConfig<RecordType> {
     t?: any;
+    dataSource: RecordType[];
     buddhistLocale?: any;
     dataSourceFilter?: any;
     locale?: any;
@@ -11,6 +12,7 @@ interface UseColumnsConfig {
     groupAble?: boolean;
     groupSetting?: IGroupSetting;
     groupColumns?: string[];
+    rowKey?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
 export default useColumns;

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

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 // import Command from "../Command";
 import { Button, Space } from "antd";
 import { Select } from "rc-master-ui";
-import { getTypeFilter } from "./utils";
+import { findItemPath, getTypeFilter } from "./utils";
 import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
 import { flatColumns2, renderContent, renderFilter } from "./columns";
 import { SearchOutlined } from "@ant-design/icons";
@@ -39,14 +39,31 @@ const useColumns = config => {
     handleResize,
     groupAble,
     groupColumns,
-    groupSetting
+    groupSetting,
+    dataSource,
+    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,
@@ -93,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",
@@ -138,8 +154,8 @@ const useColumns = config => {
   const transformColumns = useCallback(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -181,10 +197,13 @@ const useColumns = config => {
             onCell: () => ({
               className: 'cell-number'
             }),
-            render: (_, __, rowIndex) => rowIndex + 1
+            render: (val, record) => {
+              // return rowIndex + 1
+              return findItemPath(dataSource, record, rowKey);
+            }
           };
         }
-        if (col.key === 'command') {
+        if (col.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({

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

@@ -71,3 +71,12 @@ export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 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;