mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Virtual select component (#18658)
* init * fix firefox * add active style * adjust arrow style * update select * update icon logic * render empty * init multiple * fix ff display style * sync font size * adjust padding style * add padding * padding it * hotfix of chrome * single sm * multiple size * update option group style * update snapshot * clean up transition * rm combobox in ts define * auto complete init * fix auto option def * update demo * update demo * update uncertain demo * update demo * warning if user set `size` on AutoComplete * add debug demo * updat demo * update demo of disabled * update snapshot * rm useless test * fix pagination test * fix Table test * fix calendar test case * fix calendar test case * adjust style * add big data demo * support clean up * fix ts define * fix lint * fix demo lint * fix style lint fix * rm useless deps * update snapshot * stop mock * add space
This commit is contained in:
二货机器人
GitHub
parent
d8eac4c606
commit
2ea28af6ed
@ -1,25 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export interface InputElementProps {
|
||||
children: React.ReactElement<any>;
|
||||
}
|
||||
|
||||
export default class InputElement extends React.Component<InputElementProps, any> {
|
||||
saveRef = (ele: HTMLInputElement) => {
|
||||
const { ref: childRef } = this.props.children as any;
|
||||
if (typeof childRef === 'function') {
|
||||
childRef(ele);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return React.cloneElement(
|
||||
this.props.children,
|
||||
{
|
||||
...this.props,
|
||||
ref: this.saveRef,
|
||||
},
|
||||
null,
|
||||
);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,6 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import AutoComplete from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
|
||||
describe('AutoComplete could be focus', () => {
|
||||
focusTest(AutoComplete);
|
||||
});
|
||||
|
||||
describe('AutoComplete children could be focus', () => {
|
||||
beforeAll(() => {
|
||||
|
||||
@ -15,15 +15,9 @@ describe('AutoComplete with Custom Input Element Render', () => {
|
||||
|
||||
expect(wrapper.find('textarea').length).toBe(1);
|
||||
wrapper.find('textarea').simulate('change', { target: { value: '123' } });
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
|
||||
// should not filter data source defaultly
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(3);
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBe(3);
|
||||
});
|
||||
|
||||
it('AutoComplete should work when dataSource is object array', () => {
|
||||
@ -34,15 +28,9 @@ describe('AutoComplete with Custom Input Element Render', () => {
|
||||
);
|
||||
expect(wrapper.find('input').length).toBe(1);
|
||||
wrapper.find('input').simulate('change', { target: { value: 'a' } });
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
|
||||
// should not filter data source defaultly
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(2);
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBe(2);
|
||||
});
|
||||
|
||||
it('AutoComplete throws error when contains invalid dataSource', () => {
|
||||
|
||||
@ -7,28 +7,36 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。通过 dataSource 设置自动完成的数据源
|
||||
基本使用。通过 options 设置自动完成的数据源
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage, set data source of autocomplete with `dataSource` property.
|
||||
Basic Usage, set data source of autocomplete with `options` property.
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
|
||||
function mockVal(str: string, repeat: number = 1) {
|
||||
return {
|
||||
value: str.repeat(repeat),
|
||||
};
|
||||
}
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
value: '',
|
||||
dataSource: [],
|
||||
options: [],
|
||||
};
|
||||
|
||||
onSearch = searchText => {
|
||||
this.setState({
|
||||
dataSource: !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)],
|
||||
options: !searchText
|
||||
? []
|
||||
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
|
||||
});
|
||||
};
|
||||
|
||||
@ -37,11 +45,12 @@ class Complete extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, value } = this.state;
|
||||
const { options, value } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
options={[]}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.onSearch}
|
||||
@ -51,7 +60,7 @@ class Complete extends React.Component {
|
||||
<br />
|
||||
<AutoComplete
|
||||
value={value}
|
||||
dataSource={dataSource}
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.onSearch}
|
||||
|
||||
@ -11,53 +11,15 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
|
||||
|
||||
```jsx
|
||||
```tsx
|
||||
import { Input, AutoComplete } from 'antd';
|
||||
import { Search } from '@ant-design/icons';
|
||||
import { Search, User } from '@ant-design/icons';
|
||||
|
||||
const { Option, OptGroup } = AutoComplete;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
title: 'Libraries',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign',
|
||||
count: 10000,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign UI',
|
||||
count: 10600,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Solutions',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign UI',
|
||||
count: 60100,
|
||||
},
|
||||
{
|
||||
title: 'AntDesign',
|
||||
count: 30010,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Articles',
|
||||
children: [
|
||||
{
|
||||
title: 'AntDesign design language',
|
||||
count: 100000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function renderTitle(title) {
|
||||
function renderTitle(title: string) {
|
||||
return (
|
||||
<span>
|
||||
{title}
|
||||
@ -73,24 +35,34 @@ function renderTitle(title) {
|
||||
);
|
||||
}
|
||||
|
||||
const options = dataSource
|
||||
.map(group => (
|
||||
<OptGroup key={group.title} label={renderTitle(group.title)}>
|
||||
{group.children.map(opt => (
|
||||
<Option key={opt.title} value={opt.title}>
|
||||
{opt.title}
|
||||
<span className="certain-search-item-count">{opt.count} people</span>
|
||||
</Option>
|
||||
))}
|
||||
</OptGroup>
|
||||
))
|
||||
.concat([
|
||||
<Option disabled key="all" className="show-all">
|
||||
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
|
||||
View all results
|
||||
</a>
|
||||
</Option>,
|
||||
]);
|
||||
function renderItem(title: string, count: number) {
|
||||
return {
|
||||
value: title,
|
||||
label: (
|
||||
<>
|
||||
{title}
|
||||
<span className="certain-search-item-count">
|
||||
<User /> {count}
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: renderTitle('Libraries'),
|
||||
options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Solutions'),
|
||||
options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
|
||||
},
|
||||
{
|
||||
label: renderTitle('Articles'),
|
||||
options: [renderItem('AntDesign design language', 100000)],
|
||||
},
|
||||
];
|
||||
|
||||
function Complete() {
|
||||
return (
|
||||
@ -98,15 +70,15 @@ function Complete() {
|
||||
<AutoComplete
|
||||
className="certain-category-search"
|
||||
dropdownClassName="certain-category-search-dropdown"
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownStyle={{ width: 300 }}
|
||||
size="large"
|
||||
dropdownMatchSelectWidth={500}
|
||||
style={{ width: '100%' }}
|
||||
dataSource={options}
|
||||
placeholder="input here"
|
||||
optionLabelProp="value"
|
||||
options={options}
|
||||
>
|
||||
<Input suffix={<Search className="certain-category-icon" />} />
|
||||
<Input
|
||||
size="large"
|
||||
suffix={<Search className="certain-category-icon" />}
|
||||
placeholder="input here"
|
||||
/>
|
||||
</AutoComplete>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -24,12 +24,14 @@ function onSelect(value) {
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
options: [],
|
||||
};
|
||||
|
||||
handleSearch = value => {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [value, value + value, value + value + value],
|
||||
options: !value
|
||||
? []
|
||||
: [{ value }, { value: value + value }, { value: value + value + value }],
|
||||
});
|
||||
};
|
||||
|
||||
@ -38,10 +40,10 @@ class Complete extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const { options } = this.state;
|
||||
return (
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
options={options}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
|
||||
62
components/auto-complete/demo/form-debug.md
Normal file
62
components/auto-complete/demo/form-debug.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: 在 Form 中 Debug
|
||||
en-US: Debug in Form
|
||||
debug: true
|
||||
---
|
||||
|
||||
```jsx
|
||||
import { Input, AutoComplete, Form, TreeSelect } from 'antd';
|
||||
import { Search } from '@ant-design/icons';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<Form style={{ margin: '0 auto' }}>
|
||||
<Form.Item label="单独 AutoComplete" {...formItemLayout}>
|
||||
<AutoComplete />
|
||||
</Form.Item>
|
||||
<Form.Item label="单独 TreeSelect" {...formItemLayout}>
|
||||
<TreeSelect />
|
||||
</Form.Item>
|
||||
<Form.Item label="添加 Input.Group 正常" {...formItemLayout}>
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete />
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="包含 search 图标正常" {...formItemLayout}>
|
||||
<AutoComplete>
|
||||
<Input suffix={<Search />} />
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input suffix={<Search />} />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="同时有 Input.Group 和 Search 组件发生移位" {...formItemLayout}>
|
||||
<Input.Group compact>
|
||||
<TreeSelect style={{ width: '30%' }} />
|
||||
<AutoComplete>
|
||||
<Input.Search />
|
||||
</AutoComplete>
|
||||
</Input.Group>
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -16,16 +16,20 @@ A non-case-sensitive AutoComplete
|
||||
```jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
|
||||
const options = [
|
||||
{ value: 'Burns Bay Road' },
|
||||
{ value: 'Downing Street' },
|
||||
{ value: 'Wall Street' },
|
||||
];
|
||||
|
||||
function Complete() {
|
||||
return (
|
||||
<AutoComplete
|
||||
style={{ width: 200 }}
|
||||
dataSource={dataSource}
|
||||
options={options}
|
||||
placeholder="try to type `b`"
|
||||
filterOption={(inputValue, option) =>
|
||||
option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
||||
option.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
|
||||
也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。
|
||||
|
||||
## en-US
|
||||
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
|
||||
You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
|
||||
|
||||
```jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
|
||||
@ -11,14 +11,12 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
|
||||
|
||||
```jsx
|
||||
import { Button, Input, AutoComplete } from 'antd';
|
||||
import { Search } from '@ant-design/icons';
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
|
||||
function onSelect(value) {
|
||||
console.log('onSelect', value);
|
||||
}
|
||||
@ -31,57 +29,50 @@ function searchResult(query) {
|
||||
return new Array(getRandomInt(5))
|
||||
.join('.')
|
||||
.split('.')
|
||||
.map((item, idx) => ({
|
||||
query,
|
||||
category: `${query}${idx}`,
|
||||
count: getRandomInt(200, 100),
|
||||
}));
|
||||
}
|
||||
|
||||
function renderOption(item) {
|
||||
return (
|
||||
<Option key={item.category} text={item.category}>
|
||||
<div className="global-search-item">
|
||||
<span className="global-search-item-desc">
|
||||
Found {item.query} on
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${item.query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{item.category}
|
||||
</a>
|
||||
</span>
|
||||
<span className="global-search-item-count">{item.count} results</span>
|
||||
</div>
|
||||
</Option>
|
||||
);
|
||||
.map((item, idx) => {
|
||||
const category = `${query}${idx}`;
|
||||
return {
|
||||
value: category,
|
||||
label: (
|
||||
<div className="global-search-item">
|
||||
<span className="global-search-item-desc">
|
||||
Found {query} on{' '}
|
||||
<a
|
||||
href={`https://s.taobao.com/search?q=${query}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{category}
|
||||
</a>
|
||||
</span>
|
||||
<span className="global-search-item-count">{getRandomInt(200, 100)} results</span>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
dataSource: [],
|
||||
options: [],
|
||||
};
|
||||
|
||||
handleSearch = value => {
|
||||
this.setState({
|
||||
dataSource: value ? searchResult(value) : [],
|
||||
options: value ? searchResult(value) : [],
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const { options } = this.state;
|
||||
return (
|
||||
<div className="global-search-wrapper" style={{ width: 300 }}>
|
||||
<AutoComplete
|
||||
className="global-search"
|
||||
size="large"
|
||||
style={{ width: '100%' }}
|
||||
dataSource={dataSource.map(renderOption)}
|
||||
options={options}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
optionLabelProp="text"
|
||||
>
|
||||
<Input
|
||||
suffix={
|
||||
@ -94,6 +85,8 @@ class Complete extends React.Component {
|
||||
<Search />
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
placeholder="input here"
|
||||
/>
|
||||
</AutoComplete>
|
||||
</div>
|
||||
|
||||
@ -13,11 +13,6 @@ When there is a need for autocomplete functionality.
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />;
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
|
||||
@ -25,7 +20,6 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| backfill | backfill selected item the input when using keyboard | boolean | false | |
|
||||
| children (for customize input element) | customize input element | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` | |
|
||||
| children (for dataSource) | Data source to auto complete | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - | |
|
||||
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | - | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
|
||||
| defaultValue | Initial selected option. | string\|string\[] | - | |
|
||||
| disabled | Whether disabled select | boolean | false | |
|
||||
|
||||
@ -1,159 +1,130 @@
|
||||
/**
|
||||
* TODO: 4.0
|
||||
* - remove `dataSource`
|
||||
* - `size` not work with customizeInput
|
||||
* - customizeInput not feedback `ENTER` key since accessibility enhancement
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import { Option, OptGroup } from 'rc-select';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
import { SelectProps as RcSelectProps } from 'rc-select';
|
||||
import classNames from 'classnames';
|
||||
import InputElement from './InputElement';
|
||||
import Input, { InputProps } from '../input';
|
||||
import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
|
||||
import omit from 'omit.js';
|
||||
import Select, { InternalSelectProps, OptionType } from '../select';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { Omit } from '../_util/type';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const InternalSelect = Select as React.ComponentClass<RcSelectProps>;
|
||||
|
||||
export interface DataSourceItemObject {
|
||||
value: string;
|
||||
text: string;
|
||||
}
|
||||
export type DataSourceItemType =
|
||||
| string
|
||||
| DataSourceItemObject
|
||||
| React.ReactElement<OptionProps>
|
||||
| React.ReactElement<OptGroupProps>;
|
||||
export type DataSourceItemType = string | DataSourceItemObject;
|
||||
|
||||
export interface AutoCompleteInputProps {
|
||||
onChange?: React.FormEventHandler<any>;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export type ValidInputElement =
|
||||
| HTMLInputElement
|
||||
| HTMLTextAreaElement
|
||||
| React.ReactElement<AutoCompleteInputProps>;
|
||||
|
||||
export interface AutoCompleteProps extends Omit<AbstractSelectProps, 'loading'> {
|
||||
value?: SelectValue;
|
||||
defaultValue?: SelectValue;
|
||||
export interface AutoCompleteProps
|
||||
extends Omit<InternalSelectProps<string>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp'> {
|
||||
dataSource?: DataSourceItemType[];
|
||||
autoFocus?: boolean;
|
||||
backfill?: boolean;
|
||||
optionLabelProp?: string;
|
||||
onChange?: (value: SelectValue) => void;
|
||||
onSelect?: (value: SelectValue, option: Object) => any;
|
||||
onBlur?: (value: SelectValue) => void;
|
||||
onFocus?: () => void;
|
||||
children?:
|
||||
| ValidInputElement
|
||||
| React.ReactElement<InputProps>
|
||||
| React.ReactElement<OptionProps>
|
||||
| Array<React.ReactElement<OptionProps>>;
|
||||
}
|
||||
|
||||
function isSelectOptionOrSelectOptGroup(child: any): Boolean {
|
||||
return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
|
||||
}
|
||||
|
||||
export default class AutoComplete extends React.Component<AutoCompleteProps, {}> {
|
||||
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
||||
const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (props, ref) => {
|
||||
const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
|
||||
const childNodes: React.ReactElement[] = toArray(children);
|
||||
|
||||
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
||||
const selectRef = React.useRef<Select>();
|
||||
|
||||
static defaultProps = {
|
||||
transitionName: 'slide-up',
|
||||
optionLabelProp: 'children',
|
||||
choiceTransitionName: 'zoom',
|
||||
showSearch: false,
|
||||
filterOption: false,
|
||||
};
|
||||
React.useImperativeHandle<Select, Select>(ref, () => selectRef.current!);
|
||||
|
||||
private select: any;
|
||||
// ============================= Input =============================
|
||||
let customizeInput: React.ReactElement;
|
||||
|
||||
saveSelect = (node: any) => {
|
||||
this.select = node;
|
||||
};
|
||||
|
||||
getInputElement = () => {
|
||||
const { children } = this.props;
|
||||
const element =
|
||||
children && React.isValidElement(children) && children.type !== Option ? (
|
||||
React.Children.only(this.props.children)
|
||||
) : (
|
||||
<Input />
|
||||
);
|
||||
const elementProps = { ...(element as React.ReactElement<any>).props };
|
||||
// https://github.com/ant-design/ant-design/pull/7742
|
||||
delete elementProps.children;
|
||||
return <InputElement {...elementProps}>{element}</InputElement>;
|
||||
};
|
||||
|
||||
focus() {
|
||||
this.select.focus();
|
||||
if (
|
||||
childNodes.length === 1 &&
|
||||
React.isValidElement(childNodes[0]) &&
|
||||
!isSelectOptionOrSelectOptGroup(childNodes[0])
|
||||
) {
|
||||
customizeInput = childNodes[0];
|
||||
}
|
||||
|
||||
blur() {
|
||||
this.select.blur();
|
||||
const getInputElement = (): React.ReactElement => customizeInput;
|
||||
|
||||
// ============================ Options ============================
|
||||
let optionChildren: React.ReactNode;
|
||||
|
||||
// [Legacy] convert `children` or `dataSource` into option children
|
||||
if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
|
||||
optionChildren = children;
|
||||
} else {
|
||||
optionChildren = dataSource
|
||||
? dataSource.map(item => {
|
||||
if (React.isValidElement(item)) {
|
||||
return item;
|
||||
}
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
||||
}
|
||||
})
|
||||
: [];
|
||||
}
|
||||
|
||||
renderAutoComplete = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
size,
|
||||
className = '',
|
||||
notFoundContent,
|
||||
optionLabelProp,
|
||||
dataSource,
|
||||
children,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
|
||||
const cls = classNames({
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[className]: !!className,
|
||||
[`${prefixCls}-show-search`]: true,
|
||||
[`${prefixCls}-auto-complete`]: true,
|
||||
});
|
||||
|
||||
let options;
|
||||
const childArray = React.Children.toArray(children);
|
||||
if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
|
||||
options = children;
|
||||
} else {
|
||||
options = dataSource
|
||||
? dataSource.map(item => {
|
||||
if (React.isValidElement(item)) {
|
||||
return item;
|
||||
}
|
||||
switch (typeof item) {
|
||||
case 'string':
|
||||
return <Option key={item}>{item}</Option>;
|
||||
case 'object':
|
||||
return (
|
||||
<Option key={(item as DataSourceItemObject).value}>
|
||||
{(item as DataSourceItemObject).text}
|
||||
</Option>
|
||||
);
|
||||
default:
|
||||
throw new Error(
|
||||
'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
|
||||
);
|
||||
}
|
||||
})
|
||||
: [];
|
||||
}
|
||||
|
||||
return (
|
||||
<Select
|
||||
{...this.props}
|
||||
className={cls}
|
||||
mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}
|
||||
optionLabelProp={optionLabelProp}
|
||||
getInputElement={this.getInputElement}
|
||||
notFoundContent={notFoundContent}
|
||||
ref={this.saveSelect}
|
||||
>
|
||||
{options}
|
||||
</Select>
|
||||
// ============================ Warning ============================
|
||||
React.useEffect(() => {
|
||||
warning(
|
||||
!('dataSource' in props),
|
||||
'AutoComplete',
|
||||
'`dataSource` is deprecated, please use `options` instead.',
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return <ConfigConsumer>{this.renderAutoComplete}</ConfigConsumer>;
|
||||
}
|
||||
}
|
||||
warning(
|
||||
!customizeInput || !('size' in props),
|
||||
'AutoComplete',
|
||||
'You need to control style self instead of setting `size` when using customize input.',
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ConfigConsumer>
|
||||
{({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
|
||||
return (
|
||||
<InternalSelect
|
||||
ref={selectRef as any}
|
||||
{...omit(props, ['dataSource'])}
|
||||
prefixCls={prefixCls}
|
||||
className={classNames(className, `${prefixCls}-auto-complete`)}
|
||||
mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
|
||||
getInputElement={getInputElement}
|
||||
>
|
||||
{optionChildren}
|
||||
</InternalSelect>
|
||||
);
|
||||
}}
|
||||
</ConfigConsumer>
|
||||
);
|
||||
};
|
||||
|
||||
const RefAutoComplete = React.forwardRef<Select, AutoCompleteProps>(AutoComplete);
|
||||
|
||||
type RefAutoComplete = typeof RefAutoComplete & {
|
||||
Option: OptionType;
|
||||
};
|
||||
|
||||
(RefAutoComplete as RefAutoComplete).Option = Option;
|
||||
|
||||
export default RefAutoComplete as RefAutoComplete;
|
||||
|
||||
@ -14,11 +14,6 @@ title: AutoComplete
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
const dataSource = ['12345', '23456', '34567'];
|
||||
<AutoComplete dataSource={dataSource} />;
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
|
||||
@ -26,7 +21,6 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
|
||||
| children (自定义输入框) | 自定义输入框 | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` | |
|
||||
| children (自动完成的数据源) | 自动完成的数据源 | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - | |
|
||||
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
|
||||
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
|
||||
@ -8,85 +8,4 @@
|
||||
|
||||
.@{autocomplete-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
&.@{select-prefix-cls} {
|
||||
.@{select-prefix-cls} {
|
||||
&-selection {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
&__rendered {
|
||||
height: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
&__placeholder {
|
||||
margin-right: (@input-padding-horizontal-base + 1px);
|
||||
margin-left: (@input-padding-horizontal-base + 1px);
|
||||
}
|
||||
|
||||
&--single {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix https://github.com/ant-design/ant-design/issues/7800
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
position: static;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&-allow-clear {
|
||||
.@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
background: transparent;
|
||||
border-width: @border-width-base;
|
||||
&:focus,
|
||||
&:hover {
|
||||
.hover;
|
||||
}
|
||||
&[disabled] {
|
||||
.disabled;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-lg;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-lg;
|
||||
padding-top: @input-padding-vertical-lg;
|
||||
padding-bottom: @input-padding-vertical-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-sm;
|
||||
}
|
||||
.@{input-prefix-cls} {
|
||||
height: @input-height-sm;
|
||||
padding-top: @input-padding-vertical-sm;
|
||||
padding-bottom: @input-padding-vertical-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14156
|
||||
.@{input-prefix-cls}-group > .@{autocomplete-prefix-cls} {
|
||||
.@{select-prefix-cls}-search__field.@{input-prefix-cls}-affix-wrapper {
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,4 +3,3 @@ import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../select/style';
|
||||
import '../../input/style';
|
||||
|
||||
@ -64,7 +64,7 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
return (
|
||||
<Select
|
||||
size={fullscreen ? 'default' : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownMatchSelectWidth={100}
|
||||
className={`${prefixCls}-year-select`}
|
||||
onChange={this.onYearChange}
|
||||
value={String(year)}
|
||||
@ -97,7 +97,7 @@ export default class Header extends React.Component<HeaderProps, any> {
|
||||
return (
|
||||
<Select
|
||||
size={fullscreen ? 'default' : 'small'}
|
||||
dropdownMatchSelectWidth={false}
|
||||
dropdownMatchSelectWidth={100}
|
||||
className={`${prefixCls}-month-select`}
|
||||
value={String(month)}
|
||||
onChange={this.onMonthChange}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -8,108 +8,118 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
class="ant-fullcalendar-header"
|
||||
>
|
||||
<div
|
||||
class="ant-fullcalendar-year-select ant-select ant-select-enabled"
|
||||
class="ant-select ant-fullcalendar-year-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display: block; opacity: 1;"
|
||||
title="2018年"
|
||||
>
|
||||
2018年
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
2018年
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-fullcalendar-month-select ant-select ant-select-enabled"
|
||||
class="ant-select ant-fullcalendar-month-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display: block; opacity: 1;"
|
||||
title="Oct"
|
||||
>
|
||||
Oct
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
Oct
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline ant-radio-group-default"
|
||||
|
||||
@ -13,6 +13,23 @@ describe('Calendar', () => {
|
||||
mountTest(Calendar);
|
||||
mountTest(() => <Header value={Moment()} />);
|
||||
|
||||
function openSelect(wrapper, className) {
|
||||
wrapper
|
||||
.find(className)
|
||||
.find('.ant-select-selector')
|
||||
.simulate('mousedown');
|
||||
}
|
||||
|
||||
function findSelectItem(wrapper) {
|
||||
return wrapper.find('.ant-select-item-option');
|
||||
}
|
||||
|
||||
function clickSelectItem(wrapper, index = 0) {
|
||||
findSelectItem(wrapper)
|
||||
.at(index)
|
||||
.simulate('click');
|
||||
}
|
||||
|
||||
it('Calendar should be selectable', () => {
|
||||
const onSelect = jest.fn();
|
||||
const wrapper = mount(<Calendar onSelect={onSelect} />);
|
||||
@ -102,20 +119,11 @@ describe('Calendar', () => {
|
||||
it('months other than in valid range should not be shown in header', () => {
|
||||
const validRange = [Moment('2017-02-02'), Moment('2018-05-18')];
|
||||
const wrapper = mount(<Calendar validRange={validRange} />);
|
||||
wrapper
|
||||
.find('.ant-fullcalendar-year-select')
|
||||
.hostNodes()
|
||||
.simulate('click');
|
||||
wrapper
|
||||
.find('.ant-select-dropdown-menu-item')
|
||||
.first()
|
||||
.simulate('click');
|
||||
wrapper
|
||||
.find('.ant-fullcalendar-month-select')
|
||||
.hostNodes()
|
||||
.simulate('click');
|
||||
openSelect(wrapper, '.ant-fullcalendar-year-select');
|
||||
clickSelectItem(wrapper);
|
||||
openSelect(wrapper, '.ant-fullcalendar-month-select');
|
||||
// 2 years and 11 months
|
||||
expect(wrapper.find('.ant-select-dropdown-menu-item').length).toBe(13);
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBe(13);
|
||||
});
|
||||
|
||||
it('getDateRange should returns a disabledDate function', () => {
|
||||
@ -193,14 +201,8 @@ describe('Calendar', () => {
|
||||
locale={{ year: '年' }}
|
||||
/>,
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-fullcalendar-year-select')
|
||||
.hostNodes()
|
||||
.simulate('click');
|
||||
wrapper
|
||||
.find('.ant-select-dropdown-menu-item')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
openSelect(wrapper, '.ant-fullcalendar-year-select');
|
||||
clickSelectItem(wrapper);
|
||||
};
|
||||
|
||||
it('if value.month > end.month, set value.month to end.month', () => {
|
||||
@ -235,14 +237,8 @@ describe('Calendar', () => {
|
||||
type="month"
|
||||
/>,
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-fullcalendar-month-select')
|
||||
.hostNodes()
|
||||
.simulate('click');
|
||||
wrapper
|
||||
.find('.ant-select-dropdown-menu-item')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
openSelect(wrapper, '.ant-fullcalendar-month-select');
|
||||
clickSelectItem(wrapper);
|
||||
expect(onValueChange).toHaveBeenCalledWith(value.month(10));
|
||||
});
|
||||
|
||||
@ -258,7 +254,7 @@ describe('Calendar', () => {
|
||||
/>,
|
||||
);
|
||||
wrapper
|
||||
.find('input')
|
||||
.find('input[type="radio"]')
|
||||
.at(1)
|
||||
.simulate('change');
|
||||
expect(onTypeChange).toHaveBeenCalledWith('year');
|
||||
@ -293,11 +289,10 @@ describe('Calendar', () => {
|
||||
});
|
||||
const wrapperWithYear = mount(<Calendar fullscreen={false} headerRender={headerRender} />);
|
||||
|
||||
wrapperWithYear.find('.ant-select').simulate('click');
|
||||
openSelect(wrapperWithYear, '.ant-select');
|
||||
wrapperWithYear.update();
|
||||
|
||||
wrapperWithYear
|
||||
.find('.year-item')
|
||||
findSelectItem(wrapperWithYear)
|
||||
.last()
|
||||
.simulate('click');
|
||||
|
||||
@ -338,11 +333,10 @@ describe('Calendar', () => {
|
||||
<Calendar fullscreen={false} headerRender={headerRenderWithMonth} />,
|
||||
);
|
||||
|
||||
wrapperWithMonth.find('.ant-select').simulate('click');
|
||||
openSelect(wrapperWithMonth, '.ant-select');
|
||||
wrapperWithMonth.update();
|
||||
|
||||
wrapperWithMonth
|
||||
.find('.month-item')
|
||||
findSelectItem(wrapperWithMonth)
|
||||
.last()
|
||||
.simulate('click');
|
||||
expect(onMonthChange).toHaveBeenCalled();
|
||||
|
||||
@ -60,14 +60,14 @@ ReactDOM.render(
|
||||
return (
|
||||
<div style={{ padding: 10 }}>
|
||||
<div style={{ marginBottom: '10px' }}>Custom header </div>
|
||||
<Row type="flex" justify="space-between">
|
||||
<Col>
|
||||
<Row type="flex" style={{ flexWrap: 'nowrap' }} gutter={8}>
|
||||
<Col style={{ flex: 'none' }}>
|
||||
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
|
||||
<Button value="month">Month</Button>
|
||||
<Button value="year">Year</Button>
|
||||
</Group>
|
||||
</Col>
|
||||
<Col>
|
||||
<Col style={{ flex: 'auto' }}>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
@ -81,7 +81,7 @@ ReactDOM.render(
|
||||
{options}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col>
|
||||
<Col style={{ flex: 'auto' }}>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
|
||||
@ -10,19 +10,20 @@
|
||||
outline: none;
|
||||
|
||||
.@{ant-prefix}-select&-year-select {
|
||||
min-width: 90px;
|
||||
width: 90px;
|
||||
|
||||
&.@{ant-prefix}-select-sm {
|
||||
min-width: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-select&-month-select {
|
||||
min-width: 80px;
|
||||
width: 80px;
|
||||
margin-left: 8px;
|
||||
text-align: left;
|
||||
|
||||
&.@{ant-prefix}-select-sm {
|
||||
min-width: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -658,56 +658,60 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
|
||||
<br />
|
||||
Expand Icon Position:
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="left"
|
||||
>
|
||||
left
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
left
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -100,49 +100,59 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
|
||||
Select
|
||||
</h3>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<h3>
|
||||
TreeSelect
|
||||
|
||||
@ -487,57 +487,61 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled ant-select-allow-clear"
|
||||
id="control-hooks_gender"
|
||||
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="control-hooks_gender_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="control-hooks_gender_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="control-hooks_gender_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="control-hooks_gender"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -636,57 +640,61 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled ant-select-allow-clear"
|
||||
id="control-ref_gender"
|
||||
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="control-ref_gender_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="control-ref_gender_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="control-ref_gender_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="control-ref_gender"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Select a option and change input text above
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -763,57 +771,61 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
|
||||
value="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:80px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="RMB"
|
||||
>
|
||||
RMB
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
RMB
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
@ -2245,58 +2257,62 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="register_prefix"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:70px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="+86"
|
||||
>
|
||||
+86
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="register_prefix_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="register_prefix_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="register_prefix_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="register_prefix"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
+86
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<input
|
||||
@ -2331,74 +2347,32 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
id="register_website"
|
||||
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
website
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="register_website_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="register_website_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="register_website_list"
|
||||
autocomplete="off"
|
||||
class="ant-input ant-select-selection-search-input"
|
||||
id="register_website"
|
||||
role="combobox"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
website
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -2976,57 +2950,61 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="validate_other_select"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
Please select a country
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="validate_other_select_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="validate_other_select_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="validate_other_select_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="validate_other_select"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please select a country
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -3052,50 +3030,40 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
id="validate_other_select-multiple"
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--multiple"
|
||||
role="combobox"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
style="width:0"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
<input
|
||||
aria-activedescendant="validate_other_select-multiple_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="validate_other_select-multiple_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="validate_other_select-multiple_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="validate_other_select-multiple"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
Please select favourite colors
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-select-search__field"
|
||||
id="validate_other_select-multiple"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please select favourite colors
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -4434,56 +4402,60 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="Option 1"
|
||||
>
|
||||
Option 1
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
Option 1
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-form-item-children-icon"
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
flex-wrap: wrap;
|
||||
|
||||
.@{form-prefix-cls}-item {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 0;
|
||||
flex-wrap: nowrap;
|
||||
flex: none;
|
||||
|
||||
&-with-help {
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -195,56 +195,61 @@ exports[`List.pagination should change page size work 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display: block; opacity: 1;"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -328,111 +333,168 @@ exports[`List.pagination should change page size work 2`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-focused ant-select-enabled"
|
||||
style=""
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
style=""
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display: block; opacity: 1;"
|
||||
title="30 / page"
|
||||
>
|
||||
30 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
30 / page
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft slide-up-leave"
|
||||
style="left: -999px; top: -995px;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="test-uuid"
|
||||
style="overflow: auto; transform: translateZ(0);"
|
||||
class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft ant-select-dropdown-hidden"
|
||||
style="width: 0px; left: -999px; top: -995px;"
|
||||
>
|
||||
<ul
|
||||
class="ant-select-dropdown-menu ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
|
||||
role="listbox"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-select-dropdown-menu-item"
|
||||
role="option"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
<div>
|
||||
<div
|
||||
id="rc_select_TEST_OR_SSR_list"
|
||||
role="listbox"
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
10 / page
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-select-dropdown-menu-item"
|
||||
role="option"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
<div
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_0"
|
||||
role="option"
|
||||
>
|
||||
10
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
id="rc_select_TEST_OR_SSR_list_1"
|
||||
role="option"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class=""
|
||||
style="height: 256px;"
|
||||
>
|
||||
20 / page
|
||||
</li>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-selected"
|
||||
role="option"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
30 / page
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-select-dropdown-menu-item"
|
||||
role="option"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
40 / page
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div
|
||||
class=""
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
20 / page
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
30 / page
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
40 / page
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -526,56 +588,61 @@ exports[`List.pagination should default work 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display: block; opacity: 1;"
|
||||
title="3 / page"
|
||||
>
|
||||
3 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
3 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -162,9 +162,9 @@ describe('List.pagination', () => {
|
||||
.render(),
|
||||
).toMatchSnapshot();
|
||||
|
||||
wrapper.find('.ant-select-selection-selected-value').simulate('click');
|
||||
wrapper.find('.ant-select-selector').simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-select-dropdown-menu .ant-select-dropdown-menu-item')
|
||||
.find('.ant-select-item-option')
|
||||
.at(2)
|
||||
.simulate('click');
|
||||
|
||||
|
||||
@ -173,56 +173,60 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -231,69 +235,59 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
||||
class="example"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
style="display:none"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-select-search__field"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-calendar-picker"
|
||||
@ -728,108 +722,116 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
||||
class="ant-fullcalendar-header"
|
||||
>
|
||||
<div
|
||||
class="ant-select-sm ant-fullcalendar-year-select ant-select ant-select-enabled"
|
||||
class="ant-select ant-fullcalendar-year-select ant-select-sm ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-sm ant-fullcalendar-month-select ant-select ant-select-enabled"
|
||||
class="ant-select ant-fullcalendar-month-select ant-select-sm ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
|
||||
@ -2037,56 +2039,60 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="10 条/页"
|
||||
>
|
||||
10 条/页
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 条/页
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -47,57 +47,61 @@ exports[`renders ./components/notification/demo/duration.md correctly 1`] = `
|
||||
exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:120px;margin-right:10px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="topRight"
|
||||
>
|
||||
topRight
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
topRight
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import Select, { OptionProps } from '../select';
|
||||
import Select from '../select';
|
||||
|
||||
export default class MiniSelect extends React.Component<any, any> {
|
||||
static Option = Select.Option as React.ClassicComponentClass<OptionProps>;
|
||||
static Option = Select.Option;
|
||||
|
||||
render() {
|
||||
return <Select size="small" {...this.props} />;
|
||||
|
||||
@ -279,56 +279,60 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -496,56 +500,61 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-pagination-options-size-changer ant-select ant-select-disabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="-1"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1367,56 +1376,60 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
class="ant-select-sm ant-pagination-options-size-changer ant-select ant-select-enabled"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-pagination-options-quick-jumper"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,47 +2,59 @@
|
||||
|
||||
exports[`Select Select Custom Icons should support customized icons 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
count="10"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls="test-uuid"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mount } from 'enzyme';
|
||||
import Select from '..';
|
||||
import Icon from '../../icon';
|
||||
@ -12,6 +13,14 @@ describe('Select', () => {
|
||||
focusTest(Select);
|
||||
mountTest(Select);
|
||||
|
||||
function toggleOpen(wrapper) {
|
||||
act(() => {
|
||||
wrapper.find('.ant-select-selector').simulate('mousedown');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
@ -22,27 +31,14 @@ describe('Select', () => {
|
||||
|
||||
it('should have default notFoundContent', () => {
|
||||
const wrapper = mount(<Select mode="multiple" />);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
jest.runAllTimers();
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(1);
|
||||
expect(
|
||||
dropdownWrapper
|
||||
.find('MenuItem')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toBe('No Data');
|
||||
toggleOpen(wrapper);
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBeFalsy();
|
||||
expect(wrapper.find('.ant-empty').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should support set notFoundContent to null', () => {
|
||||
const wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
jest.runAllTimers();
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
@ -54,8 +50,7 @@ describe('Select', () => {
|
||||
|
||||
it('should not have default notFoundContent when mode is combobox', () => {
|
||||
const wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
jest.runAllTimers();
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
@ -69,18 +64,17 @@ describe('Select', () => {
|
||||
const wrapper = mount(
|
||||
<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
|
||||
);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
jest.runAllTimers();
|
||||
toggleOpen(wrapper);
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
.find('Trigger')
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(1);
|
||||
expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
|
||||
expect(
|
||||
dropdownWrapper
|
||||
.find('MenuItem')
|
||||
.find('.ant-select-item-empty')
|
||||
.at(0)
|
||||
.text(),
|
||||
).toBe('not at all');
|
||||
@ -100,7 +94,7 @@ describe('Select', () => {
|
||||
.getComponent(),
|
||||
);
|
||||
expect(dropdownWrapper.props().visible).toBe(true);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
toggleOpen(wrapper);
|
||||
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
|
||||
expect(dropdownWrapper.props().visible).toBe(true);
|
||||
|
||||
@ -112,7 +106,7 @@ describe('Select', () => {
|
||||
.getComponent(),
|
||||
);
|
||||
expect(dropdownWrapper.props().visible).toBe(false);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
toggleOpen(wrapper);
|
||||
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
|
||||
expect(dropdownWrapper.props().visible).toBe(false);
|
||||
});
|
||||
@ -134,14 +128,12 @@ describe('Select', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('warning if user use `inputValue`', () => {
|
||||
it('not warning if user use `inputValue`', () => {
|
||||
resetWarned();
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
mount(<Select inputValue="" />);
|
||||
expect(errorSpy).toHaveBeenLastCalledWith(
|
||||
'Warning: [antd: Select] `inputValue` is deprecated. Please use `searchValue` instead.',
|
||||
);
|
||||
expect(errorSpy).not.toHaveBeenCalled();
|
||||
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
@ -38,6 +38,9 @@ ReactDOM.render(
|
||||
<Select defaultValue="lucy" style={{ width: 120 }} loading>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
</Select>
|
||||
<Select defaultValue="lucy" style={{ width: 120 }} allowClear>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
</Select>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
58
components/select/demo/big-data.md
Normal file
58
components/select/demo/big-data.md
Normal file
@ -0,0 +1,58 @@
|
||||
---
|
||||
order: 23
|
||||
title:
|
||||
zh-CN: 大数据
|
||||
en-US: Big Data
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
Select 使用了[虚拟滚动](https://github.com/react-component/virtual-list)技术，因而获得了比 [3.0 更好的性能](https://codesandbox.io/s/beautiful-banzai-m72lv)。
|
||||
|
||||
## en-US
|
||||
|
||||
Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance [than 3.0](https://codesandbox.io/s/beautiful-banzai-m72lv).
|
||||
|
||||
```jsx
|
||||
import { Select, Typography, Divider } from 'antd';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const options = [];
|
||||
for (let i = 0; i < 100000; i++) {
|
||||
const value = `${i.toString(36)}${i}`;
|
||||
options.push({
|
||||
value,
|
||||
disabled: i === 10,
|
||||
});
|
||||
}
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Title level={3}>Ant Design 4.0</Title>
|
||||
<Title level={4}>{options.length} Items</Title>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
options={options}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Title level={3}>Ant Design 3.0</Title>
|
||||
<iframe
|
||||
title="Ant Design 3.0 Select demo"
|
||||
src="https://codesandbox.io/embed/beautiful-banzai-m72lv?view=preview"
|
||||
style={{ width: '100%', height: 300 }}
|
||||
/>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -14,7 +14,7 @@ title:
|
||||
Customize the dropdown menu via `dropdownRender`.
|
||||
|
||||
```jsx
|
||||
import { Select, Divider } from 'antd';
|
||||
import { Select, Divider, message } from 'antd';
|
||||
import { Plus } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
@ -27,9 +27,14 @@ ReactDOM.render(
|
||||
<div>
|
||||
{menu}
|
||||
<Divider style={{ margin: '4px 0' }} />
|
||||
<div style={{ padding: '8px', cursor: 'pointer' }}>
|
||||
<a
|
||||
style={{ padding: '8px', display: 'block', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
message.info('Add an item!');
|
||||
}}
|
||||
>
|
||||
<Plus /> Add item
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
|
||||
59
components/select/demo/debug.md
Normal file
59
components/select/demo/debug.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
order: 999
|
||||
title:
|
||||
zh-CN: 4.0 Debug
|
||||
en-US: 4.0 Debug
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基本使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage.
|
||||
|
||||
```jsx
|
||||
import { Select, Input, Button } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
function handleChange(value) {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Input style={{ width: 100 }} value="222" />
|
||||
<Select style={{ width: 120 }} onChange={handleChange} showSearch placeholder="233">
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="Yiminghe">yiminghe</Option>
|
||||
<Option value="long">I am super super long!</Option>
|
||||
</Select>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: 120 }}
|
||||
defaultValue={['lucy']}
|
||||
onChange={handleChange}
|
||||
showSearch
|
||||
placeholder="233"
|
||||
>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="Yiminghe">yiminghe</Option>
|
||||
<Option value="long">I am super super long!</Option>
|
||||
</Select>
|
||||
<span>AntDesign</span>
|
||||
<Button>222</Button>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -45,7 +45,7 @@ ReactDOM.render(
|
||||
onBlur={onBlur}
|
||||
onSearch={onSearch}
|
||||
filterOption={(input, option) =>
|
||||
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
<Option value="jack">Jack</Option>
|
||||
|
||||
@ -1,281 +1,163 @@
|
||||
// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
|
||||
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import RcSelect, { Option, OptGroup } from 'rc-select';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { Loading, Down, Close, CloseCircleFilled, Check } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps } from 'rc-select';
|
||||
import { Down, Loading, Check, Close, CloseCircleFilled } from '@ant-design/icons';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
import { tuple } from '../_util/type';
|
||||
type RawValue = string | number;
|
||||
|
||||
const SelectSizes = tuple('default', 'large', 'small');
|
||||
|
||||
export interface AbstractSelectProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
showAction?: string | string[];
|
||||
size?: (typeof SelectSizes)[number];
|
||||
notFoundContent?: React.ReactNode | null;
|
||||
transitionName?: string;
|
||||
choiceTransitionName?: string;
|
||||
showSearch?: boolean;
|
||||
allowClear?: boolean;
|
||||
disabled?: boolean;
|
||||
showArrow?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
tabIndex?: number;
|
||||
placeholder?: string | React.ReactNode;
|
||||
defaultActiveFirstOption?: boolean;
|
||||
dropdownClassName?: string;
|
||||
dropdownStyle?: React.CSSProperties;
|
||||
dropdownMenuStyle?: React.CSSProperties;
|
||||
dropdownMatchSelectWidth?: boolean;
|
||||
onSearch?: (value: string) => void;
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
filterOption?:
|
||||
| boolean
|
||||
| ((inputValue: string, option: React.ReactElement<OptionProps>) => boolean);
|
||||
id?: string;
|
||||
defaultOpen?: boolean;
|
||||
open?: boolean;
|
||||
onDropdownVisibleChange?: (open: boolean) => void;
|
||||
autoClearSearchValue?: boolean;
|
||||
dropdownRender?: (menu?: React.ReactNode, props?: SelectProps) => React.ReactNode;
|
||||
loading?: boolean;
|
||||
}
|
||||
export type OptionType = typeof Option;
|
||||
|
||||
export interface LabeledValue {
|
||||
key: string;
|
||||
key?: string;
|
||||
value: RawValue;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
export type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[];
|
||||
export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
|
||||
|
||||
export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
|
||||
value?: T;
|
||||
/** @deprecated Use `searchValue` instead. */
|
||||
inputValue?: string;
|
||||
searchValue?: string;
|
||||
defaultValue?: T;
|
||||
mode?: 'default' | 'multiple' | 'tags' | 'combobox' | string;
|
||||
optionLabelProp?: string;
|
||||
firstActiveValue?: string | string[];
|
||||
onChange?: (value: T, option: React.ReactElement<any> | React.ReactElement<any>[]) => void;
|
||||
onSelect?: (value: T extends (infer I)[] ? I : T, option: React.ReactElement<any>) => void;
|
||||
onDeselect?: (value: T extends (infer I)[] ? I : T) => void;
|
||||
onBlur?: (value: T) => void;
|
||||
onFocus?: () => void;
|
||||
onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
|
||||
onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
||||
onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
||||
onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
||||
maxTagCount?: number;
|
||||
maxTagTextLength?: number;
|
||||
maxTagPlaceholder?: React.ReactNode | ((omittedValues: T[]) => React.ReactNode);
|
||||
optionFilterProp?: string;
|
||||
labelInValue?: boolean;
|
||||
tokenSeparators?: string[];
|
||||
getInputElement?: () => React.ReactElement<any>;
|
||||
autoFocus?: boolean;
|
||||
export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
|
||||
suffixIcon?: React.ReactNode;
|
||||
removeIcon?: React.ReactNode;
|
||||
clearIcon?: React.ReactNode;
|
||||
menuItemSelectedIcon?: React.ReactNode;
|
||||
size?: 'large' | 'default' | 'small';
|
||||
mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
||||
}
|
||||
|
||||
export interface OptionProps {
|
||||
disabled?: boolean;
|
||||
value?: string | number;
|
||||
title?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
export interface SelectProps<VT>
|
||||
extends Omit<InternalSelectProps<VT>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
|
||||
mode?: 'multiple' | 'tags';
|
||||
}
|
||||
|
||||
export interface OptGroupProps {
|
||||
label?: React.ReactNode;
|
||||
}
|
||||
// We still use class here since `forwardRef` not support generic in typescript
|
||||
class Select<ValueType extends SelectValue = SelectValue> extends React.Component<
|
||||
SelectProps<ValueType>
|
||||
> {
|
||||
static Option = Option;
|
||||
|
||||
export interface SelectLocale {
|
||||
notFoundContent?: string;
|
||||
}
|
||||
|
||||
const SelectPropTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
size: PropTypes.oneOf(SelectSizes),
|
||||
notFoundContent: PropTypes.any,
|
||||
showSearch: PropTypes.bool,
|
||||
optionLabelProp: PropTypes.string,
|
||||
transitionName: PropTypes.string,
|
||||
choiceTransitionName: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
};
|
||||
|
||||
export default class Select<T = SelectValue> extends React.Component<SelectProps<T>, {}> {
|
||||
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
||||
|
||||
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
||||
static OptGroup = OptGroup;
|
||||
|
||||
static SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
||||
|
||||
static defaultProps = {
|
||||
showSearch: false,
|
||||
transitionName: 'slide-up',
|
||||
choiceTransitionName: 'zoom',
|
||||
};
|
||||
|
||||
static propTypes = SelectPropTypes;
|
||||
selectRef = React.createRef<RcSelect<ValueType>>();
|
||||
|
||||
private rcSelect: any;
|
||||
|
||||
constructor(props: SelectProps<T>) {
|
||||
super(props);
|
||||
|
||||
warning(
|
||||
props.mode !== 'combobox',
|
||||
'Select',
|
||||
'The combobox mode is deprecated, ' +
|
||||
'it will be removed in next major version, ' +
|
||||
'please use AutoComplete instead',
|
||||
);
|
||||
|
||||
warning(
|
||||
!('inputValue' in props),
|
||||
'Select',
|
||||
'`inputValue` is deprecated. Please use `searchValue` instead.',
|
||||
);
|
||||
}
|
||||
|
||||
getNotFoundContent(renderEmpty: RenderEmptyHandler) {
|
||||
const { notFoundContent } = this.props;
|
||||
if (notFoundContent !== undefined) {
|
||||
return notFoundContent;
|
||||
public focus = () => {
|
||||
if (this.selectRef.current) {
|
||||
this.selectRef.current.focus();
|
||||
}
|
||||
|
||||
if (this.isCombobox()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return renderEmpty('Select');
|
||||
}
|
||||
|
||||
saveSelect = (node: any) => {
|
||||
this.rcSelect = node;
|
||||
};
|
||||
|
||||
focus() {
|
||||
this.rcSelect.focus();
|
||||
}
|
||||
|
||||
blur() {
|
||||
this.rcSelect.blur();
|
||||
}
|
||||
|
||||
isCombobox() {
|
||||
const { mode } = this.props;
|
||||
return mode === 'combobox' || mode === Select.SECRET_COMBOBOX_MODE_DO_NOT_USE;
|
||||
}
|
||||
|
||||
renderSuffixIcon(prefixCls: string) {
|
||||
const { loading, suffixIcon } = this.props;
|
||||
if (suffixIcon) {
|
||||
return React.isValidElement<{ className?: string }>(suffixIcon)
|
||||
? React.cloneElement(suffixIcon, {
|
||||
className: classNames(suffixIcon.props.className, `${prefixCls}-arrow-icon`),
|
||||
})
|
||||
: suffixIcon;
|
||||
public blur = () => {
|
||||
if (this.selectRef.current) {
|
||||
this.selectRef.current.blur();
|
||||
}
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
return <Down className={`${prefixCls}-arrow-icon`} />;
|
||||
}
|
||||
};
|
||||
|
||||
renderSelect = ({
|
||||
getPopupContainer: getContextPopupContainer,
|
||||
getPrefixCls,
|
||||
renderEmpty,
|
||||
}: ConfigConsumerProps) => {
|
||||
getMode = () => {
|
||||
const { mode } = this.props as InternalSelectProps<ValueType>;
|
||||
|
||||
if ((mode as any) === 'combobox') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (mode === Select.SECRET_COMBOBOX_MODE_DO_NOT_USE) {
|
||||
return 'combobox';
|
||||
}
|
||||
|
||||
return mode;
|
||||
};
|
||||
|
||||
renderSelect = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className = '',
|
||||
size,
|
||||
mode,
|
||||
getPopupContainer,
|
||||
removeIcon,
|
||||
suffixIcon,
|
||||
clearIcon,
|
||||
menuItemSelectedIcon,
|
||||
showArrow,
|
||||
inputValue,
|
||||
searchValue,
|
||||
...restProps
|
||||
} = this.props;
|
||||
const rest = omit(restProps, ['inputIcon']);
|
||||
removeIcon,
|
||||
loading,
|
||||
notFoundContent,
|
||||
className,
|
||||
size,
|
||||
listHeight = 256,
|
||||
listItemHeight = 32,
|
||||
} = this.props as InternalSelectProps<ValueType>;
|
||||
|
||||
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
||||
const cls = classNames(
|
||||
{
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-show-arrow`]: showArrow,
|
||||
},
|
||||
className,
|
||||
);
|
||||
const mode = this.getMode();
|
||||
|
||||
let { optionLabelProp } = this.props;
|
||||
if (this.isCombobox()) {
|
||||
// children 带 dom 结构时，无法填入输入框
|
||||
optionLabelProp = optionLabelProp || 'value';
|
||||
const isMultiple = mode === 'multiple' || mode === 'tags';
|
||||
|
||||
// ===================== Empty =====================
|
||||
let mergedNotFound;
|
||||
if (notFoundContent !== undefined) {
|
||||
mergedNotFound = notFoundContent;
|
||||
} else if (mode === 'combobox') {
|
||||
mergedNotFound = null;
|
||||
} else {
|
||||
mergedNotFound = renderEmpty('Select');
|
||||
}
|
||||
|
||||
const modeConfig = {
|
||||
multiple: mode === 'multiple',
|
||||
tags: mode === 'tags',
|
||||
combobox: this.isCombobox(),
|
||||
};
|
||||
// ===================== Icons =====================
|
||||
// Clear Icon
|
||||
let mergedClearIcon = clearIcon;
|
||||
if (!clearIcon) {
|
||||
mergedClearIcon = <CloseCircleFilled />;
|
||||
}
|
||||
|
||||
const finalRemoveIcon = (removeIcon &&
|
||||
(React.isValidElement<{ className?: string }>(removeIcon)
|
||||
? React.cloneElement(removeIcon, {
|
||||
className: classNames(removeIcon.props.className, `${prefixCls}-remove-icon`),
|
||||
})
|
||||
: removeIcon)) || <Close className={`${prefixCls}-remove-icon`} />;
|
||||
// Arrow item icon
|
||||
let mergedSuffixIcon = null;
|
||||
if (suffixIcon !== undefined) {
|
||||
mergedSuffixIcon = suffixIcon;
|
||||
} else if (loading) {
|
||||
mergedSuffixIcon = <Loading spin />;
|
||||
} else {
|
||||
mergedSuffixIcon = <Down />;
|
||||
}
|
||||
|
||||
const finalClearIcon = (clearIcon &&
|
||||
(React.isValidElement<{ className?: string }>(clearIcon)
|
||||
? React.cloneElement(clearIcon, {
|
||||
className: classNames(clearIcon.props.className, `${prefixCls}-clear-icon`),
|
||||
})
|
||||
: clearIcon)) || <CloseCircleFilled className={`${prefixCls}-clear-icon`} />;
|
||||
// Checked item icon
|
||||
let mergedItemIcon = null;
|
||||
if (menuItemSelectedIcon !== undefined) {
|
||||
mergedItemIcon = menuItemSelectedIcon;
|
||||
} else if (isMultiple) {
|
||||
mergedItemIcon = <Check />;
|
||||
} else {
|
||||
mergedItemIcon = null;
|
||||
}
|
||||
|
||||
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
|
||||
(React.isValidElement<{ className?: string }>(menuItemSelectedIcon)
|
||||
? React.cloneElement(menuItemSelectedIcon, {
|
||||
className: classNames(
|
||||
menuItemSelectedIcon.props.className,
|
||||
`${prefixCls}-selected-icon`,
|
||||
),
|
||||
})
|
||||
: menuItemSelectedIcon)) || <Check className={`${prefixCls}-selected-icon`} />;
|
||||
let mergedRemoveIcon = null;
|
||||
if (removeIcon !== undefined) {
|
||||
mergedRemoveIcon = removeIcon;
|
||||
} else {
|
||||
mergedRemoveIcon = <Close />;
|
||||
}
|
||||
|
||||
const selectProps = omit(this.props, ['prefixCls', 'suffixIcon', 'size']);
|
||||
|
||||
const mergedClassName = classNames(className, {
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
});
|
||||
|
||||
return (
|
||||
<RcSelect
|
||||
inputIcon={this.renderSuffixIcon(prefixCls)}
|
||||
removeIcon={finalRemoveIcon}
|
||||
clearIcon={finalClearIcon}
|
||||
menuItemSelectedIcon={finalMenuItemSelectedIcon}
|
||||
showArrow={showArrow}
|
||||
{...rest}
|
||||
{...modeConfig}
|
||||
inputValue={searchValue || inputValue}
|
||||
<RcSelect<ValueType>
|
||||
ref={this.selectRef}
|
||||
{...selectProps}
|
||||
listHeight={listHeight}
|
||||
listItemHeight={listItemHeight}
|
||||
mode={mode}
|
||||
prefixCls={prefixCls}
|
||||
className={cls}
|
||||
optionLabelProp={optionLabelProp || 'children'}
|
||||
notFoundContent={this.getNotFoundContent(renderEmpty)}
|
||||
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
||||
ref={this.saveSelect}
|
||||
inputIcon={mergedSuffixIcon}
|
||||
menuItemSelectedIcon={mergedItemIcon}
|
||||
removeIcon={mergedRemoveIcon}
|
||||
clearIcon={mergedClearIcon}
|
||||
notFoundContent={mergedNotFound}
|
||||
className={mergedClassName}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -284,3 +166,5 @@ export default class Select<T = SelectValue> extends React.Component<SelectProps
|
||||
return <ConfigConsumer>{this.renderSelect}</ConfigConsumer>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Select;
|
||||
|
||||
@ -2,33 +2,49 @@
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
@import './single';
|
||||
@import './multiple';
|
||||
|
||||
.selection__clear() {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
font-style: normal;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
background: @component-background;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: color 0.3s ease, opacity 0.15s ease;
|
||||
text-rendering: auto;
|
||||
&::before {
|
||||
display: block;
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
@select-height-without-border: @input-height-base - 2 * @border-width-base;
|
||||
|
||||
.select-selector() {
|
||||
position: relative;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
|
||||
.@{select-prefix-cls}-show-search& {
|
||||
input {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-focused& {
|
||||
.active();
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-disabled& {
|
||||
color: @disabled-color;
|
||||
background: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset search input style */
|
||||
.select-search-input-without-border() {
|
||||
.@{select-prefix-cls}-selection-search-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,494 +53,155 @@
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
// ======================== Selection ========================
|
||||
&-selection-item {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> ul > li > a {
|
||||
padding: 0;
|
||||
background-color: @component-background;
|
||||
// ======================= Placeholder =======================
|
||||
&-selection-placeholder {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// arrow
|
||||
// ========================== Arrow ==========================
|
||||
&-arrow {
|
||||
.iconfont-mixin();
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 55%;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
width: @font-size-sm;
|
||||
height: @font-size-sm;
|
||||
margin-top: -@font-size-sm / 2;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.3s;
|
||||
pointer-events: none;
|
||||
|
||||
& &-icon svg {
|
||||
transition: transform 0.3s;
|
||||
.@{select-prefix-cls}-open & {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-selection {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
background-color: @component-background;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.02px;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
.hover;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-focused &,
|
||||
&:focus,
|
||||
&:active {
|
||||
.active;
|
||||
}
|
||||
|
||||
&__clear {
|
||||
.selection__clear();
|
||||
}
|
||||
|
||||
&:hover &__clear {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-selected-value {
|
||||
float: left;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&-no-arrow &-selection-selected-value {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
}
|
||||
|
||||
&-disabled &-selection {
|
||||
background: @input-disabled-bg;
|
||||
cursor: not-allowed;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: @select-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&__clear {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled &-selection--multiple &-selection__choice {
|
||||
padding-right: 10px;
|
||||
color: fade(@black, 33%);
|
||||
background: @background-color-base;
|
||||
&__remove {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection--single {
|
||||
position: relative;
|
||||
height: @input-height-base;
|
||||
cursor: pointer;
|
||||
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-no-arrow {
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
margin-right: @control-padding-horizontal - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection__rendered {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-right: @control-padding-horizontal - 1px;
|
||||
margin-left: @control-padding-horizontal - 1px;
|
||||
line-height: @input-height-base - 2px;
|
||||
// https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
content: '.';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
font-size: @font-size-lg;
|
||||
.@{select-prefix-cls}-selection--single {
|
||||
height: @input-height-lg;
|
||||
}
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: @input-height-lg - 2px;
|
||||
}
|
||||
.@{select-prefix-cls}-selection--multiple {
|
||||
min-height: @input-height-lg;
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
li {
|
||||
height: @input-height-lg - 8px;
|
||||
line-height: @input-height-lg - 8px;
|
||||
}
|
||||
}
|
||||
.@{select-prefix-cls}-selection__clear,
|
||||
.@{select-prefix-cls}-arrow {
|
||||
top: @input-height-lg / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.@{select-prefix-cls}-selection--single {
|
||||
height: @input-height-sm;
|
||||
}
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
margin-left: @control-padding-horizontal-sm - 1px;
|
||||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
.@{select-prefix-cls}-selection--multiple {
|
||||
min-height: @input-height-sm;
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
li {
|
||||
height: @input-height-sm - 8px;
|
||||
line-height: @input-height-sm - 10px;
|
||||
}
|
||||
}
|
||||
.@{select-prefix-cls}-selection__clear,
|
||||
.@{select-prefix-cls}-arrow {
|
||||
top: @input-height-sm / 2;
|
||||
}
|
||||
}
|
||||
.@{select-prefix-cls}-selection__clear,
|
||||
.@{select-prefix-cls}-arrow {
|
||||
right: @control-padding-horizontal-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled &-selection__choice__remove {
|
||||
color: @disabled-color;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-search__field__wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-selection__placeholder,
|
||||
&-search__field__placeholder {
|
||||
// for TreeSelect compatibility
|
||||
// ========================== Clear ==========================
|
||||
&-clear {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 9px;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
overflow: hidden;
|
||||
color: @input-placeholder-color;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-search__field__placeholder {
|
||||
left: @control-padding-horizontal;
|
||||
}
|
||||
|
||||
&-search__field__mirror {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
white-space: pre;
|
||||
right: @control-padding-horizontal - 1px;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: @font-size-sm;
|
||||
height: @font-size-sm;
|
||||
margin-top: -@font-size-sm / 2;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
background: @component-background;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-search--inline {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.@{select-prefix-cls}-search__field__wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: color 0.3s ease, opacity 0.15s ease;
|
||||
text-rendering: auto;
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-search__field {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
border-width: 0;
|
||||
border-radius: @border-radius-base;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-selection--multiple {
|
||||
min-height: @input-height-base;
|
||||
padding-bottom: 3px;
|
||||
cursor: text;
|
||||
.clearfix;
|
||||
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
position: static;
|
||||
float: left;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
.@{select-prefix-cls}-search__field {
|
||||
width: 0.75em;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
height: auto;
|
||||
margin-bottom: -3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__placeholder {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
> ul > li,
|
||||
.@{select-prefix-cls}-selection__rendered > ul > li {
|
||||
height: @input-height-base - 8px;
|
||||
// for tree-select
|
||||
margin-top: 3px;
|
||||
line-height: @input-height-base - 8px - 2px;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice {
|
||||
position: relative;
|
||||
float: left;
|
||||
max-width: 99%;
|
||||
margin-right: 4px;
|
||||
padding: 0 20px 0 10px;
|
||||
overflow: hidden;
|
||||
color: @tag-default-color;
|
||||
background-color: @tag-default-bg;
|
||||
border: 1px solid @border-color-split;
|
||||
border-radius: @border-radius-sm;
|
||||
cursor: default;
|
||||
transition: padding 0.3s @ease-in-out;
|
||||
&__disabled {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice__content {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: margin 0.3s @ease-in-out;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice__remove {
|
||||
.iconfont-mixin();
|
||||
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
font-weight: bold;
|
||||
font-size: @font-size-sm;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.iconfont-size-under-12px(10px);
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__clear,
|
||||
.@{select-prefix-cls}-arrow {
|
||||
top: @input-height-base / 2;
|
||||
.@{select-prefix-cls}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-allow-clear &-selection--single &-selection-selected-value {
|
||||
padding-right: 16px;
|
||||
}
|
||||
// ========================== Popup ==========================
|
||||
&-dropdown {
|
||||
.reset-component;
|
||||
|
||||
&-allow-clear &-selection--multiple &-selection__rendered,
|
||||
&-show-arrow &-selection--multiple &-selection__rendered {
|
||||
margin-right: 20px; // In case that clear button will overlap content
|
||||
}
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-base;
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
font-variant: initial;
|
||||
background-color: @select-dropdown-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
&-open {
|
||||
.@{select-prefix-cls}-arrow {
|
||||
&-icon svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
|
||||
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpIn;
|
||||
}
|
||||
.@{select-prefix-cls}-selection {
|
||||
.active();
|
||||
}
|
||||
}
|
||||
|
||||
&-combobox {
|
||||
.@{select-prefix-cls}-arrow {
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
|
||||
&.slide-up-appear.slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: antSlideDownIn;
|
||||
}
|
||||
|
||||
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpOut;
|
||||
}
|
||||
|
||||
&.slide-up-leave.slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: antSlideDownOut;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
.@{select-prefix-cls}-search--inline {
|
||||
float: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.@{select-prefix-cls}-search__field__wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.@{select-prefix-cls}-search__field {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s @ease-in-out, height 0s;
|
||||
}
|
||||
}
|
||||
&-combobox&-allow-clear &-selection:hover &-selection__rendered,
|
||||
&-combobox&-show-arrow &-selection:hover &-selection__rendered {
|
||||
margin-right: 20px; // In case that clear button will overlap content
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-dropdown {
|
||||
.reset-component;
|
||||
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
z-index: @zindex-dropdown;
|
||||
box-sizing: border-box;
|
||||
font-size: @font-size-base;
|
||||
// Fix select render lag of long text in chrome
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
font-variant: initial;
|
||||
background-color: @select-dropdown-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
|
||||
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpIn;
|
||||
}
|
||||
|
||||
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
|
||||
&.slide-up-appear.slide-up-appear-active&-placement-topLeft {
|
||||
animation-name: antSlideDownIn;
|
||||
}
|
||||
// ========================= Options =========================
|
||||
&-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
|
||||
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
|
||||
animation-name: antSlideUpOut;
|
||||
}
|
||||
|
||||
&.slide-up-leave.slide-up-leave-active&-placement-topLeft {
|
||||
animation-name: antSlideDownOut;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
max-height: 250px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0; // Override default ul/ol
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
|
||||
&-item-group-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .@{select-prefix-cls}-dropdown-menu-item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-group-title {
|
||||
height: 32px;
|
||||
padding: 0 @control-padding-horizontal;
|
||||
// =========== Group ============
|
||||
&-group {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&-item-group-list &-item:first-child:not(:last-child),
|
||||
&-item-group:not(:last-child) &-item-group-list &-item:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
// =========== Option ===========
|
||||
&-option {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 5px @control-padding-horizontal;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
&-content {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover:not(&-disabled) {
|
||||
&-state {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&-active:not(&-disabled) {
|
||||
background-color: @item-hover-bg;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
color: @text-color;
|
||||
font-weight: @select-item-selected-font-weight;
|
||||
@ -534,68 +211,14 @@
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-active:not(&-disabled) {
|
||||
background-color: @select-item-active-bg;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
height: 1px;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&&--multiple {
|
||||
.@{select-prefix-cls}-dropdown-menu-item {
|
||||
padding-right: @control-padding-horizontal + 20;
|
||||
& .@{select-prefix-cls}-selected-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: @control-padding-horizontal;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:hover .@{select-prefix-cls}-selected-icon {
|
||||
color: fade(@black, 87%);
|
||||
}
|
||||
|
||||
&-disabled .@{select-prefix-cls}-selected-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-selected .@{select-prefix-cls}-selected-icon,
|
||||
&-selected:hover .@{select-prefix-cls}-selected-icon {
|
||||
display: inline-block;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Patch for popup adjust
|
||||
// https://github.com/ant-design/ant-design/issues/14422
|
||||
&--empty&--multiple &-menu-item {
|
||||
padding-right: @control-padding-horizontal;
|
||||
}
|
||||
|
||||
&-container-open,
|
||||
&-open {
|
||||
.@{select-prefix-cls}-dropdown {
|
||||
display: block;
|
||||
}
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
&-lg {
|
||||
font-size: @font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
144
components/select/style/multiple.less
Normal file
144
components/select/style/multiple.less
Normal file
@ -0,0 +1,144 @@
|
||||
@import './index';
|
||||
|
||||
@select-selection-height: @input-height-base - @input-padding-vertical-base * 2;
|
||||
@select-multiple-padding: @input-padding-vertical-base - @border-width-base;
|
||||
|
||||
/**
|
||||
* Do not merge `height` & `line-height` under style with `selection` & `search`,
|
||||
* since chrome may update to redesign with its align logic.
|
||||
*/
|
||||
|
||||
.@{select-prefix-cls}-multiple {
|
||||
// ========================= Selector =========================
|
||||
.@{select-prefix-cls}-selector {
|
||||
.select-selector();
|
||||
.select-search-input-without-border();
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// Multiple is little different that horizontal is follow the vertical
|
||||
padding: 0 @select-multiple-padding @select-multiple-padding;
|
||||
}
|
||||
|
||||
// ======================== Selections ========================
|
||||
.@{select-prefix-cls}-selection-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
|
||||
height: @select-selection-height;
|
||||
margin-top: @select-multiple-padding;
|
||||
margin-right: @input-padding-vertical-base;
|
||||
padding: 0 (@padding-xs / 2) 0 @padding-xs;
|
||||
line-height: @select-selection-height - @border-width-base * 2;
|
||||
background: @background-color-base;
|
||||
border: 1px solid @border-color-split;
|
||||
// strange align fix for chrome but works
|
||||
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
|
||||
border-top-width: @border-width-base + 0.4px;
|
||||
border-radius: @border-radius-sm;
|
||||
cursor: default;
|
||||
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
|
||||
user-select: none;
|
||||
|
||||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||||
&-content {
|
||||
display: inline-block;
|
||||
margin-right: @padding-xs / 2;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&-remove {
|
||||
.iconfont-mixin();
|
||||
|
||||
display: inline-block;
|
||||
color: @text-color-secondary;
|
||||
font-weight: bold;
|
||||
font-size: @font-size-sm;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
.iconfont-size-under-12px(10px);
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Input ==========================
|
||||
.@{select-prefix-cls}-selection-search {
|
||||
position: relative;
|
||||
margin-left: @select-multiple-padding / 2;
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
height: @select-selection-height;
|
||||
font-family: @font-family;
|
||||
line-height: @select-selection-height - @border-width-base * 2;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
margin-top: @select-multiple-padding;
|
||||
}
|
||||
|
||||
&-mirror {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
white-space: nowrap;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: @control-padding-horizontal;
|
||||
height: @select-height-without-border;
|
||||
line-height: @select-height-without-border;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
.select-size(@suffix, @input-height) {
|
||||
@merged-cls: ~'@{select-prefix-cls}-@{suffix}';
|
||||
&.@{merged-cls} {
|
||||
@select-selection-height: @input-height - @input-padding-vertical-base * 2;
|
||||
@select-height-without-border: @input-height - @border-width-base * 2;
|
||||
|
||||
.@{select-prefix-cls}-selection-item {
|
||||
height: @select-selection-height;
|
||||
line-height: @select-selection-height - @border-width-base * 2;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection-search {
|
||||
height: @select-selection-height + @select-multiple-padding;
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
height: @select-selection-height;
|
||||
line-height: @select-selection-height - @border-width-base * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
height: @select-height-without-border;
|
||||
line-height: @select-height-without-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-size('lg', @input-height-lg);
|
||||
.select-size('sm', @input-height-sm);
|
||||
}
|
||||
107
components/select/style/single.less
Normal file
107
components/select/style/single.less
Normal file
@ -0,0 +1,107 @@
|
||||
@import './index';
|
||||
|
||||
.@{select-prefix-cls}-single {
|
||||
// ========================= Selector =========================
|
||||
.@{select-prefix-cls}-selector {
|
||||
display: flex;
|
||||
|
||||
.@{select-prefix-cls}-selection-search {
|
||||
width: 100%;
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection-item,
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
line-height: @input-height-base;
|
||||
transition: all 0.3s;
|
||||
pointer-events: none;
|
||||
|
||||
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
|
||||
@supports (-moz-appearance: meterbar) {
|
||||
& {
|
||||
line-height: @select-height-without-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item {
|
||||
padding-right: @control-padding-horizontal + @font-size-sm;
|
||||
}
|
||||
|
||||
// Opacity selection if open
|
||||
&.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
// ========================== Input ==========================
|
||||
// We only change the style of non-customize input which is only support by `combobox` mode.
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix-cls}-customize-input) {
|
||||
.@{select-prefix-cls}-selector {
|
||||
.select-selector();
|
||||
.select-search-input-without-border();
|
||||
width: 100%;
|
||||
|
||||
height: @input-height-base;
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
|
||||
.@{select-prefix-cls}-selection-search-input {
|
||||
height: @select-height-without-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
.select-size(@suffix, @input-height) {
|
||||
@merged-cls: ~'@{select-prefix-cls}-@{suffix}';
|
||||
|
||||
&.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
|
||||
.@{select-prefix-cls}-selector {
|
||||
height: @input-height;
|
||||
|
||||
.@{select-prefix-cls}-selection-item,
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
line-height: @input-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix-cls}-customize-input) {
|
||||
.@{select-prefix-cls}-selection-search-input {
|
||||
height: @input-height - 2 * @border-width-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-size('lg', @input-height-lg);
|
||||
.select-size('sm', @input-height-sm);
|
||||
|
||||
// Size small need additional set padding
|
||||
&.@{select-prefix-cls}-sm {
|
||||
&:not(.@{select-prefix-cls}-customize-input) {
|
||||
.@{select-prefix-cls}-selector {
|
||||
&,
|
||||
.@{select-prefix-cls}-selection-item,
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
padding: 0 @input-padding-horizontal-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -224,7 +224,7 @@ describe('Table.pagination', () => {
|
||||
},
|
||||
}),
|
||||
);
|
||||
wrapper.find('.ant-select').simulate('click');
|
||||
wrapper.find('.ant-select-selector').simulate('mousedown');
|
||||
jest.runAllTimers();
|
||||
const dropdownWrapper = mount(
|
||||
wrapper
|
||||
@ -232,9 +232,9 @@ describe('Table.pagination', () => {
|
||||
.instance()
|
||||
.getComponent(),
|
||||
);
|
||||
expect(dropdownWrapper.find('MenuItem').length).toBe(4);
|
||||
expect(wrapper.find('.ant-select-item-option').length).toBe(4);
|
||||
dropdownWrapper
|
||||
.find('MenuItem')
|
||||
.find('.ant-select-item-option')
|
||||
.at(3)
|
||||
.simulate('click');
|
||||
expect(onShowSizeChange).toHaveBeenCalled();
|
||||
|
||||
@ -1771,184 +1771,224 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
|
||||
exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tabs ant-tabs-top ant-tabs-line"
|
||||
@ -2478,56 +2518,60 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
|
||||
>
|
||||
Tab position：
|
||||
<div
|
||||
class="ant-select ant-select-enabled"
|
||||
class="ant-select ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-selected-value"
|
||||
style="display:block;opacity:1"
|
||||
title="top"
|
||||
>
|
||||
top
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
top
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { AbstractSelectProps } from '../select';
|
||||
import { SelectProps } from '../select';
|
||||
|
||||
export type TreeNode = TreeNodeNormal | TreeNodeSimpleMode;
|
||||
|
||||
@ -31,15 +31,13 @@ export interface TreeDataSimpleMode {
|
||||
rootPId?: string;
|
||||
}
|
||||
|
||||
export interface TreeSelectProps<T extends TreeNodeValue> extends AbstractSelectProps {
|
||||
export interface TreeSelectProps<T extends TreeNodeValue> extends Omit<SelectProps<T>, 'onChange'> {
|
||||
autoFocus?: boolean;
|
||||
defaultValue?: T;
|
||||
dropdownStyle?: React.CSSProperties;
|
||||
filterTreeNode?: (inputValue: string, treeNode: any) => boolean | boolean;
|
||||
labelInValue?: boolean;
|
||||
loadData?: (node: any) => void;
|
||||
maxTagCount?: number;
|
||||
maxTagPlaceholder?: React.ReactNode | ((omittedValues: any[]) => React.ReactNode);
|
||||
multiple?: boolean;
|
||||
notFoundContent?: React.ReactNode;
|
||||
onChange?: (value: T, label: any, extra: any) => void;
|
||||
|
||||
@ -493,6 +493,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
|
||||
exports[`Directory Tree expand click 1`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -742,6 +743,7 @@ exports[`Directory Tree expand click 1`] = `
|
||||
exports[`Directory Tree expand click 2`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -885,6 +887,7 @@ exports[`Directory Tree expand click 2`] = `
|
||||
exports[`Directory Tree expand double click 1`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -1134,6 +1137,7 @@ exports[`Directory Tree expand double click 1`] = `
|
||||
exports[`Directory Tree expand double click 2`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -1277,6 +1281,7 @@ exports[`Directory Tree expand double click 2`] = `
|
||||
exports[`Directory Tree expand with state control click 1`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -1411,6 +1416,7 @@ exports[`Directory Tree expand with state control click 1`] = `
|
||||
exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
@ -1545,6 +1551,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
|
||||
exports[`Directory Tree expandedKeys update 1`] = `
|
||||
<div
|
||||
class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
|
||||
disabled=""
|
||||
role="tree"
|
||||
>
|
||||
<div>
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
"rc-pagination": "~1.20.5",
|
||||
"rc-progress": "~2.5.0",
|
||||
"rc-rate": "~2.5.0",
|
||||
"rc-select": "~9.2.0",
|
||||
"rc-select": "~10.0.0-alpha.11",
|
||||
"rc-slider": "~8.6.11",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
@ -90,6 +90,7 @@
|
||||
"rc-trigger": "^2.6.2",
|
||||
"rc-upload": "~2.7.0",
|
||||
"rc-util": "^4.10.0",
|
||||
"rc-virtual-list": "^0.0.0-alpha.25",
|
||||
"react-lazy-load": "^3.0.13",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-slick": "~0.25.2",
|
||||
|
||||
3
tests/__mocks__/rc-virtual-list.js
Normal file
3
tests/__mocks__/rc-virtual-list.js
Normal file
@ -0,0 +1,3 @@
|
||||
import List from 'rc-virtual-list/lib/mock';
|
||||
|
||||
export default List;
|
||||
@ -3,6 +3,8 @@ import { render } from 'enzyme';
|
||||
import MockDate from 'mockdate';
|
||||
import moment from 'moment';
|
||||
|
||||
// We should avoid use it in 4.0. Reopen if can not handle this.
|
||||
const USE_REPLACEMENT = false;
|
||||
const testDist = process.env.LIB_DIR === 'dist';
|
||||
|
||||
/**
|
||||
@ -12,7 +14,7 @@ const testDist = process.env.LIB_DIR === 'dist';
|
||||
* So we need hack of this to modify the `aria-controls`.
|
||||
*/
|
||||
function ariaConvert(wrapper) {
|
||||
if (!testDist) return wrapper;
|
||||
if (!testDist || !USE_REPLACEMENT) return wrapper;
|
||||
|
||||
const matches = new Map();
|
||||
|
||||
|
||||
2
typings/custom-typings.d.ts
vendored
2
typings/custom-typings.d.ts
vendored
@ -16,8 +16,6 @@ declare module 'shallowequal';
|
||||
|
||||
declare module 'css-animation*';
|
||||
|
||||
declare module 'rc-select';
|
||||
|
||||
declare module 'rc-cascader';
|
||||
|
||||
declare module 'array-tree-filter';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user