es-grid-template 1.8.64 → 1.8.66

package/es/grid-component/hooks/content/TooltipContent.js

@@ -1,74 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment, useState } from "react";
-import classnames from "classnames";
-import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
-// useClick
-} from "@floating-ui/react";
-import styled from "styled-components";
-import { useIsOverflow } from "../useIsOverflow";
-// import {getTemplate} from "../utils";
-
-const TooltipStyle = styled.div.withConfig({
-  displayName: "TooltipStyle",
-  componentId: "es-grid-template__sc-7yfbzv-0"
-})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
-const TooltipContent = props => {
-  const {
-    content,
-    tooltip,
-    value,
-    record,
-    rowIndex,
-    showTooltip
-  } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    placement: "top",
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(5), flip({
-      fallbackAxisSideDirection: "start"
-    }), shift()]
-  });
-  const isOverflow = useIsOverflow(refs.reference);
-  const hover = useHover(context, {
-    move: false
-  });
-  const focus = useFocus(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context, {
-    role: "tooltip"
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([hover, focus, dismiss, role]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    style: {
-      flex: 1,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      wordBreak: 'keep-all'
-    },
-    className: classnames('', {})
-  }), content()), isOpen && showTooltip !== false && isOverflow &&
-  /*#__PURE__*/
-  // {true  && (
-  React.createElement(FloatingPortal, {
-    root: document.body
-  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
-    className: "Tooltip",
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles
-    }
-  }, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
-};
-export default TooltipContent;

package/es/grid-component/hooks/useColumns.d.ts

@@ -1,19 +0,0 @@
-import type { AnyObject, IGroupSetting } from "../type";
-export declare const SELECTION_COLUMN: {};
-interface UseColumnsConfig<RecordType> {
-    t?: any;
-    dataSource: RecordType[];
-    buddhistLocale?: any;
-    dataSourceFilter?: any;
-    locale?: any;
-    format?: any;
-    handleResize?: any;
-    sortMultiple?: boolean;
-    groupAble?: boolean;
-    groupSetting?: IGroupSetting;
-    groupColumns?: string[];
-    rowKey?: any;
-    onMouseHover?: any;
-}
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
-export default useColumns;

package/es/grid-component/hooks/useColumns.js

@@ -1,317 +0,0 @@
-import * as React from 'react';
-// import type {Key} from 'react';
-import { Fragment, useCallback } from 'react';
-// import Command from "../Command";
-import { Button, Space } from "antd";
-import { Select } from "rc-master-ui";
-import { findItemPath, getFormat, getTypeFilter } from "./utils";
-import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
-import { flatColumns2, renderContent, renderFilter } from "./columns";
-import { SearchOutlined } from "@ant-design/icons";
-import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
-import classNames from "classnames";
-import HeaderContent from "./content/HeaderContent";
-const ASCEND = 'ascend';
-const DESCEND = 'descend';
-export const SELECTION_COLUMN = {};
-
-// const EMPTY_LIST: React.Key[] = [];
-
-const useColumns = config => {
-  // const {
-  //   preserveSelectedRowKeys,
-  //   selectedRowKeys,
-  //   defaultSelectedRowKeys,
-  //   onSelectMultiple,
-  //   columnWidth: selectionColWidth,
-  //   type: selectionType,
-  //   selections,
-  //   fixed,
-  // } = rowSelection || {};
-
-  const {
-    t,
-    dataSourceFilter,
-    buddhistLocale,
-    locale,
-    sortMultiple,
-    format,
-    handleResize,
-    // onMouseHover,
-    groupAble,
-    groupColumns,
-    groupSetting,
-    dataSource,
-    rowKey
-  } = config;
-
-  // const mergedColumns = React.useMemo(
-  //   () => getMergedColumns<RecordType>(rawMergedColumns || []),
-  //   [rawMergedColumns],
-  // );
-  //
-  // const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(() =>
-  //   collectFilterStates(mergedColumns, true),
-  // );
-
-  // ====================== Selections ======================
-
-  // const handleSearch = (
-  //   selectedKeys: string[],
-  //   confirm: any,
-  // ) => {
-  //
-  //   confirm()
-  //
-  // }
-
-  const getColumnSearchProps = useCallback(column => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      // close,
-      setOperatorKey,
-      operatorKey,
-      visible,
-      searchValue,
-      setSearchValue
-    }) => {
-      const type = getTypeFilter(column);
-      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
-      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
-      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
-      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          padding: 8,
-          minWidth: 275
-        },
-        onKeyDown: e => e.stopPropagation()
-      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
-        className: 'mb-1'
-      }, /*#__PURE__*/React.createElement(Select, {
-        options: translateOption(operatorOptions, t),
-        style: {
-          width: '100%',
-          marginBottom: 8
-        },
-        value: operatorKey,
-        onChange: val => {
-          setOperatorKey(val);
-        }
-      })), /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 8
-        }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
-        style: {
-          justifyContent: 'end',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: () => {
-          // confirm({closeDropdown: false})
-          confirm();
-          // handleSearch(selectedKeys as string[], confirm)
-        },
-        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
-        size: "small",
-        style: {
-          width: 90
-        }
-      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
-        type: "link",
-        size: "small",
-        onClick: () => {
-          // setSearchValue('')
-          setSelectedKeys([]);
-          confirm();
-          // handleSearch()
-          // close()
-        }
-      }, t ? t("Clear") : 'Clear')));
-    },
-    filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
-      fontSize: 12
-      // onClick={() => {
-      //   onFilterClick?.(column, onFilterCallback)
-      // }}
-      ,
-      style: {
-        color: filtered ? '#E3165B' : '#283046'
-      }
-    }),
-    filterDropdownProps: {
-      onOpenChange(open) {
-        if (open) {
-          // setTimeout(() => searchInput.current?.select(), 100)
-        }
-      }
-    }
-  }), [buddhistLocale, dataSourceFilter, locale, t]);
-
-  // ======================= Columns ========================
-  const transformColumns = useCallback(columns => {
-    // >>>>>>>>>>> Support selection
-    const cloneColumns = [...columns];
-    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
-
-    // ===================== Render =====================
-
-    const convertColumns = cols => {
-      return cols.map(col => {
-        const colIndex = flatColumns2(cols).findIndex(it => it.field === col.field);
-        if (col === SELECTION_COLUMN) {
-          return SELECTION_COLUMN;
-        }
-        const transformedColumn = {
-          ...col,
-          dataIndex: col.field ?? col.dataIndex,
-          key: col.field ?? col.dataIndex ?? col.key,
-          // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
-          // title: () => (<span>aaa</span>),
-          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
-            column: {
-              ...col
-            },
-            t: t
-          }),
-          // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
-          ellipsis: col.ellipsis !== false,
-          align: col.textAlign ?? col.align,
-          fixed: col.fixedType ?? col.fixed,
-          isSummary: col.isSummary ?? col.haveSum,
-          hidden: col.hidden ?? col.visible === false
-          // hidden: true
-        };
-        if (transformedColumn.children && transformedColumn.children?.length) {
-          return {
-            ...transformedColumn,
-            children: convertColumns(transformedColumn.children)
-          };
-        }
-        if (transformedColumn.field === '#') {
-          return {
-            ...transformedColumn,
-            onCell: () => ({
-              className: 'cell-number'
-            }),
-            render: (val, record) => {
-              return findItemPath(dataSource, record, rowKey);
-            }
-          };
-        }
-        if (transformedColumn.field === 'command') {
-          return {
-            ...transformedColumn,
-            onCell: () => ({
-              className: 'cell-number',
-              style: {
-                padding: '2px 8px'
-              }
-            })
-          };
-        }
-        return {
-          ...transformedColumn,
-          ...(transformedColumn.allowFiltering === false ? {} : {
-            ...getColumnSearchProps(col)
-          }),
-          sorter: col.sorter === false ? undefined : {
-            compare: a => a,
-            multiple: sortMultiple ? colIndex : undefined
-          },
-          sortIcon: args => {
-            const {
-              sortOrder
-            } = args;
-            return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
-              fontSize: 15,
-              style: {
-                display: 'flex',
-                opacity: 0,
-                marginLeft: 4
-              },
-              className: classNames(`ui-rc-table-column-sorter-up`, {
-                active: true
-              })
-            }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
-              className: classNames(`ui-rc-table-column-sorter-up`, {
-                active: sortOrder === ASCEND
-              }),
-              style: {
-                display: 'flex',
-                marginLeft: 4
-              }
-            }, /*#__PURE__*/React.createElement(ArrowUp, {
-              fontSize: 15,
-              color: '#000'
-            })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
-              className: classNames(`ui-rc-table-column-sorter-up`, {
-                active: sortOrder === DESCEND
-              }),
-              style: {
-                display: 'flex',
-                marginLeft: 4
-              }
-            }, /*#__PURE__*/React.createElement(ArrowDown, {
-              fontSize: 15,
-              color: '#000'
-            })));
-          },
-          onHeaderCell: () => ({
-            id: `${col.field}`,
-            width: col.width,
-            onResize: handleResize?.(col),
-            className: col.headerTextAlign === 'center' ? 'head-align-center' : col.headerTextAlign === 'right' ? 'head-align-right' : ''
-          }),
-          onCell: (data, index) => {
-            return {
-              id: `${col.field}`,
-              colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
-              zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
-              ...transformedColumn?.onCell?.(data, index),
-              className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
-                'cell-group': groupColumns && data.children,
-                'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
-              })
-              // onMouseEnter: () => {
-              //   onMouseHover(data, col as any)
-              // },
-            };
-          },
-          render: (value, record, rowIndex) => {
-            const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
-            const cellFormat = getFormat(colFormat, format);
-            if (groupSetting && groupSetting.hiddenColumnGroup === false) {
-              if (record.children) {
-                return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
-              }
-              if (groupColumns?.includes(col.field)) {
-                return '';
-              }
-              return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
-            }
-            if (col.field === firstNonGroupColumn?.field && record.children) {
-              const currentGroupColumn = flatColumns2(cols).find(it => it.field === record.field);
-              if (currentGroupColumn?.template) {
-                return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
-              }
-              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
-            }
-            return renderContent(col, value, record, rowIndex, colIndex, false, cellFormat);
-          },
-          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
-        };
-      });
-    };
-    return convertColumns(cloneColumns);
-  }, [groupColumns, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, dataSource, rowKey, handleResize, format]
-  // format, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, groupColumns, , handleResize, , t, cellHover
-  );
-  return [transformColumns];
-};
-export default useColumns;

package/es/grid-component/number/index.d.ts

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

package/es/grid-component/number/index.js

@@ -1,39 +0,0 @@
-import React, { Fragment } from "react";
-import { NumericFormat } from "react-numeric-component";
-import { Input } from "rc-master-ui";
-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/grid-component/number-range/index.d.ts

@@ -1,11 +0,0 @@
-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/grid-component/number-range/index.js

@@ -1,63 +0,0 @@
-import React, { Fragment } from "react";
-import { NumericFormat } from "react-numeric-component";
-import { Input } from "rc-master-ui";
-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/grid-component/table/Grid.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import type { ColumnsTable, GridTableProps } from "../type";
-import type { GetRowKey } from "../type";
-type Props<T> = GridTableProps<T> & {
-    scrollHeight?: number;
-    tableRef: any;
-    triggerFilter?: (queries: any) => void;
-    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
-    triggerChangeData?: (newData: T[], type: string) => void;
-    getRowKey: GetRowKey<T>;
-    triggerGroupColumns?: (groupedColumns: string[]) => void;
-    setTooltipContent?: any;
-    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
-    isFilter?: boolean;
-    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
-    originData: T[];
-    mergedFilterKeys?: any;
-    setMergedFilterKeys?: any;
-    handleFullScreen?: any;
-    isFullScreen?: boolean;
-};
-declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
-export default Grid;

package/es/grid-component/table/Grid.js

@@ -1,49 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { Fragment } from 'react';
-import { GridStyle } from "../GridStyle";
-import TableGrid from "../TableGrid";
-// import type {ColumnsTable} from "../type";
-
-import { ConfigProvider } from "rc-master-ui";
-// import {ConfigProvider} from "antd";
-
-const Grid = props => {
-  const {
-    id,
-    height,
-    scrollHeight,
-    rowHoverable,
-    isFullScreen,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    $heightTable: height,
-    $heightScroll: scrollHeight,
-    $isFullScreen: isFullScreen,
-    style: {
-      position: 'relative'
-    },
-    id: id
-  }, /*#__PURE__*/React.createElement(ConfigProvider, {
-    theme: {
-      components: {
-        Table: {
-          rowHoverBg: '#eb461912',
-          rowSelectedBg: '#eb4619',
-          rowSelectedHoverBg: '#eb4619',
-          cellFontSize: 12,
-          cellFontSizeSM: 13,
-          headerBg: '#ffffff',
-          cellPaddingBlockSM: 7
-        }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
-    isFullScreen: isFullScreen,
-    id: id
-    // style={{...style, minHeight: height}}
-    ,
-    rowHoverable: rowHoverable ?? true
-  })))));
-};
-export default Grid;

package/es/grid-component/table/GridEdit.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import 'dayjs/locale/es';
-import 'dayjs/locale/vi';
-import type { AnyObject, TableProps } from "../type";
-import type { ColumnsTable } from "../type";
-import type { GetRowKey } from "../type";
-type Props<RecordType> = TableProps<RecordType> & {
-    tableRef: any;
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
-    triggerChangeData?: (newData: RecordType[], type: string) => void;
-    triggerPaste?: (pastedRows: RecordType[], pastedColumnsArray: string[], newData: RecordType[], copyRows: RecordType[]) => void;
-    getRowKey: GetRowKey<RecordType>;
-    triggerGroupColumns?: (groupedColumns: string[]) => void;
-    setTooltipContent?: any;
-    scrollHeight?: number;
-    originData: RecordType[];
-    mergedFilterKeys?: any;
-    setMergedFilterKeys?: any;
-    handleFullScreen?: any;
-    isFullScreen?: boolean;
-};
-declare const GridEdit: <RecordType extends AnyObject = AnyObject>(props: Props<RecordType>) => React.JSX.Element;
-export default GridEdit;