es-grid-template 1.8.65 → 1.8.66

package/lib/table-virtuoso/style.js

@@ -8,6 +8,7 @@ exports.GridStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const color = "#000000de";
 const BgColor = "#ffffff";
+const rowSelectedBg = "#FEF2EF";
 const tableBorderColor = "#e0e0e0";
 const tableBorderColorDark = "#44485E";
 const BgColorDark = "#343e59";
@@ -15,4 +16,4 @@ const colorDark = "#e6e4f3e6";
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:#33335d !important;}&.disable{background-color:#272A2F;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";}}}.", "-grid-cell{padding:7px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;outline:1px solid ", ";border:0;&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;outline:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:#33335d !important;}&.disable{background-color:#272A2F;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border:0;outline:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-virtuoso/style.scss

@@ -622,8 +622,9 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
       .#{$prefix}-grid-cell {
 
         background-color: inherit;
+        
 
-        border-inline-end: 1px solid $tableBorderColor;
+        // border-inline-end: 1px solid $tableBorderColor;
       }
     }
 

package/lib/table-virtuoso/table/Grid.js

@@ -124,7 +124,6 @@ const Grid = props => {
   }, [isSelectionChange, rowSelection, table.getState().rowSelection]);
   _react.default.useEffect(() => {
     if (sorterChange) {
-      console.log('12312312313123');
       const aa = table.getState().sorting;
       const rs = aa.map(it => {
         return {
@@ -144,7 +143,6 @@ const Grid = props => {
   _react.default.useEffect(() => {
     if (filterChange) {
       const operatorState = table.getState().operator;
-      console.log('operatorState', operatorState);
       const merged = columnFilters.map(filter => {
         const match = operatorState.find(op => op.id === filter.id);
         const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
@@ -156,8 +154,6 @@ const Grid = props => {
           operator: match ? match.operator : undefined
         };
       });
-      console.log('operatorState', operatorState);
-      console.log('merged', merged);
       if (onFilter) {
         onFilter?.((0, _utils.convertFilters)(merged));
       } else {

package/lib/table-virtuoso/table/TableContainer.js

@@ -28,7 +28,7 @@ const TableContainer = props => {
     table,
     id,
     prefix,
-    // commandClick,
+    commandClick,
     editAble,
     rowKey,
     format,
@@ -114,41 +114,28 @@ const TableContainer = props => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  const triggerCommandClick = args => {
+    // const { id: idCommand, rowId, rowData, index } = args
 
-  // React.useEffect(() => {
-
-  //   if (!tableContainerRef.current) {
-  //     return
-  //   }
-
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa = updateColumnWidthsRecursive(propsColumns, columnSizing)
-
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizingInfo])
-
-  // const triggerCommandClick = (args: Omit<CommandClick<RecordType>, 'rows'>) => {
-
-  //   // const { id: idCommand, rowId, rowData, index } = args
-
-  //   // const tmpData = [...dataSource]
-
-  //   if (commandClick) {
-  //     commandClick({
-  //       ...args,
-  //       rows: originData
-  //     })
-  //   }
-
-  // }
+    // const tmpData = [...dataSource]
 
+    if (commandClick) {
+      commandClick({
+        ...args,
+        rows: originData
+      });
+    }
+  };
   const handleOnGroup = value => {
     triggerGroupColumns?.(value);
   };
+  const handleCollapseAllGroup = () => {
+    setExpanded({});
+  };
+  const handleExpandAllGroup = () => {
+    const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
+    setExpanded((0, _utils.convertToObjTrue)(allKeys));
+  };
   const groupToolbar = () => {
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
@@ -166,7 +153,15 @@ const TableContainer = props => {
       columns: propsColumns ? (0, _utils2.flatColumns2)(propsColumns) : [],
       columnsGrouped: groupColumns,
       onSubmit: handleOnGroup
-    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Collapse2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleCollapseAllGroup
+    }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Expand2, {
+      fontSize: 16,
+      color: '#555555',
+      onClick: handleExpandAllGroup
+    })));
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
@@ -242,7 +237,6 @@ const TableContainer = props => {
       setExpanded,
       dataSource,
       originData,
-      // triggerFilter,
       wrapSettings,
       recordDoubleClick,
       selectionSettings,
@@ -253,8 +247,6 @@ const TableContainer = props => {
       setFilterChange,
       windowSize,
       isDataTree,
-      // focusedCell,
-      // setFocusedCell,
       rowClassName,
       onRowStyles,
       onRowFooterStyles,
@@ -262,12 +254,6 @@ const TableContainer = props => {
       table,
       pagination,
       groupSetting
-      // visible,
-      // setVisible,
-      // selectedKeys,
-      //  setSelectedKeys,
-      //  currentFilter, 
-      //  setCurrentFilter
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     tableContainerRef: tableContainerRef,
@@ -277,7 +263,8 @@ const TableContainer = props => {
     minHeight: minHeight,
     dataSource: dataSource,
     table: table,
-    columns: columns
+    columns: columns,
+    commandClick: triggerCommandClick
   })), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default

package/lib/table-virtuoso/table/TableWrapper.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
+import type { CommandClick } from '../../table-component/type';
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
@@ -11,6 +12,7 @@ type Props<T> = {
     dataSource: T[];
     summary?: boolean;
     loading?: boolean;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
     editAble?: boolean;
     showEmptyText?: boolean;
     contextMenuClick?: any;

package/lib/table-virtuoso/table/TableWrapper.js

@@ -29,7 +29,8 @@ const TableWrapper = props => {
     table,
     // columns,
     height,
-    id
+    id,
+    commandClick
   } = props;
   const {
     prefix
@@ -89,7 +90,8 @@ const TableWrapper = props => {
         return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({
           tableId: id,
           row: row,
-          table: table
+          table: table,
+          commandClick: commandClick
         }, props));
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.65",
+  "version": "1.8.66",
   "description": "es-grid-template",
   "keywords": [
     "react",

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

@@ -1,14 +0,0 @@
-import React from "react";
-import type { IFormat } from "./type";
-type Props = {
-    columns: any[];
-    dataSourceFilter?: any[];
-    onFilter?: (query: any, col?: any[]) => void;
-    mode?: 'sidebar' | 'dropdown';
-    defaultFilter?: any[];
-    leftFilterWidth?: number;
-    format?: IFormat;
-    t?: any;
-};
-declare const AdvanceFilter: (props: Props) => React.JSX.Element;
-export default AdvanceFilter;