es-grid-template 1.8.54 → 1.8.56

package/es/table-component/TableContainer.js

@@ -93,6 +93,15 @@ const TableContainer = props => {
       settableHeight(totalHeight - topHeight - bottomHeight);
     }
   }, [id, height, editAble, minHeight]);
+  React.useEffect(() => {
+    const handleClickOutside = () => {
+      setFocusedCell(undefined);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];

package/es/table-component/TableContainerEdit.js

@@ -1924,14 +1924,15 @@ const TableContainerEdit = props => {
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: 'ui-rc-toolbar-bottom'
+    className: classNames('ui-rc-toolbar-bottom', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
     // style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
-    ,
-    style: {
-      borderBottom: '1px solid #e0e0e0',
-      borderRight: '1px solid #e0e0e0',
-      borderLeft: '1px solid #e0e0e0'
-    }
+    // style={{
+    //   borderBottom: '1px solid #e0e0e0',
+    //   borderRight: '1px solid #e0e0e0',
+    //   borderLeft: '1px solid #e0e0e0'
+    // }}
   }, /*#__PURE__*/React.createElement(Toolbar, {
     style: {
       width: '100%'
@@ -1941,9 +1942,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
-  // style={{padding: '0.75rem 1rem'}}
-  , _extends({}, pagination, {
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,

package/es/table-component/body/TableBodyCell.js

@@ -430,57 +430,65 @@ const TableBodyCell = props => {
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        toggleRowSelection({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
         cell.row.getToggleSelectedHandler()(e);
 
-        // setIsSelectionChange({
-        //   isChange: true,
-        //   type: 'rowSelected',
-        //   rowData: record,
-        //   rowsData: []
-        // })
+        // if (cell.row.getIsSelected()) { // nếu đã chọn
 
-        if (cell.row.getIsSelected()) {
-          // nếu đã chọn
+        //   const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
 
-          const aaa = isSelectionChange?.rowsData.filter(it => it.id !== cell.row.id);
-          setIsSelectionChange({
-            isChange: true,
-            type: 'rowSelected',
-            rowData: cell.row.original,
-            rowsData: aaa ?? []
-          });
-        } else {
-          const {
-            rowsData
-          } = isSelectionChange ?? {};
-          const abc = rowsData && rowsData.length > 0 ? [...rowsData] : [];
-          abc.push(cell.row);
-          setIsSelectionChange({
-            isChange: true,
-            type: 'rowSelected',
-            rowData: cell.row.original,
-            rowsData: abc
-          });
-        }
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: aaa ?? []
+        //   })
+
+        // } else {
+
+        //   const { rowsData } = isSelectionChange ?? {}
+
+        //   const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
+
+        //   abc.push(cell.row)
+
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: abc
+        //   })
+        // }
       }
-    }
+    },
+    onKeyUp: () => {}
 
     // onDoubleClick={() => { }}
     ,
 
     onClick: e => {
-      if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
-        toggleRowSelection({
-          e,
-          cell,
-          setIsSelectionChange,
-          isSelectionChange,
-          selectionSettings
-        });
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: cell.row.id
-        });
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
       }
     }
   }, /*#__PURE__*/React.createElement("div", {

package/es/table-component/body/TableBodyCellEdit.js

@@ -242,12 +242,18 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
   const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -429,7 +435,10 @@ const TableBodyCellEdit = props => {
     const rs = unFlattenData(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseEnter(rowId, colId) {
+  function handleMouseEnter(e, rowId, colId) {
+    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      setIsOpenTooltip(true);
+    }
     if (isSelecting) {
       setEndCell?.({
         rowId,
@@ -1044,12 +1053,8 @@ const TableBodyCellEdit = props => {
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-delay-show": 500
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    ,
-    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
     className: classNames(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1099,7 +1104,7 @@ const TableBodyCellEdit = props => {
         }
       }
     },
-    onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
+    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
     onKeyDown: e => {
       if (!isEditing) {

package/es/table-component/footer/TableFooterCell.js

@@ -62,8 +62,8 @@ const TableFooterCell = ({
       display: 'flex',
       ...getCommonPinningStyles(column),
       // width: column?.getSize() ?? column.getSize(),
-      minWidth: column?.getSize(),
-      backgroundColor: "#fafafa"
+      minWidth: column?.getSize()
+      // backgroundColor: "#fafafa",
     }
   }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
 };

package/es/table-component/footer/TableFooterRow.js

@@ -29,11 +29,12 @@ const TableFooterRow = ({
     style: {
       display: "grid",
       width: "100%",
-      borderBottom: "1px solid #e0e0e0",
-      borderTop: "1px solid #e0e0e0",
+      // borderBottom: "1px solid #e0e0e0",
+      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
-    }
+    },
+    className: "ui-rc-grid-footer-row"
   }, visibleColumns.map(header => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {
       key: header.id

package/es/table-component/hook/useColumns.js

@@ -270,7 +270,12 @@ export const toggleRowSelection = props => {
       } else {
         // chỉ thêm vào row hiện tại
 
-        checkedRows = [...prevSelected, row];
+        const isInclude = prevSelected.find(it => it.id === cell.row.id);
+        if (isInclude) {
+          checkedRows = [...prevSelected];
+        } else {
+          checkedRows = [...prevSelected, row];
+        }
       }
       setIsSelectionChange({
         isChange: true,

package/es/table-component/style.scss

@@ -1,24 +1,39 @@
 $prefix: 'ui-rc' !default;
 $antdPrefix: 'ant' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+$border-radius: 6px !default;
+
 $primary: #eb4619 !default;
+
 $rowHoverBg: #FBDED6 !default;
 $rowSelectedBg: #FEF2EF !default;
-//$tableBorderColor: red !default;
 $tableBorderColor: #e0e0e0 !default;
-//$tableBorderColor: #C4C4C4 !default;
-//$tableBorderColor: #f0f0f0 !default;
-$border-radius: 6px !default;
 $border-selected-color: #0550C5 !default;
 $body-color: #ffffff !default;
-//$cell-selected-bg: #E6EFFD !default;
 $cell-selected-bg: #F3F8FF !default;
-//$cell-index-selected-bg: #0550C5 !default;
 $cell-index-selected-bg: #1869E6 !default;
-//$cell-index-focus-bg: #CEDBEF !default;
 $cell-index-focus-bg: #E6EFFD !default;
-// $rowSelectedHoverBg: 'ui-rc' !default;
-$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
-$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+
+// 404071
+
+// dark
+$tableBorderColorDark: #44485E !default;
+
+$rowHoverBg-Dark: #404071 !default;
+
+$rowSelectedBg-Dark: #25293C !default;
+
+$border-selected-color-Dark: #538ff1 !default;
+$cell-index-selected-bg-Dark: #1869E6 !default;
+
+$body-color-Dark: #2F3349 !default;
+
+$cell-selected-bg-Dark: #F3F8FF !default;
+$cell-index-focus-bg-Dark: #E6EFFD !default;
+
+
+
 
 
 * {
@@ -45,6 +60,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
   .#{$prefix}-grid-container {
 
     border: 1px solid $tableBorderColor;
+    // border-bottom: 0;
     border-right: 0;
     font-size: 13px;
 
@@ -271,7 +287,9 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           .#{$prefix}-grid-cell:not(.editable) {
             // background-color: $rowHoverBg;
 
-            &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
+            &.cell-editable,
+            &.#{$prefix}-grid-cell-index,
+            &.#{$prefix}-grid-cell-selection {
               // background-color: transparent;
             }
 
@@ -598,10 +616,26 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
-      background-color: rgb(250, 250, 250);
+      // background-color: rgb(250, 250, 250);
+      // background-color: #fafafa;
+
+      .#{$prefix}-grid-footer-row {
+        border-bottom-width: 1px;
+        border-bottom-color: $tableBorderColor;
+        border-bottom-style: solid;
+
+        border-top-width: 1px;
+        border-top-color: $tableBorderColor;
+        border-top-style: solid;
+
+
+
+      }
 
       .#{$prefix}-grid-cell {
-        background-color: $body-color;
+
+        background-color: #fafafa;
+
         border-inline-end: 1px solid $tableBorderColor;
       }
     }
@@ -796,6 +830,10 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
   // bottom toolbar
   .ui-rc-toolbar-bottom {
+    // border-bottom: 1px solid #e0e0e0;
+    border-right: 1px solid #e0e0e0;
+    border-left: 1px solid #e0e0e0;
+
     .be-toolbar-item {
       .toolbar-dropdown-button {
         .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
@@ -814,6 +852,10 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
   }
 
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
   .ui-rc-toolbar-bottom {
     position: relative;
     padding: .25rem 1rem;
@@ -1219,4 +1261,216 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
 
 
+}
+
+
+// #region theme
+// theme
+
+//  ------------light-----------
+
+.#{$prefix}-grid-light {
+  background-color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {}
+}
+
+
+// rgb(225 222 245 / 0.12 
+
+.#{$prefix}-grid-dark {
+  background-color: $body-color-Dark;
+  color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell {
+    // background-color: $body-color-Dark;
+    // color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tfoot .ui-rc-grid-cell {
+    background-color: #25293C;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-toolbar-bottom {
+      background-color: $body-color-Dark;
+      color: #E1DEF5E6;
+      border-color: $tableBorderColorDark;
+    }
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container.ui-rc-table-ping-right .ui-rc-grid-cell.ui-rc-grid-cell-fix-right-first::before {
+    border-inline-start-color: $tableBorderColorDark;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell.cell-editable {
+
+
+    &.cell-border-right {
+      border-right-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-bottom {
+      border-bottom-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-left::before {
+      border-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-top::after {
+      border-color: $border-selected-color-Dark;
+    }
+  }
+
+  .ui-rc-pagination {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+
+    border-bottom: 1px solid $tableBorderColorDark;
+    border-top: 1px solid $tableBorderColorDark;
+    border-inline-color: $tableBorderColorDark;
+
+    .ui-rc-pagination-prev {
+      .anticon.anticon-left {
+        color: #ffffff;
+      }
+    }
+
+    .ui-rc-pagination-disabled {
+      .anticon.anticon-left {
+        color: #7d7a7a;
+      }
+    }
+
+    .ui-rc-pagination-next {
+      .anticon.anticon-right {
+        color: #ffffff;
+      }
+
+      &.ui-rc-pagination-disabled {
+        .anticon.anticon-right {
+          color: #7d7a7a;
+        }
+      }
+
+    }
+  }
+
+  .ui-rc-toolbar {
+    .ui-rc-toolbar-selection-item {
+      background-color: #25293C;
+      color: #E1DEF5E6;
+    }
+
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-top-toolbar {
+      border-top-color: $tableBorderColorDark;
+      border-inline-color: $tableBorderColorDark;
+
+    }
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-container {
+      border-bottom: 0;
+      border-color: $tableBorderColorDark;
+
+      .ui-rc-grid-tbody {
+        .ui-rc-grid-row {
+          border-bottom-color: $tableBorderColorDark;
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          background-color: $body-color-Dark;
+          color: #E1DEF5E6;
+
+          &.ui-rc-grid-cell-selected {
+
+            background-color: #33335d !important;
+
+          }
+
+          &.disable {
+            background-color: #272A2F;
+          }
+
+          // input
+          // .ui-rc-table-select-selector,
+          // .ui-rc-select-selector, 
+          // .ant-input-outlined,
+          // .ant-picker-outlined {
+          //   background-color: #272933;
+          //   color: #ffffff;
+
+          //   .ui-rc-table-select-selection-placeholder,
+          //   .ui-rc-select-selection-placeholder {
+          //     color: #797171;
+          //   }
+          // }
+          // .ant-picker-input {
+
+          //   input {
+          //     &::placeholder {
+          //       color: #797171;
+          //     }
+          //   }
+          // }
+          // .ant-input-outlined::placeholder {
+          //   color: #797171;
+          // }
+
+
+        }
+
+        .ui-rc-grid-row-selected {
+          .ui-rc-grid-cell {
+            background-color: $rowSelectedBg-Dark;
+
+            // &.disable {
+            //   background-color: #272A2F;
+            // }
+          }
+        }
+
+      }
+
+      .ui-rc-grid-thead {
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          border-bottom-color: $tableBorderColorDark;
+        }
+      }
+
+      .ui-rc-grid-tfoot {
+        .#{$prefix}-grid-footer-row {
+          border-bottom-color: $tableBorderColorDark;
+
+          border-top-color: $tableBorderColorDark;
+
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+        }
+      }
+    }
+  }
+
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom-color: $tableBorderColorDark;
+  }
 }