es-grid-template 0.0.7 → 0.0.8

package/lib/hooks/constant.js

@@ -15,7 +15,7 @@ const numberOperator = exports.numberOperator = [{
   label: 'Greater than',
   key: '>'
 }, {
-  value: 'greaterthan',
+  value: 'greaterthanorequal',
   label: 'Greater Than or Equal',
   key: '>='
 }, {

package/lib/hooks/utils.d.ts

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import type { EditType, IColumnType, TypeFilter } from "ui-rc";
+import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
 import type { ColumnType } from "../type";
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
@@ -16,3 +16,4 @@ export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnType<any>) => string;
 export declare const getTypeFilter: (col: ColumnType<any>) => TypeFilter;
+export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];

package/lib/hooks/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDatepickerFormat = exports.getAllVisibleKeys = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.checkThousandSeparator = exports.checkDecimalSeparator = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.updateColumns = exports.sumDataByField = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = void 0;
+exports.updateColumns = exports.updateArrayByKey = exports.sumDataByField = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 const sumDataByField = (data, field) => {
   if (data && data.length > 0) {
@@ -146,6 +146,9 @@ const updateColumns = (columns, includes) => {
       ...column
     };
     let hasVisibleChild = false;
+    if (!column.key && !column.dataIndex) {
+      return column;
+    }
     if (newColumn.children) {
       newColumn.children = updateColumns(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
@@ -186,10 +189,10 @@ const getDatepickerFormat = (type, col) => {
 };
 exports.getDatepickerFormat = getDatepickerFormat;
 const getTypeFilter = col => {
-  if (col.typeFilter) {
+  if (col?.typeFilter) {
     return col.typeFilter;
   }
-  const type = col.type ?? '';
+  const type = col?.type ?? 'Text';
   switch (type) {
     case "number":
       return 'Number';
@@ -203,7 +206,7 @@ const getTypeFilter = col => {
       return 'Checkbox';
 
     // case "week": return ''
-    // case "month": return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY'
+    // case "month": return 'Month'
     // case "quarter": return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY'
     // case "year": return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY'
     // case "time": return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm'
@@ -212,4 +215,22 @@ const getTypeFilter = col => {
       return 'Text';
   }
 };
-exports.getTypeFilter = getTypeFilter;
+exports.getTypeFilter = getTypeFilter;
+const updateArrayByKey = (arr, element, key) => {
+  if (arr) {
+    return arr.map(item => {
+      if (item[key] === element[key]) {
+        return {
+          ...item,
+          ...element
+        };
+      } else if (item.children && item.children.length > 0) {
+        item.children = updateArrayByKey(item.children, element, key);
+      }
+      return item;
+    });
+  } else {
+    return [];
+  }
+};
+exports.updateArrayByKey = updateArrayByKey;

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-import GridTable from './GridTable';
-export default GridTable;
+import InternalTable from './InternalTable';
+export default InternalTable;

package/lib/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _GridTable = _interopRequireDefault(require("./GridTable"));
-var _default = exports.default = _GridTable.default;
+var _InternalTable = _interopRequireDefault(require("./InternalTable"));
+var _default = exports.default = _InternalTable.default;

package/lib/styles.scss

@@ -1,30 +1,296 @@
-$prefix : 'ui-rc'!default;
+$prefix: 'ui-rc' !default;
+$primary: #eb4619 !default;
+$rowHoverBg: #FBDED6 !default;
+$rowSelectedBg: #FEF2EF !default;
+$tableBorderColor: #e0e0e0 !default;
+//$rowSelectedHoverBg: 'ui-rc' !default;
+
+
 .popup-context-menu {
   min-width: 200px;
 }
 
-.ui-rc-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;
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  //transform: translateY(-50%);
+}
+
+// -------------- 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;
+      }
+    }
+
+  }
+
+
+  .#{$prefix}-table {
+    &.#{$prefix}-table-bordered {
+      > .#{$prefix}-table-container {
+
+        > .#{$prefix}-table-content,
+        > .#{$prefix}-table-header,
+        > .#{$prefix}-table-body,
+        > .#{$prefix}-table-summary {
+          > table {
+            > thead {
+              > tr:not(:last-child) {
+                > th {
+                  border-bottom: 1px solid $tableBorderColor;
+                }
+              }
+            }
+          }
+        }
+
+        border-inline-start: 1px solid $tableBorderColor;
+        border-top: 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}-table-thead >tr>th,
+  .#{$prefix}-table-thead >tr>td {
+    background-color: #ffffff;
+  }
+
+  .#{$prefix}-table-thead {
+    > tr {
+      > th,
+      > td {
+        border-bottom: 1px solid $tableBorderColor;
+      }
+    }
+  }
+
+  .#{$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;
+    }
+  }
 }
 
-//
-//.ui-rc-table-wrapper {
-//  &.table-none-column-select {
-//    .ui-rc-table-cell {
-//      &.ui-rc-table-selection-column {
-//        padding: 0!important;
-//        overflow: hidden !important;
-//      }
-//    }
-//  }
-//}
+// ------------ 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;
+    }
+  }
+}
+
+
+
+
+.#{$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;
+}

package/lib/type.d.ts

@@ -1,10 +1,10 @@
-import type { TableProps, TableColumnType as RcColumnType } from "ui-rc";
 import type { Key, ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
-import type { FilterOperator, TableRowSelection } from "ui-rc/dist/table/interface";
-import type { ToolbarItem } from "ui-rc/dist/toolbar";
-import type { ItemType } from "ui-rc/dist/menu/interface";
+import type { TypeFilter, TableProps, TableColumnType as RcColumnType } from "rc-master-ui";
+import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface";
+import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+import type { ItemType } from "rc-master-ui/es/menu/interface";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export interface ColumnGroupType<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
@@ -20,9 +20,12 @@ export type ColumnType<RecordType> = RcColumnType<RecordType> & {
     operator?: FilterOperator;
     placeholder?: string;
     showInColumnChoose?: boolean;
+    typeFilter?: TypeFilter;
+    children?: ColumnsType<RecordType>;
+    headerText?: string;
 };
 export type ColumnsType<RecordType = AnyObject> = (ColumnGroupType<RecordType> | ColumnType<RecordType>)[];
-export interface GridTableProps<RecordType> extends Omit<TableProps<RecordType>, 'columns' | 'rowSelection'> {
+export interface GridTableProps<RecordType> extends Omit<TableProps<RecordType>, 'columns' | 'rowSelection' | 'loading'> {
     columns?: ColumnsType<RecordType>;
     format?: IFormat;
     t?: any;
@@ -49,7 +52,16 @@ export interface GridTableProps<RecordType> extends Omit<TableProps<RecordType>,
         rowData: RecordType;
         selected: RecordType | RecordType[];
     }) => void;
+    dataSourceFilter?: SourceFilter[];
+    onFilterClick?: (column: ColumnType<RecordType>, callback: (key: string, data: any) => void) => void;
+    loading?: boolean;
+    allowResizing?: boolean;
 }
+export type SourceFilter = {
+    key: string;
+    data: any[];
+    loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
+};
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
 export type SelectionSettings = {
     mode?: 'checkbox' | 'radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -24,13 +24,14 @@
     "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run docs:build",
     "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile",
     "postpublish": "npm run docs:build && npm run docs:deploy",
     "start": "dumi dev",
     "test": "rc-test"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@faker-js/faker": "^9.5.0",
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/trigger": "^2.0.0",
     "@rc-component/util": "^1.0.1",
@@ -38,13 +39,14 @@
     "@types/styled-components": "^5.1.34",
     "antd": "^5.24.1",
     "antd-style": "^3.7.1",
+    "becoxy-icons": "^1.9.9",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.13",
     "moment": "^2.30.1",
+    "rc-master-ui": "^1.1.0",
     "react-numeric-component": "^1.0.7",
     "react-resizable": "^3.0.5",
-    "styled-components": "^6.1.15",
-    "ui-rc": "^0.1.5"
+    "styled-components": "^6.1.15"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",