es-grid-template 1.3.0 → 1.3.2

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

@@ -8,6 +8,7 @@ type Props<T> = GridTableProps<T> & {
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    triggerFilter?: (queries: any) => void;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

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

@@ -67,7 +67,7 @@ const Group = props => {
         gap: '10px',
         marginRight: 10
       }
-    }, /*#__PURE__*/React.createElement(ColumnsGroup, {
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
       t: t
       // defaultGroupColumns={['name']}
       ,

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

@@ -18,7 +18,7 @@ export type ToolbarItem = Omit<RcToolbarItem, 'position' | 'align'> & {
     align?: ITextAlign;
     onClick?: (args: any) => void;
 };
-export type ContextMenuItem = ItemType & {};
+export type ContextMenuItem = ItemType;
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -218,6 +218,7 @@ export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
     hiddenColumnGroup?: boolean;
+    showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
 };
 type IOnGroup = {

package/lib/grid-component/CheckboxFilter.js

@@ -88,6 +88,7 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
+  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -180,6 +181,9 @@ const CheckboxFilter = props => {
       onSelect?.(keys);
     }
   };
+  console.log('getTreeData({ filters: options })', getTreeData({
+    filters: options
+  }));
   if (filterMode === 'tree') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(_FilterSearch.default, {
       filterSearch: filterSearch,

package/lib/grid-component/CheckboxFilter2.d.ts

@@ -0,0 +1,20 @@
+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';
+    searchValue: string;
+    setSearchValue: (value: any) => void;
+};
+declare const CheckboxFilter: (props: Props) => React.JSX.Element;
+export default CheckboxFilter;

package/lib/grid-component/CheckboxFilter2.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FilterSearch = _interopRequireDefault(require("./FilterSearch"));
+var _rcMasterUi = require("rc-master-ui");
+var _antd = require("antd");
+var _useFilter = require("rc-master-ui/es/table/hooks/useFilter");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import Tree from "rc-master-ui/es/tree";
+
+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 ? _rcMasterUi.Checkbox : _rcMasterUi.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('');
+
+  console.log('options', options);
+  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 = (0, _classnames.default)({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  const empty = /*#__PURE__*/React.createElement(_rcMasterUi.Empty, {
+    image: _rcMasterUi.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 = (0, _useFilter.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);
+    }
+  };
+  console.log('getTreeData({ filters: options })', getTreeData({
+    filters: options
+  }));
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(_FilterSearch.default, {
+      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(_rcMasterUi.Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === (0, _useFilter.flattenKeys)(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < (0, _useFilter.flattenKeys)(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale?.filterCheckall) : /*#__PURE__*/React.createElement(_rcMasterUi.Empty, null), /*#__PURE__*/React.createElement(_antd.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.default, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(_rcMasterUi.Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+var _default = exports.default = CheckboxFilter;

package/lib/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -43,7 +43,7 @@ const ColumnsGroup = props => {
     return rsCol.map(it => ({
       ...it,
       value: it.field,
-      label: t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title
+      label: t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText
     }));
   }, [rsCol, t]);
 
@@ -146,7 +146,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
       // hideSelectedOptions
     })), /*#__PURE__*/_react.default.createElement("div", {
@@ -175,7 +175,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
@@ -202,7 +202,7 @@ const ColumnsGroup = props => {
       ,
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
-        return t ? t(it.columnGroupText ?? it.headerText ?? it.title) : it.columnGroupText ?? it.headerText ?? it.title;
+        return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
       }
     }))), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'

package/lib/grid-component/ContextMenu.js

@@ -93,6 +93,7 @@ const ContextMenu = props => {
     React.createElement(_antd.Dropdown, {
       placement: 'topRight',
       open: open,
+      overlayClassName: 'be-popup-container',
       overlayStyle: {
         left: `${pos.x}px`,
         top: `${pos.y}px`

package/lib/grid-component/ConvertColumnTable.js

@@ -113,6 +113,7 @@ const ConvertColumnTable = props => {
     locale,
     t,
     buddhistLocale,
+    dataSource,
     dataSourceFilter: propDataSourceFilter,
     format,
     sortMultiple,

package/lib/grid-component/EditableCell.js

@@ -126,7 +126,7 @@ const EditableCell = props => {
               });
             }
           },
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate
@@ -166,7 +166,7 @@ const EditableCell = props => {
           },
           showTime: true,
           value: date,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
           minDate: minDate,
@@ -217,7 +217,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDateValue1,
           minDate: minDateValue1,
@@ -234,7 +234,7 @@ const EditableCell = props => {
             height: '100%'
           },
           picker: editType,
-          placeholder: column.placeholder,
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxWeekValue,
           minDate: minWeekValue,
@@ -254,6 +254,7 @@ const EditableCell = props => {
             format: timeFormat,
             type: 'mask'
           },
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           maxDate: maxTime,
           minDate: minTime,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
@@ -327,7 +328,7 @@ const EditableCell = props => {
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
           ,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
@@ -407,7 +408,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -461,7 +462,7 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
@@ -531,7 +532,7 @@ const EditableCell = props => {
             overflow: 'auto'
           },
           treeData: newTreeData,
-          placeholder: t ? t('Select') : 'Select',
+          placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           treeDefaultExpandAll: true,
           defaultOpen: column.field === cellEditing?.column.field
           // autoFocus={true}
@@ -745,6 +746,7 @@ const EditableCell = props => {
           customInput: _antd.Input
           // valueIsNumericString={true}
           ,
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           autoComplete: 'off',
           className: (0, _classnames.default)('be-cell-editing  rounded-0 input-element', {
             'is-invalid': isInvalid,
@@ -788,6 +790,7 @@ const EditableCell = props => {
           ,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           className: (0, _classnames.default)('be-cell-editing rounded-0 input-element'),
+          placeholder: t ? t(column.placeholder ?? 'Enter') : column.placeholder ?? 'Enter',
           value: !(0, _hooks.isNullOrUndefined)(value) ? value : '',
           onBlur: () => {
             const formState = getValues();

package/lib/grid-component/InternalTable.js

@@ -68,7 +68,8 @@ const InternalTable = props => {
     dataSource,
     allowResizing,
     dataSourceFilter: propDataSourceFilter,
-    onFilterClick,
+    // onFilterClick,
+    // onFilter,
     editAble,
     rowKey: propRowKey,
     format,
@@ -97,8 +98,15 @@ const InternalTable = props => {
       ...local.lang
     }
   };
+
+  // const [filterStates, setFilterState] = React.useState<any>(null)
+  // const [isFilter, setIsFilter] = React.useState<boolean>(false);
+
   const mergerdData = _react.default.useMemo(() => {
+    // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
+    // return filterDataByColumns3(addRowIdArray(dataSource), filterStates)
     return (0, _hooks.addRowIdArray)(dataSource);
+    // return dataSource
   }, [dataSource]);
   const [columns, setColumns] = _react.default.useState([]);
   const tableRef = _react.default.useRef(null);
@@ -130,9 +138,21 @@ const InternalTable = props => {
     const newColumns = (0, _hooks.updateArrayByKey)(columns, newColumn, 'field');
     setColumns(newColumns);
   };
+
+  // ============================ RowKey ============================
+  const getRowKey = _react.default.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
   const [transformSelectionColumns] = (0, _useColumns.default)({
     locale,
     t,
+    rowKey,
+    // dataSource: mergerdData,
+    dataSource,
     buddhistLocale,
     dataSourceFilter: propDataSourceFilter,
     format,
@@ -146,15 +166,6 @@ const InternalTable = props => {
     return transformSelectionColumns(columns);
   }, [columns, transformSelectionColumns]);
 
-  // ============================ RowKey ============================
-  const getRowKey = _react.default.useMemo(() => {
-    if (typeof rowKey === 'function') {
-      return rowKey;
-    }
-    // @ts-ignore
-    return record => record?.[rowKey];
-  }, [rowKey]);
-
   // const triggerChangeColumns = (newColumns: ColumnsTable<RecordType>) => {
   const triggerChangeColumns = (newColumns, type) => {
     setColumns(newColumns);
@@ -209,7 +220,22 @@ const InternalTable = props => {
     // setData(newData)
     // setMergedData(newData)
     onDataChange?.(newData);
+    // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
   };
+
+  // const triggerFilter = (queries: any) => {
+  //   console.log('queries', queries)
+  //   // console.log('data', dataSource)
+  //   setFilterState(queries)
+  //
+  //   if (queries && queries.length > 0) {
+  //     setIsFilter(true)
+  //   } else {
+  //     setIsFilter(false)
+  //   }
+  //
+  // }
+
   const triggerCommandClick = args => {
     const {
       id,
@@ -368,6 +394,7 @@ const InternalTable = props => {
     locale: locale,
     tableRef: tableRef,
     dataSource: mergerdData
+    // dataSource={dataSource}
     // components={components}
     ,
     components: {
@@ -393,6 +420,10 @@ const InternalTable = props => {
     groupAble: groupAble,
     groupColumns: groupColumns,
     commandClick: triggerCommandClick
+    // triggerFilter={triggerFilter}
+    // isFilter={isFilter}
+    // setIsFilter={setIsFilter}
+    // onScroll={onScroll}
   }));
 };
 var _default = exports.default = InternalTable;

package/lib/grid-component/TableGrid.d.ts

@@ -5,12 +5,15 @@ import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
+    triggerFilter?: (queries: any) => void;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     tableRef: any;
     bottomToolbar?: () => React.ReactElement;
     getRowKey: GetRowKey<T>;
     rowSelection?: any;
     groupToolbar?: () => React.ReactNode;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;