es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/type.js

@@ -1 +1,490 @@
-export {};
+// import type { Key, ReactElement, ReactNode } from "react"
+// import type React from "react"
+// import type { IOperator } from "./hooks"
+// import type {
+//   TypeFilter,
+//   TableProps as RcTableProps,
+//   TableColumnType as RcColumnType,
+//   EditType,
+//   TablePaginationConfig
+// } from "rc-master-ui"
+// import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/interface"
+// import type { ToolbarItem as RcToolbarItem } from "rc-master-ui/es/toolbar"
+// import type { ItemType } from "rc-master-ui/es/menu/interface"
+// import type { FieldNames, FilterFunc } from "rc-select/es/Select"
+// import type { ColorPickerProps } from "antd"
+// import type { FixedType } from "rc-base-table/lib/interface"
+// import type { TableLocale } from "rc-master-ui/lib/table/interface"
+// import type { Cell, Header, Row } from '@tanstack/react-table'
+
+// 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 type SelectMode = 'checkbox' | 'radio' | undefined
+// export type ITextAlign = 'center' | 'left' | 'right'
+// export type Frozen = 'left' | 'right' | 'Left' | 'Right'
+
+// export type ToolbarItem = Omit<RcToolbarItem, 'position' | 'align'> & {
+//   position?: 'Top' | 'Bottom',
+//   align?: ITextAlign
+//   onClick?: (args: any) => void
+// };
+
+// // export type ContextMenuItem = MenuProps['items'] & {}
+// export type ContextMenuItem = ItemType
+
+// export type ITemplateColumn = {
+//   value: any
+//   column: any
+//   rowData: any
+//   field: number | string
+//   index: number
+//   // [key: string]: any
+// }
+
+// export type ColumnSelectTable = {
+//   field: string,
+//   dataIndex?: string,
+//   type?: IColumnType
+//   headerText?: string,
+//   fixedType?: 'left' | 'right' | undefined,
+//   width?: number | undefined,
+//   minWidth?: number,
+//   maxWidth?: number,
+//   visible?: boolean
+//   textAlign?: ITextAlign
+//   headerTextAlign?: ITextAlign
+//   // eslint-disable-next-line no-unused-vars
+//   template?: (props: ITemplateColumn) => ReactNode | ReactElement
+//   headerTemplate?: any
+//   ellipsis?: boolean | undefined
+//   format?: IFormat
+//   // eslint-disable-next-line no-unused-vars
+//   tooltipDescription?: string | ((rowData: any) => string | ReactNode)
+//   // tooltipDescription?: string | ((rowData: any) => string | React.FC<any> | ReactNode)
+//   showTooltip?: boolean
+//   showTooltipHeader?: boolean
+// }
+
+// export type IEditSelectSettings = {
+//   fieldKey?: string
+//   options: any[] | ((rowData: any, field: string) => any[])
+//   /**  get value form other field **/
+//   fieldValue?: string
+//   /** get label form other field **/
+//   fieldLabel?: string
+//   /** cho phép nhập giá trị - onBlur: giá trị search được set thành value **/
+//   searchTextAsValue?: boolean
+
+//   inputKey?: string
+
+//   filterKey?: string[]
+//   selectMode?: SelectMode
+
+//   // eslint-disable-next-line no-unused-vars
+//   getPasteValue?: (value: any) => Record<string, any> | null
+//   // eslint-disable-next-line no-unused-vars
+//   validateOption?: (rowData: any, field: string) => any[]
+
+//   defaultOptions?: any[]
+//   // eslint-disable-next-line no-unused-vars
+//   defaultValue?: (value: any, rowData: any) => {
+//     value: any
+//     label: string
+//     [key: string]: string
+
+//   } | null
+
+//   formatOptionLabel?: (option: any) => ReactNode | ReactElement
+//   // loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void
+//   loadOptions?: (search: string, callback: (newOptions: any[]) => void, args?: LoadOptionsArgs) => void;
+//   isMulti?: boolean
+//   closeMenuOnSelect?: boolean
+//   menuWidth?: number
+//   menuHeight?: number
+
+//   columns?: ColumnSelectTable[]
+//   toolbarItems?: ToolbarItem[]
+//   // eslint-disable-next-line no-unused-vars
+//   toolbarClick?: (props: ToolbarClick) => void
+//   toolbarHeight?: number
+//   hideSelectedOptions?: boolean
+//   showItems?: number
+//   isLengthSelected?: boolean
+//   fieldNames?: FieldNames
+//   filterOption?: boolean | FilterFunc<any>;
+// }
+// export type ToolbarClick = {
+//   item: any
+//   column: any
+// }
+// export type LoadOptionsArgs = {
+//   rowData?: any
+
+// }
+
+// export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title' | 'format' | 'commandItems'> & {
+//   field?: string,
+//   key?: any,
+//   type?: IColumnType,
+//   /** @deprecated This function is deprecated and should use `onChange` instead */
+//   haveSum?: boolean
+//   isSummary?: boolean
+//   summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode
+//   maxWidth?: string | number
+//   format?: IFormat | ((rowData: any) => IFormat)
+//   allowFiltering?: boolean
+//   allowSortering?: boolean
+//   operator?: FilterOperator
+//   hideOperator?: boolean
+//   placeholder?: string
+//   showInColumnChoose?: boolean
+//   typeFilter?: TypeFilter
+//   source?: any[]
+//   showFilterSearch?: boolean
+//   headerText?: string
+//   visible?: boolean
+//   headerTooltip?: boolean | string | (() => ReactNode | ReactElement)
+//   columnGroupText?: string
+//   textAlign?: ITextAlign
+//   headerTextAlign?: ITextAlign
+//   // template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement)
+//   template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement)
+//   showTooltip?: boolean
+//   tooltipDescription?: ReactNode | ReactElement | ((args: { value: any, record: RecordType }) => ReactNode | ReactElement)
+//   headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
+//   commandItems?: CommandItem[]
+
+//   children?: ColumnTable<RecordType>[]
+
+//   editType?: EditType | ((rowData?: RecordType) => EditType)
+//   disable?: boolean | ((rowData: any) => boolean)
+//   editEnable?: boolean | ((rowData: any) => boolean)
+//   isClearable?: boolean
+//   maxDate?: any
+//   minDate?: any
+//   maxTime?: any
+//   minTime?: any
+//   max?: number
+//   min?: number
+//   editSelectSettings?: IEditSelectSettings
+//   editFromSettings?: IEditFromSettings
+//   fixedType?: FixedType,
+//   headerTextWrap?: boolean
+//   // children?: ColumnEditType<RecordType>[]
+
+//   sumGroup?: boolean
+
+//   allowSelection?: boolean | ((rowData: RecordType) => boolean)
+
+//   onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>)
+//   onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>)
+//   onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>)
+
+// }
+
+// export type IFormOpen = {
+//   value?: any
+//   setValue?: any
+//   getValues?: any
+//   reset?: any
+//   rowData?: any
+// }
+
+// export type IEditFromSettings = {
+//   fieldKey: string
+//   // eslint-disable-next-line no-unused-vars
+//   formOpen?: (props: IFormOpen) => void
+//   // eslint-disable-next-line no-unused-vars
+//   formClose?: (props: IFormOpen) => void
+//   // eslint-disable-next-line no-unused-vars
+//   formatLabel?: (value: any) => string
+//   menuWidth?: number
+//   menuHeight?: number
+//   labelWith?: number
+//   items: any[]
+//   layout?: {
+//     xl?: IGrid
+//     lg?: IGrid
+//     md?: IGrid
+//     sm?: IGrid
+//     xs?: IGrid
+//   }
+
+//   defaultValues?: Record<string, any>
+
+//   schema?: any
+// }
+
+// type IGrid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24
+
+// export type ColumnTemplate<RecordType> = {
+//   value: any,
+//   rowData: RecordType,
+//   index: number,
+//   field: string
+// }
+
+// export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[]
+
+// export type Locale = TableLocale & {
+//   ok_btn: string
+//   cancel_btn: string
+//   add_rows: string
+//   add_rows_before: string
+//   add_rows_after: string
+//   add_1: string
+//   add_10: string
+//   add_50: string
+//   add_100: string
+//   add_children: string
+//   delete_content: string
+//   delete_rows: string
+//   custom: string
+// }
+
+// export type Sort = {
+//   columnKey: string,
+//   field: string,
+//   order: 'ascend' | 'descend' | null
+// }
+
+// export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale' | 'virtual'> {
+//   editAble?: boolean
+//   infiniteScroll?: boolean
+//   theme?: {
+//     theme?: 'dark' | 'light',
+//     backgroundColor?: string
+//     color?: string
+//   }
+//   virtualRow?: boolean
+//   virtualColumns?: boolean
+//   next?: () => void
+//   locale?: Locale
+//   groupAble?: boolean
+//   groupColumns?: string[]
+//   groupSetting?: IGroupSetting
+//   onChooseColumns?: (props: IOnChooseColumns) => void
+//   pagination?: false | PaginationConfig;
+//   showCustomTooltip?: boolean
+
+//   sortMultiple?: boolean
+//   dataSource: RecordType[]
+//   columns: ColumnsTable<RecordType>,
+//   height?: number
+//   minHeight?: number
+//   format?: IFormat
+//   t?: any
+//   lang?: string
+//   contextMenuItems?: ContextMenuItem[]
+//   showDefaultContext?: boolean
+//   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
+//   showAdvanceFilter?: boolean
+
+//   allowFiltering?: boolean
+//   onFilter?: (query: { field: string, key: string, operator: IOperator, predicate: 'and' | 'or', value: any }[]) => void
+//   allowSortering?: boolean
+//   onSorter?: (args: { column: ColumnTable<RecordType>, columnKey: string, field: string, order: 'ascend' | 'descend' | null }) => void
+//   defaultSorter?: Sort[]
+//   selectionSettings?: SelectionSettings
+//   // rowKey?: string
+//   rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
+
+//   rowSelection?: RowSelection<RecordType>
+//   rowSelected?: (args: { type: string, rowData: RecordType, selected: RecordType | RecordType[] }) => void
+//   dataSourceFilter?: SourceFilter[]
+//   onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void
+//   loading?: boolean
+//   allowResizing?: boolean
+//   showToolbar?: boolean
+//   onDataChange?: (data: RecordType[]) => void
+//   defaultValue?: AnyObject | (() => AnyObject)
+
+//   summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
+//   showEmptyText?: boolean
+//   commandSettings?: CommandSettings
+
+//   // columns: ColumnsTable<RecordType>
+//   onCellPaste?: ICellPasteModel<RecordType>
+//   onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void
+//   onCellClick?: (args: ICellClick, callback?: any) => void
+//   rowEditable?: (rowData: RecordType) => boolean
+//   validate?: any
+//   onBlur?: (data: RecordType[]) => void
+
+//   onExpandClick?: (args: { expandedKeys: string[], key: string, rowData: any }) => void
+
+//   wrapSettings?: IWrapSettings,
+
+//   actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement)
+
+//   fullScreen?: boolean
+
+//   onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>)
+//   onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>)
+//   onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>)
+
+//   fullScreenTitle?: ReactNode | (() => ReactNode)
+// }
+
+// // export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns' > {
+// //   columns: ColumnsTable<RecordType>
+// //   onCellPaste?: ICellPasteModel<RecordType>
+// //   onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void
+// //   onCellClick?: (args: ICellClick, callback?: any) => void
+// //   rowEditable?: (rowData: RecordType) => boolean
+// // }
+
+// export type PaginationConfig = TablePaginationConfig & {
+//   currentPage?: number
+// }
+// export type ICellClick = {
+//   index: number
+//   indexCol?: number
+//   rowId: string | number
+//   type: 'Editing' | 'Default'
+//   field: string
+//   cellValue: any
+//   rowData: any
+// }
+
+// export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>
+
+// export interface CommandItem {
+//   id: string
+//   type?: string
+//   visible?: boolean | ((record: any) => boolean)
+//   title: string
+//   color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+//   tooltip?: string
+//   icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement)
+//   template?: ReactNode | ReactElement | ((record: any) => ReactNode | ReactElement)
+//   client?: boolean
+//   confirmDialog?: boolean
+// }
+
+// export type GroupTemplate = {
+//   rowData: any
+//   value: any
+//   column: ColumnTable
+// }
+
+// export type IGroupSetting = {
+//   client?: boolean
+//   onGroup?: (props: IOnGroup) => void
+//   groupColumnSpan?: number
+//   hiddenColumnGroup?: boolean
+//   showHeaderColumn?: boolean
+//   showGroupIcon?: boolean
+//   unClearableLevel?: 1 | 2 | 3 | undefined
+//   sumGroup?: boolean
+//   groupTemplate?: React.ReactNode | React.ReactElement | ((args: GroupTemplate) => React.ReactNode | React.ReactElement)
+// }
+
+// type IOnGroup = {
+//   columnGrouped: string[]
+//   columns: ColumnsTable
+//   flattenColumns: ColumnsTable
+// }
+
+// export type IOnChooseColumns = {
+//   columns: ColumnsTable
+//   showColumns: ColumnsTable
+//   flattenColumns: ColumnsTable
+// }
+
+// export type CellChangeArgs<T> = {
+//   type: 'onPaste' | 'onChange' | 'onCellPaste'
+//   value: any
+//   option: AnyObject
+//   rowData: T
+//   rowsData: T[]
+//   indexRow: number
+//   rowId?: string
+//   field: string | undefined
+//   indexCol: any
+//   sumValue?: any[]
+// }
+
+// export type IOnPastedProps = {
+//   data: any[]
+//   copyRows: any[]
+//   pastedColumns: string[]
+//   pasteData: any[]
+//   type: 'onPaste' | 'onChange' | 'onCellPaste'
+// }
+
+// export interface ICellPasteModel<RecordType = AnyObject> {
+
+//   onPasted?: (args: IOnPastedProps, handleCallback: (callbackData: any[]) => void) => void
+
+//   dataChange?: (data: RecordType[]) => void
+//   getCallbackData?: (props: any) => void
+//   maxRowsPaste?: number
+// }
+
+// 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 = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
+//   mode?: 'checkbox' | 'radio'
+//   type?: 'single' | 'multiple'
+//   checkboxOnly?: boolean
+// }
+
+// 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 // bao nhiêu số sau số thập phân
+//   allowNegative?: boolean // check nhập số âm
+//   prefix?: string | undefined
+//   suffix?: string | undefined
+//   fixedDecimalScale?: boolean // mặc định thêm số 0 sau số thập phân
+//   dateFormat?: string
+//   datetimeFormat?: string
+//   timeFormat?: string
+//   weekFormat?: string
+//   monthFormat?: string
+//   yearFormat?: string
+// }
+
+// export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
+
+// export type Presets = Required<ColorPickerProps>['presets'][number];
+
+// export type CommandSettings = {
+//   client?: boolean
+//   confirmDialog?: boolean
+// }
+
+// export type IWrapMode = 'Header' | 'Both' | 'Content'
+
+// export type IWrapSettings = {
+//   wrapMode?: IWrapMode
+// }

package/es/table-component/type.d.ts

@@ -80,6 +80,7 @@ export type ColumnTemplate<RecordType> = {
     index: number;
     field: string;
 };
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
     width?: number;
@@ -200,6 +201,7 @@ export type TableProps<RecordType = AnyObject> = {
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);
     editAble?: boolean;
+    rowKey?: string;
     infiniteScroll?: boolean;
     next?: () => void;
     locale?: Locale;
@@ -425,13 +427,21 @@ export type ToolbarItem = {
 export type LoadOptionsArgs = {
     rowData?: any;
 };
+export type GroupTemplate = {
+    rowData: any;
+    value: any;
+    column: ColumnTable;
+};
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
+    groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
+    showHeaderColumn?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
     sumGroup?: boolean;
+    groupTemplate?: React.ReactNode | React.ReactElement | ((args: GroupTemplate) => React.ReactNode | React.ReactElement);
 };
 type IOnGroup = {
     columnGrouped: string[];

package/es/{grid-component → table-virtuoso}/ColumnsGroup/ColumnsGroup.js

@@ -10,10 +10,10 @@ import { Button, Popover, Tooltip } from "antd";
 // import {SettingOutlined} from "@ant-design/icons";
 import { Select } from "rc-master-ui";
 import styled from "styled-components";
-import { customFilterOption } from "../hooks";
+import { customFilterOption } from "../../grid-component/hooks";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1uj3tyy-0"
+  componentId: "es-grid-template__sc-z2q149-0"
 })(["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;}}"]);
 export const ColumnsGroup = props => {
   const {
@@ -28,7 +28,7 @@ export const ColumnsGroup = props => {
   const [tempGroup, setTempGroup] = useState([]);
   const [clicked, setClicked] = useState(false);
   const rsCol = React.useMemo(() => {
-    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'command');
+    return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
   }, [columns, tempGroup]);
   const options = React.useMemo(() => {
     return rsCol.map(it => ({
@@ -222,6 +222,7 @@ export const ColumnsGroup = props => {
     title: 'Nhóm dữ liệu'
   }, /*#__PURE__*/React.createElement(Group, {
     fontSize: 18,
+    color: "#555555",
     style: {
       cursor: 'pointer'
     }

package/es/{grid-component → table-virtuoso}/InternalTable.d.ts

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