es-grid-template 0.0.8 → 0.0.13

package/es/hooks/useColumns/index.d.ts

@@ -1,2 +0,0 @@
-import type { ColumnsType, ColumnType } from "../../type";
-export declare function flatColumns<RecordType>(columns: ColumnsType<RecordType>, parentKey?: string): ColumnType<RecordType>[];

package/es/hooks/useColumns/index.js

@@ -1,25 +0,0 @@
-// import * as React from 'react'
-
-export function flatColumns(columns, parentKey = 'key') {
-  // @ts-ignore
-  return columns.filter(column => column && typeof column === 'object').reduce((list, column, index) => {
-    const {
-      fixed
-    } = column;
-    // Convert `fixed='true'` to `fixed='left'` instead
-    const parsedFixed = fixed === true ? 'left' : fixed;
-    const mergedKey = `${parentKey}-${index}`;
-    const subColumns = column.children;
-    if (subColumns && subColumns.length > 0) {
-      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
-        fixed: parsedFixed,
-        ...subColum
-      }))];
-    }
-    return [...list, {
-      key: mergedKey,
-      ...column,
-      fixed: parsedFixed
-    }];
-  }, []);
-}

package/es/hooks/utils.d.ts

@@ -1,19 +0,0 @@
-import dayjs from "dayjs";
-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;
-export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare const isEmpty: (d: any) => boolean;
-export declare const isNullOrUndefined: (d: any) => boolean;
-export declare const convertDayjsToDate: (dateString: string, format: string) => Date;
-export declare const convertDateToDayjs: (date: Date | undefined, format: string) => dayjs.Dayjs;
-export declare const isNameColor: (strColor: string) => boolean;
-export declare const isColor: (value: string) => boolean;
-export declare const getAllVisibleKeys: (columns: any[]) => any[];
-export declare const getVisibleColumnKeys: (columns: any[]) => string[];
-export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): 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/styles.scss

@@ -1,296 +0,0 @@
-$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;
-}
-
-.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;
-    }
-  }
-}
-
-// ------------ 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,100 +0,0 @@
-import type { Key, ReactElement, ReactNode } from "react";
-import type React from "react";
-import type { IOperator } from "./hooks";
-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'> {
-    children: ColumnsType<RecordType>;
-}
-export type ColumnType<RecordType> = RcColumnType<RecordType> & {
-    type?: IColumnType;
-    isSummary?: boolean;
-    summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
-    maxWidth?: string | number;
-    format?: IFormat;
-    allowFiltering?: boolean;
-    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' | 'loading'> {
-    columns?: ColumnsType<RecordType>;
-    format?: IFormat;
-    t?: any;
-    lang?: string;
-    contextMenuItems?: any[];
-    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
-    contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
-    contextMenuClick?: (args: ContextInfo<RecordType>) => void;
-    recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
-    toolbarItems?: ToolbarItem[];
-    showColumnChoose?: boolean;
-    onFilter?: (query: {
-        field: string;
-        key: string;
-        operator: IOperator;
-        predicate: 'and' | 'or';
-        value: any;
-    }[]) => void;
-    selectionSettings?: SelectionSettings;
-    rowKey?: string;
-    rowSelection?: RowSelection<RecordType>;
-    rowSelected?: (args: {
-        type: string;
-        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';
-    type?: 'single' | 'multiple';
-    checkboxOnly?: boolean;
-    hideSelectAll?: boolean;
-    columnWidth?: number | string;
-    defaultSelectedRowKeys?: Key[];
-};
-export type RecordDoubleClickEventArgs<RecordType> = {
-    rowData: RecordType;
-    rowIndex: number | undefined;
-    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-};
-export type ContextInfo<RecordType> = {
-    rowInfo: {
-        rowData: RecordType | null;
-    };
-    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-    item: ItemType;
-};
-export type IFormat = {
-    thousandSeparator?: string;
-    decimalSeparator?: string;
-    decimalScale?: number | undefined;
-    allowNegative?: boolean;
-    prefix?: string | undefined;
-    suffix?: string | undefined;
-    fixedDecimalScale?: boolean;
-    dateFormat?: string;
-    datetimeFormat?: string;
-    timeFormat?: string;
-    weekFormat?: string;
-    monthFormat?: string;
-    yearFormat?: string;
-};

package/lib/InternalTable.js

@@ -1,194 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _rcMasterUi = require("rc-master-ui");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-require("dayjs/locale/es");
-require("dayjs/locale/vi");
-require("./styles.scss");
-var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _TableGrid = _interopRequireDefault(require("./TableGrid"));
-var _reactResizable = require("react-resizable");
-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 {ColumnsChoose} from "./ColumnsChoose";
-
-_dayjs.default.extend(_customParseFormat.default);
-const ResizableTitle = props => {
-  const {
-    onResize,
-    width,
-    ...restProps
-  } = props;
-  if (!width) {
-    return /*#__PURE__*/_react.default.createElement("th", restProps);
-  }
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    _react.default.createElement(_reactResizable.Resizable, {
-      width: width,
-      height: 0,
-      handle: /*#__PURE__*/_react.default.createElement("span", {
-        className: "react-resizable-handle",
-        onClick: e => {
-          e.stopPropagation();
-        }
-      }),
-      onResize: onResize,
-      draggableOpts: {
-        enableUserSelectHack: false
-      }
-    }, /*#__PURE__*/_react.default.createElement("th", restProps))
-  );
-};
-const GridStyle = _styledComponents.default.div.withConfig({
-  displayName: "GridStyle",
-  componentId: "es-grid-template__sc-1fs85vo-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:", ";bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
-const InternalTable = props => {
-  const {
-    columns,
-    // title,
-    dataSource,
-    // toolbarItems,
-    // showColumnChoose,
-    ...rest
-  } = props;
-  const [tmpColumns, setColumns] = (0, _react.useState)([]);
-  (0, _react.useEffect)(() => {
-    const rs = columns ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [];
-    setColumns(rs);
-  }, [columns]);
-  const handleResize = indexPath => (e, {
-    size
-  }) => {
-    const updateColumns = (cols, path) => {
-      const [currentIndex, ...restPath] = path;
-      return cols.map((col, idx) => {
-        if (idx === currentIndex) {
-          if (restPath.length === 0) {
-            // Cập nhật width của cột cuối cùng trong path
-            // return { ...col, width: size.width }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.minWidth && size.width < col.minWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.maxWidth && size.width > col.maxWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-            return {
-              ...col,
-              width: size.width
-            };
-          } else if (col.children) {
-            // Tiếp tục cập nhật các cấp con
-            return {
-              ...col,
-              children: updateColumns(col.children, restPath)
-            };
-          }
-        }
-        // e.preventDefault()
-        return col;
-      });
-    };
-    setColumns(prevColumns => updateColumns(prevColumns, indexPath));
-  };
-  const addResizeHandlers = _react.default.useCallback((cols, parentPath = []) => {
-    return cols.map((col, index) => {
-      const currentPath = [...parentPath, index];
-      if (!col?.dataIndex && !col.key) {
-        return col;
-      }
-      if (col.children) {
-        return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
-          children: addResizeHandlers(col.children, currentPath)
-        };
-      }
-      return {
-        ...col,
-        title: col.headerText ?? col.title,
-        ellipsis: col.ellipsis !== false,
-        onHeaderCell: () => ({
-          width: col.width,
-          onResize: handleResize(currentPath)
-        })
-      };
-    });
-  }, []);
-  const resizableColumns = _react.default.useMemo(() => {
-    return addResizeHandlers(tmpColumns);
-  }, [addResizeHandlers, tmpColumns]);
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(GridStyle, {
-    heightTable: props.style?.minHeight,
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
-    dataSource: dataSource,
-    components: {
-      header: {
-        cell: ResizableTitle
-      }
-    },
-    columns: resizableColumns,
-    setColumns: setColumns,
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    }
-
-    // title={() => {
-    //   return (
-    //     <Fragment>
-    //       <div>
-    //         {title?.(dataSource as any)}
-    //       </div>
-    //
-    //
-    //       {(toolbarItems || showColumnChoose !== false) && (
-    //         <div style={{display: 'flex', justifyContent: 'space-between'}}>
-    //
-    //           <Toolbar
-    //             style={{width: '100%'}}
-    //             items={toolbarItems ?? []}
-    //             mode={'responsive'}
-    //             // mode={'scroll'}
-    //             onClick={(val: any) => {
-    //               console.log(val)
-    //             }}
-    //           />
-    //
-    //           {showColumnChoose && (
-    //             <ColumnsChoose
-    //               columns={resizableColumns}
-    //               setColumns={setColumns}
-    //             />
-    //           )}
-    //
-    //           <div />
-    //         </div>
-    //       )}
-    //
-    //
-    //     </Fragment>
-    //   )
-    // }}
-  }))));
-};
-var _default = exports.default = InternalTable;