es-grid-template 1.3.5 → 1.3.7

package/assets/index.css

@@ -49,6 +49,15 @@
 .ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell {
   line-height: 22px;
 }
+.ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell:focus-visible {
+  outline: none;
+}
+.ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell.disable {
+  background-color: #f0f0f0;
+}
+.ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell.selected {
+  background-color: #E6EFFD;
+}
 .ui-rc-table-wrapper .ui-rc-table-tbody .ui-rc-table-cell .ui-rc-table-cell-content {
   line-height: 22px;
 }
@@ -207,24 +216,35 @@
   top: 8px;
   left: 8px;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.rc-ui-cell-index.focus {
+  background-color: #CEDBEF;
+  font-weight: 500;
+}
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.rc-ui-cell-index.selected {
+  background-color: #0550C5;
+  color: #fff;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-top {
   border-bottom: 1px solid #0550C5;
 }
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-bottom {
   border-bottom: 1px solid #0550C5;
 }
-.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-bottom {
-  border-bottom: 1px dashed #949494;
-}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-left {
   border-inline-end: 1px solid #0550C5;
 }
-.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-left {
-  border-inline-end: 1px dashed #949494;
-}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-border-right {
   border-inline-end: 1px solid #0550C5;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-top {
+  border-bottom: 1px dashed #949494;
+}
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-bottom {
+  border-bottom: 1px dashed #949494;
+}
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-left {
+  border-inline-end: 1px dashed #949494;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.cell-paste-border-right {
   border-inline-end: 1px dashed #949494;
 }
@@ -283,8 +303,11 @@
   height: 10px;
   position: absolute;
   cursor: crosshair;
-  right: 0;
-  bottom: 0;
+  right: -1px;
+  bottom: -1px;
+}
+.ui-rc-table-wrapper.grid-editable .ui-rc_cell-content .dragging-point.hidden {
+  display: none;
 }
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content .dragging-point .dot-point {
   position: absolute;
@@ -292,15 +315,12 @@
   height: 8px;
   border-radius: 6px;
   background-color: #0550C5;
-  bottom: -4px;
-  right: -4px;
+  bottom: -3px;
+  right: -3px;
 }
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content.selected {
   background-color: #E6EFFD;
 }
-.ui-rc-table-wrapper.grid-editable .ui-rc_cell-content.disable {
-  background-color: #f0f0f0;
-}
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content--index.focus {
   background-color: #CEDBEF;
 }

package/assets/index.scss

@@ -144,6 +144,19 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
       line-height: 22px;
+      &:focus-visible {
+        outline: none;
+      }
+
+
+      &.disable {
+        background-color: #f0f0f0;
+      }
+
+      &.selected {
+        //background: red;
+        background-color: $cell-selected-bg;
+      }
 
       .ui-rc-table-cell-content {
         line-height: 22px;
@@ -406,7 +419,20 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         left: 8px;
       }
 
+      &.rc-ui-cell-index {
+        &.focus {
+          background-color: $cell-index-focus-bg;
+          font-weight: 500;
+        }
+        &.selected {
+          background-color: $cell-index-selected-bg;
+          color: #fff;
+          //font-weight: 500;
+        }
+      }
+
       &.cell-editable {
+
         &.cell-border-top {
           border-bottom: 1px solid $border-selected-color;
         }
@@ -415,26 +441,31 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           border-bottom: 1px solid $border-selected-color;
         }
 
-        &.cell-paste-border-bottom {
-          border-bottom: 1px dashed #949494;
+        &.cell-border-left {
+          border-inline-end: 1px solid $border-selected-color;
         }
 
-        &.cell-border-left {
+        &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;
         }
 
-        &.cell-paste-border-left {
-          border-inline-end: 1px dashed #949494;
+        &.cell-paste-border-top {
+          border-bottom: 1px dashed #949494;
         }
 
-        &.cell-border-right {
-          border-inline-end: 1px solid $border-selected-color;
+        &.cell-paste-border-bottom {
+          border-bottom: 1px dashed #949494;
+        }
+
+        &.cell-paste-border-left {
+          border-inline-end: 1px dashed #949494;
         }
 
         &.cell-paste-border-right {
           border-inline-end: 1px dashed #949494;
         }
 
+
         &.#{$prefix}-table-cell-fix-left {
           &:has(.ui-rc_cell-content.selected) {
           }
@@ -617,18 +648,22 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         height: 10px;
         position: absolute;
         cursor: crosshair;
-        right: 0;
-        bottom: 0;
+        right: -1px;
+        bottom: -1px;
         //background: red;
 
+        &.hidden {
+          display: none;
+        }
+
         .dot-point {
           position: absolute;
           width: 8px;
           height: 8px;
           border-radius: 6px;
           background-color: $border-selected-color;
-          bottom: -4px;
-          right: -4px;
+          bottom: -3px;
+          right: -3px;
         }
 
       }
@@ -638,9 +673,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
-    .ui-rc_cell-content.disable {
-      background-color: #f0f0f0;
-    }
+    //.ui-rc_cell-content.disable {
+    //  background-color: #f0f0f0;
+    //}
 
     .ui-rc_cell-content--index {
       &.focus {

package/es/grid-component/EditableCell.js

@@ -572,6 +572,7 @@ const EditableCell = props => {
           },
           treeCheckable: column?.editSelectSettings?.selectMode === 'checkbox',
           filterTreeNode: filterTreeNode,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
           onSelect: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    heightTable?: number | string;
-}>> & string;
+interface GridProps {
+    $heightTable?: number | string;
+}
+export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+export {};

package/es/grid-component/GridStyle.js

@@ -2,4 +2,4 @@ import styled from "styled-components";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
+})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? typeof props.$heightTable === 'string' ? props.$heightTable : `${props.$heightTable}px` : undefined);

package/es/grid-component/TableGrid.js

@@ -3,13 +3,16 @@ import React, { Fragment } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
 import { Empty, Table, Toolbar } from "rc-master-ui";
+// import  Table from "../../core/table"
+
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
 import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
 // filterDataByColumns2,
-filterDataByColumns3,
+// filterDataByColumns3,
+filterDataByColumns4,
 // convertFlatColumn,
 isEmpty,
 // newGuid,
@@ -365,8 +368,10 @@ const TableGrid = props => {
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
-    },
-    dataSource: columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []
+    }
+    // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
+    ,
+    dataSource: columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : []
     // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
@@ -391,17 +396,16 @@ const TableGrid = props => {
     },
     rowSelection: columns && columns.length === 0 ? undefined : {
       ...selectionSettings,
-      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      // type: selectionSettings?.mode,
+      type: mode,
+      columnWidth: columnWidth ?? 50,
       onChange: onSelectChange,
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
-      defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      defaultSelectedRowKeys: defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
-      // ...rowSelection,
-      // checkStrictly: false,
-
-      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
     // onScroll={() => {
@@ -418,7 +422,7 @@ const TableGrid = props => {
       }
       return /*#__PURE__*/React.createElement(Table.Summary, {
         fixed: true
-      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns([Table.SELECTION_COLUMN, ...columns]).filter(col => col.hidden !== true).map((col, index) => {
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [Table.SELECTION_COLUMN, ...columns] : [...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;
@@ -442,7 +446,7 @@ const TableGrid = props => {
         }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
       })));
     },
-    pagination: !pagination || pagination && pagination.onChange ? false : {
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
       showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
       ...pagination
     },

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

@@ -7,7 +7,7 @@ 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";
-import Number from "../../number";
+import NumberInput from "../../number";
 // import {Typography} from "antd";
 const {
   RangePicker
@@ -76,7 +76,8 @@ export const getValueCell = (column, value, format) => {
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
-      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(value.toFixed(dec)).toString() : value.toString() : '0';
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -144,7 +145,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Number, {
+      }, /*#__PURE__*/React.createElement(NumberInput, {
         t: t,
         value: selectedKeys[0],
         onChange: vals => {

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

@@ -154,8 +154,8 @@ const useColumns = config => {
   const transformColumns = useCallback(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    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);
+    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -191,19 +191,18 @@ const useColumns = config => {
             children: convertColumns(transformedColumn.children)
           };
         }
-        if (["index", "#"].includes(col.field)) {
+        if (transformedColumn.field === '#') {
           return {
             ...transformedColumn,
             onCell: () => ({
               className: 'cell-number'
             }),
             render: (val, record) => {
-              // return rowIndex + 1
               return findItemPath(dataSource, record, rowKey);
             }
           };
         }
-        if (col.field === 'command') {
+        if (transformedColumn.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({
@@ -289,6 +288,9 @@ const useColumns = config => {
             }
             if (col.field === firstNonGroupColumn?.field && record.children) {
               const currentGroupColumn = flatColumns2(cols).find(it => it.field === record.field);
+              if (currentGroupColumn?.template) {
+                return renderContent(currentGroupColumn, record[record.field], record, rowIndex, format);
+              }
               return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, format));
             }
             return renderContent(col, value, record, rowIndex, format);

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

@@ -62,6 +62,13 @@ export declare function addRows8(arr: any, n: number): {
     combined: any[];
     addedRows: any[];
 };
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
 export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
@@ -76,6 +83,8 @@ 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 const shouldInclude: (item: any, queries: any[]) => any;
+export declare function filterDataByColumns4(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;
@@ -93,3 +102,17 @@ export declare function isRightMostInRegion(rowIndex: number, colIndex: number,
 export declare function isEqualSet(setA: any, setB: any): boolean;
 export declare function isBottomMostInRanges(rowIndex: number, colIndex: number, regions: any[]): boolean;
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
+export declare const sortedSetASC: (setValue: any) => Set<unknown>;
+export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
+export declare function getBottomRowCells(cellSet: any): any[];
+export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const onAddClassBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const addClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const removeClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const addClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const removeClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
+export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;