es-grid-template 1.2.0 → 1.2.2

package/es/grid-component/TableGrid.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useLayoutEffect, useRef } from 'react';
+import React, { Fragment } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
 import { Empty, Table, Toolbar } from "rc-master-ui";
@@ -7,11 +7,15 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
 import classNames from "classnames";
-import { checkDecimalSeparator, checkThousandSeparator, isEmpty, sumDataByField
+import { checkDecimalSeparator, checkThousandSeparator,
+// convertFlatColumn,
+isEmpty,
+// removeColumns,
+sumDataByField
 // updateArrayByKey
 } from "./hooks";
-import { ConfigProvider } from "antd";
-import { flatColumns } from "./hooks/useColumns";
+// import {ConfigProvider} from "antd";
+import { flatColumns } from "./hooks/columns";
 import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
@@ -91,7 +95,6 @@ const TableGrid = props => {
     locale,
     expandable,
     rowHoverable,
-    // mergedData,
     title,
     format,
     virtual = true,
@@ -116,10 +119,16 @@ const TableGrid = props => {
     dataSourceFilter: propDataSourceFilter,
     loading,
     triggerChangeColumns,
+    triggerGroupColumns,
     summary,
     showToolbar,
     onSorter,
     bottomToolbar,
+    groupSetting,
+    groupAble,
+    getRowKey,
+    groupColumns,
+    groupToolbar,
     ...rest
   } = props;
   const {
@@ -134,16 +143,10 @@ const TableGrid = props => {
     selectedRowKeys,
     defaultSelectedRowKeys
   } = selectionSettings || {};
-  const clickRef = useRef(null);
-  const menuRef = useRef(null);
+  const clickRef = React.useRef(null);
+  const menuRef = React.useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-
-  // const defaultSelected = useMemo(() => {
-  //   return defaultSelectedRowKeys ?? []
-  //
-  // }, [defaultSelectedRowKeys])
-
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(null);
   const [position, setPosition] = React.useState({
@@ -181,7 +184,7 @@ const TableGrid = props => {
     }
     return propContextMenuItems;
   }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     setMenuVisible(false);
   }, []);
   const onContextMenu = data => event => {
@@ -288,17 +291,7 @@ const TableGrid = props => {
   const handleChange = sorter => {
     onSorter?.(sorter);
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
-    theme: {
-      components: {
-        Table: {
-          rowHoverBg: '#eb461912',
-          rowSelectedBg: '#eb4619',
-          rowSelectedHoverBg: '#eb4619'
-        }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ContextMenu, {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
     setOpen: setMenuVisible,
@@ -318,10 +311,9 @@ const TableGrid = props => {
     },
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
-      // spinning: loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     },
-    dataSource: dataSource
+    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
     // className={styles.customTable}
     ,
     className: classNames(className, {
@@ -339,7 +331,6 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick,
         onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
@@ -370,7 +361,7 @@ const TableGrid = props => {
       }
       return /*#__PURE__*/React.createElement(Table.Summary, {
         fixed: true
-      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(columns).filter(col => col.hidden !== true).map((col, index) => {
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns([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;
@@ -394,7 +385,7 @@ const TableGrid = props => {
         }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
       })));
     },
-    pagination: pagination && pagination.onChange ? false : {
+    pagination: !pagination || pagination && pagination.onChange ? false : {
       showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
       ...pagination
     },
@@ -409,11 +400,11 @@ const TableGrid = props => {
           justifyContent: 'space-between',
           alignItems: 'center'
         }
-      }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement(Toolbar
+      }, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement(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'
@@ -434,53 +425,23 @@ const TableGrid = props => {
       }, pagination)), showColumnChoose && /*#__PURE__*/React.createElement(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.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.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.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.createElement(Pagination
+  })), /*#__PURE__*/React.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({
     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?.());
 };
 export default TableGrid;

package/es/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/es/grid-component/hooks/{useColumns → columns}/index.js

@@ -1,5 +1,3 @@
-// import * as React from 'react'
-
 import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
 import { NumericFormat, numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
@@ -34,15 +32,16 @@ export function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-export function flatColumns2(columns, parentKey = 'key') {
+export 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 === SELECTION_COLUMN) {
       return [...list, {
@@ -50,15 +49,15 @@ export 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
     }];
   }, []);
 }
@@ -125,8 +124,13 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
   const dateRangeFormat = 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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -361,7 +365,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       }, /*#__PURE__*/React.createElement(Select
       // options={translateOption(numberOperator, t)}
       , {
-        options: options,
+        options: find ? options : column.source ?? [],
         style: {
           width: '100%',
           marginBottom: 8

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

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } 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 { 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 HeaderContent = props => {
+  const {
+    t
+  } = props;
+  const {
+    headerTooltip,
+    headerText,
+    columnGroupText,
+    headerTemplate
+  } = props.column ?? {};
+  const text = React.useMemo(() => {
+    return columnGroupText ?? headerText;
+  }, [columnGroupText, headerText]);
+  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'
+    }
+    // style={{flex: 1}}
+    ,
+    className: classnames('', {})
+  }), headerTemplate ? getTemplate(headerTemplate) : 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)));
+};
+export default HeaderContent;

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

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } 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 { useIsOverflow } from "../useIsOverflow";
+// import {getTemplate} from "../utils";
+
+const TooltipStyle = styled.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] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift()]
+  });
+  const isOverflow = useIsOverflow(refs.reference);
+  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(), {
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    },
+    className: classnames('', {})
+  }), content()), isOpen && showTooltip !== false && isOverflow &&
+  /*#__PURE__*/
+  // {true  && (
+  React.createElement(FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles
+    }
+  }, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
+};
+export default TooltipContent;

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