mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-03 07:47:18 +00:00
1188 lines
35 KiB
JavaScript
1188 lines
35 KiB
JavaScript
/* eslint-disable valid-jsdoc */
|
||
import React from 'react';
|
||
import PropTypes from 'prop-types';
|
||
import classNames from 'classnames';
|
||
import { func, obj, KEYCODE, env, str } from '../util';
|
||
import Tag from '../tag';
|
||
import Input from '../input';
|
||
import Icon from '../icon';
|
||
import zhCN from '../locale/zh-cn';
|
||
import Base from './base';
|
||
import { isNull, getValueDataSource, valueToSelectKey } from './util';
|
||
|
||
const { bindCtx, noop } = func;
|
||
const isIE9 = env.ieVersion === 9;
|
||
|
||
/**
|
||
* 无障碍化注意事项:
|
||
* 1. Select 无搜索情况下，不应该让 Input 可focus，此时外层wrap必须可focus，并且需要相应focus事件让外边框发生变化
|
||
*
|
||
* TODO: hightLight 后续改造注意点
|
||
* 1. hightLight 跟随点击变化(fixed) 2. 弹窗打开时根据 是否高亮第一个选项的 api开关设置是否hightLight 第一项
|
||
*/
|
||
|
||
// 自定义弹层：1. 不需要关心Menu的点击事件 2. 不需要关心dataSource变化
|
||
|
||
/**
|
||
* Select
|
||
*/
|
||
class Select extends Base {
|
||
static propTypes = {
|
||
...Base.propTypes,
|
||
/**
|
||
* 选择器模式
|
||
*/
|
||
mode: PropTypes.oneOf(['single', 'multiple', 'tag']),
|
||
/**
|
||
* 当前值，用于受控模式
|
||
*/
|
||
value: PropTypes.any,
|
||
/**
|
||
* 初始的默认值
|
||
*/
|
||
defaultValue: PropTypes.any,
|
||
/**
|
||
* Select发生改变时触发的回调
|
||
* @param {*} value 选中的值
|
||
* @param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'
|
||
* @param {*} item 选中的值的对象数据 (useDetailValue=false有效)
|
||
*/
|
||
onChange: PropTypes.func,
|
||
/**
|
||
* 传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)
|
||
*/
|
||
dataSource: PropTypes.arrayOf(
|
||
PropTypes.oneOfType([
|
||
PropTypes.shape({
|
||
value: PropTypes.any,
|
||
label: PropTypes.any,
|
||
disabled: PropTypes.bool,
|
||
children: PropTypes.array,
|
||
}),
|
||
PropTypes.bool,
|
||
PropTypes.number,
|
||
PropTypes.string,
|
||
])
|
||
),
|
||
/**
|
||
* 是否有边框
|
||
*/
|
||
hasBorder: PropTypes.bool,
|
||
/**
|
||
* 是否有下拉箭头
|
||
*/
|
||
hasArrow: PropTypes.bool,
|
||
/**
|
||
* 展开后是否能搜索（tag 模式下固定为true）
|
||
*/
|
||
showSearch: PropTypes.bool,
|
||
/**
|
||
* 当搜索框值变化时回调
|
||
* @param {String} value 数据
|
||
*/
|
||
onSearch: PropTypes.func,
|
||
/**
|
||
* 当搜索框值被清空时候的回调
|
||
* @param {String} actionType 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)
|
||
*/
|
||
onSearchClear: PropTypes.func,
|
||
/**
|
||
* 多选模式下是否有全选功能
|
||
*/
|
||
hasSelectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
||
/**
|
||
* 填充到选择框里的值的 key
|
||
*/
|
||
fillProps: PropTypes.string,
|
||
/**
|
||
* onChange 返回的 value 使用 dataSource 的对象
|
||
*/
|
||
useDetailValue: PropTypes.bool,
|
||
/**
|
||
* dataSource 变化的时是否保留已选的内容
|
||
*/
|
||
cacheValue: PropTypes.bool,
|
||
/**
|
||
* 渲染 Select 展现内容的方法
|
||
* @param {Object} item 渲染节点的item
|
||
* @return {ReactNode} 展现内容
|
||
* @default item => item.label \|\| item.value
|
||
*/
|
||
valueRender: PropTypes.func,
|
||
/**
|
||
* 渲染 MenuItem 内容的方法
|
||
* @param {Object} item 渲染节点的item
|
||
* @param {String} searchValue 搜索关键字（如果开启搜索）
|
||
* @return {ReactNode} item node
|
||
*/
|
||
itemRender: PropTypes.func,
|
||
/**
|
||
* 弹层内容为空的文案
|
||
*/
|
||
notFoundContent: PropTypes.node,
|
||
style: PropTypes.object,
|
||
/**
|
||
* 受控搜索值，一般不需要设置
|
||
* @type {[type]}
|
||
*/
|
||
searchValue: PropTypes.string,
|
||
/**
|
||
* 是否一行显示，仅在 mode 为 multiple 的时候生效
|
||
*/
|
||
tagInline: PropTypes.bool,
|
||
/**
|
||
* 最多显示多少个 tag
|
||
*/
|
||
maxTagCount: PropTypes.number,
|
||
/**
|
||
* 隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用
|
||
* @param {number} selectedValues 当前已选中的元素
|
||
* @param {number} totalValues 总待选元素
|
||
*/
|
||
maxTagPlaceholder: PropTypes.func,
|
||
/**
|
||
* 选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)
|
||
*/
|
||
hiddenSelected: PropTypes.bool,
|
||
/**
|
||
* tag 删除回调
|
||
* @param {object} item 渲染节点的item
|
||
*/
|
||
onRemove: PropTypes.func,
|
||
/**
|
||
* 焦点事件
|
||
*/
|
||
onFocus: PropTypes.func,
|
||
/**
|
||
* 是否自动高亮第一个选项
|
||
*/
|
||
// highlightFirstItem: PropTypes.bool,
|
||
/**
|
||
* 失去焦点事件
|
||
*/
|
||
onBlur: PropTypes.func,
|
||
onMouseEnter: PropTypes.func,
|
||
onMouseLeave: PropTypes.func,
|
||
onKeyDown: PropTypes.func,
|
||
locale: PropTypes.object,
|
||
};
|
||
|
||
static defaultProps = {
|
||
...Base.defaultProps,
|
||
locale: zhCN.Select,
|
||
mode: 'single',
|
||
showSearch: false,
|
||
cacheValue: true,
|
||
tagInline: false,
|
||
onSearch: noop,
|
||
onSearchClear: noop,
|
||
hasArrow: true,
|
||
onRemove: noop,
|
||
// highlightFirstItem: true,
|
||
valueRender: item => {
|
||
return item.label || item.value;
|
||
},
|
||
onKeyDown: noop,
|
||
onFocus: noop,
|
||
onBlur: noop,
|
||
onMouseEnter: noop,
|
||
onMouseLeave: noop,
|
||
};
|
||
|
||
static displayName = 'Select';
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
// @extend Base state
|
||
Object.assign(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}}
|
||
};
|
||
|
||
bindCtx(this, [
|
||
'handleMenuSelect',
|
||
'handleItemClick',
|
||
'handleSearch',
|
||
'handleSearchKeyDown',
|
||
'handleSelectAll',
|
||
'maxTagPlaceholder',
|
||
]);
|
||
}
|
||
|
||
componentWillMount() {
|
||
this.dataStore.setOptions({
|
||
key: this.state.searchValue,
|
||
addonKey: this.props.mode === 'tag', // tag 模式手动输入的数据
|
||
});
|
||
|
||
super.componentWillMount();
|
||
|
||
// 根据value和计算后的dataSource，更新value对应的详细数据valueDataSource
|
||
if (typeof this.state.value !== 'undefined') {
|
||
this.valueDataSource = getValueDataSource(
|
||
this.state.value,
|
||
this.valueDataSource.mapValueDS,
|
||
this.dataStore.getMapDS()
|
||
);
|
||
}
|
||
|
||
if (isIE9) {
|
||
this.ie9Hack();
|
||
}
|
||
}
|
||
|
||
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
|
||
) {
|
||
const dataSource = this.setDataSource(nextProps);
|
||
this.setState({
|
||
dataSource,
|
||
});
|
||
|
||
// 远程数据有更新，并且还有搜索框
|
||
if (
|
||
nextProps.showSearch &&
|
||
!nextProps.filterLocal &&
|
||
!nextProps.popupContent
|
||
) {
|
||
this.setFirstHightLightKeyForMenu();
|
||
}
|
||
}
|
||
|
||
if ('value' in nextProps) {
|
||
this.setState({
|
||
value: nextProps.value,
|
||
});
|
||
|
||
this.valueDataSource = 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 = getValueDataSource(
|
||
nextProps.defaultValue,
|
||
this.valueDataSource.mapValueDS,
|
||
this.dataStore.getMapDS()
|
||
);
|
||
}
|
||
|
||
if ('visible' in nextProps) {
|
||
this.setState({
|
||
visible: nextProps.visible,
|
||
});
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
if (isIE9) {
|
||
this.ie9Hack();
|
||
}
|
||
super.componentDidMount();
|
||
}
|
||
|
||
// ie9 下 table-cell 布局不支持宽度超出隐藏
|
||
ie9Hack() {
|
||
try {
|
||
const width = this.selectDOM.currentStyle.width;
|
||
this.setState({
|
||
fixWidth: width !== 'auto',
|
||
});
|
||
} catch (e) {
|
||
//
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(prevProps, prevState) {
|
||
const props = this.props;
|
||
// 随着输入自动伸展
|
||
if (
|
||
/tag|multiple/.test(props.mode) &&
|
||
prevState.searchValue !== this.state.searchValue
|
||
) {
|
||
this.syncWidth();
|
||
} else {
|
||
return super.componentDidUpdate(prevProps, prevState);
|
||
}
|
||
}
|
||
|
||
useDetailValue() {
|
||
const { popupContent, useDetailValue, dataSource } = this.props;
|
||
return useDetailValue || (popupContent && !dataSource);
|
||
}
|
||
|
||
hasSearch() {
|
||
const { showSearch, mode } = this.props;
|
||
return showSearch || mode === 'tag';
|
||
}
|
||
|
||
/**
|
||
* Menu.Item onSelect
|
||
* @private
|
||
* @param {Array<string>} keys
|
||
* @
|
||
*/
|
||
handleMenuSelect(keys, item) {
|
||
const { mode, readOnly, disabled } = this.props;
|
||
|
||
if (readOnly || disabled) {
|
||
return false;
|
||
}
|
||
|
||
const isSingle = mode === 'single';
|
||
|
||
if (isSingle) {
|
||
// 单选
|
||
return this.handleSingleSelect(keys[0], 'itemClick');
|
||
} else {
|
||
// 正常多选
|
||
return this.handleMultipleSelect(
|
||
keys,
|
||
'itemClick',
|
||
item.props && item.props._key
|
||
);
|
||
}
|
||
}
|
||
|
||
handleItemClick() {
|
||
this.focusInput();
|
||
}
|
||
|
||
/**
|
||
* 单选模式
|
||
*/
|
||
handleSingleSelect(key, triggerType) {
|
||
const { cacheValue } = this.props;
|
||
// get data only from dataStore while cacheValue=false
|
||
const itemObj = 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
|
||
*/
|
||
handleMultipleSelect(keys, triggerType, key, keepSearchValue) {
|
||
const itemObj = getValueDataSource(
|
||
keys,
|
||
this.valueDataSource.mapValueDS,
|
||
this.dataStore.getMapDS()
|
||
);
|
||
|
||
const { cacheValue, mode, hiddenSelected } = this.props;
|
||
|
||
// cache those value maybe not exists in dataSource
|
||
if (cacheValue || mode === 'tag') {
|
||
this.valueDataSource = itemObj;
|
||
}
|
||
|
||
if (hiddenSelected) {
|
||
this.setVisible(false, triggerType);
|
||
}
|
||
|
||
// 因为搜索后会设置 hightLight 为第一个item，menu渲染会自动滚动到 hightLight 的元素上面。
|
||
// 所以设置 hightLight 为当前选中项避免滚动
|
||
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(() => {
|
||
this.handleSearchClear(triggerType);
|
||
});
|
||
}
|
||
}
|
||
|
||
updateSelectAllYet(value) {
|
||
// multiple mode
|
||
// is current state select all or not
|
||
this.selectAllYet = false;
|
||
if (this.props.hasSelectAll && Array.isArray(value)) {
|
||
const selectAllValues = this.dataStore
|
||
.getEnableDS()
|
||
.map(item => item.value);
|
||
|
||
if (selectAllValues.length <= value.length) {
|
||
this.selectAllYet = true;
|
||
|
||
selectAllValues.forEach(val => {
|
||
if (value.indexOf(val) === -1) {
|
||
this.selectAllYet = false;
|
||
return;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
handleSearchValue(value) {
|
||
if (this.state.searchValue === value) {
|
||
return;
|
||
}
|
||
|
||
const { filterLocal } = this.props;
|
||
|
||
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
|
||
*/
|
||
handleSearch(value) {
|
||
this.handleSearchValue(value);
|
||
|
||
// inputing should trigger popup open
|
||
if (!this.state.visible && value) {
|
||
this.setVisible(true);
|
||
}
|
||
|
||
this.props.onSearch(value);
|
||
}
|
||
|
||
handleSearchClear(triggerType) {
|
||
this.handleSearchValue('');
|
||
this.props.onSearchClear(triggerType);
|
||
}
|
||
|
||
// 搜索框 keyDown 事件
|
||
handleSearchKeyDown(e) {
|
||
const {
|
||
popupContent,
|
||
onKeyDown,
|
||
showSearch,
|
||
mode,
|
||
hasClear,
|
||
onToggleHighlightItem,
|
||
readOnly,
|
||
disabled,
|
||
} = this.props;
|
||
|
||
if (popupContent) {
|
||
return onKeyDown(e);
|
||
}
|
||
|
||
const proxy = 'search';
|
||
const hasSearch = this.hasSearch();
|
||
|
||
switch (e.keyCode) {
|
||
case KEYCODE.UP:
|
||
e.preventDefault();
|
||
onToggleHighlightItem(this.toggleHighlightItem(-1, e), 'up');
|
||
break;
|
||
case KEYCODE.DOWN:
|
||
e.preventDefault();
|
||
onToggleHighlightItem(this.toggleHighlightItem(1, e), 'down');
|
||
break;
|
||
case KEYCODE.ENTER:
|
||
e.preventDefault();
|
||
if (readOnly || disabled) {
|
||
break;
|
||
}
|
||
this.chooseHighlightItem(proxy, e);
|
||
break;
|
||
case KEYCODE.ESC:
|
||
e.preventDefault();
|
||
this.state.visible && this.setVisible(false, 'keyDown');
|
||
break;
|
||
case KEYCODE.SPACE:
|
||
e.stopPropagation();
|
||
!hasSearch && e.preventDefault();
|
||
break;
|
||
case KEYCODE.BACKSPACE:
|
||
if (readOnly || disabled) {
|
||
break;
|
||
}
|
||
if ((mode === 'multiple' && showSearch) || mode === 'tag') {
|
||
// 在多选并且有搜索的情况下，删除最后一个 tag
|
||
const valueDS = this.valueDataSource.valueDS;
|
||
if (
|
||
valueDS &&
|
||
valueDS.length &&
|
||
!valueDS[valueDS.length - 1].disabled
|
||
) {
|
||
this.handleDeleteTag(e);
|
||
}
|
||
} else if (
|
||
mode === 'single' &&
|
||
hasClear &&
|
||
!this.state.visible
|
||
) {
|
||
// 单选、非展开、并且可清除的情况，允许按删除键清除
|
||
this.handleClear(e);
|
||
}
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
|
||
onKeyDown(e);
|
||
}
|
||
|
||
chooseMultipleItem(key) {
|
||
const value = this.state.value || [];
|
||
const keys = value.map(v => {
|
||
return valueToSelectKey(v);
|
||
});
|
||
|
||
let keepSearchValue = false;
|
||
|
||
const index = keys.map(v => `${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
|
||
chooseHighlightItem(proxy, e) {
|
||
const { mode } = this.props;
|
||
|
||
if (!this.state.visible) {
|
||
// input tag by itself
|
||
if (mode === 'tag' && this.state.searchValue) {
|
||
this.chooseMultipleItem(this.state.searchValue);
|
||
}
|
||
return false;
|
||
}
|
||
|
||
const { highlightKey } = this.state;
|
||
|
||
// 没有高亮选项 或者 没有可选菜单
|
||
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
|
||
*/
|
||
handleTagClose(item) {
|
||
const { readOnly } = this.props;
|
||
if (readOnly) return false;
|
||
if (this.useDetailValue()) {
|
||
const value = this.state.value.filter(v => {
|
||
return item.value !== v.value;
|
||
});
|
||
|
||
this.handleChange(value, 'tag');
|
||
} else {
|
||
// filter out current item, and then call handleMenuSelect
|
||
const value = this.state.value.filter(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
|
||
*/
|
||
handleDeleteTag(e) {
|
||
const value = this.state.value;
|
||
const searchValue = this.state.searchValue;
|
||
|
||
if (searchValue || !value || !value.length) {
|
||
return false;
|
||
}
|
||
|
||
e.preventDefault();
|
||
|
||
const 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
|
||
*/
|
||
handleSelectAll(e) {
|
||
e && e.preventDefault();
|
||
let nextValues;
|
||
|
||
if (this.selectAllYet) {
|
||
nextValues = [];
|
||
} else {
|
||
nextValues = this.dataStore.getEnableDS().map(item => item.value);
|
||
}
|
||
|
||
// 直接传 values，减少 toString 操作
|
||
this.handleMultipleSelect(nextValues, 'selectAll');
|
||
}
|
||
|
||
handleVisibleChange(visible, type) {
|
||
this.setVisible(visible, type);
|
||
}
|
||
|
||
afterClose() {
|
||
// 关闭的时候清空搜索值
|
||
if (this.hasSearch()) {
|
||
this.handleSearchClear('popupClose');
|
||
}
|
||
}
|
||
|
||
maxTagPlaceholder(selectedValues, totalValues) {
|
||
const { locale } = this.props;
|
||
|
||
return `${str.template(locale.maxTagPlaceholder, {
|
||
selected: selectedValues.length,
|
||
total: totalValues.length,
|
||
})}`;
|
||
}
|
||
|
||
/**
|
||
* 如果用户是自定义的弹层，则直接以 value 为准，不再校验 dataSource
|
||
* @param {object} props
|
||
*/
|
||
renderValues() {
|
||
const {
|
||
prefix,
|
||
mode,
|
||
size,
|
||
valueRender,
|
||
fillProps,
|
||
disabled,
|
||
maxTagCount,
|
||
maxTagPlaceholder,
|
||
tagInline,
|
||
} = this.props;
|
||
let value = this.state.value;
|
||
|
||
if (isNull(value)) {
|
||
return null;
|
||
}
|
||
|
||
// get detail value
|
||
if (!this.useDetailValue()) {
|
||
if (value === this.valueDataSource.value) {
|
||
value = this.valueDataSource.valueDS;
|
||
} else {
|
||
value = getValueDataSource(
|
||
value,
|
||
this.valueDataSource.mapValueDS,
|
||
this.dataStore.getMapDS()
|
||
).valueDS;
|
||
}
|
||
}
|
||
|
||
if (mode === 'single') {
|
||
if (!value) {
|
||
return null;
|
||
}
|
||
|
||
const retvalue =
|
||
fillProps && fillProps in value
|
||
? value[fillProps]
|
||
: valueRender(value);
|
||
// 0 => '0'
|
||
return typeof retvalue === 'number'
|
||
? retvalue.toString()
|
||
: retvalue;
|
||
} else if (value) {
|
||
let limitedCountValue = value;
|
||
let maxTagPlaceholderEl;
|
||
const totalValue = this.dataStore.getFlattenDS();
|
||
const holder =
|
||
'maxTagPlaceholder' in this.props
|
||
? maxTagPlaceholder
|
||
: this.maxTagPlaceholder;
|
||
|
||
if (
|
||
maxTagCount !== undefined &&
|
||
value.length > maxTagCount &&
|
||
!tagInline
|
||
) {
|
||
limitedCountValue = limitedCountValue.slice(0, maxTagCount);
|
||
maxTagPlaceholderEl = (
|
||
<Tag
|
||
key="_count"
|
||
type="primary"
|
||
size={size === 'large' ? 'medium' : 'small'}
|
||
animation={false}
|
||
>
|
||
{holder(value, totalValue)}
|
||
</Tag>
|
||
);
|
||
}
|
||
|
||
if (value.length > 0 && tagInline) {
|
||
maxTagPlaceholderEl = (
|
||
<div className={`${prefix}select-tag-compact`} key="_count">
|
||
{holder(value, totalValue)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
value = limitedCountValue;
|
||
if (!Array.isArray(value)) {
|
||
value = [value];
|
||
}
|
||
|
||
const selectedValueNodes = value.map(v => {
|
||
if (!v) {
|
||
return null;
|
||
}
|
||
const labelNode = fillProps ? v[fillProps] : valueRender(v);
|
||
|
||
return (
|
||
<Tag
|
||
key={v.value}
|
||
disabled={disabled || v.disabled}
|
||
type="primary"
|
||
size={size === 'large' ? 'medium' : 'small'}
|
||
animation={false}
|
||
onClose={this.handleTagClose.bind(this, v)}
|
||
closable
|
||
>
|
||
{labelNode}
|
||
</Tag>
|
||
);
|
||
});
|
||
|
||
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
|
||
*/
|
||
handleWrapClick = e => {
|
||
// ignore click on input to choose text
|
||
if (e.target.nodeName !== 'INPUT') {
|
||
e.preventDefault();
|
||
}
|
||
this.focusInput();
|
||
};
|
||
|
||
handleArrowClick = 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);
|
||
};
|
||
|
||
handleClear = e => {
|
||
e.stopPropagation();
|
||
this.handleChange(undefined, 'clear');
|
||
};
|
||
|
||
hasClear() {
|
||
const { hasClear, readOnly, disabled, showSearch } = this.props;
|
||
const { value, visible } = this.state;
|
||
|
||
return (
|
||
typeof value !== 'undefined' &&
|
||
value !== null &&
|
||
hasClear &&
|
||
!readOnly &&
|
||
!disabled &&
|
||
!(showSearch && visible)
|
||
);
|
||
}
|
||
|
||
/**
|
||
* render arrow
|
||
* @param {object} props
|
||
* @param {function} [clickHandler]
|
||
*/
|
||
renderExtraNode() {
|
||
const { hasArrow, hasClear, prefix } = this.props;
|
||
|
||
const ret = [];
|
||
|
||
if (hasArrow) {
|
||
ret.push(
|
||
<span
|
||
key="arrow"
|
||
aria-hidden
|
||
onClick={this.handleArrowClick}
|
||
className={`${prefix}select-arrow`}
|
||
>
|
||
<Icon type="arrow-down" />
|
||
</span>
|
||
);
|
||
}
|
||
|
||
// 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(
|
||
<span
|
||
key="clear"
|
||
aria-hidden
|
||
onClick={this.handleClear}
|
||
className={`${prefix}select-clear`}
|
||
>
|
||
<Icon type="delete-filling" />
|
||
</span>
|
||
);
|
||
}
|
||
|
||
return ret;
|
||
}
|
||
|
||
/**
|
||
* 选择器
|
||
* @override
|
||
* @param {object} props
|
||
*/
|
||
renderSelect() {
|
||
const {
|
||
prefix,
|
||
showSearch,
|
||
placeholder,
|
||
mode,
|
||
size,
|
||
className,
|
||
style,
|
||
readOnly,
|
||
disabled,
|
||
hasBorder,
|
||
label,
|
||
locale,
|
||
state,
|
||
onBlur,
|
||
onFocus,
|
||
onMouseEnter,
|
||
onMouseLeave,
|
||
rtl,
|
||
} = this.props;
|
||
const others = obj.pickOthers(Select.propTypes, this.props);
|
||
const othersData = obj.pickAttrsWith(others, 'data-');
|
||
|
||
const visible = this.state.visible;
|
||
const isSingle = mode === 'single';
|
||
const hasSearch = this.hasSearch();
|
||
const valueNodes = this.renderValues();
|
||
|
||
// compatible with selectPlaceHolder. TODO: removed in 2.0 version
|
||
let _placeholder =
|
||
placeholder || locale.selectPlaceholder || locale.selectPlaceHolder;
|
||
if (valueNodes && valueNodes.length) {
|
||
_placeholder = null;
|
||
}
|
||
|
||
// 弹窗展开时将当前的值作为 placeholder，这个功能的前提是 valueNode 必须是一个字符串
|
||
if (
|
||
showSearch &&
|
||
visible &&
|
||
isSingle &&
|
||
typeof valueNodes === 'string'
|
||
) {
|
||
_placeholder = valueNodes;
|
||
}
|
||
|
||
// 下拉箭头
|
||
const extra = this.renderExtraNode();
|
||
|
||
const triggerClazz = classNames(
|
||
[
|
||
`${prefix}select`,
|
||
`${prefix}select-trigger`,
|
||
`${prefix}select-${mode}`,
|
||
`${prefix}${size}`,
|
||
className,
|
||
],
|
||
{
|
||
[`${prefix}active`]: visible, // 用于设置 searchInput 样式
|
||
[`${prefix}inactive`]: !visible, // 用于设置 searchInput 样式
|
||
[`${prefix}no-search`]: !hasSearch, // 用于判断是否将 searchInput 设置为 1px + 透明
|
||
[`${prefix}has-search`]: hasSearch, // 用于单选时展开后判断是否隐藏值
|
||
[`${prefix}select-in-ie`]: isIE9,
|
||
[`${prefix}select-in-ie-fixwidth`]: this.state.fixWidth,
|
||
[`${prefix}has-clear`]: this.hasClear(),
|
||
}
|
||
);
|
||
|
||
const valuetext = this.valueDataSource.valueDS
|
||
? this.valueDataSource.valueDS.label
|
||
: '';
|
||
return (
|
||
<span
|
||
{...othersData}
|
||
className={triggerClazz}
|
||
style={style}
|
||
dir={rtl ? 'rtl' : undefined}
|
||
ref={this.saveSelectRef}
|
||
onClick={this.handleWrapClick}
|
||
onMouseEnter={onMouseEnter}
|
||
onMouseLeave={onMouseLeave}
|
||
onMouseDown={this.handleWrapClick}
|
||
>
|
||
<Input
|
||
aria-valuetext={valuetext}
|
||
{...obj.pickOthers(othersData, others)}
|
||
role="combobox"
|
||
tabIndex={0}
|
||
aria-expanded={this.state.visible}
|
||
aria-disabled={disabled}
|
||
state={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={inputEl => {
|
||
return this.renderSearchInput(
|
||
valueNodes,
|
||
_placeholder,
|
||
inputEl
|
||
);
|
||
}}
|
||
onChange={this.handleSearch}
|
||
onKeyDown={this.handleSearchKeyDown}
|
||
onFocus={onFocus}
|
||
onBlur={onBlur}
|
||
className={`${prefix}select-inner`}
|
||
ref={this.saveInputRef}
|
||
/>
|
||
<span className={`${prefix}sr-only`} aria-live="polite">
|
||
{this.state.srReader}
|
||
</span>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
renderSearchInput(valueNodes, placeholder, inputEl) {
|
||
const { prefix, mode, tagInline } = this.props;
|
||
const isSingle = mode === 'single';
|
||
|
||
const mirrorText = this.state.searchValue;
|
||
|
||
const cls = classNames({
|
||
[`${prefix}select-values`]: true,
|
||
[`${prefix}input-text-field`]: true,
|
||
[`${prefix}select-compact`]: !isSingle && tagInline,
|
||
});
|
||
|
||
const searchInput = [
|
||
isSingle && valueNodes ? (
|
||
<em key="select-value">{valueNodes}</em>
|
||
) : (
|
||
valueNodes
|
||
),
|
||
];
|
||
const triggerSearch = (
|
||
<span
|
||
key="trigger-search"
|
||
className={`${prefix}select-trigger-search`}
|
||
>
|
||
{inputEl}
|
||
<span aria-hidden>{mirrorText || placeholder} </span>
|
||
</span>
|
||
);
|
||
|
||
if (!isSingle && tagInline) {
|
||
searchInput.unshift(triggerSearch);
|
||
} else {
|
||
searchInput.push(triggerSearch);
|
||
}
|
||
|
||
return <span className={cls}>{searchInput}</span>;
|
||
}
|
||
|
||
/**
|
||
* 渲染弹层的 header 内容
|
||
* @override
|
||
* @param {object} props
|
||
*/
|
||
renderMenuHeader() {
|
||
const { prefix, hasSelectAll, mode, menuProps } = this.props;
|
||
|
||
if (menuProps && 'header' in menuProps) {
|
||
return menuProps.header;
|
||
}
|
||
|
||
const sourceCount = this.dataStore.getEnableDS().length;
|
||
// 多选模式下才有全选
|
||
if (!hasSelectAll || mode === 'single' || !sourceCount) {
|
||
return null;
|
||
}
|
||
|
||
const text =
|
||
typeof hasSelectAll === 'boolean' ? 'Select All' : hasSelectAll;
|
||
|
||
const selectAllYet = this.selectAllYet;
|
||
|
||
const cls = classNames({
|
||
[`${prefix}select-all`]: true,
|
||
[`${prefix}selected`]: selectAllYet,
|
||
});
|
||
|
||
const clsInner = classNames({
|
||
[`${prefix}select-all-inner`]: true,
|
||
});
|
||
|
||
// remove style={{'lineHeight': 'unset'}} in next Y
|
||
// remove style={{'display': 'none'}} in next Y
|
||
return (
|
||
<div
|
||
key="all"
|
||
onClick={this.handleSelectAll}
|
||
className={cls}
|
||
style={{ lineHeight: 'unset' }}
|
||
>
|
||
{selectAllYet ? (
|
||
<Icon
|
||
className={`${prefix}menu-icon-selected`}
|
||
style={{ display: 'none' }}
|
||
type="select"
|
||
/>
|
||
) : null}
|
||
<span className={clsInner}>{text}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
render() {
|
||
const { mode } = this.props;
|
||
const props = { ...this.props };
|
||
|
||
// forbid to close Popup by click Input while hasSearch
|
||
if (this.hasSearch()) {
|
||
props.canCloseByTrigger = false;
|
||
}
|
||
if (mode === 'single') {
|
||
props.cache = true;
|
||
}
|
||
return super.render(props);
|
||
}
|
||
}
|
||
|
||
export default Select;
|