es-grid-template 1.2.1 → 1.2.2

package/assets/index.css

@@ -13,6 +13,9 @@
 .ui-rc-table-wrapper p {
   margin: 0;
 }
+.ui-rc-table-wrapper .ui-rc-table {
+  color: rgba(0, 0, 0, 0.8705882353);
+}
 .ui-rc-table-wrapper.table-none-column-select .ui-rc-table-cell.ui-rc-table-selection-column {
   padding: 0 !important;
   overflow: hidden !important;
@@ -100,7 +103,7 @@
 .ui-rc-table-wrapper .ui-rc-table-thead > tr > th,
 .ui-rc-table-wrapper .ui-rc-table-thead > tr > td {
   border-bottom: 1px solid #e0e0e0;
-  background: #fff;
+  font-weight: 500;
 }
 .ui-rc-table-wrapper .ui-rc-table-summary .ui-rc-table-cell {
   background-color: #fafafa;
@@ -191,12 +194,21 @@
 .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-right {
+  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.ui-rc-table-cell-fix-right.cell-border-end {
   z-index: 3;
 }
@@ -209,9 +221,15 @@
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-right-first.next-cell-border-left::before {
   border-inline-start: 1px solid #0550C5;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-right-first.next-cell-paste-border-left::before {
+  border-inline-start: 1px dashed #949494;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-right-first.fixed-cell-border-left::before {
   border-inline-start: 1px solid #0550C5;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-right-first.fixed-cell-paste-border-left::before {
+  border-inline-start: 1px dashed #949494;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table .ui-rc-table-tbody .rc-ui-cell-editable.cell-editable.ui-rc-table-cell-fix-left-last.cell-border-end {
   z-index: 3;
 }
@@ -233,10 +251,12 @@
 .ui-rc-table-wrapper.grid-editable .ui-rc-table.ui-rc-table-ping-right .ui-rc-table-tbody .rc-ui-cell-editable.cell-border-end {
   z-index: 1;
 }
+.ui-rc-table-wrapper.grid-editable .ui-rc-table.ui-rc-table-small .ui-rc-table-selection-column {
+  padding: 6px 8px;
+}
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content {
   user-select: none;
-  padding: 8px 8px;
-  min-height: 23px;
+  padding: 7px 8px;
   overflow: hidden;
 }
 .ui-rc-table-wrapper.grid-editable .ui-rc_cell-content .ui-rc_content {
@@ -469,9 +489,6 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.ui-rc-table-wrapper.grid-editable .ui-rc-table-tbody .ui-rc-table-cell.cell-editing {
-  padding: 0 !important;
-}
 .ui-rc-table-wrapper.grid-editable .ui-rc-table-tbody .ui-rc-table-cell.cell-editing:focus-visible {
   outline: none;
 }
@@ -639,17 +656,6 @@
   color: #eb4619;
 }
 
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-title,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-footer,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > td,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > td {
-  font-size: 13px;
-}
-
 .ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell:has(.ant-color-picker-trigger) {
   padding: 1px 8px;
 }
@@ -676,4 +682,14 @@
   border-inline-end: 1px solid #e0e0e0;
 }
 
+.ui-rc-toolbar-bottom .be-toolbar-item .toolbar-dropdown-button .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+  border-color: #28c76f;
+}
+.ui-rc-toolbar-bottom .be-toolbar-item .toolbar-dropdown-button .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+  border-color: #28c76f;
+}
+.ui-rc-toolbar-bottom .be-toolbar-item .toolbar-dropdown-button .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item .ant-btn-icon {
+  color: #28c76f;
+}
+
 /*# sourceMappingURL=index.css.map */

package/assets/index.scss

@@ -36,6 +36,13 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     margin: 0;
   }
 
+  .ui-rc-table {
+    //font-family: $fontFamily;
+    color: #000000de;
+    //font-weight: 500;
+  }
+
+
 
   &.table-none-column-select {
     .#{$prefix}-table-cell {
@@ -178,12 +185,14 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
   }
 
   .#{$prefix}-table-thead {
+    //font-weight: 400;
 
     > tr {
       > th,
       > td {
         border-bottom: 1px solid $tableBorderColor;
-        background: #fff;
+        //background: #fff;
+        font-weight: 500;
       }
     }
 
@@ -326,6 +335,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       overflow: unset;
 
       display: flex;
+      //--------
       padding: 0;
 
       .#{$prefix}-table-row-expand-icon {
@@ -342,14 +352,26 @@ $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-paste-border-left {
+          border-inline-end: 1px dashed #949494;
+        }
+
         &.cell-border-right {
           border-inline-end: 1px solid $border-selected-color;
         }
 
+        &.cell-paste-border-right {
+          border-inline-end: 1px dashed #949494;
+        }
+
         &.#{$prefix}-table-cell-fix-left {
           &:has(.ui-rc_cell-content.selected) {
           }
@@ -383,11 +405,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             }
           }
 
+
+          &.next-cell-paste-border-left {
+            &::before {
+              border-inline-start: 1px dashed #949494;
+            }
+          }
+
           &.fixed-cell-border-left {
             &::before {
               border-inline-start: 1px solid $border-selected-color;
             }
           }
+          &.fixed-cell-paste-border-left {
+            &::before {
+              border-inline-start: 1px dashed #949494;
+            }
+          }
 
         }
 
@@ -493,14 +527,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     .#{$prefix}-table.#{$prefix}-table-small {
       .#{$prefix}-table-selection-column{
         //padding: 8px 8px;
+        padding: 6px 8px;
       }
     }
 
     .ui-rc_cell-content {
       //position: relative;
       user-select: none;
-      padding: 8px 8px;
-      min-height: 23px;
+      //padding: 8px 8px;
+      padding: 7px 8px;
+      //min-height: 23px;
       overflow: hidden;
 
       .ui-rc_content {
@@ -520,6 +556,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         cursor: crosshair;
         right: 0;
         bottom: 0;
+        //background: red;
 
         .dot-point {
           position: absolute;
@@ -627,7 +664,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         }
 
         &.cell-editing {
-          padding: 0 !important;
+          //padding: 0 !important;
           &:focus-visible {
             outline: none;
           }
@@ -965,7 +1002,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
     tfoot > tr > th,
     tfoot > tr > td {
       //padding: 8px 8px;
-      font-size: 13px;
+      //font-size: 13px;
     }
   }
 }
@@ -1004,3 +1041,23 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
   border-inline-end: 1px solid $tableBorderColor;
 }
+
+
+// toolbar
+
+.ui-rc-toolbar-bottom {
+  .be-toolbar-item {
+    .toolbar-dropdown-button {
+      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
+        border-color: #28c76f;
+      }
+      .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
+        border-color: #28c76f;
+        .ant-btn-icon {
+          color: #28c76f;
+        }
+      }
+    }
+
+  }
+}

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;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}.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;.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;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}}}.react-resizable{position:relative;background-clip:padding-box;}.react-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;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}.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;.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;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;z-index:-1;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;z-index:-1;}}}.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/InternalTable.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'react-resizable/css/styles.css';
 import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';

package/es/grid-component/InternalTable.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import { Resizable } from "react-resizable";
+import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { addRowIdArray,
 // convertFlatColumn,
@@ -39,7 +40,7 @@ const ResizableTitle = props => {
       width: width,
       height: 0,
       handle: /*#__PURE__*/React.createElement("span", {
-        className: "react-resizable-handle",
+        className: "rc-resizable-handle",
         onClick: e => {
           e.stopPropagation();
         }

package/es/grid-component/TableGrid.js

@@ -14,7 +14,7 @@ isEmpty,
 sumDataByField
 // updateArrayByKey
 } from "./hooks";
-import { ConfigProvider } from "antd";
+// import {ConfigProvider} from "antd";
 import { flatColumns } from "./hooks/columns";
 import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
@@ -291,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,
@@ -452,6 +442,6 @@ const TableGrid = props => {
     // @ts-ignore
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), bottomToolbar?.()));
+  }, pagination)), bottomToolbar?.());
 };
 export default TableGrid;

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

@@ -18,15 +18,14 @@ const HeaderContent = props => {
     headerTooltip,
     headerText,
     columnGroupText,
-    headerTemplate,
-    title
+    headerTemplate
   } = props.column ?? {};
   const text = React.useMemo(() => {
-    return columnGroupText ?? headerText ?? title;
-  }, [columnGroupText, headerText, title]);
+    return columnGroupText ?? headerText;
+  }, [columnGroupText, headerText]);
   const tooltip = React.useMemo(() => {
-    return headerTooltip ?? columnGroupText ?? headerText ?? title;
-  }, [columnGroupText, headerText, headerTooltip, title]);
+    return headerTooltip ?? columnGroupText ?? headerText;
+  }, [columnGroupText, headerText, headerTooltip]);
   const [isOpen, setIsOpen] = useState(false);
   const {
     refs,
@@ -66,7 +65,7 @@ const HeaderContent = props => {
     // style={{flex: 1}}
     ,
     className: classnames('', {})
-  }), headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText || title) && /*#__PURE__*/React.createElement(FloatingPortal, {
+  }), 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",

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

@@ -156,7 +156,9 @@ const useColumns = config => {
           // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
           // title: () => (<span>aaa</span>),
           title: () => /*#__PURE__*/React.createElement(HeaderContent, {
-            column: col,
+            column: {
+              ...col
+            },
             t: t
           }),
           // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
@@ -181,7 +183,13 @@ const useColumns = config => {
         }
         if (col.key === 'command') {
           return {
-            ...transformedColumn
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number',
+              style: {
+                padding: '2px 8px'
+              }
+            })
           };
         }
         return {

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

@@ -5,7 +5,7 @@ import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../typ
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
-import type { ColumnsTable } from "../type";
+import type { ColumnsTable } from "./../index";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
@@ -55,26 +55,6 @@ export declare const getFirstSelectCell: (selectCells: any) => {
     col: number;
 };
 export declare const getRowsPasteIndex: (pasteRows: any) => number[];
-export declare const mmm: (string | number | boolean)[][];
-export declare function cloneRows(array: any[], numRows: number): any[];
-export declare function addRows1(arr: any[], n: number): any[];
-export declare function addRows2(arr: any[], n: number): {
-    newArr: any[];
-    addedRows: any[];
-};
-export declare function addRows(arr: any[], n: number): {
-    newArr: any[];
-    addedRows: any[];
-};
-export declare function addRows4(arr: any[], n: number): {
-    newArr: any[];
-    addedRows: any[];
-};
-export declare function addRows6(arr: any, n: number): {
-    newArr: any[];
-    addedRows: any[];
-};
-export declare function addRows7(arr: any, n: number): any;
 export declare function addRows8(arr: any, n: number): {
     combined: any;
     addedRows: any[];
@@ -84,5 +64,5 @@ export declare function addRows8(arr: any, n: number): {
 };
 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: ColumnsTable, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];