qt-public-ui
Version:
新设计规范下业务组件库
375 lines (373 loc) • 18.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _qtPublicHooks = require("qt-public-hooks");
var _antd = require("antd");
var _lodash = require("lodash");
var _ = require("..");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // import { ConfigConsumer } from 'antd/lib/config-provider';
var _default = exports["default"] = function _default(props) {
var children = props.children,
_props$defaultValue = props.defaultValue,
defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
_props$value = props.value,
value = _props$value === void 0 ? [] : _props$value,
onChange = props.onChange,
_props$seperator = props.seperator,
seperator = _props$seperator === void 0 ? false : _props$seperator,
suffixIcon = props.suffixIcon,
renderSelectedContent = props.renderSelectedContent,
_props$useAllSelectio = props.useAllSelection,
useAllSelection = _props$useAllSelectio === void 0 ? false : _props$useAllSelectio,
_props$optionFilterPr = props.optionFilterProp,
optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$vHeight = props.vHeight,
vHeight = _props$vHeight === void 0 ? _react.Children.count(children) < 7 ? _react.Children.count(children) * 36 : 250 : _props$vHeight,
_props$styleType = props.styleType,
styleType = _props$styleType === void 0 ? '' : _props$styleType,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? '请选择...' : _props$placeholder,
notFoundContent = props.notFoundContent,
getPopupContainer = props.getPopupContainer,
_props$overlayClassNa = props.overlayClassName,
overlayClassName = _props$overlayClassNa === void 0 ? '' : _props$overlayClassNa,
_props$extendDropdown = props.extendDropdownRender,
extendDropdownRender = _props$extendDropdown === void 0 ? null : _props$extendDropdown,
_props$addOkBtn = props.addOkBtn,
addOkBtn = _props$addOkBtn === void 0 ? false : _props$addOkBtn,
onOkChange = props.onOkChange;
var isControlled = ('value' in props);
var isOpenControlled = ('visible' in props);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
open = _useState2[0],
setOpen = _useState2[1];
var _useState3 = (0, _react.useState)('全部'),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
allSelection = _useState4[0],
setAllSelection = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
filterChildren = _useState6[0],
setFilterChildren = _useState6[1];
var _useState7 = (0, _react.useState)(isControlled ? value : defaultValue),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
multiSelectValue = _useState8[0],
setMultiSelectValue = _useState8[1];
var _useState9 = (0, _react.useState)(false),
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
showPopover = _useState10[0],
setShowPopover = _useState10[1];
var childrenCount = _react.Children.count(children);
var selectedContainerRef = (0, _react.useRef)(null);
var dropDownCls = (0, _qtPublicHooks.useDropdownClickAway)(function () {
if (isOpenControlled) {
props.onVisibleChange && props.onVisibleChange(false);
} else {
setOpen(false);
}
}, []);
var _useState11 = (0, _react.useState)(),
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
search = _useState12[0],
setSearch = _useState12[1];
var getSearchValue = function getSearchValue(child) {
if (typeof child.props[optionFilterProp] === 'string') {
return child.props[optionFilterProp];
} else {
return getSearchValue(child.props[optionFilterProp]);
}
};
var traverseChildren = function traverseChildren(_value) {
if (!_value) return;
if (typeof _value === 'string') {
return _value;
} else {
return traverseChildren(_value.props.children || _value.props.tooltipProps.title);
}
};
var getMultipSelectedOptions = (0, _react.useCallback)(function (values) {
var childrenArray = _react.Children.toArray(children);
if (values.length === 0) {
return [];
} else {
var _values = [];
childrenArray.forEach(function (item) {
var _props = item.props;
if (values.includes(_props.value)) {
var newValue = traverseChildren(_props.children);
_values.push(newValue);
}
});
return _values;
}
}, [children, traverseChildren]);
(0, _react.useEffect)(function () {
if (!search) {
setFilterChildren(children);
return;
}
var filtered = [];
_react["default"].Children.map(children, function (child) {
var searchValue = getSearchValue(child);
if (String(searchValue).toLowerCase().includes(search.toLowerCase())) {
filtered.push(child);
}
});
setFilterChildren(filtered);
}, [search, children]);
(0, _react.useEffect)(function () {
if (typeof useAllSelection === 'string') {
setAllSelection(useAllSelection);
}
}, [useAllSelection]);
(0, _react.useEffect)(function () {
if (seperator) {
var _selectedContainerRef;
var selectedWrapperWidth = selectedContainerRef === null || selectedContainerRef === void 0 ? void 0 : (_selectedContainerRef = selectedContainerRef.current) === null || _selectedContainerRef === void 0 ? void 0 : _selectedContainerRef.clientWidth;
var selectedList = getMultipSelectedOptions(multiSelectValue) || [];
var _getTextWidthAndHeigh = getTextWidthAndHeight(selectedList === null || selectedList === void 0 ? void 0 : selectedList.join('、')),
selectedListWidth = _getTextWidthAndHeigh.width;
selectedListWidth + 2 >= selectedWrapperWidth ? setShowPopover(true) : setShowPopover(false);
}
}, [seperator, multiSelectValue.length, getMultipSelectedOptions, multiSelectValue]);
// 计算字符串宽度和高度
var getTextWidthAndHeight = function getTextWidthAndHeight(text, fontSize, fontFamily) {
var text_span = document.createElement('span');
var result = {
width: 0,
height: 0
};
result.width = text_span.offsetWidth;
result.height = text_span.offsetHeight;
text_span.style.visibility = 'hidden';
text_span.style.fontSize = fontSize || '12px';
text_span.style.fontFamily = fontFamily || 'Alibaba-PuHuiTi-Regular';
text_span.style.display = 'inline-block';
document.body.appendChild(text_span);
if (typeof text_span.textContent !== 'undefined') {
text_span.textContent = text;
} else {
text_span.innerText = text;
}
result.width = parseFloat(window.getComputedStyle(text_span).width) - result.width;
result.height = parseFloat(window.getComputedStyle(text_span).height) - result.height;
document.body.removeChild(text_span);
return result;
};
(0, _qtPublicHooks.useUpdateEffect)(function () {
isControlled && setMultiSelectValue(props.value);
}, [props.value]);
var renderOptions = function renderOptions(opt) {
var _ref = opt || {},
_value = _ref.value,
index = _ref.index;
var _filterChildren = _react.Children.toArray(filterChildren);
var child = _filterChildren[index];
return child && /*#__PURE__*/_react["default"].createElement("li", {
key: _value
}, _react["default"].cloneElement(child, {
selectValue: multiSelectValue,
optionChange: function optionChange(selectedValue) {
!isControlled && setMultiSelectValue(selectedValue);
onChange && onChange(selectedValue);
}
}));
};
var footerOkClick = function footerOkClick(e) {
if (e) {
e.stopPropagation();
}
if (isOpenControlled) {
props.onVisibleChange && props.onVisibleChange(false);
} else {
setOpen(false);
}
onOkChange && onOkChange(multiSelectValue);
};
var dropdownRender = function dropdownRender() {
var showSearch = props.showSearch,
_props$searchPlacehol = props.searchPlaceholder,
searchPlaceholder = _props$searchPlacehol === void 0 ? '搜索...' : _props$searchPlacehol;
var _filterChildren = _react.Children.toArray(filterChildren);
var _filterChildrenMap = (Array.isArray(_filterChildren) ? _filterChildren : []).map(function (item, index) {
var _item$props;
return {
value: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.value,
index: index
};
});
var renderDom = /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-multi-select-dropdown"
}, showSearch && /*#__PURE__*/_react["default"].createElement("div", {
className: "search-box"
}, /*#__PURE__*/_react["default"].createElement(_.Input.Search, {
value: search,
placeholder: searchPlaceholder,
styleType: "underline",
onChange: function onChange(_ref2) {
var target = _ref2.target;
setSearch(target.value);
}
})), useAllSelection && /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('use-all-selection', {
'use-all-selection-checked': !!multiSelectValue.length && multiSelectValue.length < childrenCount || childrenCount === multiSelectValue.length
}),
onClick: function onClick() {
handleCheckAll();
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
indeterminate: !!multiSelectValue.length && multiSelectValue.length < childrenCount,
checked: childrenCount === multiSelectValue.length
}), /*#__PURE__*/_react["default"].createElement("span", null, allSelection)), /*#__PURE__*/_react["default"].createElement("ul", {
className: "umui-multi-options-wrapper"
}, (_filterChildren === null || _filterChildren === void 0 ? void 0 : _filterChildren.length) > 0 ? /*#__PURE__*/_react["default"].createElement(_.VirtualList, {
data: _filterChildrenMap,
height: vHeight,
itemHeight: 28,
itemKey: "value"
}, renderOptions) : notFoundContent || /*#__PURE__*/_react["default"].createElement(_.Default, {
type: "nothing"
})), !!addOkBtn && /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-multi-footer"
}, /*#__PURE__*/_react["default"].createElement("p", null, "\u5DF2\u9009\u4E2D", (multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.length) || 0, "\u4E2A"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
onClick: footerOkClick
}, "\u786E\u5B9A")));
return extendDropdownRender ? extendDropdownRender(renderDom) : renderDom;
};
var handleCheckAll = function handleCheckAll() {
var childrenArray = _react.Children.toArray(children);
if (childrenArray.length !== multiSelectValue.length) {
var allValues = childrenArray.map(function (_ref3) {
var _props = _ref3.props;
return _props.value;
});
!isControlled && setMultiSelectValue(allValues);
onChange && onChange(allValues, true);
} else {
!isControlled && setMultiSelectValue([]);
onChange && onChange([], false);
}
};
var onDeselect = function onDeselect(option) {
var childrenArray = _react.Children.toArray(children);
var _multiSelectValue = (0, _toConsumableArray2["default"])(multiSelectValue);
childrenArray.forEach(function (item) {
var _props = item.props;
if (option === _props.children) {
var _index = _multiSelectValue.findIndex(function (v) {
return v === _props.value;
});
_multiSelectValue.splice(_index, 1);
}
});
!isControlled && setMultiSelectValue(_multiSelectValue);
onChange && onChange(_multiSelectValue);
};
var isShowClosable = function isShowClosable(option) {
var childrenArray = _react.Children.toArray(children);
return !childrenArray.some(function (_ref4) {
var _props = _ref4.props;
return _props.children === option && _props.disabled === true;
});
};
var _suffixIcon = suffixIcon ? _react["default"].cloneElement(suffixIcon, {
className: (0, _classnames["default"])('um-icon-filter', {
'umui-multi-select-active-color': open,
'umui-multi-select-active-transform': open
})
}) : /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
type: "umicon-filter",
className: (0, _classnames["default"])('um-icon-filter', {
'umui-multi-select-active-color': open,
'umui-multi-select-active-transform': open
})
});
var renderSelected = (0, _react.useCallback)(function () {
var selectedList = getMultipSelectedOptions(multiSelectValue) || [];
if (renderSelectedContent && (0, _lodash.isFunction)(renderSelectedContent)) {
return renderSelectedContent(selectedList);
} else {
return seperator ? showPopover ? /*#__PURE__*/_react["default"].createElement(_antd.Popover, {
content: selectedList.join('、')
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "options-seperator"
}, selectedList.join('、'))) : /*#__PURE__*/_react["default"].createElement("div", {
className: "options-seperator"
}, selectedList.join('、')) : selectedList.map(function (option) {
return /*#__PURE__*/_react["default"].createElement(_antd.Tag, {
closable: isShowClosable(option),
key: option,
onClose: function onClose() {
return onDeselect(option);
},
visible: true
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "multi-select-option-text"
}, option));
});
}
}, [getMultipSelectedOptions, multiSelectValue, renderSelectedContent, seperator, showPopover, isShowClosable, onDeselect]);
var onVisibleChange = function onVisibleChange(isOpen) {
if (isOpenControlled) {
props.onVisibleChange && props.onVisibleChange(isOpen);
} else if (addOkBtn && !isOpen) {
footerOkClick();
}
};
(0, _react.useEffect)(function () {
if (isOpenControlled) {
setOpen(props.visible);
}
}, [props.visible, isOpenControlled]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('umui-multi-select', {
'umui-multi-select-disabled': disabled
}, {
'umui-multi-select-underline': styleType === 'underline'
}),
style: _objectSpread({
minWidth: style.width || style.minWidth,
width: 'unset'
}, style),
onClick: function onClick(e) {
e.stopPropagation();
!props.disabled && (isOpenControlled ? props.onVisibleChange && props.onVisibleChange(true) : setOpen(true));
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
trigger: ['click'],
overlay: dropdownRender,
visible: open,
onVisibleChange: onVisibleChange,
overlayStyle: style,
overlayClassName: (0, _classnames["default"])("umui-category-popup ".concat(overlayClassName), dropDownCls),
getPopupContainer: getPopupContainer
}, /*#__PURE__*/_react["default"].createElement("div", {
className: (0, _classnames["default"])('umui-multi-selected-options', {
'umui-multi-select-active': open,
'umui-multi-selected-options-seperator': seperator
})
}, (multiSelectValue === null || multiSelectValue === void 0 ? void 0 : multiSelectValue.length) > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-multi-selected-options-wrapper",
ref: selectedContainerRef
}, renderSelected()) : /*#__PURE__*/_react["default"].createElement("div", {
className: "umui-multi-select-placeholder"
}, placeholder), _suffixIcon)));
};