es-grid-template 0.0.8 → 0.1.0

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

@@ -0,0 +1,225 @@
+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 } 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";
+import type { FieldNames, FilterFunc } from "rc-select/es/Select";
+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 ITemplateColumn = {
+    value: any;
+    column: any;
+    rowData: any;
+    field: number | string;
+    index: number;
+};
+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;
+    template?: (props: ITemplateColumn) => ReactNode | ReactElement;
+    headerTemplate?: any;
+    ellipsis?: boolean | undefined;
+    format?: IFormat;
+    tooltipDescription?: string | ((rowData: any) => string | ReactNode);
+    showTooltip?: boolean;
+    showTooltipHeader?: boolean;
+};
+export type IEditSelectSettings = {
+    fieldKey?: string;
+    /**  get value form other field **/
+    fieldValue?: string;
+    /** get label form other field **/
+    fieldLabel?: string;
+    inputKey?: string;
+    filterKey?: string[];
+    selectMode?: SelectMode;
+    options: any[];
+    getPasteValue?: (value: any) => Record<string, any> | null;
+    validateOption?: (rowData: any, field: string) => any[];
+    defaultOptions?: any[];
+    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;
+    isMulti?: boolean;
+    closeMenuOnSelect?: boolean;
+    menuWidth?: number;
+    menuHeight?: number;
+    columns?: ColumnSelectTable[];
+    toolbarItems?: ToolbarItem[];
+    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 ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate'> & {
+    field?: string;
+    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;
+    headerText?: string;
+    template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    showTooltip?: boolean;
+    tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    children?: ColumnType<RecordType>[];
+};
+export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
+    editType?: EditType | ((rowData?: any) => EditType);
+    template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
+    disable?: boolean | ((rowData: any) => boolean);
+    isClearable?: boolean;
+    maxDate?: any;
+    minDate?: any;
+    maxTime?: any;
+    minTime?: any;
+    max?: number;
+    min?: number;
+    editSelectSettings?: IEditSelectSettings;
+};
+export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
+export type ColumnsEditType<RecordType = AnyObject> = ColumnEditType<RecordType>[];
+export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | ColumnType<RecordType>;
+export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
+export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource'> {
+    editAble?: boolean;
+    dataSource: RecordType[];
+    columns: ColumnsTable<RecordType>;
+    height?: number;
+    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;
+    onSorter?: (args: {
+        column: ColumnType<RecordType>;
+        columnKey: string;
+        field: string;
+        direction: 'Ascending' | 'Descending' | null;
+    }) => 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;
+    onDataChange?: (data: RecordType[]) => void;
+}
+export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
+    columns: ColumnsTable<RecordType>;
+    onCellPaste?: ICellPasteModel<RecordType>;
+    onCellChange?: (args: CellChangeArgs, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+}
+export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
+export type CellChangeArgs = {
+    type: 'onPaste' | 'onChange' | 'onCellPaste';
+    value: any;
+    rowData: any;
+    rows: any[];
+    rowsData: any[];
+    indexRow: number;
+    rowId?: string;
+    field: string;
+    indexCol: any;
+    sumValue?: any[];
+};
+export type IOnPastedProps = {
+    data: 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;
+}
+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/grid-component/useContext.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { IFormat } from "./type";
+import type { SubmitHandler } from "react-hook-form";
+export interface IContext {
+    searchValue?: any;
+    setSearchValue?: any;
+    open?: boolean;
+    setOpen?: any;
+    rowKey: string;
+    onSave?: any;
+    form?: any;
+    format?: IFormat;
+    control?: any;
+    trigger?: any;
+    handleSubmit?: any;
+    onSubmit?: SubmitHandler<any>;
+    getValues?: any;
+    handleCellChange?: ({ key, record, type }: ContextCellChange) => void;
+}
+export type ContextCellChange = {
+    key: string;
+    record: any;
+    newState?: any;
+    prevState?: any;
+    type: 'enter' | 'blur' | 'outClick';
+};
+export declare const TableContext: import("react").Context<IContext>;

package/es/grid-component/useContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const TableContext = /*#__PURE__*/createContext({
+  rowKey: 'id'
+});

package/es/index.d.ts

@@ -1,2 +1 @@
-import InternalTable from './InternalTable';
-export default InternalTable;
+export { default as GridComponent } from './grid-component';

package/es/index.js

@@ -1,2 +1 @@
-import InternalTable from "./InternalTable";
-export default InternalTable;
+export { default as GridComponent } from "./grid-component";

package/lib/{CheckboxFilter.js → grid-component/CheckboxFilter.js}

@@ -112,7 +112,6 @@ const CheckboxFilter = props => {
     // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
     [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
   });
-  console.log('selectedKeys', selectedKeys);
   const empty = /*#__PURE__*/React.createElement(_rcMasterUi.Empty, {
     image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
     description: locale.filterEmptyText,

package/lib/{ColumnsChoose.js → grid-component/ColumnsChoose.js}

@@ -20,7 +20,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-1k89i9w-0"
+  componentId: "es-grid-template__sc-1ix8yky-0"
 })(["border-top:1px solid #c4c4c4;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;}}"]);
 const ColumnsChoose = props => {
   const {

package/lib/grid-component/EditableCell.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ColumnEditType, IFormat } from "./type";
+import type { EditType } from "rc-master-ui";
+interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
+    t?: any;
+    editing: boolean;
+    dataIndex: string;
+    title: any;
+    editType: EditType;
+    record: DataType;
+    index: number;
+    format?: IFormat;
+    column: ColumnEditType<DataType>;
+    indexRow: number;
+    indexCol: number;
+    rowKey: any;
+}
+declare const EditableCell: <T>(props: React.PropsWithChildren<EditableCellProps<T>>) => React.JSX.Element;
+export default EditableCell;