es-grid-template 1.3.0 → 1.3.2

package/lib/grid-component/TableGrid.js

@@ -21,6 +21,7 @@ var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
 var _ColumnsChoose = require("./ColumnsChoose");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
+var _reactTooltip = require("react-tooltip");
 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; }
 // import {ConfigProvider} from "antd";
@@ -48,6 +49,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({
@@ -115,6 +150,7 @@ const TableGrid = props => {
     showColumnChoose,
     showAdvanceFilter,
     onFilter,
+    triggerFilter,
     selectionSettings,
     rowSelection,
     rowSelected,
@@ -136,6 +172,7 @@ const TableGrid = props => {
     groupColumns,
     groupToolbar,
     showEmptyText,
+    setIsFilter,
     ...rest
   } = props;
   const {
@@ -162,6 +199,7 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
+  const [filterStates, setFilterState] = _react.default.useState(null);
 
   // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
 
@@ -298,6 +336,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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
@@ -309,6 +359,9 @@ const TableGrid = props => {
   }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table, (0, _extends2.default)({
     ref: tableRef
   }, rest, {
+    tableLayout: 'fixed'
+    // id={newGuid()}
+    ,
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
@@ -320,7 +373,8 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
+    dataSource: columns && columns.length > 0 && loading !== true ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
+    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
     className: (0, _classnames.default)(className, {
@@ -355,10 +409,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);
@@ -397,7 +454,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 : () => {
@@ -459,6 +518,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.default.createElement(_reactTooltip.Tooltip, {
+    id: "tooltip-header"
+  }));
 };
 var _default = exports.default = TableGrid;

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

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _rcMasterUi = require("rc-master-ui");
 var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
+var _numberRange = _interopRequireDefault(require("../../number-range"));
 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 {
@@ -144,11 +145,6 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
   const dateRangeFormat = (0, _utils.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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -168,39 +164,15 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         }
       }))));
     case 'NumberRange':
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'mb-1 d-flex flex-column gap-1'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginBottom: 8
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_numberRange.default, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          console.log('NumberRange', vals);
+          setSelectedKeys(vals);
         }
-      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: _rcMasterUi.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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
-        value: selectedKeys[1]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: _rcMasterUi.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] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -451,16 +423,13 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
     case 'Checkbox':
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default
-      // locale={{
-      //   filterTitle: 'Chọn tất cả',
-      //   filterCheckall: 'Chọn tất cả'
-      // }}
-      , {
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
         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/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.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/lib/grid-component/hooks/useColumns.js

@@ -50,14 +50,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 = (0, _react.useCallback)(column => ({
     filterDropdown: ({
       setSelectedKeys,
@@ -104,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",
@@ -149,8 +165,8 @@ const useColumns = config => {
   const transformColumns = (0, _react.useCallback)(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -192,10 +208,13 @@ const useColumns = config => {
             onCell: () => ({
               className: 'cell-number'
             }),
-            render: (_, __, rowIndex) => rowIndex + 1
+            render: (val, record) => {
+              // return rowIndex + 1
+              return (0, _utils.findItemPath)(dataSource, record, rowKey);
+            }
           };
         }
-        if (col.key === 'command') {
+        if (col.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({

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