es-grid-template 0.0.7 → 0.0.8

package/es/hooks/constant.js

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

package/es/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/es/hooks/utils.js

@@ -126,6 +126,9 @@ export 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);
@@ -164,10 +167,10 @@ export const getDatepickerFormat = (type, col) => {
   }
 };
 export 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';
@@ -181,7 +184,7 @@ export 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'
@@ -189,4 +192,21 @@ export const getTypeFilter = col => {
     default:
       return 'Text';
   }
+};
+export 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 [];
+  }
 };

package/es/index.d.ts

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

package/es/index.js

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

package/es/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/es/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/lib/CheckboxFilter.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { TableLocale } from "ui-rc/dist/table/interface";
+import type { TableLocale } from "rc-master-ui/es/table/interface";
 type Props = {
     options: any[];
     filterSearch?: boolean;

package/lib/CheckboxFilter.js

@@ -8,15 +8,12 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _FilterSearch = _interopRequireDefault(require("./FilterSearch"));
-var _uiRc = require("ui-rc");
+var _rcMasterUi = require("rc-master-ui");
 var _antd = require("antd");
-var _useFilter = require("antd/es/table/hooks/useFilter");
+var _useFilter = require("rc-master-ui/es/table/hooks/useFilter");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import {flattenKeys} from "ui-rc/dist/table/hooks/useFilter";
-
-// import Empty from "ui-rc/dist/empty";
-// import Tree from "ui-rc/dist/tree";
+// import Tree from "rc-master-ui/es/tree";
 
 function searchValueMatched(searchValue, text) {
   if (typeof text === 'string' || typeof text === 'number') {
@@ -49,7 +46,7 @@ function renderFilterItems({
         })
       };
     }
-    const Component = filterMultiple ? _uiRc.Checkbox : _uiRc.Radio;
+    const Component = filterMultiple ? _rcMasterUi.Checkbox : _rcMasterUi.Radio;
     const item = {
       key: filter.value !== undefined ? key : index,
       label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
@@ -116,8 +113,8 @@ const CheckboxFilter = props => {
     [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
   });
   console.log('selectedKeys', selectedKeys);
-  const empty = /*#__PURE__*/React.createElement(_antd.Empty, {
-    image: _antd.Empty.PRESENTED_IMAGE_SIMPLE,
+  const empty = /*#__PURE__*/React.createElement(_rcMasterUi.Empty, {
+    image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
     description: locale.filterEmptyText,
     imageStyle: {
       height: 24
@@ -161,10 +158,11 @@ const CheckboxFilter = props => {
     children: node.children?.map(item => getFilterData(item)) || []
   });
   const onCheckAll = e => {
-    console.log('e.target.checked', e.target.checked);
+    // console.log('e.target.checked', e.target.checked)
     if (e.target.checked) {
       const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
-      console.log('allFilterKeys', allFilterKeys);
+
+      // console.log('allFilterKeys', allFilterKeys)
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
     } else {
@@ -193,7 +191,7 @@ const CheckboxFilter = props => {
       locale: locale
     }), /*#__PURE__*/React.createElement("div", {
       className: `${tablePrefixCls}-filter-dropdown-tree`
-    }, filterMultiple ? /*#__PURE__*/React.createElement(_uiRc.Checkbox
+    }, filterMultiple ? /*#__PURE__*/React.createElement(_rcMasterUi.Checkbox
     // checked={selectedKeys.length === flattenKeys(column.filters).length}
     , {
       checked: selectedKeys.length === (0, _useFilter.flattenKeys)(options).length
@@ -239,7 +237,7 @@ const CheckboxFilter = props => {
     onChange: onSearch,
     tablePrefixCls: tablePrefixCls,
     locale: locale
-  }), isEmpty ? empty : /*#__PURE__*/React.createElement(_uiRc.Menu, {
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(_rcMasterUi.Menu, {
     selectable: true,
     multiple: filterMultiple,
     prefixCls: `${dropdownPrefixCls}-menu`,

package/lib/ColumnsChoose.d.ts

@@ -1,10 +1,9 @@
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { TableColumnsType } from "ui-rc";
-export declare const BoxInputFilterColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import type { ColumnsType } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: any[];
-    setColumns: Dispatch<SetStateAction<TableColumnsType<RecordType>>>;
+    setColumns: Dispatch<SetStateAction<ColumnsType<RecordType>>>;
     t?: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;