es-grid-template 0.0.8 → 0.1.0

package/lib/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/lib/hooks/useColumns/index.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.flatColumns = flatColumns;
-// import * as React from 'react'
-
-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/lib/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/lib/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/lib/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/es/{InternalTable.d.ts → grid-component/InternalTable.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
-import type { GridTableProps } from "./type";
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/lib/{InternalTable.d.ts → grid-component/InternalTable.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
+import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import './styles.scss';
-import type { GridTableProps } from "./type";
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;