es-grid-template 1.2.0 → 1.2.1

package/lib/grid-component/TableGrid.js

@@ -16,7 +16,7 @@ var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _antd = require("antd");
-var _useColumns = require("./hooks/useColumns");
+var _columns = require("./hooks/columns");
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
 var _ColumnsChoose = require("./ColumnsChoose");
@@ -98,7 +98,6 @@ const TableGrid = props => {
     locale,
     expandable,
     rowHoverable,
-    // mergedData,
     title,
     format,
     virtual = true,
@@ -123,10 +122,16 @@ const TableGrid = props => {
     dataSourceFilter: propDataSourceFilter,
     loading,
     triggerChangeColumns,
+    triggerGroupColumns,
     summary,
     showToolbar,
     onSorter,
     bottomToolbar,
+    groupSetting,
+    groupAble,
+    getRowKey,
+    groupColumns,
+    groupToolbar,
     ...rest
   } = props;
   const {
@@ -141,16 +146,10 @@ const TableGrid = props => {
     selectedRowKeys,
     defaultSelectedRowKeys
   } = selectionSettings || {};
-  const clickRef = (0, _react.useRef)(null);
-  const menuRef = (0, _react.useRef)(null);
+  const clickRef = _react.default.useRef(null);
+  const menuRef = _react.default.useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-
-  // const defaultSelected = useMemo(() => {
-  //   return defaultSelectedRowKeys ?? []
-  //
-  // }, [defaultSelectedRowKeys])
-
   const [menuVisible, setMenuVisible] = _react.default.useState(false);
   const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
   const [position, setPosition] = _react.default.useState({
@@ -188,7 +187,7 @@ const TableGrid = props => {
     }
     return propContextMenuItems;
   }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
-  (0, _react.useLayoutEffect)(() => {
+  _react.default.useLayoutEffect(() => {
     setMenuVisible(false);
   }, []);
   const onContextMenu = data => event => {
@@ -325,10 +324,9 @@ const TableGrid = props => {
     },
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
-      // spinning: loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     },
-    dataSource: dataSource
+    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
     // className={styles.customTable}
     ,
     className: (0, _classnames.default)(className, {
@@ -346,7 +344,6 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick,
         onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
@@ -377,7 +374,7 @@ const TableGrid = props => {
       }
       return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
         fixed: true
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _useColumns.flatColumns)(columns).filter(col => col.hidden !== true).map((col, index) => {
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)([_rcMasterUi.Table.SELECTION_COLUMN, ...columns]).filter(col => col.hidden !== true).map((col, index) => {
         const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
         const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
         const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
@@ -401,7 +398,7 @@ const TableGrid = props => {
         }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
       })));
     },
-    pagination: pagination && pagination.onChange ? false : {
+    pagination: !pagination || pagination && pagination.onChange ? false : {
       showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
       ...pagination
     },
@@ -416,11 +413,11 @@ const TableGrid = props => {
           justifyContent: 'space-between',
           alignItems: 'center'
         }
-      }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar
+      }, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar
       // @ts-ignore
       , {
         style: {
-          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px` : `calc(100% - 25px`
+          width: pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' ? `calc(100% - 650px - ${groupAble ? 50 : 0}px` : `calc(100% - 25px - ${groupAble ? 50 : 0}px`
         },
         items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
         mode: 'scroll'
@@ -441,53 +438,23 @@ const TableGrid = props => {
       }, pagination)), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
         t: t,
+        columnsGroup: groupColumns,
         triggerChangeColumns: triggerChangeColumns
       }))));
     },
     expandable: {
-      expandIconColumnIndex: 3,
-      defaultExpandAllRows: true,
-      indentSize: 25,
-      ...expandable,
-      expandIcon: args => {
-        const {
-          record,
-          expanded,
-          onExpand
-        } = args;
-
-        // @ts-ignore
-        if (record?.children?.length > 0 || record?.isChildren) {
-          return expanded ? /*#__PURE__*/_react.default.createElement("button", {
-            onClick: e => {
-              e.preventDefault();
-              e.stopPropagation();
-              onExpand(record, e);
-            },
-            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
-          }) : /*#__PURE__*/_react.default.createElement("button", {
-            onClick: e => {
-              e.preventDefault();
-              e.stopPropagation();
-              onExpand(record, e);
-            },
-            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
-          });
-        } else {
-          return /*#__PURE__*/_react.default.createElement("button", {
-            className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced'
-          });
-        }
-      }
+      ...expandable
     }
-  })), bottomToolbar?.(), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
+  })), /*#__PURE__*/_react.default.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,
-    size: 'small',
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
-  }, pagination))));
+    size: 'small'
+    // @ts-ignore
+    ,
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), bottomToolbar?.()));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/hooks/{useColumns → columns}/index.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
-export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
+export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
-export declare const renderContent: <RecordType>(column: ColumnType<RecordType>, value: any, record: RecordType, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderContent: (column: any, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
 export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/lib/grid-component/hooks/{useColumns → columns}/index.js

@@ -17,8 +17,6 @@ var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
 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 * as React from 'react'
-
 const {
   RangePicker
 } = _rcMasterUi.DatePicker;
@@ -45,15 +43,16 @@ function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-function flatColumns2(columns, parentKey = 'key') {
+function flatColumns2(columns
+// parentKey = 'key'
+) {
   // @ts-ignore
-  return columns.reduce((list, column, index) => {
-    const {
-      fixed
-    } = column;
+  return columns.reduce((list, column) => {
+    // const { fixed } = column
     // Convert `fixed='true'` to `fixed='left'` instead
-    const parsedFixed = fixed === true ? 'left' : fixed;
-    const mergedKey = `${parentKey}-${index}`;
+    // const parsedFixed = fixed === true ? 'left' : fixed
+    // const mergedKey = `${parentKey}-${index}`
+
     const subColumns = column.children;
     if (column === _useSelection.SELECTION_COLUMN) {
       return [...list, {
@@ -61,15 +60,15 @@ function flatColumns2(columns, parentKey = 'key') {
       }];
     }
     if (subColumns && subColumns.length > 0) {
-      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
-        fixed: parsedFixed,
+      return [...list, ...flatColumns(subColumns).map(subColum => ({
+        // fixed: parsedFixed,
         ...subColum
       }))];
     }
     return [...list, {
-      key: mergedKey,
-      ...column,
-      fixed: parsedFixed
+      // key: mergedKey,
+      ...column
+      // fixed: parsedFixed
     }];
   }, []);
 }
@@ -138,8 +137,13 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
   const type = (0, _utils.getTypeFilter)(column);
   const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
   const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
-  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  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", {
@@ -374,7 +378,7 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
       }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
       // options={translateOption(numberOperator, t)}
       , {
-        options: options,
+        options: find ? options : column.source ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/lib/grid-component/hooks/content/HeaderContent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ColumnTable } from "../../type";
+type Props = {
+    t?: any;
+    content?: string;
+    column?: ColumnTable;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: string | number | React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+};
+declare const HeaderContent: (props: Props) => React.JSX.Element;
+export default HeaderContent;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;"]);
+const HeaderContent = props => {
+  const {
+    t
+  } = props;
+  const {
+    headerTooltip,
+    headerText,
+    columnGroupText,
+    headerTemplate,
+    title
+  } = props.column ?? {};
+  const text = _react.default.useMemo(() => {
+    return columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, title]);
+  const tooltip = _react.default.useMemo(() => {
+    return headerTooltip ?? columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, headerTooltip, title]);
+  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'
+    }
+    // style={{flex: 1}}
+    ,
+    className: (0, _classnames.default)('', {})
+  }), headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText || title) && /*#__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)));
+};
+var _default = exports.default = HeaderContent;

package/lib/grid-component/hooks/content/TooltipContent.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement, ReactNode } from "react";
+type Props = {
+    t?: any;
+    content?: any;
+    value?: any;
+    record?: any;
+    rowIndex?: any;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: ReactNode | ReactElement | ((value: any, record: any, index: number) => ReactNode | ReactElement);
+    showTooltip?: boolean;
+};
+declare const TooltipContent: (props: Props) => React.JSX.Element;
+export default TooltipContent;

package/lib/grid-component/hooks/content/TooltipContent.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _useIsOverflow = require("../useIsOverflow");
+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 {getTemplate} from "../utils";
+
+const TooltipStyle = _styledComponents.default.div.withConfig({
+  displayName: "TooltipStyle",
+  componentId: "es-grid-template__sc-7yfbzv-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 TooltipContent = props => {
+  const {
+    content,
+    tooltip,
+    value,
+    record,
+    rowIndex,
+    showTooltip
+  } = props;
+  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 isOverflow = (0, _useIsOverflow.useIsOverflow)(refs.reference);
+  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(), {
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    },
+    className: (0, _classnames.default)('', {})
+  }), content()), isOpen && showTooltip !== false && isOverflow &&
+  /*#__PURE__*/
+  // {true  && (
+  _react.default.createElement(_react2.FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/_react.default.createElement(TooltipStyle, (0, _extends2.default)({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles
+    }
+  }, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
+};
+var _default = exports.default = TooltipContent;

package/lib/grid-component/hooks/useColumns.d.ts

@@ -0,0 +1,16 @@
+import type { AnyObject, IGroupSetting } from "../type";
+export declare const SELECTION_COLUMN: {};
+interface UseColumnsConfig {
+    t?: any;
+    buddhistLocale?: any;
+    dataSourceFilter?: any;
+    locale?: any;
+    format?: any;
+    handleResize?: any;
+    sortMultiple?: boolean;
+    groupAble?: boolean;
+    groupSetting?: IGroupSetting;
+    groupColumns?: string[];
+}
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+export default useColumns;