es-grid-template 1.8.71 → 1.8.72

package/es/group-component/components/checkbox-control/index.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { Checkbox } from "rc-master-ui";
+const CheckboxControl = props => {
+  const {
+    options,
+    value,
+    onChange
+  } = props;
+  const selected = useMemo(() => {
+    return value ? value : [];
+  }, [value]);
+  const list = useMemo(() => {
+    return options ? options : [];
+  }, [options]);
+  const onChangeValue = val => {
+    const findIndex = selected.findIndex(it => it === val);
+    if (findIndex > -1) {
+      const newVal = selected.filter(it => it !== val);
+      onChange?.(newVal);
+    } else {
+      const newVal = [...selected, val];
+      onChange?.(newVal);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-column gap-50",
+    style: {}
+  }, list.map((it, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "d-flex align-items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: selected.includes(it.value),
+      type: "checkbox",
+      className: "cursor-pointer me-50",
+      onChange: () => onChangeValue(it.value)
+    }), /*#__PURE__*/React.createElement("span", null, it.label));
+  }));
+};
+export default CheckboxControl;

package/es/group-component/components/checkbox-filter/CheckboxFilter.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { TableLocale } from "rc-master-ui/es/table/interface";
+type Props = {
+    options: any[];
+    filterSearch?: boolean;
+    open?: boolean;
+    tablePrefixCls?: string;
+    prefixCls?: string;
+    dropdownPrefixCls?: string;
+    filterMultiple: boolean;
+    showFilter?: boolean;
+    onSelect?: (value: any) => void;
+    selectedKeys: string[];
+    locale?: TableLocale;
+    filterMode?: 'menu' | 'tree';
+};
+declare const CheckboxFilter: (props: Props) => React.JSX.Element;
+export default CheckboxFilter;

package/es/group-component/components/checkbox-filter/CheckboxFilter.js

@@ -0,0 +1,258 @@
+import * as React from "react";
+import classNames from "classnames";
+import { Checkbox, Menu, Radio, Empty } from "rc-master-ui";
+import { Tree } from "antd";
+import { flattenKeys } from "rc-master-ui/es/table/hooks/useFilter";
+import FilterSearch from "./FilterSearch";
+function searchValueMatched(searchValue, text) {
+  if (typeof text === 'string' || typeof text === 'number') {
+    return text?.toString().toLowerCase().includes(searchValue.trim().toLowerCase());
+  }
+  return false;
+}
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  searchValue,
+  filterSearch
+}) {
+  return filters.map((filter, index) => {
+    const key = String(filter.value);
+    if (filter.children) {
+      return {
+        key: key || index,
+        label: filter.text,
+        popupClassName: `${prefixCls}-dropdown-submenu`,
+        children: renderFilterItems({
+          filters: filter.children,
+          prefixCls,
+          filteredKeys,
+          filterMultiple,
+          searchValue,
+          filterSearch
+        })
+      };
+    }
+    const Component = filterMultiple ? Checkbox : Radio;
+    const item = {
+      key: filter.value !== undefined ? key : index,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
+        checked: filteredKeys.includes(key)
+      }), /*#__PURE__*/React.createElement("span", null, filter.text))
+    };
+    if (searchValue.trim()) {
+      if (typeof filterSearch === 'function') {
+        return filterSearch(searchValue, filter) ? item : null;
+      }
+      return searchValueMatched(searchValue, filter.text) ? item : null;
+    }
+    return item;
+  });
+}
+function hasSubMenu(filters) {
+  return filters.some(({
+    children
+  }) => children);
+}
+const CheckboxFilter = props => {
+  const {
+    // column,
+    filterSearch = true,
+    tablePrefixCls = 'ui-rc-table',
+    prefixCls = 'ui-rc-table-filter',
+    dropdownPrefixCls = 'ui-rc-dropdown',
+    filterMultiple,
+    selectedKeys: propsSelectedKeys,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    // searchValue,
+    showFilter,
+    // setSearchValue,
+    onSelect
+  } = props;
+  const selectedKeys = React.useMemo(() => {
+    if (propsSelectedKeys) {
+      return propsSelectedKeys.map(it => String(it));
+    }
+    return [];
+  }, [propsSelectedKeys]);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [openKeys, setOpenKeys] = React.useState([]);
+
+  // clear search value after close filter dropdown
+  // React.useEffect(() => {
+  //   // if (visible) {
+  //     setSearchValue('');
+  //   // }
+  // }, [open]);
+
+  const onOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+  const items = renderFilterItems({
+    // filters: column.filters || [],
+    filters: options || [],
+    filterSearch,
+    prefixCls,
+    filteredKeys: selectedKeys ?? [],
+    filterMultiple,
+    searchValue
+  });
+  const dropdownMenuClass = classNames({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  const empty = /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.filterEmptyText,
+    imageStyle: {
+      height: 24
+    },
+    style: {
+      margin: 0,
+      padding: '16px 0'
+    }
+  });
+  const isEmpty = items.every(item => item === null);
+  const onSearch = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+  };
+
+  // if ((column.filters || []).length === 0) {
+  //   return empty;
+  // }
+
+  const getTreeData = ({
+    filters
+  }) => (filters || []).map((filter, index) => {
+    const key = String(filter.value);
+    const item = {
+      title: filter.label,
+      id: filter.value !== undefined ? filter.value : index,
+      key: filter.value !== undefined ? key : String(index)
+    };
+    if (filter.children) {
+      item.children = getTreeData({
+        filters: filter.children
+      });
+    }
+    return item;
+  });
+  const getFilterData = node => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || []
+  });
+  const onCheckAll = e => {
+    if (e.target.checked) {
+      const allFilterKeys = flattenKeys(options).map(key => key);
+
+      // setFilteredKeysSync(allFilterKeys);
+      onSelect?.(allFilterKeys);
+    } else {
+      onSelect?.([]);
+      // setFilteredKeysSync([]);
+    }
+  };
+  const onCheck = (keys, {
+    node,
+    checked
+  }) => {
+    if (!filterMultiple) {
+      // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
+
+      onSelect?.(checked && node.key ? [node.id] : []);
+    } else {
+      if (!checked) {
+        const rs = propsSelectedKeys.filter(it => it !== node.id);
+        onSelect?.(rs);
+      } else {
+        const rs = [...propsSelectedKeys, node.id];
+        onSelect?.(rs);
+      }
+      // onSelectKeys({ selectedKeys: keys });
+    }
+  };
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
+      filterSearch: filterSearch,
+      value: searchValue,
+      onChange: onSearch,
+      tablePrefixCls: tablePrefixCls,
+      locale: locale
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${tablePrefixCls}-filter-dropdown-tree`
+    }, filterMultiple && options.length > 0 ? /*#__PURE__*/React.createElement(Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === flattenKeys(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < flattenKeys(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale?.filterCheckall) : /*#__PURE__*/React.createElement(Empty, null), /*#__PURE__*/React.createElement(Tree, {
+      checkable: true,
+      selectable: false,
+      blockNode: true,
+      multiple: filterMultiple,
+      checkStrictly: !filterMultiple,
+      className: `${dropdownPrefixCls}-menu`,
+      onCheck: onCheck,
+      checkedKeys: selectedKeys,
+      selectedKeys: selectedKeys,
+      showIcon: false
+      // treeData={getTreeData({ filters: column.filters })}
+      ,
+      treeData: getTreeData({
+        filters: options
+      }),
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      filterTreeNode: searchValue.trim() ? node => {
+        if (typeof filterSearch === 'function') {
+          // @ts-ignore
+          return filterSearch(searchValue, getFilterData(node));
+        }
+        return searchValueMatched(searchValue, node.title);
+      } : undefined,
+      rootStyle: {
+        background: 'none',
+        boxShadow: 'none'
+      }
+    })));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSearch, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+export default CheckboxFilter;

package/es/group-component/components/checkbox-filter/FilterSearch.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { FilterSearchType, TableLocale } from "antd/es/table/interface";
+import type { AnyObject } from '../../../grid-component/type';
+interface FilterSearchProps<RecordType = AnyObject> {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    filterSearch: FilterSearchType<RecordType>;
+    tablePrefixCls: string;
+    locale?: TableLocale;
+}
+declare const FilterSearch: <RecordType extends AnyObject = AnyObject>(props: FilterSearchProps<RecordType>) => React.JSX.Element;
+export default FilterSearch;

package/es/group-component/components/checkbox-filter/FilterSearch.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import SearchOutlined from '@ant-design/icons/SearchOutlined';
+import { Input } from 'rc-master-ui';
+
+// import type {AnyObject} from "./../grid-component/type"
+
+const FilterSearch = props => {
+  const {
+    value,
+    filterSearch,
+    tablePrefixCls,
+    locale,
+    onChange
+  } = props;
+  if (!filterSearch) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${tablePrefixCls}-filter-dropdown-search`,
+    style: {
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    suffix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    placeholder: locale?.filterSearchPlaceholder,
+    onChange: onChange,
+    value: value,
+    autoFocus: true
+    // for skip min-width of input
+    ,
+    htmlSize: 1,
+    className: `${tablePrefixCls}-filter-dropdown-search-input`
+  }));
+};
+export default FilterSearch;

package/es/group-component/components/command/Command.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { CommandItem } from "../../../grid-component/type";
+type Props<T> = {
+    id: string;
+    record: T;
+    item: CommandItem;
+    onClick: (e: any) => void;
+};
+declare const Command: <T extends object>(props: Props<T>) => React.JSX.Element;
+export default Command;

package/es/group-component/components/command/Command.js

@@ -0,0 +1,35 @@
+import React, { Fragment } from "react";
+import classnames from "classnames";
+const Command = props => {
+  const {
+    item,
+    onClick,
+    record,
+    id
+  } = props;
+  return /*#__PURE__*/React.createElement(Fragment, null, item.template ? /*#__PURE__*/React.createElement("div", {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": item.tooltip || item.title,
+    "data-tooltip-delay-show": 500,
+    id: item.id,
+    onClick: onClick
+  }, typeof item.template === 'function' ? item.template(record) : item.template) : /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-content": item.tooltip || item.title,
+    style: {
+      padding: '3px',
+      maxWidth: 45,
+      height: '100%',
+      display: 'flex',
+      cursor: 'pointer'
+    },
+    className: classnames('command-item', {
+      'btn-icon': item.title === ''
+    }),
+    color: item.color ? item.color : 'primary',
+    onClick: onClick
+  }, typeof item.icon === 'function' ? item.icon() : item.icon));
+};
+export default Command;

package/es/group-component/components/number/index.d.ts

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

package/es/group-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";
+const NumberInput = props => {
+  const {
+    t,
+    value,
+    format,
+    onChange,
+    onPressEnter
+  } = props;
+  const values = React.useMemo(() => [value], [value]);
+  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: 'input-element',
+    classNames: {
+      input: 'filter-input'
+    },
+    onValueChange: vals => {
+      // onChangeValueFilter(type, values.floatValue, 'min')
+
+      // setValues([vals.floatValue, values[1]])
+      onChange?.([vals.floatValue]);
+    },
+    onPressEnter: onPressEnter
+    // placeholder={t ? t('Min') : 'Min'}
+    ,
+    placeholder: t ? t('Enter') : 'Enter'
+    // autoFocus={true}
+    ,
+
+    allowClear: true
+  }));
+};
+export default NumberInput;

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

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

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

@@ -0,0 +1,79 @@
+import React, { Fragment } from "react";
+import { NumericFormat } from "react-numeric-component";
+import { Input } from "rc-master-ui";
+import { checkDecimalSeparator, checkThousandSeparator } from "../../hook/utils";
+const NumberRange = props => {
+  const {
+    t,
+    max,
+    min,
+    format,
+    onChange,
+    onPressEnter
+  } = 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: '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}
+    ,
+    allowClear: true,
+    classNames: {
+      input: 'filter-input'
+    },
+    onPressEnter: () => {
+      const maxInput = document.querySelector('.number-max-input');
+      if (maxInput) {
+        maxInput.focus();
+      }
+    }
+  })), /*#__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: 'input-element',
+    onValueChange: vals => {
+      // setValues([values[0], vals.floatValue])
+      onChange?.([min, vals.floatValue]);
+    }
+    // placeholder={t ? t('Max') : 'Max'}
+    ,
+    placeholder: t ? t('To') : 'To',
+    onPressEnter: onPressEnter,
+    classNames: {
+      input: 'number-max-input'
+    }
+  }))));
+};
+export default NumberRange;

package/es/group-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/group-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/group-component/footer/TableFooter.d.ts

@@ -0,0 +1,7 @@
+import type { Table } from "@tanstack/react-table";
+import React from "react";
+interface TableFooterProps<T> {
+    table: Table<T>;
+}
+declare const TableFooter: <RecordType extends object>({ table, }: TableFooterProps<RecordType>) => React.JSX.Element;
+export default TableFooter;