@txdfe/at
Version:
一个设计体系组件库
1,001 lines (978 loc) • 40.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _util = require("../util");
var _tag = _interopRequireDefault(require("../tag"));
var _input = _interopRequireDefault(require("../input"));
var _icon = _interopRequireDefault(require("../icon"));
var _zhCn = _interopRequireDefault(require("../locale/zh-cn"));
var _base = _interopRequireDefault(require("./base"));
var _util2 = require("./util");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
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) { _defineProperty(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; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable valid-jsdoc */
var noop = _util.func.noop;
var isIE9 = _util.env.ieVersion === 9;
/**
* 无障碍化注意事项:
* 1. Select 无搜索情况下，不应该让 Input 可focus，此时外层wrap必须可focus，并且需要相应focus事件让外边框发生变化
*
* TODO: hightLight 后续改造注意点
* 1. hightLight 跟随点击变化(fixed) 2. 弹窗打开时根据 是否高亮第一个选项的 api开关设置是否hightLight 第一项
*/
// 自定义弹层：1. 不需要关心Menu的点击事件 2. 不需要关心dataSource变化
/**
* Select
*/
var Select = /*#__PURE__*/function (_Base) {
function Select(props) {
var _this;
_classCallCheck(this, Select);
_this = _callSuper(this, Select, [props]);
// @extend Base state
// ie9 下 table-cell 布局不支持宽度超出隐藏
_defineProperty(_this, "ie9Hack", function () {
try {
var width = _this.selectDOM.currentStyle.width;
_this.setState({
fixWidth: width !== 'auto'
});
} catch (e) {
//
}
});
_defineProperty(_this, "useDetailValue", function () {
var _this$props = _this.props,
popupContent = _this$props.popupContent,
useDetailValue = _this$props.useDetailValue,
dataSource = _this$props.dataSource;
return useDetailValue || popupContent && !dataSource;
});
_defineProperty(_this, "hasSearch", function () {
var _this$props2 = _this.props,
showSearch = _this$props2.showSearch,
mode = _this$props2.mode;
return showSearch || mode === 'tag';
});
/**
* Menu.Item onSelect
* @private
* @param {Array<string>} keys
* @
*/
_defineProperty(_this, "handleMenuSelect", function (keys, item) {
var _this$props3 = _this.props,
mode = _this$props3.mode,
readOnly = _this$props3.readOnly,
disabled = _this$props3.disabled;
if (readOnly || disabled) {
return false;
}
var isSingle = mode === 'single';
if (isSingle) {
// 单选
return _this.handleSingleSelect(keys[0], 'itemClick');
} else {
// 正常多选
return _this.handleMultipleSelect(keys, 'itemClick', item.props && item.props._key);
}
});
_defineProperty(_this, "handleItemClick", function () {
_this.focusInput();
});
/**
* 单选模式
*/
_defineProperty(_this, "handleSingleSelect", function (key, triggerType) {
var cacheValue = _this.props.cacheValue;
// get data only from dataStore while cacheValue=false
var itemObj = (0, _util2.getValueDataSource)(key, cacheValue ? _this.valueDataSource.mapValueDS : {}, _this.dataStore.getMapDS());
_this.valueDataSource = itemObj;
_this.setVisible(false, triggerType);
if (_this.useDetailValue()) {
return _this.handleChange(itemObj.valueDS, triggerType);
} else {
_this.handleChange(itemObj.value, triggerType, itemObj.valueDS);
}
_this.setState({
highlightKey: key
});
// 清空搜索
if (!('searchValue' in _this.props) && _this.state.searchValue) {
_this.handleSearchClear(triggerType);
}
});
/**
* 多选模式 multiple/tag
*/
_defineProperty(_this, "handleMultipleSelect", function (keys, triggerType, key, keepSearchValue) {
var itemObj = (0, _util2.getValueDataSource)(keys, _this.valueDataSource.mapValueDS, _this.dataStore.getMapDS());
var _this$props4 = _this.props,
cacheValue = _this$props4.cacheValue,
mode = _this$props4.mode,
hiddenSelected = _this$props4.hiddenSelected;
// cache those value maybe not exists in dataSource
if (cacheValue || mode === 'tag') {
_this.valueDataSource = itemObj;
}
if (hiddenSelected) {
_this.setVisible(false, triggerType);
}
key && _this.state.visible && _this.setState({
highlightKey: key
});
if (_this.useDetailValue()) {
_this.handleChange(itemObj.valueDS, triggerType);
} else {
_this.handleChange(itemObj.value, triggerType, itemObj.valueDS);
}
_this.updateSelectAllYet(itemObj.value);
// 清空搜索
if (!('searchValue' in _this.props) && _this.state.searchValue && !keepSearchValue) {
// 因为 SearchValue 被 clear 后会重新渲染 Menu，所以在 Overlay 检测 safeNode 的时候 e.target 可能会找不到导致弹窗关闭
setTimeout(function () {
_this.handleSearchClear(triggerType);
});
}
});
_defineProperty(_this, "updateSelectAllYet", function (value) {
// multiple mode
// is current state select all or not
_this.selectAllYet = false;
if (_this.props.hasSelectAll && Array.isArray(value)) {
var selectAllValues = _this.dataStore.getEnableDS().map(function (item) {
return item.value;
});
if (selectAllValues.length <= value.length) {
_this.selectAllYet = true;
selectAllValues.forEach(function (val) {
if (value.indexOf(val) === -1) {
_this.selectAllYet = false;
}
});
}
}
});
_defineProperty(_this, "handleSearchValue", function (value) {
if (_this.state.searchValue === value) {
return;
}
var filterLocal = _this.props.filterLocal;
if (filterLocal) {
if (!('searchValue' in _this.props)) {
_this.setState({
searchValue: value,
dataSource: _this.dataStore.updateByKey(value)
});
_this.setFirstHightLightKeyForMenu();
}
} else if (!('searchValue' in _this.props)) {
_this.setState({
searchValue: value
});
}
});
/**
* Handle search input change event
* @param {Event} e change Event
*/
_defineProperty(_this, "handleSearch", function (value) {
_this.handleSearchValue(value);
// inputing should trigger popup open
if (!_this.state.visible && value) {
_this.setVisible(true);
}
_this.props.onSearch(value);
});
_defineProperty(_this, "handleSearchClear", function (triggerType) {
_this.handleSearchValue('');
_this.props.onSearchClear(triggerType);
});
// 搜索框 keyDown 事件
_defineProperty(_this, "handleSearchKeyDown", function (e) {
var _this$props5 = _this.props,
popupContent = _this$props5.popupContent,
onKeyDown = _this$props5.onKeyDown,
showSearch = _this$props5.showSearch,
mode = _this$props5.mode,
hasClear = _this$props5.hasClear,
onToggleHighlightItem = _this$props5.onToggleHighlightItem,
readOnly = _this$props5.readOnly,
disabled = _this$props5.disabled;
if (popupContent) {
return onKeyDown(e);
}
var proxy = 'search';
var hasSearch = _this.hasSearch();
switch (e.keyCode) {
case _util.KEYCODE.UP:
e.preventDefault();
onToggleHighlightItem(_this.toggleHighlightItem(-1, e), 'up');
break;
case _util.KEYCODE.DOWN:
e.preventDefault();
onToggleHighlightItem(_this.toggleHighlightItem(1, e), 'down');
break;
case _util.KEYCODE.ENTER:
e.preventDefault();
if (readOnly || disabled) {
break;
}
_this.chooseHighlightItem(proxy, e);
break;
case _util.KEYCODE.ESC:
e.preventDefault();
_this.state.visible && _this.setVisible(false, 'keyDown');
break;
case _util.KEYCODE.SPACE:
e.stopPropagation();
!hasSearch && e.preventDefault();
break;
case _util.KEYCODE.BACKSPACE:
if (mode === 'multiple' && showSearch || mode === 'tag') {
// 在多选并且有搜索的情况下，删除最后一个 tag
_this.handleDeleteTag(e);
} else if (mode === 'single' && hasClear && !_this.state.visible) {
// 单选、非展开、并且可清除的情况，允许按删除键清除
_this.handleClear(e);
}
break;
default:
break;
}
onKeyDown(e);
});
_defineProperty(_this, "chooseMultipleItem", function (key) {
var value = _this.state.value || [];
var keys = value.map(function (v) {
return (0, _util2.valueToSelectKey)(v);
});
var keepSearchValue = false;
var index = keys.map(function (v) {
return "".concat(v);
}).indexOf(key);
if (index > -1) {
// unselect
keys.splice(index, 1);
keepSearchValue = true; // 回车反选保留搜索值
} else {
// select
keys.push(key);
}
_this.handleMultipleSelect(keys, 'enter', null, keepSearchValue);
});
// 回车 选择高亮的 item
_defineProperty(_this, "chooseHighlightItem", function (proxy, e) {
var prevVisible = _this.state.visible;
var mode = _this.props.mode;
if (!prevVisible) {
// input tag by itself
if (mode === 'tag' && _this.state.searchValue) {
_this.chooseMultipleItem(_this.state.searchValue);
}
return false;
}
var highlightKey = _this.state.highlightKey;
// 没有高亮选项 或者 没有可选菜单
if (highlightKey === null || !_this.dataStore.getMenuDS().length) {
return;
}
if (mode === 'single') {
_this.handleSingleSelect(highlightKey, 'enter');
} else {
_this.chooseMultipleItem(highlightKey);
// 阻止事件冒泡到最外层，让Popup 监听到触发弹层关闭
e && e.stopPropagation();
}
});
/**
* Handle Tag close event
* @param {Object} item
* @return {Boolean} false return false to prevent auto close
* ----
* It MUST be multiple mode, needn't additional judgement
*/
_defineProperty(_this, "handleTagClose", function (item) {
if (_this.useDetailValue()) {
var value = _this.state.value.filter(function (v) {
return item.value !== v.value;
});
_this.handleChange(value, 'tag');
} else {
// filter out current item, and then call handleMenuSelect
var _value = _this.state.value.filter(function (v) {
return item.value !== v;
});
_this.handleMultipleSelect(_value, 'tag');
}
_this.props.onRemove(item);
// prevent tag close
return false;
});
// eslint-disable-next-line valid-jsdoc
/**
* Handle BACKSPACE key event
* @param {Event} e keyDown event
* ---
* It MUST be multiple mode
*/
_defineProperty(_this, "handleDeleteTag", function (e) {
var value = _this.state.value;
var searchValue = _this.state.searchValue;
if (searchValue || !value || !value.length) {
return false;
}
e.preventDefault();
var nextValues = value.slice(0, value.length - 1);
// 手动调用 handleMenuSelect 时直接传入原生的 value，可以减少 toString 的操作
if (_this.useDetailValue()) {
_this.handleChange(nextValues, 'tag');
} else {
_this.handleMultipleSelect(nextValues, 'tag');
}
});
/**
* Handle SelectAll span click event
* @param {Event} e click event
*/
_defineProperty(_this, "handleSelectAll", function (e) {
e && e.preventDefault();
var nextValues;
if (_this.selectAllYet) {
nextValues = [];
} else {
nextValues = _this.dataStore.getEnableDS().map(function (item) {
return item.value;
});
}
// 直接传 values，减少 toString 操作
_this.handleMultipleSelect(nextValues, 'selectAll');
});
_defineProperty(_this, "handleVisibleChange", function (visible, type) {
_this.setVisible(visible, type);
});
_defineProperty(_this, "afterClose", function () {
// 关闭的时候清空搜索值
if (_this.hasSearch()) {
_this.handleSearchClear('popupClose');
}
// 清空选项的获焦状态
_this.setState({
highlightKey: null
});
});
_defineProperty(_this, "maxTagPlaceholder", function (selectedValues, totalValues) {
var locale = _this.props.locale;
return "".concat(_util.str.template(locale.maxTagPlaceholder, {
selected: selectedValues.length,
total: totalValues.length
}));
});
/**
* 如果用户是自定义的弹层，则直接以 value 为准，不再校验 dataSource
* @param {object} props
*/
_defineProperty(_this, "renderValues", function () {
var _this$props6 = _this.props,
prefix = _this$props6.prefix,
mode = _this$props6.mode,
size = _this$props6.size,
valueRender = _this$props6.valueRender,
tagClassSetter = _this$props6.tagClassSetter,
fillProps = _this$props6.fillProps,
disabled = _this$props6.disabled,
maxTagCount = _this$props6.maxTagCount,
maxTagPlaceholder = _this$props6.maxTagPlaceholder,
tagInline = _this$props6.tagInline;
var value = _this.state.value;
if ((0, _util2.isNull)(value)) {
return null;
}
// get detail value
if (!_this.useDetailValue()) {
if (value === _this.valueDataSource.value) {
value = _this.valueDataSource.valueDS;
} else {
value = (0, _util2.getValueDataSource)(value, _this.valueDataSource.mapValueDS, _this.dataStore.getMapDS()).valueDS;
}
}
if (mode === 'single') {
if (!value) {
return null;
}
var retvalue = fillProps && fillProps in value ? value[fillProps] : valueRender(value);
// 0 => '0'
return typeof retvalue === 'number' ? retvalue.toString() : retvalue;
} else if (value) {
var limitedCountValue = value;
var maxTagPlaceholderEl;
var totalValue = _this.dataStore.getFlattenDS();
var holder = 'maxTagPlaceholder' in _this.props ? maxTagPlaceholder : _this.maxTagPlaceholder;
if (maxTagCount !== undefined && value.length > maxTagCount && !tagInline) {
limitedCountValue = limitedCountValue.slice(0, maxTagCount);
maxTagPlaceholderEl = /*#__PURE__*/_react["default"].createElement(_tag["default"], {
key: "_count",
type: "primary",
size: size === 'large' ? 'medium' : 'small',
animation: false
}, holder(value, totalValue));
}
if (value.length > 0 && tagInline) {
maxTagPlaceholderEl = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "select-tag-compact"),
key: "_count"
}, holder(value, totalValue));
}
value = limitedCountValue;
if (!Array.isArray(value)) {
value = [value];
}
var selectedValueNodes = value.map(function (v) {
if (!v) {
return null;
}
var labelNode = fillProps ? v[fillProps] : valueRender(v);
var cls = tagClassSetter ? tagClassSetter(v) : undefined;
return /*#__PURE__*/_react["default"].createElement(_tag["default"], {
key: v.value,
className: cls,
disabled: disabled || v.disabled,
type: "primary",
size: size === 'large' ? 'medium' : 'small',
animation: false,
onClose: _this.handleTagClose.bind(_this, v),
closable: true
}, labelNode);
});
if (maxTagPlaceholderEl) {
if (tagInline) {
selectedValueNodes.unshift(maxTagPlaceholderEl);
} else {
selectedValueNodes.push(maxTagPlaceholderEl);
}
}
return selectedValueNodes;
}
return null;
});
/**
* 1. fix flash while click <label/>
* 2. fix onBlur while has clear
* @returns
*/
_defineProperty(_this, "handleWrapClick", function (e) {
// ignore click on input to choose text
if (e.target.nodeName !== 'INPUT') {
e.preventDefault();
}
_this.focusInput();
});
_defineProperty(_this, "handleArrowClick", function (e) {
e.preventDefault();
_this.focusInput();
// because of can not close Popup by click Input while hasSearch.
// so when Popup open and hasSearch, we should close Popup intentionally
_this.state.visible && _this.hasSearch() && _this.setVisible(false);
});
_defineProperty(_this, "handleClear", function (e) {
e.stopPropagation();
_this.handleChange(undefined, 'clear');
});
_defineProperty(_this, "hasClear", function () {
var _this$props7 = _this.props,
hasClear = _this$props7.hasClear,
readOnly = _this$props7.readOnly,
disabled = _this$props7.disabled,
mode = _this$props7.mode,
showSearch = _this$props7.showSearch;
var _this$state = _this.state,
value = _this$state.value,
visible = _this$state.visible;
return typeof value !== 'undefined' && hasClear && !readOnly && !disabled && mode === 'single' && !(showSearch && visible);
});
/**
* render arrow
* @param {object} props
* @param {function} [clickHandler]
*/
_defineProperty(_this, "renderExtraNode", function () {
var _this$props8 = _this.props,
hasArrow = _this$props8.hasArrow,
hasClear = _this$props8.hasClear,
prefix = _this$props8.prefix;
var ret = [];
if (hasArrow) {
ret.push(/*#__PURE__*/_react["default"].createElement("span", {
key: "arrow",
"aria-hidden": true,
onClick: _this.handleArrowClick,
className: "".concat(prefix, "select-arrow")
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "chevron-down-s"
})));
}
// do not use this.hasClear() here, to make sure clear btn always exists, can not influenced by apis like `disabled` `readOnly`
if (hasClear) {
ret.push(/*#__PURE__*/_react["default"].createElement("span", {
key: "clear",
"aria-hidden": true,
onClick: _this.handleClear,
className: "".concat(prefix, "select-clear")
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "remove-o-fill"
})));
}
return ret;
});
/**
* 选择器
* @override
* @param {object} props
*/
_defineProperty(_this, "renderSelect", function () {
var _this$props9 = _this.props,
prefix = _this$props9.prefix,
trigger = _this$props9.trigger,
showSearch = _this$props9.showSearch,
placeholder = _this$props9.placeholder,
mode = _this$props9.mode,
size = _this$props9.size,
className = _this$props9.className,
style = _this$props9.style,
readOnly = _this$props9.readOnly,
disabled = _this$props9.disabled,
hasBorder = _this$props9.hasBorder,
label = _this$props9.label,
locale = _this$props9.locale,
state = _this$props9.state,
onBlur = _this$props9.onBlur,
onFocus = _this$props9.onFocus,
rtl = _this$props9.rtl,
gray = _this$props9.gray;
if (trigger) {
return trigger;
}
var others = _util.obj.pickOthers(Select.propTypes, _this.props);
var othersData = _util.obj.pickAttrsWith(others, 'data-');
var visible = _this.state.visible;
var isSingle = mode === 'single';
var hasSearch = _this.hasSearch();
var valueNodes = _this.renderValues();
var _placeholder = placeholder || locale.selectPlaceholder;
if (valueNodes && valueNodes.length) {
_placeholder = null;
}
// 弹窗展开时将当前的值作为 placeholder，这个功能的前提是 valueNode 必须是一个字符串
if (showSearch && visible && isSingle && typeof valueNodes === 'string') {
_placeholder = valueNodes;
}
// 下拉箭头
var extra = _this.renderExtraNode();
var triggerClazz = (0, _classnames["default"])(["".concat(prefix, "select"), "".concat(prefix, "select-trigger"), "".concat(prefix, "select-").concat(mode), "".concat(prefix).concat(size), className], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "active"), visible), "".concat(prefix, "inactive"), !visible), "".concat(prefix, "no-search"), !hasSearch), "".concat(prefix, "has-search"), hasSearch), "".concat(prefix, "select-in-ie"), isIE9), "".concat(prefix, "select-in-ie-fixwidth"), _this.state.fixWidth), "".concat(prefix, "has-clear"), _this.hasClear()));
var valuetext = _this.valueDataSource.valueDS ? _this.valueDataSource.valueDS.label : '';
// state 为loading时效果转到弹层面板中
return /*#__PURE__*/_react["default"].createElement("span", _extends({}, othersData, {
className: triggerClazz,
style: style,
dir: rtl ? 'rtl' : undefined,
ref: _this.saveSelectRef,
onClick: _this.handleWrapClick,
onMouseDown: _this.handleWrapClick
}), /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({
"aria-valuetext": valuetext
}, _util.obj.pickOthers(othersData, others), {
role: "combobox",
tabIndex: 0,
"aria-expanded": _this.state.visible,
"aria-disabled": disabled,
state: state === 'loading' ? undefined : state,
label: label,
extra: extra,
value: _this.state.searchValue,
size: size,
readOnly: !_this.hasSearch() || readOnly,
disabled: disabled,
placeholder: _placeholder,
hasBorder: hasBorder,
hasClear: false,
htmlSize: "1",
inputRender: function inputRender(inputEl) {
return _this.renderSearchInput(valueNodes, _placeholder, inputEl);
},
onChange: _this.handleSearch,
onKeyDown: _this.handleSearchKeyDown,
onFocus: onFocus,
onBlur: onBlur,
className: "".concat(prefix, "select-inner"),
ref: _this.saveInputRef,
gray: gray
})), /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefix, "sr-only"),
"aria-live": "polite"
}, _this.state.srReader));
});
_defineProperty(_this, "renderSearchInput", function (valueNodes, placeholder, inputEl) {
var _this$props10 = _this.props,
prefix = _this$props10.prefix,
mode = _this$props10.mode,
tagInline = _this$props10.tagInline;
var isSingle = mode === 'single';
var mirrorText = _this.state.searchValue;
var cls = (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "select-values"), true), "".concat(prefix, "input-text-field"), true), "".concat(prefix, "select-compact"), !isSingle && tagInline));
var searchInput = [isSingle && valueNodes ? /*#__PURE__*/_react["default"].createElement("em", {
key: "select-value"
}, valueNodes) : valueNodes];
var triggerSearch = /*#__PURE__*/_react["default"].createElement("span", {
key: "trigger-search",
className: "".concat(prefix, "select-trigger-search")
}, inputEl, /*#__PURE__*/_react["default"].createElement("span", {
"aria-hidden": true
}, mirrorText || placeholder, "\xA0"));
if (!isSingle && tagInline) {
searchInput.unshift(triggerSearch);
} else {
searchInput.push(triggerSearch);
}
return /*#__PURE__*/_react["default"].createElement("span", {
className: cls
}, searchInput);
});
/**
* 渲染弹层的 header 内容
* @override
* @param {object} props
*/
_defineProperty(_this, "renderMenuHeader", function () {
var _this$props11 = _this.props,
prefix = _this$props11.prefix,
hasSelectAll = _this$props11.hasSelectAll,
mode = _this$props11.mode;
var sourceCount = _this.dataStore.getEnableDS().length;
// 多选模式下才有全选
if (!hasSelectAll || mode === 'single' || !sourceCount) {
return null;
}
var text = typeof hasSelectAll === 'boolean' ? 'Select All' : hasSelectAll;
var _this2 = _this,
selectAllYet = _this2.selectAllYet;
var cls = (0, _classnames["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "select-all"), true), "".concat(prefix, "selected"), selectAllYet));
var clsInner = (0, _classnames["default"])(_defineProperty({}, "".concat(prefix, "select-all-inner"), true));
// remove style={{'lineHeight': 'unset'}} in next Y
// remove style={{'display': 'none'}} in next Y
return /*#__PURE__*/_react["default"].createElement("div", {
key: "all",
onClick: _this.handleSelectAll,
className: cls,
style: {
lineHeight: 'unset'
}
}, selectAllYet ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
className: "".concat(prefix, "menu-icon-selected"),
style: {
display: 'none'
},
type: "tick"
}) : null, /*#__PURE__*/_react["default"].createElement("span", {
className: clsInner
}, text));
});
_extends(_this.state, {
// search keyword
searchValue: 'searchValue' in props ? props.searchValue : ''
});
// because dataSource maybe updated while select a item, so we should cache choosen value's item
_this.valueDataSource = {
valueDS: [],
// [{value,label}]
mapValueDS: {} // {value: {value,label}}
};
return _this;
}
_inherits(Select, _Base);
return _createClass(Select, [{
key: "UNSAFE_componentWillMount",
value: function UNSAFE_componentWillMount() {
this.dataStore.setOptions({
key: this.state.searchValue,
addonKey: this.props.mode === 'tag' // tag 模式手动输入的数据
});
if (_superPropGet(Select, "UNSAFE_componentWillMount", this, 1)) {
_superPropGet(Select, "UNSAFE_componentWillMount", this, 3)([]);
}
// 根据value和计算后的dataSource，更新value对应的详细数据valueDataSource
if (typeof this.state.value !== 'undefined') {
this.valueDataSource = (0, _util2.getValueDataSource)(this.state.value, this.valueDataSource.mapValueDS, this.dataStore.getMapDS());
}
if (isIE9) {
this.ie9Hack();
}
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if ('searchValue' in nextProps) {
this.dataStore.setOptions({
key: nextProps.searchValue
});
this.setState({
searchValue: typeof nextProps.searchValue === 'undefined' ? '' : nextProps.searchValue
});
}
if (this.props.mode !== nextProps.mode) {
this.dataStore.setOptions({
addonKey: nextProps.mode === 'tag'
});
}
this.dataStore.setOptions({
filter: nextProps.filter,
filterLocal: nextProps.filterLocal
});
if (nextProps.children !== this.props.children || nextProps.dataSource !== this.props.dataSource) {
var dataSource = this.setDataSource(nextProps);
this.setState({
dataSource: dataSource
});
// 远程数据有更新，并且还有搜索框
if (nextProps.showSearch && !nextProps.filterLocal && !nextProps.popupContent) {
this.setFirstHightLightKeyForMenu();
}
}
if ('value' in nextProps) {
this.setState({
value: nextProps.value
});
this.valueDataSource = (0, _util2.getValueDataSource)(nextProps.value, this.valueDataSource.mapValueDS, this.dataStore.getMapDS());
this.updateSelectAllYet(this.valueDataSource.value);
} else if ('defaultValue' in nextProps && nextProps.defaultValue === this.valueDataSource.value && (nextProps.children !== this.props.children || nextProps.dataSource !== this.props.dataSource)) {
// has defaultValue and value not changed and dataSource changed
this.valueDataSource = (0, _util2.getValueDataSource)(nextProps.defaultValue, this.valueDataSource.mapValueDS, this.dataStore.getMapDS());
}
if ('visible' in nextProps) {
this.setState({
visible: nextProps.visible
});
}
if (!this.props.visible && nextProps.visible) {
// 当面板由收起到展开时，面板显示完整的数据（无过滤效果）
this.setState({
dataSource: this.dataStore.getOriginDS()
});
// 更新菜单数据
this.dataStore.updateByKey('');
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (isIE9) {
this.ie9Hack();
}
_superPropGet(Select, "componentDidMount", this, 3)([]);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var props = this.props;
// 随着输入自动伸展
if (/tag|multiple/.test(props.mode) && prevState.searchValue !== this.state.searchValue) {
this.syncWidth();
} else {
return _superPropGet(Select, "componentDidUpdate", this, 3)([prevProps, prevState]);
}
}
}, {
key: "render",
value: function render() {
var mode = this.props.mode;
var props = _objectSpread({}, this.props);
// forbid to close Popup by click Input while hasSearch
if (this.hasSearch()) {
props.canCloseByTrigger = false;
}
if (mode === 'single') {
props.cache = true;
}
return _superPropGet(Select, "render", this, 3)([props]);
}
}]);
}(_base["default"]);
_defineProperty(Select, "propTypes", _objectSpread(_objectSpread({}, _base["default"].propTypes), {}, {
trigger: _propTypes["default"].element,
/**
* 选择器模式
*/
mode: _propTypes["default"].oneOf(['single', 'multiple', 'tag']),
/**
* 当前值，用于受控模式
*/
value: _propTypes["default"].any,
/**
* 初始的默认值
*/
defaultValue: _propTypes["default"].any,
/**
* Select发生改变时触发的回调
* @param {*} value 选中的值
* @param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'
* @param {*} item 选中的值的对象数据 (useDetailValue=false有效)
*/
onChange: _propTypes["default"].func,
/**
* 传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)
*/
dataSource: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape({
value: _propTypes["default"].any,
label: _propTypes["default"].any,
disabled: _propTypes["default"].bool,
children: _propTypes["default"].array
}), _propTypes["default"].bool, _propTypes["default"].number, _propTypes["default"].string])),
/**
* 是否有边框
*/
hasBorder: _propTypes["default"].bool,
/**
* 是否有下拉箭头
*/
hasArrow: _propTypes["default"].bool,
/**
* 展开后是否能搜索（tag 模式下固定为true）
*/
showSearch: _propTypes["default"].bool,
/**
* 当搜索框值变化时回调
* @param {String} value 数据
*/
onSearch: _propTypes["default"].func,
/**
* 当搜索框值被清空时候的回调
* @param {String} actionType 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)
*/
onSearchClear: _propTypes["default"].func,
/**
* 多选模式下是否有全选功能
*/
hasSelectAll: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
/**
* 填充到选择框里的值的 key
*/
fillProps: _propTypes["default"].string,
/**
* onChange 返回的 value 使用 dataSource 的对象
*/
useDetailValue: _propTypes["default"].bool,
/**
* dataSource 变化的时是否保留已选的内容
*/
cacheValue: _propTypes["default"].bool,
/**
* 渲染 Select 展现内容的方法
* @param {Object} item 渲染节点的item
* @return {ReactNode} 展现内容
* @default item => item.label \|\| item.value
*/
valueRender: _propTypes["default"].func,
/**
* 渲染 tag class 的方法
* @param {Object} item 渲染节点的item
* @return {String} class name
*/
tagClassSetter: _propTypes["default"].func,
/**
* 渲染 MenuItem 内容的方法
* @param {Object} item 渲染节点的item
* @param {String} searchValue 搜索关键字（如果开启搜索）
* @return {ReactNode} item node
*/
itemRender: _propTypes["default"].func,
/**
* 弹层内容为空的文案
*/
notFoundContent: _propTypes["default"].node,
style: _propTypes["default"].object,
/**
* 受控搜索值，一般不需要设置
* @type {[type]}
*/
searchValue: _propTypes["default"].string,
/**
* 是否一行显示，仅在 mode 为 multiple 的时候生效
*/
tagInline: _propTypes["default"].bool,
/**
* 最多显示多少个 tag
*/
maxTagCount: _propTypes["default"].number,
/**
* 隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用
* @param {number} selectedValues 当前已选中的元素
* @param {number} totalValues 总待选元素
*/
maxTagPlaceholder: _propTypes["default"].func,
/**
* 选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)
*/
hiddenSelected: _propTypes["default"].bool,
/**
* tag 删除回调
* @param {object} item 渲染节点的item
*/
onRemove: _propTypes["default"].func,
/**
* 焦点事件
*/
onFocus: _propTypes["default"].func,
/**
* 是否自动高亮第一个选项
*/
// highlightFirstItem: PropTypes.bool,
/**
* 失去焦点事件
*/
onBlur: _propTypes["default"].func,
onKeyDown: _propTypes["default"].func,
locale: _propTypes["default"].object,
gray: _propTypes["default"].bool
}));
_defineProperty(Select, "defaultProps", _objectSpread(_objectSpread({}, _base["default"].defaultProps), {}, {
locale: _zhCn["default"].Select,
mode: 'single',
showSearch: false,
cacheValue: true,
tagInline: false,
onSearch: noop,
onSearchClear: noop,
hasArrow: true,
onRemove: noop,
// highlightFirstItem: true,
valueRender: function valueRender(item) {
return item.label || item.value;
},
onKeyDown: noop,
onFocus: noop,
onBlur: noop
}));
_defineProperty(Select, "displayName", 'Select');
var _default = exports["default"] = Select;