choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,591 lines (1,288 loc) • 57.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* eslint func-names: 1 */
import React, { Children, cloneElement, Component } from 'react';
import { unmountComponentAtNode } from 'react-dom';
import classnames from 'classnames';
import classes from 'component-classes';
import warning from '../../_util/warning';
import noop from 'lodash/noop';
import KeyCode from '../../_util/KeyCode';
import childrenToArray from '../util/Children/toArray';
import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../menu';
import Option from './Option';
import Animate from '../../animate';
import Button from '../../button';
import Ripple from '../../ripple';
import { defaultFilterFn, findFirstMenuItem, findIndexInValueBySingleValue, getLabelFromPropsValue, getMapKey, getPropValue, getValuePropValue, includesSeparators, isCombobox, isMultiple, isMultipleOrTags, isMultipleOrTagsOrCombobox, isSingleMode, isTags, preventDefaultEvent, saveRef, splitBySeparators, toArray, toTitle, UNSELECTABLE_ATTRIBUTE, UNSELECTABLE_STYLE, validateOptionValue } from './util';
import SelectTrigger from './SelectTrigger';
function chaining() {
for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
// eslint-disable-line
// eslint-disable-line
for (var i = 0; i < fns.length; i++) {
if (fns[i] && typeof fns[i] === 'function') {
fns[i].apply(this, args);
}
}
};
}
var BUILT_IN_PLACEMENTS = {
bottomLeft: {
points: ['tl', 'tl'],
offset: [0, 4],
overflow: {
adjustX: 0,
adjustY: 1
}
},
topLeft: {
points: ['bl', 'bl'],
offset: [0, -4],
overflow: {
adjustX: 0,
adjustY: 1
}
},
bottomRight: {
points: ['tr', 'tr'],
offset: [0, 4],
overflow: {
adjustX: 0,
adjustY: 1
}
}
};
var BUILT_IN_PLACEMENTS_LABEL = {
bottomLeft: {
points: ['tl', 'tl'],
offset: [0, 19],
overflow: {
adjustX: 0,
adjustY: 1
}
},
topLeft: {
points: ['bl', 'bl'],
offset: [0, -4],
overflow: {
adjustX: 0,
adjustY: 1
}
},
bottomRight: {
points: ['tr', 'tr'],
offset: [0, 19],
overflow: {
adjustX: 0,
adjustY: 1
}
}
};
var Select = /*#__PURE__*/function (_Component) {
_inherits(Select, _Component);
var _super = _createSuper(Select);
function Select(_props) {
var _this;
_classCallCheck(this, Select);
_this = _super.call(this, _props);
_defineProperty(_assertThisInitialized(_this), "needExpand", true);
_defineProperty(_assertThisInitialized(_this), "onFilterChange", function () {
var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var onFilterChange = _this.props.onFilterChange;
_this.onInputValueChange(val);
_this.setState({
filterValue: val
});
if (onFilterChange) {
onFilterChange(val);
}
});
_defineProperty(_assertThisInitialized(_this), "onInputChange", function (event) {
var val = event.target.value;
_this.onInputValueChange(val);
});
_defineProperty(_assertThisInitialized(_this), "onInputValueChange", function (val) {
var _this$props = _this.props,
tokenSeparators = _this$props.tokenSeparators,
onInput = _this$props.onInput;
onInput(val);
if (isMultipleOrTags(_this.props) && tokenSeparators.length && includesSeparators(val, tokenSeparators)) {
var nextValue = _this.getValueByInput(val);
if (nextValue !== undefined) {
_this.fireChange(nextValue);
}
_this.setOpenState(false, true);
_this.setInputValue('', false);
return;
}
_this.setInputValue(val);
_this.setState({
open: true
});
if (isCombobox(_this.props)) {
_this.fireChange([val]);
}
});
_defineProperty(_assertThisInitialized(_this), "onDropdownVisibleChange", function (open) {
if (_this.needExpand) {
if (open && !_this._focused) {
_this.clearBlurTime();
_this.timeoutFocus();
_this._focused = true;
_this.updateFocusClassName();
}
var filter = _this.props.filter;
if (filter) {
_this.onFilterChange('');
if (open) {
setTimeout(function () {
var filterInput = _this.selectTriggerRef.getFilterInput();
filterInput && filterInput.focus();
}, 20);
}
}
_this.setOpenState(open);
}
});
_defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
var props = _this.props;
if (props.disabled) {
return;
}
var keyCode = event.keyCode;
if (_this.state.open && !_this.getInputDOMNode()) {
_this.onInputKeyDown(event);
} else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
_this.setOpenState(true);
event.preventDefault();
}
});
_defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (event) {
var props = _this.props;
if (props.disabled) {
return;
}
var state = _this.state;
var keyCode = event.keyCode;
if (isMultipleOrTags(props) && !event.target.value && keyCode === KeyCode.BACKSPACE) {
event.preventDefault();
var value = state.value;
if (value.length) {
_this.removeSelected(value[value.length - 1], value.length - 1);
}
return;
}
if (keyCode === KeyCode.DOWN) {
if (!state.open) {
_this.openIfHasChildren();
event.preventDefault();
event.stopPropagation();
return;
}
} else if (keyCode === KeyCode.ENTER && state.open) {
// Aviod trigger form submit when select item
// https://github.com/ant-design/ant-design/issues/10861
event.preventDefault();
} else if (keyCode === KeyCode.ESC) {
if (state.open) {
_this.setOpenState(false);
event.preventDefault();
event.stopPropagation();
}
return;
}
if (state.open) {
var menu = _this.selectTriggerRef.getInnerMenu();
if (menu && menu.onKeyDown(event, _this.handleBackfill)) {
event.preventDefault();
event.stopPropagation();
}
}
});
_defineProperty(_assertThisInitialized(_this), "onMenuSelect", function (_ref) {
var item = _ref.item;
if (!item) {
return;
}
var value = _this.state.value;
var props = _this.props;
var selectedValue = getValuePropValue(item);
var lastValue = value[value.length - 1];
if (_this.fireSelect(selectedValue) === false) {
return;
}
if (isMultipleOrTags(props)) {
if (findIndexInValueBySingleValue(value, selectedValue) !== -1) {
return;
}
value = value.concat([selectedValue]);
} else {
if (isCombobox(props)) {
_this.skipAdjustOpen = true;
_this.clearAdjustTimer();
_this.skipAdjustOpenTimer = setTimeout(function () {
_this.skipAdjustOpen = false;
}, 0);
}
if (lastValue && lastValue === selectedValue && selectedValue !== _this.state.backfillValue) {
_this.setOpenState(false, true);
return;
}
value = [selectedValue];
_this.setOpenState(false, true);
}
_this.fireChange(value);
var inputValue;
if (isCombobox(props)) {
inputValue = getPropValue(item, props.optionLabelProp);
} else {
inputValue = '';
}
if (props.autoClearSearchValue || !props.filter) {
_this.setInputValue(inputValue, !props.filter);
}
});
_defineProperty(_assertThisInitialized(_this), "onMenuDeselect", function (_ref2) {
var item = _ref2.item,
domEvent = _ref2.domEvent;
if (domEvent.type === 'keydown' && domEvent.keyCode === KeyCode.ENTER) {
_this.removeSelected(getValuePropValue(item), null);
return;
}
if (domEvent.type === 'click') {
_this.removeSelected(getValuePropValue(item), null);
}
var _assertThisInitialize = _assertThisInitialized(_this),
props = _assertThisInitialize.props;
if (props.autoClearSearchValue) {
_this.setInputValue('', false);
}
});
_defineProperty(_assertThisInitialized(_this), "onArrowClick", function (e) {
e.stopPropagation();
e.preventDefault();
if (!_this.props.disabled) {
_this.onDropdownVisibleChange(!_this.state.open);
}
});
_defineProperty(_assertThisInitialized(_this), "onPlaceholderClick", function () {
if (_this.getInputDOMNode()) {
_this.getInputDOMNode().focus();
}
});
_defineProperty(_assertThisInitialized(_this), "onOuterFocus", function (e) {
if (_this.props.disabled) {
e.preventDefault();
return;
}
_this.clearBlurTime();
if (!isMultipleOrTagsOrCombobox(_this.props) && e.target === _this.getInputDOMNode()) {
return;
}
if (_this._focused) {
return;
}
_this._focused = true;
_this.updateFocusClassName(); // only effect multiple or tag mode
if (!isMultipleOrTags(_this.props) || !_this._mouseDown) {
_this.timeoutFocus();
}
});
_defineProperty(_assertThisInitialized(_this), "onPopupFocus", function () {
// fix ie scrollbar, focus element again
_this.maybeFocus(true, true);
});
_defineProperty(_assertThisInitialized(_this), "onOuterBlur", function (e) {
if (_this.props.disabled) {
e.preventDefault();
return;
}
_this.blurTimer = setTimeout(function () {
_this._focused = false;
_this.updateFocusClassName();
var props = _this.props;
var value = _this.state.value;
var inputValue = _this.state.inputValue;
if (isSingleMode(props) && props.showSearch && inputValue && props.defaultActiveFirstOption) {
var options = _this._options || [];
if (options.length) {
var firstOption = findFirstMenuItem(options);
if (firstOption) {
value = [getValuePropValue(firstOption)];
_this.fireChange(value);
}
}
} else if (isMultipleOrTags(props) && inputValue) {
if (props.blurChange) {
// why not use setState?
_this.state.inputValue = _this.getInputDOMNode().value = '';
}
value = _this.getValueByInput(inputValue);
if (value !== undefined && props.blurChange) {
_this.fireChange(value);
}
}
props.onBlur(_this.getVLForOnChange(value));
if (!props.footer && !props.filter && !(isMultipleOrTags(props) && props.showCheckAll)) {
_this.setOpenState(false);
}
}, 10);
});
_defineProperty(_assertThisInitialized(_this), "onClearSelection", function (event) {
var props = _this.props;
var state = _this.state;
if (props.disabled) {
return;
}
var inputValue = state.inputValue,
value = state.value;
event.stopPropagation();
if (inputValue || value.length) {
props.onClear();
if (value.length) {
_this.fireChange([]);
}
_this.setOpenState(false, true);
if (inputValue) {
_this.setInputValue('');
}
}
});
_defineProperty(_assertThisInitialized(_this), "onChoiceAnimationLeave", function () {
_this.forcePopupAlign();
});
_defineProperty(_assertThisInitialized(_this), "getOptionInfoBySingleValue", function (value, optionsInfo) {
var info;
optionsInfo = optionsInfo || _this.state.optionsInfo;
if (optionsInfo[getMapKey(value)]) {
info = optionsInfo[getMapKey(value)];
}
if (info) {
return info;
}
var defaultLabel = value;
if (_this.props.labelInValue) {
var label = getLabelFromPropsValue(_this.props.value, value);
if (label !== undefined) {
defaultLabel = label;
}
}
var defaultInfo = {
option: /*#__PURE__*/React.createElement(Option, {
value: value,
key: value
}, value),
value: value,
label: defaultLabel
};
return defaultInfo;
});
_defineProperty(_assertThisInitialized(_this), "getOptionBySingleValue", function (value) {
var _this$getOptionInfoBy = _this.getOptionInfoBySingleValue(value),
option = _this$getOptionInfoBy.option;
return option;
});
_defineProperty(_assertThisInitialized(_this), "getOptionsBySingleValue", function (values) {
return values.map(function (value) {
return _this.getOptionBySingleValue(value);
});
});
_defineProperty(_assertThisInitialized(_this), "getValueByLabel", function (label) {
if (label === undefined) {
return null;
}
var value = null;
Object.keys(_this.state.optionsInfo).forEach(function (key) {
var info = _this.state.optionsInfo[key];
if (toArray(info.label).join('') === label) {
value = info.value;
}
});
return value;
});
_defineProperty(_assertThisInitialized(_this), "getVLBySingleValue", function (value) {
if (_this.props.labelInValue) {
return {
key: value,
label: _this.getLabelBySingleValue(value)
};
}
return value;
});
_defineProperty(_assertThisInitialized(_this), "getVLForOnChange", function (vls_) {
var vls = vls_;
if (vls !== undefined) {
if (!_this.props.labelInValue) {
vls = vls.map(function (v) {
return v;
});
} else {
vls = vls.map(function (vl) {
return {
key: vl,
label: _this.getLabelBySingleValue(vl)
};
});
}
return isMultipleOrTags(_this.props) ? vls : vls[0];
}
return vls;
});
_defineProperty(_assertThisInitialized(_this), "getLabelBySingleValue", function (value, optionsInfo) {
var _this$getOptionInfoBy2 = _this.getOptionInfoBySingleValue(value, optionsInfo),
label = _this$getOptionInfoBy2.label;
return label;
});
_defineProperty(_assertThisInitialized(_this), "getDropdownContainer", function () {
if (!_this.dropdownContainer) {
_this.dropdownContainer = document.createElement('div');
document.body.appendChild(_this.dropdownContainer);
}
return _this.dropdownContainer;
});
_defineProperty(_assertThisInitialized(_this), "getPlaceholderElement", function () {
var _assertThisInitialize2 = _assertThisInitialized(_this),
props = _assertThisInitialize2.props,
state = _assertThisInitialize2.state;
var hidden = false;
if (state.inputValue) {
hidden = true;
}
if (state.value.length) {
hidden = true;
}
if (isCombobox(props) && state.value.length === 1 && !state.value[0]) {
hidden = false;
}
var _this$props2 = _this.props,
placeholder = _this$props2.placeholder,
prefixCls = _this$props2.prefixCls,
border = _this$props2.border;
if (!border && placeholder) {
return /*#__PURE__*/React.createElement("div", _extends({
onMouseDown: preventDefaultEvent,
style: _objectSpread({
display: hidden ? 'none' : 'block'
}, UNSELECTABLE_STYLE)
}, UNSELECTABLE_ATTRIBUTE, {
onClick: _this.onPlaceholderClick,
className: "".concat(prefixCls, "-selection__placeholder")
}), placeholder);
}
return null;
});
_defineProperty(_assertThisInitialized(_this), "getInputElement", function () {
var props = _this.props;
var inputElement = props.getInputElement ? props.getInputElement() : /*#__PURE__*/React.createElement("input", {
id: props.id,
autoComplete: "off"
});
var inputCls = classnames(inputElement.props.className, _defineProperty({}, "".concat(props.prefixCls, "-search__field"), true)); // Add space to the end of the inputValue as the width measurement tolerance
return /*#__PURE__*/React.createElement("div", {
className: "".concat(props.prefixCls, "-search__field__wrap")
}, /*#__PURE__*/cloneElement(inputElement, {
ref: _this.saveInputRef,
onChange: _this.onInputChange,
onKeyDown: chaining(_this.onInputKeyDown, inputElement.props.onKeyDown, _this.props.onInputKeyDown),
value: _this.state.inputValue,
disabled: props.disabled,
className: inputCls
}), /*#__PURE__*/React.createElement("span", {
ref: _this.saveInputMirrorRef,
className: "".concat(props.prefixCls, "-search__field__mirror")
}, _this.state.inputValue, "\xA0"));
});
_defineProperty(_assertThisInitialized(_this), "getInputDOMNode", function () {
return _this.topCtrlRef ? _this.topCtrlRef.querySelector('input,textarea,div[contentEditable]') : _this.inputRef;
});
_defineProperty(_assertThisInitialized(_this), "getInputMirrorDOMNode", function () {
return _this.inputMirrorRef;
});
_defineProperty(_assertThisInitialized(_this), "getPopupDOMNode", function () {
return _this.selectTriggerRef.getPopupDOMNode();
});
_defineProperty(_assertThisInitialized(_this), "getPopupMenuComponent", function () {
return _this.selectTriggerRef.getInnerMenu();
});
_defineProperty(_assertThisInitialized(_this), "setOpenState", function (open, needFocus) {
var _assertThisInitialize3 = _assertThisInitialized(_this),
props = _assertThisInitialize3.props,
state = _assertThisInitialize3.state;
if (state.open === open) {
_this.maybeFocus(open, needFocus);
return;
}
var nextState = {
open: open,
backfillValue: undefined
}; // clear search input value when open is false in singleMode.
if (!open && isSingleMode(props) && props.showSearch) {
_this.setInputValue('', false);
}
if (!open) {
_this.maybeFocus(open, needFocus);
}
_this.setState(nextState, function () {
if (open) {
_this.maybeFocus(open, needFocus);
}
});
});
_defineProperty(_assertThisInitialized(_this), "setInputValue", function (inputValue) {
var fireSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (inputValue !== _this.state.inputValue) {
_this.setState({
inputValue: inputValue
}, _this.forcePopupAlign);
if (fireSearch) {
_this.props.onSearch(inputValue);
}
}
});
_defineProperty(_assertThisInitialized(_this), "getValueByInput", function (string) {
var _this$props3 = _this.props,
multiple = _this$props3.multiple,
tokenSeparators = _this$props3.tokenSeparators;
var nextValue = _this.state.value;
var hasNewValue = false;
splitBySeparators(string, tokenSeparators).forEach(function (label) {
var selectedValue = [label];
if (multiple) {
var value = _this.getValueByLabel(label);
if (value && findIndexInValueBySingleValue(nextValue, value) === -1) {
nextValue = nextValue.concat(value);
hasNewValue = true;
_this.fireSelect(value);
}
} else {
// tag
if (findIndexInValueBySingleValue(nextValue, label) === -1) {
nextValue = nextValue.concat(selectedValue);
hasNewValue = true;
_this.fireSelect(label);
}
}
});
return hasNewValue ? nextValue : undefined;
});
_defineProperty(_assertThisInitialized(_this), "getRealOpenState", function () {
var _open = _this.props.open;
if (typeof _open === 'boolean') {
return _open;
}
var open = _this.state.open;
var options = _this._options || [];
if (isMultipleOrTagsOrCombobox(_this.props) || !_this.props.showSearch) {
if (open && !options.length) {
open = false;
}
}
return open;
});
_defineProperty(_assertThisInitialized(_this), "focus", function () {
if (isSingleMode(_this.props)) {
_this.selectionRef.focus();
} else {
_this.getInputDOMNode().focus();
}
});
_defineProperty(_assertThisInitialized(_this), "blur", function () {
if (isSingleMode(_this.props)) {
_this.selectionRef.blur();
} else {
_this.getInputDOMNode().blur();
}
});
_defineProperty(_assertThisInitialized(_this), "handleBackfill", function (item) {
if (!_this.props.backfill || !(isSingleMode(_this.props) || isCombobox(_this.props))) {
return;
}
var key = getValuePropValue(item);
if (isCombobox(_this.props)) {
_this.setInputValue(key, false);
}
_this.setState({
value: [key],
backfillValue: key
});
});
_defineProperty(_assertThisInitialized(_this), "filterOption", function (input, child) {
var defaultFilter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultFilterFn;
var value = _this.state.value;
var lastValue = value[value.length - 1];
if (!input || lastValue && lastValue === _this.state.backfillValue) {
return true;
}
var filterFn = _this.props.filterOption;
if ('filterOption' in _this.props) {
if (_this.props.filterOption === true) {
filterFn = defaultFilter;
}
} else {
filterFn = defaultFilter;
}
if (!filterFn) {
return true;
} else if (typeof filterFn === 'function') {
return filterFn.call(_assertThisInitialized(_this), input, child);
} else if (child.props.disabled) {
return false;
}
return true;
});
_defineProperty(_assertThisInitialized(_this), "timeoutFocus", function () {
if (_this.focusTimer) {
_this.clearFocusTime();
}
_this.focusTimer = setTimeout(function () {
_this.props.onFocus();
}, 10);
});
_defineProperty(_assertThisInitialized(_this), "clearFocusTime", function () {
if (_this.focusTimer) {
clearTimeout(_this.focusTimer);
_this.focusTimer = null;
}
});
_defineProperty(_assertThisInitialized(_this), "clearBlurTime", function () {
if (_this.blurTimer) {
clearTimeout(_this.blurTimer);
_this.blurTimer = null;
}
});
_defineProperty(_assertThisInitialized(_this), "clearAdjustTimer", function () {
if (_this.skipAdjustOpenTimer) {
clearTimeout(_this.skipAdjustOpenTimer);
_this.skipAdjustOpenTimer = null;
}
});
_defineProperty(_assertThisInitialized(_this), "updateFocusClassName", function () {
var _assertThisInitialize4 = _assertThisInitialized(_this),
rootRef = _assertThisInitialize4.rootRef,
props = _assertThisInitialize4.props; // avoid setState and its side effect
if (_this._focused) {
classes(rootRef).add("".concat(props.prefixCls, "-focused"));
} else {
classes(rootRef).remove("".concat(props.prefixCls, "-focused"));
}
});
_defineProperty(_assertThisInitialized(_this), "maybeFocus", function (open, needFocus) {
if (needFocus || open) {
var input = _this.getInputDOMNode();
var _document = document,
activeElement = _document.activeElement;
if (input && (open || isMultipleOrTagsOrCombobox(_this.props))) {
if (activeElement !== input) {
input.focus();
_this._focused = true;
}
} else {
if (activeElement !== _this.selectionRef) {
_this.selectionRef.focus();
_this._focused = true;
}
}
}
});
_defineProperty(_assertThisInitialized(_this), "handleChoiceItemClick", function (selectedKey, e) {
var props = _this.props;
if (props.disabled || _this.isChildDisabled(selectedKey)) {
return;
}
if (!e.isDefaultPrevented()) {
props.onChoiceItemClick(_this.getVLBySingleValue(selectedKey), _this.getOptionBySingleValue(selectedKey));
}
});
_defineProperty(_assertThisInitialized(_this), "removeSelected", function (selectedKey, index, e) {
_this.needExpand = false;
setTimeout(function () {
_this.needExpand = true;
}, 100);
if (e && e.preventDefault) {
e.preventDefault();
}
var props = _this.props;
if (props.disabled || _this.isChildDisabled(selectedKey)) {
return;
}
if (e && e.stopPropagation) {
e.stopPropagation();
}
var value = _this.state.value.filter(function (singleValue, i) {
return singleValue !== selectedKey || index !== null && i !== index;
});
var canMultiple = isMultipleOrTags(props);
if (canMultiple) {
var event = selectedKey;
if (props.labelInValue) {
event = {
key: selectedKey,
label: _this.getLabelBySingleValue(selectedKey)
};
}
props.onDeselect(event, _this.getOptionBySingleValue(selectedKey), index);
if (typeof props.onChoiceRemove === 'function') {
props.onChoiceRemove(selectedKey);
}
}
_this.fireChange(value);
});
_defineProperty(_assertThisInitialized(_this), "openIfHasChildren", function () {
var props = _this.props;
if (Children.count(props.children) || isSingleMode(props)) {
_this.setOpenState(true);
}
});
_defineProperty(_assertThisInitialized(_this), "fireSelect", function (value) {
return _this.props.onSelect(_this.getVLBySingleValue(value), _this.getOptionBySingleValue(value));
});
_defineProperty(_assertThisInitialized(_this), "fireChange", function (value) {
var props = _this.props;
if (!('value' in props)) {
_this.setState({
value: value
}, _this.forcePopupAlign);
}
var vls = _this.getVLForOnChange(value);
var options = _this.getOptionsBySingleValue(value);
props.onChange(vls, isMultipleOrTags(_this.props) ? options : options[0]);
});
_defineProperty(_assertThisInitialized(_this), "isChildDisabled", function (key) {
return childrenToArray(_this.props.children).some(function (child) {
var childValue = getValuePropValue(child);
return childValue === key && child.props && child.props.disabled;
});
});
_defineProperty(_assertThisInitialized(_this), "forcePopupAlign", function () {
_this.selectTriggerRef.triggerRef.forcePopupAlign();
});
_defineProperty(_assertThisInitialized(_this), "adjustOpenState", function () {
if (_this.skipAdjustOpen) {
return;
}
var open = _this.state.open;
var options = []; // If hidden menu due to no options, then it should be calculated again
if (open || _this.hiddenForNoOptions) {
options = _this.renderFilterOptions();
}
_this._options = options;
if (isMultipleOrTagsOrCombobox(_this.props) || !_this.props.showSearch) {
if (open && !options.length) {
open = false;
_this.hiddenForNoOptions = true;
} // Keep menu open if there are options and hidden for no options before
if (_this.hiddenForNoOptions && options.length) {
open = true;
_this.hiddenForNoOptions = false;
}
}
_this.state.open = open;
});
_defineProperty(_assertThisInitialized(_this), "renderFilterOptions", function () {
var inputValue = _this.state.inputValue;
var _this$props4 = _this.props,
children = _this$props4.children,
tags = _this$props4.tags,
filterOption = _this$props4.filterOption,
notFoundContent = _this$props4.notFoundContent,
showNotFindInputItem = _this$props4.showNotFindInputItem,
showNotFindSelectedItem = _this$props4.showNotFindSelectedItem,
dropdownMenuItemCheckable = _this$props4.dropdownMenuItemCheckable;
var menuItems = [];
var childrenKeys = [];
var options = _this.renderFilterOptionsFromChildren(children, childrenKeys, menuItems);
if (tags) {
if (showNotFindSelectedItem) {
// tags value must be string
var value = _this.state.value || [];
value = value.filter(function (singleValue) {
return childrenKeys.indexOf(singleValue) === -1 && (!inputValue || String(singleValue).indexOf(String(inputValue)) > -1);
});
value.forEach(function (singleValue) {
var key = singleValue;
var menuItem = /*#__PURE__*/React.createElement(MenuItem, {
checkable: dropdownMenuItemCheckable,
style: UNSELECTABLE_STYLE,
role: "option",
attribute: UNSELECTABLE_ATTRIBUTE,
value: key,
key: key
}, key);
options.push(menuItem);
menuItems.push(menuItem);
});
}
if (inputValue && showNotFindInputItem) {
var notFindInputItem = menuItems.every(function (option) {
// this.filterOption return true has two meaning,
// 1, some one exists after filtering
// 2, filterOption is set to false
// condition 2 does not mean the option has same value with inputValue
var filterFn = function filterFn() {
return getValuePropValue(option) === inputValue;
};
if (filterOption !== false) {
return !_this.filterOption.call(_assertThisInitialized(_this), inputValue, option, filterFn);
}
return !filterFn();
});
if (notFindInputItem) {
options.unshift( /*#__PURE__*/React.createElement(MenuItem, {
checkable: dropdownMenuItemCheckable,
style: UNSELECTABLE_STYLE,
role: "option",
attribute: UNSELECTABLE_ATTRIBUTE,
value: inputValue,
onMouseDown: preventDefaultEvent,
key: inputValue
}, inputValue));
}
}
}
var loading = _this.props.loading;
if (typeof loading === 'boolean') {
loading = {
spinning: loading
};
}
if (!options.length && notFoundContent) {
options = [/*#__PURE__*/React.createElement(MenuItem, {
style: UNSELECTABLE_STYLE,
attribute: UNSELECTABLE_ATTRIBUTE,
disabled: true,
role: "option",
value: "NOT_FOUND",
key: "NOT_FOUND",
checkable: false
}, loading.spinning ? '' : notFoundContent)];
}
return options;
});
_defineProperty(_assertThisInitialized(_this), "renderFilterOptionsFromChildren", function (children, childrenKeys, menuItems) {
var sel = [];
var props = _this.props;
var inputValue = _this.state.inputValue;
var tags = props.tags;
Children.forEach(children, function (child, index) {
if (!child) {
return;
}
if (child.type.isSelectOptGroup) {
var innerItems = _this.renderFilterOptionsFromChildren(child.props.children, childrenKeys, menuItems);
if (innerItems.length) {
var label = child.props.label;
var key = child.key;
if (!key && typeof label === 'string') {
key = label;
} else if (!label && key) {
label = key;
}
sel.push( /*#__PURE__*/React.createElement(MenuItemGroup, {
key: key,
title: label
}, innerItems));
}
return;
}
warning(child.type.isSelectOption, 'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' + "instead of `".concat(child.type.name || child.type.displayName || child.type, "`."));
var childValue = getValuePropValue(child);
validateOptionValue(childValue, _this.props);
if (_this.filterOption(inputValue, child)) {
var menuItem = /*#__PURE__*/React.createElement(MenuItem, _extends({
checkable: props.dropdownMenuItemCheckable,
style: UNSELECTABLE_STYLE,
attribute: UNSELECTABLE_ATTRIBUTE,
value: childValue,
key: childValue,
role: "option"
}, child.props));
sel.push(menuItem);
menuItems.push(menuItem);
}
if (tags && !child.props.disabled) {
childrenKeys.push(childValue);
}
});
return sel;
});
_defineProperty(_assertThisInitialized(_this), "isChoiceRemove", function (selectedKey) {
var choiceRemove = _this.props.choiceRemove;
if (typeof choiceRemove === 'function') {
return choiceRemove(selectedKey);
}
return choiceRemove;
});
_defineProperty(_assertThisInitialized(_this), "renderTopControlNode", function (isFloatLabel) {
var _this$state = _this.state,
value = _this$state.value,
open = _this$state.open,
inputValue = _this$state.inputValue;
var props = _this.props;
var tags = isTags(props);
var choiceTransitionName = props.choiceTransitionName,
prefixCls = props.prefixCls,
maxTagTextLength = props.maxTagTextLength,
maxTagCount = props.maxTagCount,
maxTagPlaceholder = props.maxTagPlaceholder,
showSearch = props.showSearch,
choiceRender = props.choiceRender,
removeIcon = props.removeIcon;
var className = "".concat(prefixCls, "-selection__rendered"); // search input is inside topControlNode in single, multiple & combobox. 2016/04/13
var innerNode = null;
if (isSingleMode(props)) {
var selectedValue = null;
if (value.length) {
var showSelectedValue = false;
var opacity = 1;
if (!showSearch) {
showSelectedValue = true;
} else {
if (open) {
showSelectedValue = !inputValue;
if (showSelectedValue) {
opacity = 0.4;
}
} else {
showSelectedValue = true;
}
}
var singleValue = value && value[0];
var _this$getOptionInfoBy3 = _this.getOptionInfoBySingleValue(singleValue),
label = _this$getOptionInfoBy3.label,
title = _this$getOptionInfoBy3.title;
selectedValue = /*#__PURE__*/React.createElement("div", {
key: "value",
className: "".concat(prefixCls, "-selection-selected-value"),
title: toTitle(title || label),
style: {
display: showSelectedValue ? 'block' : 'none',
opacity: opacity
}
}, choiceRender ? choiceRender(label) : label);
} else {
selectedValue = /*#__PURE__*/React.createElement("div", {
key: "value",
className: "".concat(prefixCls, "-selection-selected-value")
});
}
if (!showSearch) {
innerNode = [selectedValue];
} else {
innerNode = [selectedValue, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-search ").concat(prefixCls, "-search--inline"),
key: "input",
style: {
display: open ? 'block' : 'none'
}
}, _this.getInputElement())];
}
} else {
var selectedValueNodes = [];
var limitedCountValue = value;
var maxTagPlaceholderEl;
if (maxTagCount !== undefined && value.length > maxTagCount) {
limitedCountValue = limitedCountValue.slice(0, maxTagCount);
var omittedValues = _this.getVLForOnChange(value.slice(maxTagCount, value.length));
var content = "+ ".concat(value.length - maxTagCount, " ...");
if (maxTagPlaceholder) {
content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
}
maxTagPlaceholderEl = /*#__PURE__*/React.createElement("li", _extends({
style: UNSELECTABLE_STYLE
}, UNSELECTABLE_ATTRIBUTE, {
onMouseDown: preventDefaultEvent,
className: "".concat(prefixCls, "-selection__choice ").concat(prefixCls, "-selection__choice__disabled ").concat(prefixCls, "-selection__max"),
key: 'maxTagPlaceholder',
title: toTitle(content)
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-selection__choice__content")
}, content));
}
if (isMultipleOrTags(props)) {
selectedValueNodes = limitedCountValue.map(function (singleValue, index) {
var info = _this.getOptionInfoBySingleValue(singleValue);
var content = info.label;
var title = info.title || content;
if (maxTagTextLength && typeof content === 'string' && content.length > maxTagTextLength) {
content = "".concat(content.slice(0, maxTagTextLength), "...");
}
var disabled = _this.isChildDisabled(singleValue);
var choiceClassName = disabled ? "".concat(prefixCls, "-selection__choice ").concat(prefixCls, "-selection__choice__disabled") : "".concat(prefixCls, "-selection__choice");
var li = /*#__PURE__*/React.createElement("li", _extends({
style: UNSELECTABLE_STYLE
}, UNSELECTABLE_ATTRIBUTE, {
onMouseDown: preventDefaultEvent,
onClick: _this.handleChoiceItemClick.bind(_assertThisInitialized(_this), singleValue),
className: choiceClassName,
key: singleValue,
title: toTitle(title)
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-selection__choice__content")
}, content), disabled || !_this.isChoiceRemove(singleValue) ? null : /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-selection__choice__remove"),
onClick: _this.removeSelected.bind(_assertThisInitialized(_this), singleValue, index)
}, removeIcon || /*#__PURE__*/React.createElement("i", {
className: "icon icon-cancel"
})));
return /*#__PURE__*/React.createElement(Ripple, {
key: singleValue + limitedCountValue.slice(0, index).filter(function (foundValue) {
return foundValue === singleValue;
}).length
}, choiceRender ? choiceRender(li, singleValue) : li);
});
}
if (maxTagPlaceholderEl) {
selectedValueNodes.push(maxTagPlaceholderEl);
}
selectedValueNodes.push( /*#__PURE__*/React.createElement("li", {
className: "".concat(prefixCls, "-search ").concat(prefixCls, "-search--inline"),
key: "__input"
}, _this.getInputElement()));
if (isMultipleOrTags(props) && choiceTransitionName) {
innerNode = /*#__PURE__*/React.createElement(Animate, {
onLeave: _this.onChoiceAnimationLeave,
component: "ul",
transitionName: choiceTransitionName
}, selectedValueNodes);
} else {
innerNode = /*#__PURE__*/React.createElement("ul", null, selectedValueNodes);
}
}
return /*#__PURE__*/React.createElement("div", {
className: className,
ref: _this.saveTopCtrlRef
}, _this.getPlaceholderElement(), innerNode, isFloatLabel && _this.renderClear(isFloatLabel), isFloatLabel && (tags || !props.showArrow ? null : /*#__PURE__*/React.createElement("span", _extends({
key: "arrow",
className: "".concat(prefixCls, "-arrow"),
style: UNSELECTABLE_STYLE
}, UNSELECTABLE_ATTRIBUTE, {
onClick: _this.onArrowClick
}), /*#__PURE__*/React.createElement("i", {
className: "icon icon-arrow_drop_down"
}), /*#__PURE__*/React.createElement("b", null))));
});
_defineProperty(_assertThisInitialized(_this), "checkAll", function (event) {
var name = event.target.getAttribute('name');
var props = _this.props;
var state = _this.state;
if (props.disabled) {
return;
}
var newValues;
var values = Select.getOptionsFromChildren(props.children).filter(function (option) {
// 当这个选项为禁用时，全选和无不对这个选项做处理
return option.props.disabled !== true;
}).map(function (option) {
return getValuePropValue(option);
});
if (name === 'check-all') {
newValues = new Set(state.value.concat(values));
_this.fireChange(Array.from(newValues));
} else if (name === 'check-none') {
newValues = state.value.filter(function (e) {
return values.indexOf(e) < 0;
});
_this.fireChange(newValues);
_this.focus();
}
});
var _value = Select.getValueFromProps(_props, true);
var _optionsInfo = Select.getOptionsInfoFromProps(_props);
var filterValue = _props.filterValue || '';
_this.state = {
value: _value,
inputValue: _props.combobox ? Select.getInputValueForCombobox(_props, _optionsInfo, true // use default value
) : '',
open: _props.defaultOpen,
optionsInfo: _optionsInfo,
filterValue: filterValue,
// a flag for aviod redundant getOptionsInfoFromProps call
skipBuildOptionsInfo: true
};
_this.adjustOpenState();
_this.saveInputRef = saveRef(_assertThisInitialized(_this), 'inputRef');
_this.saveInputMirrorRef = saveRef(_assertThisInitialized(_this), 'inputMirrorRef');
_this.saveTopCtrlRef = saveRef(_assertThisInitialized(_this), 'topCtrlRef');
_this.saveSelectTriggerRef = saveRef(_assertThisInitialized(_this), 'selectTriggerRef');
_this.saveRootRef = saveRef(_assertThisInitialized(_this), 'rootRef');
_this.saveSelectionRef = saveRef(_assertThisInitialized(_this), 'selectionRef');
return _this;
}
_createClass(Select, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.autoFocus) {
this.focus();
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (isMultipleOrTags(this.props)) {
var inputNode = this.getInputDOMNode();
var mirrorNode = this.getInputMirrorDOMNode();
if (inputNode.value) {
inputNode.style.width = '';
inputNode.style.width = "".concat(mirrorNode.clientWidth, "px");
} else {
inputNode.style.width = '';
}
this.onChoiceAnimationLeave();
}
this.forcePopupAlign();
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.clearFocusTime();
this.clearBlurTime();
this.clearAdjustTimer();
if (this.dropdownContainer) {
unmountComponentAtNode(this.dropdownContainer);
document.body.removeChild(this.dropdownContainer);
this.dropdownContainer = null;
}
}
}, {
key: "getBuiltinPlacements",
value: function getBuiltinPlacements() {
var _this$props5 = this.props,
builtinPlacements = _this$props5.builtinPlacements,
label = _this$props5.label;
if (builtinPlacements) {
return builtinPlacements;
}
if (!isTags(this.props) && !isCombobox(this.props)) {
if (label) {
return BUILT_IN_PLACEMENTS_LABEL;
}
return BUILT_IN_PLACEMENTS;
}
}
}, {
key: "renderClear",
value: function renderClear(isFloatLabel) {
var _this$props6 = this.props,
prefixCls = _this$props6.prefixCls,
allowClear = _this$props6.allowClear,
clearIcon = _this$props6.clearIcon;
var _this$state2 = this.state,
value = _this$state2.value,
inputValue = _this$state2.inputValue;
var Cmp = isFloatLabel ? Button : 'span';
var clear = /*#__PURE__*/React.createElement(Cmp, _extends({
key: "clear",
className: isFloatLabel ? "".concat(prefixCls, "-clear") : "".concat(prefixCls, "-selection__clear"),
style: UNSELECTABLE_STYLE
}, UNSELECTABLE_ATTRIBUTE, {
shape: "circle",
icon: clearIcon ? undefined : 'close',
size: "small",
onClick: this.onClearSelection,
onMouseDown: preventDefaultEvent
}), clearIcon);
if (!allowClear) {
return null;
}
if (isCombobox(this.props)) {
if (inputValue) {
return clear;
}
return null;
}
if (inputValue || value.length) {
return clear;
}
return null;
}
}, {
key: "getLabel",
value: function getLabel() {
var _this$props7 = this.props,
placeholder = _this$props7.placeholder,
label = _this$props7.label;
if (!this.hasValue() && placeholder) {
if (this._focused) {
return label || placeholder;
}
return placeholder;
}
return label;
}
}, {
key: "renderFloatLabel",
value: function renderFloatLabel() {
var label = this.getLabel();
var _this$props8 = this.props,
prefixCls = _this$props8.prefixCls,
border = _this$props8.border;
if (label && border) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-label-wrapper")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-label")
}, label));
}
}
}, {
key: "hasValue",
value: function hasValue() {
var _this$state3 = this.state,
value = _this$state3.value,
inputValue = _this$state3.inputValue;
return inputValue || value.length && value[0];
}
}, {
key: "render",
value: function render() {
var _rootCls;
var props = this.props;
var className = props.className,
disabled = props.disabled,
prefixCls = props.prefixCls,
inputIcon = props.inputIcon,
label = props.label,
loading = props.loading,
border = props.border,
labelLayout = props.labelLayout;
var _this$state4 = this.state,
open = _this$state4.open,
value = _this$state4.value,
inputValue = _this$state4.inputValue,
filterValue = _this$state4.filterValue,
backfillValue = _this$state4.backfillValue;
var multiple = isMultipleOrTags(props);
var isFloatLabel = labelLayout === 'float';
var ctrlNode = this.renderTopControlNode(isFloatLabel);
if (open) {
this._options = this.renderFilterOptions();
}
var realOpen = this.getRealOpenState();
var options = this._options || [];
var dataOrAriaAttributeProps = {};
for (var key in props) {
if (props.hasOwnProperty(key) && (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role')) {
dataOrAriaAttributeProps[key] = props[key];
}
}
var extraSelectionProps = _objectSpread({}, dataOrAriaAttributeProps);
if (!isMultipleOrTagsOrCombobox(props)) {
extraSelectionProps = _objectSpread(_objectSpread({}, extraSelectionProps), {}, {
onKeyDown: this.onKeyDown,
tabIndex: disabled ? -1 : 0
});
}
var rootCls = (_rootCls = {}, _defineProperty(_rootCls, className, !!className), _defineProperty(_rootCls, prefixCls, 1), _defineProperty(_rootCls, "".concat(prefixCls, "-open"), open), _defineProperty(_rootCls, "".concat(prefixCls, "-focused"), !isMultiple(props) && this._focused), _defineProperty(_rootCls, "".concat(prefixCls, "-has-value"), this.hasValue()), _defineProperty(_rootCls, "".concat(prefixCls, "-has-label"), label), _defineProperty(_rootCls, "".concat(prefixCls, "-combobox"), isCombobox(props)), _defineProperty(_rootCls, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_rootCls, "".concat(prefixCls, "-enabled"), !disabled), _defineProperty(_rootCls, "".concat(prefixCls, "-allow-clear"), !!props.allowClear), _defineProperty(_rootCls, "".concat(prefixCls, "-no-arrow"), !props.showArrow), _defineProperty(_root