@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
208 lines (207 loc) • 8.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ColumnFilter;
var _pick2 = _interopRequireDefault(require("lodash/pick"));
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _semiIcons = require("@douyinfe/semi-icons");
var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _radio = require("../radio");
var _checkbox = require("../checkbox");
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 && {}.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; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function renderDropdown(props) {
let nestedElem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
const {
filterMultiple = true,
filters = [],
filteredValue = [],
filterDropdownVisible,
onSelect = _noop2.default,
onFilterDropdownVisibleChange = _noop2.default,
trigger = 'click',
position = 'bottom',
renderFilterDropdown,
renderFilterDropdownItem
} = props !== null && props !== void 0 ? props : {};
const renderFilterDropdownProps = (0, _pick2.default)(props, ['tempFilteredValue', 'setTempFilteredValue', 'confirm', 'clear', 'close', 'filters']);
const render = typeof renderFilterDropdown === 'function' ? renderFilterDropdown(renderFilterDropdownProps) : (/*#__PURE__*/_react.default.createElement(_dropdown.default.Menu, null, Array.isArray(filters) && filters.map((filter, index) => {
const changeFn = e => {
const domEvent = e && e.nativeEvent;
if (domEvent) {
// Block this event to prevent the pop-up layer from closing
domEvent.stopImmediatePropagation();
// Prevent bubbling and default events to prevent label click events from triggering twice
domEvent.stopPropagation();
domEvent.preventDefault();
}
let values = [...filteredValue];
const included = values.includes(filter.value);
const idx = values.indexOf(filter.value);
if (idx > -1) {
values.splice(idx, 1);
} else if (filterMultiple) {
values.push(filter.value);
} else {
values = [filter.value];
}
return onSelect({
value: filter.value,
filteredValue: values,
included: !included,
domEvent
});
};
const checked = filteredValue.includes(filter.value);
const {
text
} = filter;
const {
value
} = filter;
const key = `${level}_${index}`;
const dropdownItem = typeof renderFilterDropdownItem === 'function' ? renderFilterDropdownItem({
onChange: changeFn,
filterMultiple,
value,
text,
checked,
filteredValue,
level
}) : null;
let item = dropdownItem && /*#__PURE__*/_react.default.isValidElement(dropdownItem) ? (/*#__PURE__*/_react.default.cloneElement(dropdownItem, {
key
})) : (/*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
key: key,
onClick: changeFn
}, filterMultiple ? (/*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
checked: checked
}, text)) : (/*#__PURE__*/_react.default.createElement(_radio.Radio, {
checked: checked
}, text))));
if (Array.isArray(filter.children) && filter.children.length) {
const childrenDropdownProps = Object.assign(Object.assign({}, props), {
filters: filter.children,
trigger: 'hover',
position: 'right'
});
delete childrenDropdownProps.filterDropdownVisible;
item = renderDropdown(childrenDropdownProps, item, level + 1);
}
return item;
})));
const dropdownProps = Object.assign(Object.assign({}, props), {
onVisibleChange: visible => onFilterDropdownVisibleChange(visible),
trigger,
position,
render
});
if (filterDropdownVisible != null) {
dropdownProps.visible = filterDropdownVisible;
}
return /*#__PURE__*/_react.default.createElement(_dropdown.default, Object.assign({}, dropdownProps, {
key: `Dropdown_level_${level}`,
className: `${_constants.cssClasses.PREFIX}-column-filter-dropdown`
}), nestedElem);
}
function ColumnFilter() {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const {
prefixCls = _constants.cssClasses.PREFIX,
filteredValue,
filterIcon = 'filter',
filterDropdownProps,
onSelect,
filterDropdownVisible,
renderFilterDropdown,
onFilterDropdownVisibleChange
} = props;
let {
filterDropdown = null
} = props;
// custom filter related status
const isFilterDropdownVisibleControlled = typeof filterDropdownVisible !== 'undefined';
const isCustomFilterDropdown = typeof renderFilterDropdown === 'function';
const isCustomDropdownVisible = !isFilterDropdownVisibleControlled && isCustomFilterDropdown;
const [tempFilteredValue, setTempFilteredValue] = (0, _react.useState)(filteredValue);
const dropdownVisibleInitValue = isCustomDropdownVisible ? false : filterDropdownVisible;
const [dropdownVisible, setDropdownVisible] = (0, _react.useState)(dropdownVisibleInitValue);
(0, _react.useEffect)(() => {
if (typeof filterDropdownVisible !== 'undefined') {
setDropdownVisible(filterDropdownVisible);
}
}, [filterDropdownVisible]);
(0, _react.useEffect)(() => {
setTempFilteredValue(filteredValue);
}, [filteredValue]);
const confirm = function () {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
const newFilteredValue = (props === null || props === void 0 ? void 0 : props.filteredValue) || tempFilteredValue;
if (!(0, _isEqual2.default)(newFilteredValue, filteredValue)) {
onSelect({
filteredValue: newFilteredValue
});
}
if (props.closeDropdown) {
setDropdownVisible(false);
}
};
const clear = function () {
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
setTempFilteredValue([]);
onSelect({
filteredValue: []
});
if (props.closeDropdown) {
setDropdownVisible(false);
}
};
const close = () => {
setDropdownVisible(false);
};
const handleFilterDropdownVisibleChange = visible => {
if (isCustomDropdownVisible) {
setDropdownVisible(visible);
}
onFilterDropdownVisibleChange(visible);
};
const renderFilterDropdownProps = {
tempFilteredValue,
setTempFilteredValue,
confirm,
clear,
close
};
const finalCls = (0, _classnames.default)(`${prefixCls}-column-filter`, {
on: Array.isArray(filteredValue) && filteredValue.length
});
let iconElem;
if (typeof filterIcon === 'function') {
iconElem = filterIcon(Array.isArray(filteredValue) && filteredValue.length > 0);
} else if (/*#__PURE__*/(0, _react.isValidElement)(filterIcon)) {
iconElem = filterIcon;
} else {
iconElem = /*#__PURE__*/_react.default.createElement("div", {
className: finalCls
}, '\u200b' /* ZWSP(zero-width space) */, /*#__PURE__*/_react.default.createElement(_semiIcons.IconFilter, {
role: "button",
"aria-label": "Filter data with this column",
"aria-haspopup": "listbox",
tabIndex: -1,
size: "default"
}));
}
const renderProps = Object.assign(Object.assign(Object.assign(Object.assign({}, props), filterDropdownProps), renderFilterDropdownProps), {
filterDropdownVisible: isFilterDropdownVisibleControlled ? filterDropdownVisible : dropdownVisible,
onFilterDropdownVisibleChange: handleFilterDropdownVisibleChange
});
filterDropdown = /*#__PURE__*/_react.default.isValidElement(filterDropdown) ? filterDropdown : renderDropdown(renderProps, iconElem);
return filterDropdown;
}