es-grid-template 1.7.22 → 1.7.24

package/es/table-component/components/number/index.js

@@ -0,0 +1,42 @@
+import React, { Fragment } from "react";
+import { NumericFormat } from "react-numeric-component";
+import { Input } from "rc-master-ui";
+import { checkDecimalSeparator, checkThousandSeparator } from "../../hook/utils";
+// import type {IFormat} from "../type"
+// import {checkDecimalSeparator, checkThousandSeparator} from "../hooks"
+
+const NumberInput = props => {
+  const {
+    t,
+    value,
+    format,
+    onChange
+  } = props;
+  const values = React.useMemo(() => [value], [value]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    ,
+    thousandSeparator: checkThousandSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: Input,
+    className: 'rounded-0 input-element',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue]);
+    }
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('Enter') : 'Enter',
+    autoFocus: true
+  }));
+};
+export default NumberInput;

package/es/table-component/components/number-range/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { IFormat } from "../../type";
+type Props = {
+    t?: any;
+    format?: IFormat;
+    min: number | string | undefined;
+    max: number | string | undefined;
+    onChange?: (values: any[]) => void;
+};
+declare const NumberRange: (props: Props) => React.JSX.Element;
+export default NumberRange;

package/es/table-component/components/number-range/index.js

@@ -0,0 +1,66 @@
+import React, { Fragment } from "react";
+import { NumericFormat } from "react-numeric-component";
+import { Input } from "rc-master-ui";
+import { checkDecimalSeparator, checkThousandSeparator } from "../../hook/utils";
+// import type {IFormat} from "../type"
+// import {checkDecimalSeparator, checkThousandSeparator} from "../hooks"
+
+const NumberRange = props => {
+  const {
+    t,
+    max,
+    min,
+    format,
+    onChange
+  } = props;
+  const values = React.useMemo(() => [min, max], [min, max]);
+
+  // const [values, setValues] = React.useState<any[]>(() =>
+  //   mergedValues,
+  // );
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: '',
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      columnGap: 5
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[0] ?? ''
+    // value={min}
+    ,
+    thousandSeparator: checkThousandSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: Input,
+    className: ' rounded-0 input-element',
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue, max]);
+    }
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('From') : 'From',
+    autoFocus: true
+  })), /*#__PURE__*/React.createElement("span", null, " - "), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
+    value: values[1] ?? ''
+    // value={max}
+    ,
+    thousandSeparator: checkThousandSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(format?.thousandSeparator, format?.decimalSeparator),
+    allowNegative: true,
+    customInput: Input,
+    className: ' rounded-0 input-element',
+    onValueChange: vals => {
+      // setValues([values[0], vals.floatValue])
+      onChange?.([min, vals.floatValue]);
+    }
+    // placeholder={t ? t('Max') : 'Max'}
+    ,
+    placeholder: t ? t('To') : 'To'
+  }))));
+};
+export default NumberRange;

package/es/table-component/features/operator.d.ts

@@ -0,0 +1,24 @@
+import { OnChangeFn, RowData, TableFeature } from '@tanstack/react-table';
+export type ColumnOperatorState = ColumnOperator[];
+export interface OperatorTableState {
+    operator: ColumnOperatorState;
+}
+export interface ColumnOperator {
+    id: string;
+    operator: string;
+}
+export interface OperatorOptions {
+    enableOperator?: boolean;
+    onColumnOperatorChange?: OnChangeFn<ColumnOperatorState>;
+}
+declare module '@tanstack/react-table' {
+    interface TableState extends OperatorTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends OperatorOptions {
+    }
+    interface Column<TData extends RowData, TValue> {
+        getFilterOperator: () => string;
+        setFilterOperator: (operator: string) => void;
+    }
+}
+export declare const OperatorFeature: TableFeature<any>;

package/es/table-component/features/operator.js

@@ -0,0 +1,62 @@
+// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
+
+import { makeStateUpdater } from '@tanstack/react-table';
+
+// define types for our new feature's table options
+
+// Define types for our new feature's table APIs
+// export interface OperatorInstance {
+//   setDensity: (updater: Updater<OpetorState>) => void
+
+//   toggleDensity: (value?: OpetorState) => void
+// }
+
+// Use declaration merging to add our new feature APIs and state types to TanStack Table's existing types.
+
+export const OperatorFeature = {
+  // define the new feature's initial state
+  getInitialState: state => {
+    return {
+      operator: [],
+      ...state
+    };
+  },
+  // define the new feature's default options
+  getDefaultOptions: table => {
+    return {
+      enableOperator: true,
+      onColumnOperatorChange: makeStateUpdater('operator', table)
+    };
+  },
+  // if you need to add a default column definition...
+  // getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
+  //   return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
+  // },
+
+  // define the new feature's table instance methods
+
+  // if you need to add row instance APIs...
+  // createRow: <TData extends RowData>(row, table): void => {},
+  // if you need to add cell instance APIs...
+  // createCell: <TData extends RowData>(cell, column, row, table): void => {},
+  // if you need to add column instance APIs...
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createColumn: (column, table) => {
+    column.getFilterOperator = () => {
+      return table.getState().operator?.find(op => op.id === column.id)?.operator ?? undefined;
+    };
+    column.setFilterOperator = updater => {
+      const safeUpdater = old => {
+        const others = old.filter(op => op.id !== column.id);
+        return [...others, {
+          id: column.id,
+          operator: updater
+        }];
+      };
+      return table.options.onColumnOperatorChange?.(safeUpdater);
+    };
+  }
+
+  // if you need to add header instance APIs...
+  // createHeader: <TData extends RowData>(header, table): void => {},
+};

package/es/table-component/footer/TableFooter.d.ts

@@ -0,0 +1,13 @@
+import type { Column, Table } from "@tanstack/react-table";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import React from "react";
+interface TableFooterProps<T> {
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    table: Table<T>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+}
+declare const TableFooter: <RecordType extends object>({ columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, ...rest }: TableFooterProps<RecordType>) => React.JSX.Element;
+export default TableFooter;

package/es/table-component/footer/TableFooter.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import TableFooterRow from "./TableFooterRow";
+import { TableContext } from "../useContext";
+import React, { useContext } from "react";
+const TableFooter = ({
+  columnVirtualizer,
+  table,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  ...rest
+}) => {
+  const {
+    prefix
+  } = useContext(TableContext);
+  return /*#__PURE__*/React.createElement("tfoot", {
+    className: `${prefix}-grid-tfoot`,
+    style: {
+      display: "grid",
+      position: "sticky",
+      bottom: 0,
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(TableFooterRow, _extends({
+    table: table,
+    columnVirtualizer: columnVirtualizer,
+    headerGroup: table.getHeaderGroups()[table.getHeaderGroups().length - 1]
+    // key={headerGroup.id}
+    ,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight
+  }, rest)));
+};
+export default TableFooter;

package/es/table-component/footer/TableFooterCell.d.ts

@@ -0,0 +1,10 @@
+import type { Header } from "@tanstack/react-table";
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import React from "react";
+interface TableFooterCellProps<T> {
+    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    header: Header<T, unknown>;
+    column: VirtualItem;
+}
+declare const TableFooterCell: <RecordType extends object>({ header }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+export default TableFooterCell;

package/es/table-component/footer/TableFooterCell.js

@@ -0,0 +1,24 @@
+import React from "react";
+// import type { Person } from "../makeData";
+import { getCommonPinningStyles } from "../hook/utils";
+// import type { Person } from "../../tanstack-table/makeData";
+
+const TableFooterCell = ({
+  header
+}) => {
+  return /*#__PURE__*/React.createElement("td", {
+    // ref={el => {
+    //   if (el) columnVirtualizer.measureElement(el)
+    // }}
+    // data-index={header.id}
+    key: header.id,
+    colSpan: header.colSpan,
+    style: {
+      display: 'flex',
+      ...getCommonPinningStyles(header.column),
+      width: header?.getSize() ?? header.column.getSize(),
+      backgroundColor: "#fafafa"
+    }
+  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/React.createElement("span", null, "aaa") : '');
+};
+export default TableFooterCell;

package/es/table-component/footer/TableFooterRow.d.ts

@@ -0,0 +1,14 @@
+import type { Column, HeaderGroup, Table } from "@tanstack/react-table";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import React from "react";
+interface TableFooterRowProps<T> {
+    table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    headerGroup: HeaderGroup<T>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+}
+declare const TableFooterRow: <RecordType extends object>({ table, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, columnVirtualizer }: TableFooterRowProps<RecordType>) => React.JSX.Element;
+export default TableFooterRow;

package/es/table-component/footer/TableFooterRow.js

@@ -0,0 +1,71 @@
+// import type { Person } from "../makeData";
+import TableFooterCell from "./TableFooterCell";
+import React from "react";
+// import type { Person } from "../../tanstack-table/makeData";
+// import TableHeadCell from "./TableHeadCell";
+
+const TableFooterRow = ({
+  table,
+  // columnVirtualizer,
+  headerGroup,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  fixedLeftColumns,
+  fixedRightColumns,
+  // virtualColumns,
+  columnVirtualizer
+}) => {
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  return /*#__PURE__*/React.createElement("tr", {
+    // data-index={headerGroup.id}
+    key: headerGroup.id,
+    style: {
+      display: "flex",
+      width: "100%",
+      borderTop: "1px solid #e0e0e0"
+    }
+  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+    return /*#__PURE__*/React.createElement(TableFooterCell, {
+      columnVirtualizer: columnVirtualizer,
+      key: column.id,
+      header: headerGroup.headers.find(h => h.column.id === column.id),
+      column: column
+    });
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("td", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingLeft
+    }
+  }) : null, virtualColumns.map(virtualColumn => {
+    const header = headerGroup.headers[virtualColumn.index];
+    const isFixed = table.getState().columnPinning.left?.includes(header.column.id) || table.getState().columnPinning.right?.includes(header.column.id);
+    // const isFixed = table.getState().columnPinning.left?.includes(header.column.id)
+
+    if (header && !isFixed) {
+      return /*#__PURE__*/React.createElement(TableFooterCell, {
+        key: header.id,
+        header: header,
+        column: virtualColumn,
+        columnVirtualizer: columnVirtualizer
+      });
+    }
+    return null;
+  }),
+  //fake empty column to the right for virtualization scroll padding
+  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/React.createElement(TableFooterCell, {
+    key: column.id,
+    header: headerGroup.headers.find(h => h.column.id === column.id),
+    column: column
+  })) : null, virtualPaddingRight ?
+  /*#__PURE__*/
+  //fake empty column to the right for virtualization scroll padding
+  React.createElement("td", {
+    className: "",
+    style: {
+      display: "flex",
+      width: virtualPaddingRight
+    }
+  }) : null);
+};
+export default TableFooterRow;

package/es/table-component/header/TableHead.d.ts

@@ -0,0 +1,14 @@
+import type { Column, Table } from '@tanstack/react-table';
+import { type Virtualizer } from '@tanstack/react-virtual';
+import React from 'react';
+interface TableHeadProps<T> {
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    table: Table<T>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+}
+declare const TableHead: <RecordType extends object>({ tableContainerRef, columnVirtualizer, table, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns }: TableHeadProps<RecordType>) => React.JSX.Element;
+export default TableHead;

package/es/table-component/header/TableHead.js

@@ -0,0 +1,60 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useContext } from 'react';
+import { TableContext } from "../useContext";
+import TableHeadRow from "./TableHeadRow";
+const TableHead = ({
+  tableContainerRef,
+  columnVirtualizer,
+  table,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  fixedLeftColumns,
+  fixedRightColumns
+}) => {
+  const {
+    prefix
+  } = useContext(TableContext);
+  const rowVirtualizer = useVirtualizer({
+    count: table.getHeaderGroups().length,
+    estimateSize: () => 34,
+    //estimate row height for accurate scrollbar dragging
+    getScrollElement: () => tableContainerRef.current,
+    //measure dynamic row height, except in firefox because it measures table border height incorrectly
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 5
+  });
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  // const columnSizingState = table.getState().columnSizing
+
+  // React.useEffect(() => {
+  //   requestAnimationFrame(() => {
+  //     rowVirtualizer.measure()
+  //   })
+  // }, [columnSizingState, rowVirtualizer])
+
+  return /*#__PURE__*/React.createElement("thead", {
+    className: `${prefix}-grid-thead`,
+    style: {
+      display: 'grid',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, virtualRows.map(virtualRow => {
+    const headerGroup = table.getHeaderGroups()[virtualRow.index];
+    return /*#__PURE__*/React.createElement(TableHeadRow, {
+      table: table,
+      columnVirtualizer: columnVirtualizer,
+      rowHeaderVirtualizer: rowVirtualizer,
+      headerGroup: headerGroup,
+      key: headerGroup.id,
+      virtualPaddingLeft: virtualPaddingLeft,
+      virtualPaddingRight: virtualPaddingRight,
+      fixedLeftColumns: fixedLeftColumns,
+      fixedRightColumns: fixedRightColumns,
+      rowHeaderVirtual: virtualRow
+    });
+  }));
+};
+export default TableHead;

package/es/table-component/header/TableHeadCell.d.ts

@@ -0,0 +1,14 @@
+import type { Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
+import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+interface TableHeadCellProps<T> {
+    t?: any;
+    table: Table<T>;
+    header: Header<T, unknown>;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+}
+declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
+export default TableHeadCell;