es-grid-template 1.8.64 → 1.8.65

package/lib/table-virtuoso/useContext.d.ts

@@ -0,0 +1,97 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings } from "../table-component/type";
+import type { SubmitHandler } from "react-hook-form";
+import type { ExpandedState, Row, Table } from '@tanstack/react-table';
+export type IPositionCell = {
+    rowId: string;
+    colId: string;
+} | undefined;
+export interface IContext<T> {
+    t?: any;
+    prefix: string;
+    id: string;
+    rowKey: string;
+    originData: any[];
+    dataSource: any[];
+    format?: IFormat;
+    expandable?: ExpandableConfig<T>;
+    wrapSettings?: IWrapSettings;
+    setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+    expanded: ExpandedState;
+    recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    selectionSettings?: SelectionSettings;
+    isSelectionChange?: {
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    };
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+        rowsData: T[];
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    locale?: Locale;
+    windowSize: {
+        innerHeight: number;
+        innerWidth: number;
+    };
+    control?: any;
+    errors?: any;
+    handleSubmit?: any;
+    onSubmit?: SubmitHandler<any>;
+    getValues?: any;
+    reset?: any;
+    setValue?: any;
+    handleCellChange?: (args: ContextCellChange) => void;
+    editingKey?: string;
+    setEditingKey?: Dispatch<SetStateAction<string>>;
+    rangeState?: RangeState;
+    setRangeState?: Dispatch<SetStateAction<RangeState | undefined>>;
+    rangePasteState?: RangeState;
+    setRangePasteState?: Dispatch<SetStateAction<RangeState | undefined>>;
+    startCell?: IPositionCell;
+    setStartCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    endCell?: IPositionCell;
+    setEndCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    startPasteCell?: IPositionCell;
+    setStartPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    endPasteCell?: IPositionCell;
+    setEndPasteCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    isSelecting?: boolean;
+    setIsSelecting?: Dispatch<SetStateAction<boolean>>;
+    isPasting?: boolean;
+    setIsPasting?: Dispatch<SetStateAction<boolean>>;
+    focusedCell?: IPositionCell;
+    setFocusedCell?: Dispatch<SetStateAction<IPositionCell | undefined>>;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    handleDeleteContent?: () => void;
+    handleAddMulti?: (item: any, n: number, id?: string) => void;
+    dataErrors?: any[];
+    isDataTree: boolean;
+    handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
+    pagination?: false | PaginationConfig;
+    rowClassName?: string | RowClassName<T>;
+    table?: Table<T>;
+    rowEditable?: (rowData: T) => boolean;
+    onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: T, row: Row<T>) => 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'>);
+    groupSetting?: IGroupSetting;
+}
+export declare const TableContext: import("react").Context<IContext<any>>;
+export type ContextCellChange = {
+    key: string;
+    record: any;
+    field: string | undefined;
+    option: any;
+    indexRow: number;
+    indexCol: number;
+    newState?: any;
+    prevState?: any;
+    type: 'enter' | 'blur' | 'outClick';
+};

package/lib/table-virtuoso/useContext.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableContext = void 0;
+var _react = require("react");
+const TableContext = exports.TableContext = /*#__PURE__*/(0, _react.createContext)({
+  prefix: 'ui-rc',
+  id: '',
+  isDataTree: false,
+  rowKey: 'rowId',
+  dataSource: [],
+  originData: [],
+  expanded: {},
+  windowSize: {
+    innerHeight: 0,
+    innerWidth: 0
+  },
+  // triggerFilter: () => { },
+
+  setIsSelectionChange: () => {},
+  setSorterChange: () => {},
+  setFilterChange: () => {},
+  setExpanded: () => {},
+  handleCellClick: () => {}
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.8.64",
+  "version": "1.8.65",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -75,6 +75,7 @@
     "react-numeric-component": "^1.0.7",
     "react-resizable": "^3.0.5",
     "react-tooltip": "^5.28.1",
+    "react-virtuoso": "^4.17.0",
     "rimraf": "5.0.10",
     "sass": "^1.81.0",
     "styled-components": "^6.1.15",

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

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

package/es/grid-component/ConvertColumnTable.js

@@ -1,144 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useMemo } from 'react';
-// import classNames from "classnames";
-
-import { Resizable } from "react-resizable";
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import dayjs from "dayjs";
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import en from 'rc-master-ui/es/date-picker/locale/en_US';
-import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
-import "./styles.scss";
-import InternalTable from "./InternalTable";
-import useColumns from "./hooks/useColumns";
-import { updateArrayByKey } from "./hooks";
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-
-dayjs.extend(customParseFormat);
-
-// const ASCEND = 'ascend';
-// const DESCEND = 'descend';
-
-const ResizableTitle = props => {
-  const {
-    onResize,
-    width,
-    ...restProps
-  } = props;
-  if (!width) {
-    return /*#__PURE__*/React.createElement("th", restProps);
-  }
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Resizable, {
-      width: width,
-      height: 0,
-      handle: /*#__PURE__*/React.createElement("span", {
-        className: "react-resizable-handle",
-        onClick: e => {
-          e.stopPropagation();
-        }
-      }),
-      onResize: onResize,
-      draggableOpts: {
-        enableUserSelectHack: false
-      }
-    }, /*#__PURE__*/React.createElement("th", restProps))
-  );
-};
-const ConvertColumnTable = props => {
-  const {
-    t,
-    columns: propsColumns,
-    dataSource,
-    lang,
-    locale,
-    format,
-    allowResizing,
-    dataSourceFilter: propDataSourceFilter,
-    onFilterClick,
-    editAble,
-    rowKey: propRowKey,
-    sortMultiple,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    ...rest
-  } = props;
-  const local = lang && lang === 'en' ? en : vi;
-  const buddhistLocale = {
-    ...local,
-    lang: {
-      ...local.lang
-    }
-  };
-  const rowKey = useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'id';
-  }, [editAble, propRowKey]);
-  const [columns, setColumns] = React.useState([]);
-
-  // ========================= Keys =========================
-  // const [columns, setColumns] = useMergedState(
-  //   propsColumns || [],
-  //   {
-  //     value: propsColumns,
-  //   },
-  // );
-
-  React.useEffect(() => {
-    setColumns(propsColumns);
-  }, [propsColumns]);
-  const handleResize = column => (e, {
-    size
-  }) => {
-    const newColumn = {
-      ...column,
-      width: size.width
-    };
-    const newColumns = updateArrayByKey(columns, newColumn, 'field');
-    setColumns(newColumns);
-  };
-  const [transformSelectionColumns] = useColumns({
-    locale,
-    t,
-    buddhistLocale,
-    dataSource,
-    dataSourceFilter: propDataSourceFilter,
-    format,
-    sortMultiple,
-    groupAble,
-    groupSetting,
-    groupColumns,
-    handleResize
-  });
-  const mergedColumns = React.useMemo(() => {
-    return transformSelectionColumns(columns);
-  }, [columns, transformSelectionColumns]);
-  const mergerdData = React.useMemo(() => {
-    return dataSource;
-  }, [dataSource]);
-  return /*#__PURE__*/React.createElement(InternalTable, _extends({}, rest, {
-    t: t,
-    editAble: editAble,
-    dataSource: mergerdData,
-    format: format,
-    locale: locale,
-    components: {
-      header: {
-        cell: allowResizing ? ResizableTitle : undefined
-      }
-    }
-    // columns={mergedColumns}
-    ,
-    columns: mergedColumns ?? [],
-    showSorterTooltip: {
-      target: 'sorter-icon'
-    },
-    rowKey: rowKey,
-    groupAble: groupAble,
-    groupSetting: groupSetting
-  }));
-};
-export default ConvertColumnTable;