es-grid-template
Version:
es-grid-template
257 lines (247 loc) • 8.55 kB
JavaScript
;
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;