es-grid-template 0.0.8 → 0.0.13

package/es/table-grid/styles.scss

@@ -0,0 +1,551 @@
+$prefix: 'ui-rc' !default;
+$antdPrefix: 'ant' !default;
+$primary: #eb4619 !default;
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+//$tableBorderColor: red !default;
+$tableBorderColor: #e0e0e0 !default;
+$border-radius: 6px !default;
+$body-color: #ffffff !default;
+$cell-selected-bg: #E6EFFD !default;
+$cell-index-selected-bg: #0550C5 !default;
+$cell-index-focus-bg: #CEDBEF !default;
+//$rowSelectedHoverBg: 'ui-rc' !default;
+
+.react-hot-toast {
+  font-size: 1rem;
+  color: $body-color;
+  letter-spacing: 0.14px;
+  box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
+  border-radius: $border-radius;
+}
+
+.popup-context-menu {
+  min-width: 200px;
+}
+
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  //right: 10px;
+  right: 0px;
+  bottom: 0;
+  z-index: 1;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+  //transform: translateY(-50%);
+  &.none {
+    cursor: auto;
+    display: none;
+  }
+}
+
+// -------------- Table -------------
+.#{$prefix}-table-wrapper {
+  &.table-none-column-select {
+    .#{$prefix}-table-cell {
+      &.#{$prefix}-table-selection-column {
+        padding: 0 !important;
+        overflow: hidden !important;
+        border-inline-end: 0 !important;
+        //flex: 0 0 0 !important;
+        //width: 0 !important;
+      }
+    }
+  }
+
+
+  .#{$prefix}-table-tbody {
+    .#{$prefix}-table-row {
+      &.#{$prefix}-table-row-selected {
+        >.#{$prefix}-table-cell {
+          background: #FEF2EF;
+        }
+      }
+      >.#{$prefix}-table-cell {
+        &.#{$prefix}-table-cell-row-hover {
+          background: #FBDED6;
+        }
+      }
+    }
+
+  }
+
+  .#{$prefix}-table-tbody-virtual {
+    .#{$prefix}-table-cell {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered {
+
+    .#{$prefix}-table-tbody-virtual {
+      .#{$prefix}-table-cell {
+        border-inline-end: 1px solid $tableBorderColor;
+      }
+    }
+
+  }
+
+  // ---------------- grid-editable---------------
+
+  &.grid-editable {
+
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-cell,
+    .#{$prefix}-table.#{$prefix}-table-small .cell-editable,
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>th,
+    .#{$prefix}-table.#{$prefix}-table-small .#{$prefix}-table-tbody>tr>td {
+      padding: 0;
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-thead > tr > th,
+      tfoot > tr > th,
+      tfoot > tr > td,
+      tfoot > tr > td.#{$prefix}-table-cell
+      {
+        padding: 5px 8px;
+      }
+    }
+
+    .#{$prefix}-table.#{$prefix}-table-small {
+      .#{$prefix}-table-selection-column{
+        padding: 5px 8px;
+      }
+    }
+
+    .ui-rc_cell-content {
+      user-select: none;
+    }
+
+    .ui-rc_cell-content.selected {
+      background-color: $cell-selected-bg;
+    }
+
+    .ui-rc_cell-content--index {
+      &.focus {
+        background-color: $cell-index-focus-bg;
+        //color: #fff;
+        font-weight: 500;
+      }
+      &.selected {
+        background-color: $cell-index-selected-bg;
+        color: #fff;
+        font-weight: 500;
+      }
+    }
+
+    .#{$prefix}-table-tbody {
+      .#{$prefix}-table-row {
+        &.#{$prefix}-table-row-selected {
+          >.#{$prefix}-table-cell {
+            background: #FEF2EF;
+          }
+        }
+        >.#{$prefix}-table-cell {
+          &.#{$prefix}-table-cell-row-hover {
+            background: #FBDED6;
+          }
+        }
+      }
+
+
+      .#{$prefix}-table-cell{
+
+        &.cell-editing {
+          padding: 0 !important;
+          &:focus-visible {
+            outline: none;
+          }
+          .ant-form-item ,
+          .ant-row.ant-form-item-row,
+          .ant-col.ant-form-item-control,
+          .ant-form-item-control-input,
+          .ant-form-item-control-input-content,
+          .ant-input{
+            height: 100%;
+            &:focus-visible {
+              outline: none;
+            }
+          }
+
+
+          .ant-input, .ant-picker{
+            border-radius: 0;
+          }
+        }
+        &.cell-editable {
+          padding: 0;
+          &:focus-visible {
+            outline: none;
+          }
+        }
+
+        .ui-rc_cell-content,
+        .ui-rc-table-cell-content{
+          height: 100%;
+        }
+        .ui-rc_content {
+          padding: 5px 8px;
+        }
+      }
+    }
+
+  }
+
+  // ---------------- grid-editable---------------
+
+  .#{$prefix}-table {
+
+   &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
+     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+   }
+
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        border-inline-start: 1px solid $tableBorderColor;
+        //border-inline-end: 1px solid $tableBorderColor;
+        border-top: 1px solid $tableBorderColor;
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead {
+              > tr:not(:last-child) {
+                > th {
+                  border-bottom: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+
+
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead,
+            > tbody,
+            > tfoot {
+              > tr {
+                > th,
+                > td {
+                  border-inline-end: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      >.#{$prefix}-table-title {
+        border: 1px solid $tableBorderColor;
+        border-bottom: 0;
+      }
+    }
+
+
+    .#{$prefix}-select-single .#{$prefix}-select-selector {
+      border-radius: 0;
+    }
+  }
+
+
+  .#{$prefix}-table-thead >tr>th,
+  .#{$prefix}-table-thead >tr>td {
+    background-color: #ffffff;
+  }
+
+  .#{$prefix}-table-thead {
+
+    > tr {
+      > th,
+      > td {
+        border-bottom: 1px solid $tableBorderColor;
+      }
+    }
+    .ui-rc-table-cell {
+      &.ui-rc-table-cell-fix-left-last {
+        .ui-rc-table-cell-content {
+          overflow: visible;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-summary {
+    .#{$prefix}-table-cell {
+      background-color: #fafafa;
+    }
+
+    > tr > td {
+      border-bottom: 1px solid $tableBorderColor;
+    }
+  }
+
+  .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
+    border-inline-start: 1px solid $tableBorderColor;
+  }
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::before {
+          border-inline-start: 1px solid $tableBorderColor;
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: -1px;
+        }
+      }
+    }
+  }
+
+
+  .#{$prefix}-table.#{$prefix}-table-bordered {
+    > .#{$prefix}-table-container {
+      > .#{$prefix}-table-header > table > thead > tr,
+      > .#{$prefix}-table-summary > table > tfoot > tr {
+        > .#{$prefix}-table-cell-fix-right-first::after {
+          border-inline-end: 0;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-table-ping-left {
+    .#{$prefix}-table-cell-fix-left-first::after,
+    .#{$prefix}-table-cell-fix-left-last::after {
+      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.2);
+    }
+  }
+
+  .#{$prefix}-table-ping-right {
+    .#{$prefix}-table-cell-fix-right-first::after,
+    .#{$prefix}-table-cell-fix-right-last::after {
+      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+    }
+  }
+
+  .#{$prefix}-spin-nested-loading >div>.#{$prefix}-spin {
+    max-height: 100%;
+  }
+
+
+}
+
+// -------------- Checkbox ----------
+
+.#{$prefix}-checkbox-indeterminate {
+  &:hover {
+    .#{$prefix}-checkbox-inner {
+      border-color: $primary !important; ;
+    }
+  }
+  .#{$prefix}-checkbox-inner {
+    &:after {
+      background-color: $primary;
+    }
+  }
+}
+
+.#{$prefix}-checkbox {
+  &.#{$prefix}-checkbox-checked {
+    &:hover {
+      .#{$prefix}-checkbox-inner {
+        background-color: $primary;
+        border-color: $primary;
+      }
+    }
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+}
+
+.#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+}
+
+.#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
+  .#{$prefix}-checkbox-inner {
+    border-color: $primary;
+  }
+  .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
+    .#{$prefix}-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+}
+
+// ------------ Tree ---------------
+
+.#{$prefix}-tree {
+  .#{$prefix}-tree-checkbox-checked {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
+    .#{$prefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ ant Tree ---------------
+
+.#{$antdPrefix}-tree {
+  .#{$antdPrefix}-tree-checkbox-checked {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+      border-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      background-color: $primary;
+    }
+  }
+
+  .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
+  .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
+    .#{$antdPrefix}-tree-checkbox-inner {
+      border-color: $primary;
+    }
+  }
+}
+
+
+// ------------ paging ---------------
+
+.#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
+  margin: 0;
+}
+
+
+.#{$prefix}-pagination {
+  &::before {
+    content: "";
+    position: absolute;
+    border-left: 1px solid $tableBorderColor;
+    height: 55px;
+    bottom: 0;
+    left: 0;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    border-left: 1px solid $tableBorderColor;
+    height: 55px;
+    bottom: 0;
+    visibility: visible;
+    right: 0;
+  }
+  border-bottom: 1px solid $tableBorderColor;
+  .#{$prefix}-pagination-item-active {
+    border-color: $primary;
+    &:hover {
+      border-color: $primary;
+      a {
+        color: $primary;
+      }
+    }
+    a {
+      color: $primary;
+    }
+  }
+  .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
+    .#{$prefix}-pagination-item-container {
+      .#{$prefix}-pagination-item-link-icon {
+        color: $primary;
+      }
+    }
+  }
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+  //border-inline-end: 1px solid $tableBorderColor;
+  border-inline-end: 1px solid $tableBorderColor;
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+  //border-inline-end: 1px solid $tableBorderColor;
+  border-inline-end: 0 solid $tableBorderColor;
+}
+
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-inline-end: 1px solid $tableBorderColor;
+}
+
+.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
+  border-inline-end: 0 solid $tableBorderColor;
+}
+
+
+
+.#{$prefix}-table-wrapper {
+  .#{$prefix}-table {
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table > tbody > tr {
+            > th,
+            > td {
+              > .#{$prefix}-table-expanded-row-fixed::after {
+                // Thêm CSS ở đây
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.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 {
+  padding: 5px 8px;
+}

package/lib/{CheckboxFilter.js → grid-component/CheckboxFilter.js}

@@ -112,7 +112,6 @@ const CheckboxFilter = props => {
     // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
     [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
   });
-  console.log('selectedKeys', selectedKeys);
   const empty = /*#__PURE__*/React.createElement(_rcMasterUi.Empty, {
     image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
     description: locale.filterEmptyText,

package/lib/{ColumnsChoose.js → grid-component/ColumnsChoose.js}

@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1k89i9w-0"
+  componentId: "es-grid-template__sc-1ix8yky-0"
 })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
 const ColumnsChoose = props => {
   const {

package/lib/grid-component/EditableCell.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ColumnEditType, IFormat } from "./type";
+import type { EditType } from "rc-master-ui";
+interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
+    t?: any;
+    editing: boolean;
+    dataIndex: string;
+    title: any;
+    editType: EditType;
+    record: DataType;
+    index: number;
+    format?: IFormat;
+    column: ColumnEditType<DataType>;
+    indexRow: number;
+    indexCol: number;
+    rowKey: any;
+}
+declare const EditableCell: <T>(props: React.PropsWithChildren<EditableCellProps<T>>) => React.JSX.Element;
+export default EditableCell;