From 552fa228eecd719952c94f993f54bd9304e9ca1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= Date: Mon, 25 Jul 2016 17:46:45 +0800 Subject: [PATCH] feat: AutoComplete (#2490) --- components/auto-complete/demo/basic.md | 45 ++++++++++++++ components/auto-complete/demo/options.md | 50 ++++++++++++++++ components/auto-complete/index.en-US.md | 30 ++++++++++ components/auto-complete/index.tsx | 71 +++++++++++++++++++++++ components/auto-complete/index.zh-CN.md | 30 ++++++++++ components/auto-complete/style/index.less | 2 + components/index.tsx | 3 + components/select/demo/combobox.md | 5 ++ 8 files changed, 236 insertions(+) create mode 100644 components/auto-complete/demo/basic.md create mode 100644 components/auto-complete/demo/options.md create mode 100644 components/auto-complete/index.en-US.md create mode 100644 components/auto-complete/index.tsx create mode 100644 components/auto-complete/index.zh-CN.md create mode 100644 components/auto-complete/style/index.less diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md new file mode 100644 index 0000000000..eded8408bb --- /dev/null +++ b/components/auto-complete/demo/basic.md @@ -0,0 +1,45 @@ +--- +order: 0 +title: + zh-CN: 基本使用 + en-US: Basic Usage +--- + +## zh-CN + +基本使用。通过 dataSource 设置自动完成的数据源 + +## en-US + +Basic Usage, set datasource of autocomplete with `dataSource` property. + +````jsx +import { AutoComplete } from 'antd'; + +const Complete = React.createClass({ + getInitialState() { + return { + dataSource: [], + }; + }, + handleChange(value) { + this.setState({ + dataSource: [ + value, + value + value, + value + value + value, + ], + }); + }, + render() { + const { dataSource } = this.state; + return (); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md new file mode 100644 index 0000000000..b9166ef9dd --- /dev/null +++ b/components/auto-complete/demo/options.md @@ -0,0 +1,50 @@ +--- +order: 2 +title: + zh-CN: 自定义选项 + en-US: Customized +--- + +## zh-CN + +Datasource 的每一项是一个 `AutoComplete.Option`。通过 `AutoComplete.Option` 自定义下拉菜单。 + +## en-US + +Each datasource is an `AutoComplete.Option`. + + +````jsx +import { AutoComplete } from 'antd'; +const Option = AutoComplete.Option; + +const Complete = React.createClass({ + getInitialState() { + return { + dataSource: [], + }; + }, + handleChange(value) { + let dataSource; + if (!value || value.indexOf('@') >= 0) { + dataSource = []; + } else { + dataSource = ['gmail.com', '163.com', 'qq.com'].map((domain) => { + const email = `${value}@${domain}`; + return ; + }); + } + this.setState({ dataSource }); + }, + render() { + const { dataSource } = this.state; + return (); + }, +}); + +ReactDOM.render(, mountNode); +```` diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md new file mode 100644 index 0000000000..88df0d84c7 --- /dev/null +++ b/components/auto-complete/index.en-US.md @@ -0,0 +1,30 @@ +--- +category: Components +chinese: 自动完成 +type: Form Controls +cols: 1 +english: AutoComplete +--- + +Autocomplete function of input field. + +## When to use + +When need to use autocomplete function. + +## API + +```jsx +const dataSource = ['12345', '23456', '34567']; + +``` + + +| Property | Description | Type | Default | +|----------------|----------------------------------|------------|--------| +| dataSource | Data source for autocomplete | Array | | +| value | selcted option | String/Array/{key: String, label: React.Node}/Array<{key, label}> | - | +| defaultValue | Initial selected option. | string/Array | - | +| allowClear | Show clear button, effective in multiple mode only. | boolean | false | +| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - | +| disabled | Whether disabled select | boolean | false | diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx new file mode 100644 index 0000000000..063ce0092f --- /dev/null +++ b/components/auto-complete/index.tsx @@ -0,0 +1,71 @@ +import * as React from 'react'; +import Select, { Option, OptGroup } from '../select'; +import classNames from 'classnames'; + +export interface AutoCompleteProps { + size?: string; + className?: string; + notFoundContent?: Element; + dataSource: Array; + prefixCls?: string; + transitionName?: string; + optionLabelProp?: string; + choiceTransitionName?: string; + showSearch?: boolean; +} + +export default class AutoComplete extends React.Component { + static Option = Option; + static OptGroup = OptGroup; + + static defaultProps = { + prefixCls: 'ant-select', + transitionName: 'slide-up', + optionLabelProp: 'children', + choiceTransitionName: 'zoom', + showSearch: false, + }; + + static contextTypes = { + antLocale: React.PropTypes.object, + }; + + render() { + let { + size, className, notFoundContent, prefixCls, optionLabelProp, dataSource, + } = this.props; + + const cls = classNames({ + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + [className]: !!className, + [`${prefixCls}-show-search`]: true, + }); + + const options = dataSource ? dataSource.map((item, index) => { + switch (typeof item) { + case 'string': + return ; + case 'object': + if (React.isValidElement(item)) { + return React.cloneElement(item, { + key: item.key || index, + }); + } + return ; + default: + return []; + } + }) : []; + + return ( + + ); + } +} diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md new file mode 100644 index 0000000000..eab27c5c28 --- /dev/null +++ b/components/auto-complete/index.zh-CN.md @@ -0,0 +1,30 @@ +--- +category: Components +chinese: 自动完成 +type: Form Controls +cols: 1 +english: AutoComplete +--- + +输入框自动完成功能。 + +## 何时使用 + +需要自动完成时。 + +## API + +```jsx +const dataSource = ['12345', '23456', '34567']; + +``` + + +| 参数 | 说明 | 类型 | 默认值 | +|----------------|----------------------------------|------------|---------| +| dataSource | 自动完成的数据源 | Array | | +| value | 指定当前选中的条目 | String/Array/{key: String, label: React.Node}/Array<{key, label}> | 无 | +| defaultValue | 指定默认选中的条目 | String/Array/{key: String, label: React.Node}/Array<{key, label}> | 无 | +| allowClear | 支持清除, 单选模式有效 | boolean | false | +| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | 无 | +| disabled | 是否禁用 | boolean | false | \ No newline at end of file diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less new file mode 100644 index 0000000000..8401f0d117 --- /dev/null +++ b/components/auto-complete/style/index.less @@ -0,0 +1,2 @@ +@import "../../style/themes/default"; +@import "../../select/style/index"; \ No newline at end of file diff --git a/components/index.tsx b/components/index.tsx index 2058845ef4..da7e193ef0 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -1,6 +1,9 @@ import Affix from './affix'; export { Affix }; +import AutoComplete from './auto-complete'; +export { AutoComplete }; + import Alert from './alert'; export { Alert }; diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md index 26a14b1cf9..e3f3a93110 100644 --- a/components/select/demo/combobox.md +++ b/components/select/demo/combobox.md @@ -9,10 +9,15 @@ title: 输入框自动完成功能，下面是一个账号注册表单的例子。 +推荐使用 [AutoComplete](/components/auto-complete) 组件。 + ## en-US Automatic completion of select input. +Using the [AutoComplete](/components/auto-complete) component is strongly recommended instead as it is more flexible and capable. + + ````jsx import { Select } from 'antd'; const Option = Select.Option;