es-grid-template 1.7.23 → 1.7.24

package/es/table-component/components/InputControl/InputControl.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLInputTypeAttribute } from "react";
+import React from "react";
+interface IFFormInput {
+    id?: any;
+    control: any;
+    name: string;
+    type?: HTMLInputTypeAttribute;
+    label: string;
+    labelSize?: string;
+    required?: boolean;
+    errors?: any;
+    height?: number | string;
+    disabled?: boolean;
+    row?: number;
+    isLabel?: boolean;
+    inLine?: boolean;
+    autoFocus?: boolean;
+    placeholder?: string;
+    classes?: string;
+    callback?: any;
+    readOnly?: boolean;
+    isView?: boolean;
+    t?: any;
+    onKeyDown?: (event: any) => void;
+}
+declare const InputControl: (props: IFFormInput) => React.JSX.Element;
+export default InputControl;

package/es/table-component/components/InputControl/InputControl.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { Controller } from "react-hook-form";
+import { Input } from "rc-master-ui";
+import { Typography } from "antd";
+import classnames from "classnames";
+import React, { Fragment } from "react";
+// import {isNullOrUndefined} from "../../hooks";
+import { Col, Row } from "rc-master-ui/es/grid";
+import { isNullOrUndefined } from "../../hook/utils";
+// import {isNullOrUndefined} from "../../../hooks"
+
+const {
+  Text
+} = Typography;
+const InputControl = props => {
+  const {
+    id,
+    control,
+    name,
+    type,
+    label,
+    labelSize,
+    required,
+    errors,
+    height,
+    disabled,
+    row,
+    isLabel,
+    placeholder,
+    autoFocus,
+    inLine,
+    callback,
+    readOnly,
+    classes,
+    isView,
+    t,
+    onKeyDown,
+    ...rest
+  } = props;
+  const renderLabel = () => {
+    return /*#__PURE__*/React.createElement(Col, {
+      span: 6
+    }, isLabel === false ? '' : /*#__PURE__*/React.createElement("label", {
+      className: "form-label"
+    }, t ? t(label ? label : '') : label ? label : '', " ", required ? /*#__PURE__*/React.createElement("span", {
+      className: "text-danger"
+    }, "*") : '', " "));
+  };
+
+  // const renderText = () => {
+  //   return (
+  //     <Fragment>
+  //       <Controller
+  //         name={name}
+  //         control={control}
+  //         render={({ field: { value } }) => (
+  //           <span>{value}</span>
+  //         )}
+  //       />
+  //     </Fragment>
+  //   )
+  // }
+
+  const renderInput = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(Controller, {
+      name: name,
+      control: control,
+      render: ({
+        field: {
+          value,
+          onChange
+        }
+      }) => /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+        id: id,
+        value: !isNullOrUndefined(value) ? value : '',
+        onChange: val => {
+          onChange(val.target.value);
+          if (callback) {
+            callback(val);
+          }
+        },
+        style: {
+          height: `${height}px`
+        },
+        autoFocus: autoFocus,
+        disabled: disabled,
+        placeholder: placeholder,
+        type: type ? type : 'text'
+        // invalid={errors && true}
+        ,
+        status: errors && true ? 'error' : undefined
+        // rows={row}
+        ,
+        readOnly: readOnly,
+        onKeyDown: onKeyDown
+      }))
+    }), errors && /*#__PURE__*/React.createElement(Text, {
+      type: "danger"
+    }, errors?.message));
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Row, {
+    gutter: [4, 4]
+    // className={classnames(' align', {
+    //   [labelSize ? labelSize : '']: labelSize,
+    //   [classes ? classes : '']: classes,
+    //   'form-row-inline-error': errors
+    // }, inLine === false ? 'form-group ' : 'form-row-inline d-flex'
+    // )}
+  }, renderLabel(), /*#__PURE__*/React.createElement(Col, {
+    span: 18,
+    className: classnames('', {
+      'hidden-label': isLabel === false
+    })
+  }, renderInput())));
+};
+export default InputControl;

package/es/table-component/components/InputControl/index.d.ts

@@ -0,0 +1 @@
+export * from './InputControl';

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

@@ -0,0 +1 @@
+export * from "./InputControl";

package/es/table-component/components/async-select/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { SelectProps } from "rc-master-ui/es/select";
+import type { LoadOptionsArgs } from '../../type';
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+    rowData?: any;
+}
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/table-component/components/async-select/index.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Select } from "rc-master-ui";
+
+// import type {LoadOptionsArgs} from "../type";
+
+export function AsyncSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  rowData,
+  ...props
+}) {
+  const [options, setOptions] = useState(defaultOptions ?? []);
+  const debounceFetcher = useMemo(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        }, {
+          rowData
+        });
+      }
+    };
+    return debounce(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  useEffect(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options
+  }));
+}

package/es/table-component/components/async-table-select/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { TableSelectProps } from "rc-master-ui/es/table-select";
+import type { LoadOptionsArgs } from '../../type';
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+    rowData?: any;
+}
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/table-component/components/async-table-select/index.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { TableSelect } from "rc-master-ui";
+
+// import type {LoadOptionsArgs} from "../type";
+
+export function AsyncTableSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  columns,
+  rowData,
+  ...props
+}) {
+  const [options, setOptions] = useState(defaultOptions ?? []);
+  const debounceFetcher = useMemo(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        }, {
+          rowData
+        });
+      }
+    };
+    return debounce(fetchOptions, debounceTimeout);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
+  useEffect(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options,
+    columns: columns
+  }));
+}

package/es/table-component/components/checkbox-control/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type OptionType = {
+    value: any;
+    label: string;
+    [key: string]: any;
+};
+type Props<T> = {
+    options: T[];
+    value: any[];
+    onChange?: (value: any[]) => void;
+};
+declare const CheckboxControl: <T extends OptionType>(props: Props<T>) => React.JSX.Element;
+export default CheckboxControl;

package/es/table-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/table-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/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -0,0 +1,240 @@
+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,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    // searchValue,
+    showFilter,
+    // setSearchValue,
+    onSelect
+  } = props;
+  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.text,
+      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 => String(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.key] : []);
+    } else {
+      // onSelectKeys({ selectedKeys: keys });
+      onSelect?.(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
+    })));
+  }
+  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/table-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 '../../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/table-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 "./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/table-component/components/command/Command.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { CommandItem } from "../../type";
+type Props<T> = {
+    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/table-component/components/command/Command.js

@@ -0,0 +1,28 @@
+import React, { Fragment } from "react";
+import classnames from "classnames";
+const Command = props => {
+  const {
+    item,
+    onClick,
+    record
+  } = props;
+  return /*#__PURE__*/React.createElement(Fragment, null, item.template ? /*#__PURE__*/React.createElement("div", {
+    id: item.id,
+    onClick: onClick
+  }, typeof item.template === 'function' ? item.template(record) : item.template) : /*#__PURE__*/React.createElement("div", {
+    tabIndex: -1,
+    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/table-component/components/number/index.d.ts

@@ -0,0 +1,10 @@
+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;