194 lines
8.4 KiB
JavaScript
194 lines
8.4 KiB
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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||
|
var _react = _interopRequireWildcard(require("react"));
|
||
|
var React = _react;
|
||
|
var _classnames = _interopRequireDefault(require("classnames"));
|
||
|
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
|
||
|
var _rcOverflow = _interopRequireDefault(require("rc-overflow"));
|
||
|
var _TransBtn = _interopRequireDefault(require("../TransBtn"));
|
||
|
var _Input = _interopRequireDefault(require("./Input"));
|
||
|
var _useLayoutEffect = _interopRequireDefault(require("../hooks/useLayoutEffect"));
|
||
|
var _commonUtil = require("../utils/commonUtil");
|
||
|
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 && 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; }
|
||
|
function itemKey(value) {
|
||
|
var _value$key;
|
||
|
return (_value$key = value.key) !== null && _value$key !== void 0 ? _value$key : value.value;
|
||
|
}
|
||
|
var onPreventMouseDown = function onPreventMouseDown(event) {
|
||
|
event.preventDefault();
|
||
|
event.stopPropagation();
|
||
|
};
|
||
|
var SelectSelector = function SelectSelector(props) {
|
||
|
var id = props.id,
|
||
|
prefixCls = props.prefixCls,
|
||
|
values = props.values,
|
||
|
open = props.open,
|
||
|
searchValue = props.searchValue,
|
||
|
autoClearSearchValue = props.autoClearSearchValue,
|
||
|
inputRef = props.inputRef,
|
||
|
placeholder = props.placeholder,
|
||
|
disabled = props.disabled,
|
||
|
mode = props.mode,
|
||
|
showSearch = props.showSearch,
|
||
|
autoFocus = props.autoFocus,
|
||
|
autoComplete = props.autoComplete,
|
||
|
activeDescendantId = props.activeDescendantId,
|
||
|
tabIndex = props.tabIndex,
|
||
|
removeIcon = props.removeIcon,
|
||
|
maxTagCount = props.maxTagCount,
|
||
|
maxTagTextLength = props.maxTagTextLength,
|
||
|
_props$maxTagPlacehol = props.maxTagPlaceholder,
|
||
|
maxTagPlaceholder = _props$maxTagPlacehol === void 0 ? function (omittedValues) {
|
||
|
return "+ ".concat(omittedValues.length, " ...");
|
||
|
} : _props$maxTagPlacehol,
|
||
|
tagRender = props.tagRender,
|
||
|
onToggleOpen = props.onToggleOpen,
|
||
|
onRemove = props.onRemove,
|
||
|
onInputChange = props.onInputChange,
|
||
|
onInputPaste = props.onInputPaste,
|
||
|
onInputKeyDown = props.onInputKeyDown,
|
||
|
onInputMouseDown = props.onInputMouseDown,
|
||
|
onInputCompositionStart = props.onInputCompositionStart,
|
||
|
onInputCompositionEnd = props.onInputCompositionEnd;
|
||
|
var measureRef = React.useRef(null);
|
||
|
var _useState = (0, _react.useState)(0),
|
||
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
||
|
inputWidth = _useState2[0],
|
||
|
setInputWidth = _useState2[1];
|
||
|
var _useState3 = (0, _react.useState)(false),
|
||
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
||
|
focused = _useState4[0],
|
||
|
setFocused = _useState4[1];
|
||
|
var selectionPrefixCls = "".concat(prefixCls, "-selection");
|
||
|
|
||
|
// ===================== Search ======================
|
||
|
var inputValue = open || mode === 'multiple' && autoClearSearchValue === false || mode === 'tags' ? searchValue : '';
|
||
|
var inputEditable = mode === 'tags' || mode === 'multiple' && autoClearSearchValue === false || showSearch && (open || focused);
|
||
|
|
||
|
// We measure width and set to the input immediately
|
||
|
(0, _useLayoutEffect.default)(function () {
|
||
|
setInputWidth(measureRef.current.scrollWidth);
|
||
|
}, [inputValue]);
|
||
|
|
||
|
// ===================== Render ======================
|
||
|
// >>> Render Selector Node. Includes Item & Rest
|
||
|
var defaultRenderSelector = function defaultRenderSelector(item, content, itemDisabled, closable, onClose) {
|
||
|
return /*#__PURE__*/React.createElement("span", {
|
||
|
title: (0, _commonUtil.getTitle)(item),
|
||
|
className: (0, _classnames.default)("".concat(selectionPrefixCls, "-item"), (0, _defineProperty2.default)({}, "".concat(selectionPrefixCls, "-item-disabled"), itemDisabled))
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
className: "".concat(selectionPrefixCls, "-item-content")
|
||
|
}, content), closable && /*#__PURE__*/React.createElement(_TransBtn.default, {
|
||
|
className: "".concat(selectionPrefixCls, "-item-remove"),
|
||
|
onMouseDown: onPreventMouseDown,
|
||
|
onClick: onClose,
|
||
|
customizeIcon: removeIcon
|
||
|
}, "\xD7"));
|
||
|
};
|
||
|
var customizeRenderSelector = function customizeRenderSelector(value, content, itemDisabled, closable, onClose, isMaxTag) {
|
||
|
var onMouseDown = function onMouseDown(e) {
|
||
|
onPreventMouseDown(e);
|
||
|
onToggleOpen(!open);
|
||
|
};
|
||
|
return /*#__PURE__*/React.createElement("span", {
|
||
|
onMouseDown: onMouseDown
|
||
|
}, tagRender({
|
||
|
label: content,
|
||
|
value: value,
|
||
|
disabled: itemDisabled,
|
||
|
closable: closable,
|
||
|
onClose: onClose,
|
||
|
isMaxTag: !!isMaxTag
|
||
|
}));
|
||
|
};
|
||
|
var renderItem = function renderItem(valueItem) {
|
||
|
var itemDisabled = valueItem.disabled,
|
||
|
label = valueItem.label,
|
||
|
value = valueItem.value;
|
||
|
var closable = !disabled && !itemDisabled;
|
||
|
var displayLabel = label;
|
||
|
if (typeof maxTagTextLength === 'number') {
|
||
|
if (typeof label === 'string' || typeof label === 'number') {
|
||
|
var strLabel = String(displayLabel);
|
||
|
if (strLabel.length > maxTagTextLength) {
|
||
|
displayLabel = "".concat(strLabel.slice(0, maxTagTextLength), "...");
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
var onClose = function onClose(event) {
|
||
|
if (event) {
|
||
|
event.stopPropagation();
|
||
|
}
|
||
|
onRemove(valueItem);
|
||
|
};
|
||
|
return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose) : defaultRenderSelector(valueItem, displayLabel, itemDisabled, closable, onClose);
|
||
|
};
|
||
|
var renderRest = function renderRest(omittedValues) {
|
||
|
var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
|
||
|
return typeof tagRender === 'function' ? customizeRenderSelector(undefined, content, false, false, undefined, true) : defaultRenderSelector({
|
||
|
title: content
|
||
|
}, content, false);
|
||
|
};
|
||
|
|
||
|
// >>> Input Node
|
||
|
var inputNode = /*#__PURE__*/React.createElement("div", {
|
||
|
className: "".concat(selectionPrefixCls, "-search"),
|
||
|
style: {
|
||
|
width: inputWidth
|
||
|
},
|
||
|
onFocus: function onFocus() {
|
||
|
setFocused(true);
|
||
|
},
|
||
|
onBlur: function onBlur() {
|
||
|
setFocused(false);
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement(_Input.default, {
|
||
|
ref: inputRef,
|
||
|
open: open,
|
||
|
prefixCls: prefixCls,
|
||
|
id: id,
|
||
|
inputElement: null,
|
||
|
disabled: disabled,
|
||
|
autoFocus: autoFocus,
|
||
|
autoComplete: autoComplete,
|
||
|
editable: inputEditable,
|
||
|
activeDescendantId: activeDescendantId,
|
||
|
value: inputValue,
|
||
|
onKeyDown: onInputKeyDown,
|
||
|
onMouseDown: onInputMouseDown,
|
||
|
onChange: onInputChange,
|
||
|
onPaste: onInputPaste,
|
||
|
onCompositionStart: onInputCompositionStart,
|
||
|
onCompositionEnd: onInputCompositionEnd,
|
||
|
tabIndex: tabIndex,
|
||
|
attrs: (0, _pickAttrs.default)(props, true)
|
||
|
}), /*#__PURE__*/React.createElement("span", {
|
||
|
ref: measureRef,
|
||
|
className: "".concat(selectionPrefixCls, "-search-mirror"),
|
||
|
"aria-hidden": true
|
||
|
}, inputValue, "\xA0"));
|
||
|
|
||
|
// >>> Selections
|
||
|
var selectionNode = /*#__PURE__*/React.createElement(_rcOverflow.default, {
|
||
|
prefixCls: "".concat(selectionPrefixCls, "-overflow"),
|
||
|
data: values,
|
||
|
renderItem: renderItem,
|
||
|
renderRest: renderRest,
|
||
|
suffix: inputNode,
|
||
|
itemKey: itemKey,
|
||
|
maxCount: maxTagCount
|
||
|
});
|
||
|
return /*#__PURE__*/React.createElement(React.Fragment, null, selectionNode, !values.length && !inputValue && /*#__PURE__*/React.createElement("span", {
|
||
|
className: "".concat(selectionPrefixCls, "-placeholder")
|
||
|
}, placeholder));
|
||
|
};
|
||
|
var _default = exports.default = SelectSelector;
|