ant-design/components/select/index.tsx

175 lines
4.6 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import PropTypes from 'prop-types';
2017-08-07 11:35:22 +08:00
import RcSelect, { Option, OptGroup } from 'rc-select';
2015-12-06 17:13:06 +08:00
import classNames from 'classnames';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale-provider/default';
2015-06-09 21:16:59 +08:00
export interface AbstractSelectProps {
prefixCls?: string;
className?: string;
size?: 'default' | 'large' | 'small';
2016-10-24 16:30:38 +08:00
notFoundContent?: React.ReactNode | null;
2016-08-10 09:46:56 +08:00
transitionName?: string;
choiceTransitionName?: string;
showSearch?: boolean;
2016-08-10 09:46:56 +08:00
allowClear?: boolean;
disabled?: boolean;
style?: React.CSSProperties;
2018-01-27 14:27:27 +08:00
tabIndex?: number;
placeholder?: string;
defaultActiveFirstOption?: boolean;
dropdownClassName?: string;
dropdownStyle?: React.CSSProperties;
dropdownMenuStyle?: React.CSSProperties;
onSearch?: (value: string) => any;
filterOption?: boolean | ((inputValue: string, option: React.ReactElement<OptionProps>) => any);
}
export interface LabeledValue {
key: string;
label: React.ReactNode;
}
export type SelectValue = string | any[] | LabeledValue | LabeledValue[];
export interface SelectProps extends AbstractSelectProps {
value?: SelectValue;
defaultValue?: SelectValue;
mode?: 'default' | 'multiple' | 'tags' | 'combobox';
optionLabelProp?: string;
onChange?: (value: SelectValue) => void;
2016-08-10 09:46:56 +08:00
onSelect?: (value: SelectValue, option: Object) => any;
onDeselect?: (value: SelectValue) => any;
onBlur?: () => any;
onFocus?: () => any;
onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
maxTagCount?: number;
2018-01-11 10:03:10 +08:00
maxTagPlaceholder?: React.ReactNode | ((omittedValues: SelectValue[]) => React.ReactNode);
2016-08-10 09:46:56 +08:00
dropdownMatchSelectWidth?: boolean;
optionFilterProp?: string;
labelInValue?: boolean;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
tokenSeparators?: string[];
getInputElement?: () => React.ReactElement<any>;
autoFocus?: boolean;
2016-08-10 09:46:56 +08:00
}
export interface OptionProps {
disabled?: boolean;
value?: any;
title?: string;
children?: React.ReactNode;
}
export interface OptGroupProps {
label?: React.ReactNode;
}
export interface SelectLocale {
notFoundContent?: string;
}
const SelectPropTypes = {
prefixCls: PropTypes.string,
className: PropTypes.string,
size: PropTypes.oneOf(['default', 'large', 'small']),
combobox: PropTypes.bool,
notFoundContent: PropTypes.any,
showSearch: PropTypes.bool,
optionLabelProp: PropTypes.string,
transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string,
};
// => It is needless to export the declaration of below two inner components.
// export { Option, OptGroup };
2016-08-22 17:26:14 +08:00
export default class Select extends React.Component<SelectProps, {}> {
static Option = Option as React.ClassicComponentClass<OptionProps>;
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
static defaultProps = {
prefixCls: 'ant-select',
2016-08-10 09:46:56 +08:00
showSearch: false,
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
2016-07-13 11:14:24 +08:00
};
static propTypes = SelectPropTypes;
private rcSelect: any;
focus() {
this.rcSelect.focus();
}
blur() {
this.rcSelect.blur();
}
saveSelect = (node: any) => {
this.rcSelect = node;
}
getNotFoundContent(locale: SelectLocale) {
const { notFoundContent, mode } = this.props;
const isCombobox = mode === 'combobox';
if (isCombobox) {
// AutoComplete don't have notFoundContent defaultly
return notFoundContent === undefined ? null : notFoundContent;
}
return notFoundContent === undefined ? locale.notFoundContent : notFoundContent;
}
renderSelect = (locale: SelectLocale) => {
const {
2016-08-10 09:46:56 +08:00
prefixCls,
2016-10-24 16:30:38 +08:00
className = '',
2016-08-10 09:46:56 +08:00
size,
mode,
...restProps,
2015-12-06 17:13:06 +08:00
} = this.props;
const cls = classNames({
2016-04-06 15:50:58 +08:00
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
}, className);
2015-11-12 21:28:02 +08:00
let { optionLabelProp } = this.props;
2017-11-30 09:53:32 +08:00
const isCombobox = mode === 'combobox';
if (isCombobox) {
// children 带 dom 结构时,无法填入输入框
optionLabelProp = optionLabelProp || 'value';
2015-08-23 16:00:05 +08:00
}
2015-12-06 17:13:06 +08:00
const modeConfig = {
2017-11-30 09:53:32 +08:00
multiple: mode === 'multiple',
tags: mode === 'tags',
combobox: isCombobox,
};
2015-06-15 17:17:23 +08:00
return (
<RcSelect
{...restProps}
{...modeConfig}
prefixCls={prefixCls}
2015-12-06 17:13:06 +08:00
className={cls}
optionLabelProp={optionLabelProp || 'children'}
notFoundContent={this.getNotFoundContent(locale)}
ref={this.saveSelect}
/>
2015-06-15 17:17:23 +08:00
);
}
render() {
return (
<LocaleReceiver
componentName="Select"
defaultLocale={defaultLocale.Select}
>
{this.renderSelect}
</LocaleReceiver>
);
}
}