mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

🆕 Add bordered prop (#21242)

Browse Source 
close #19859
This commit is contained in:
偏右 2020-02-06 10:02:02 +08:00 committed by GitHub
parent a558dd8756
commit 06ba40e860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 656 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/cascader/index.en-US.md
View File

@ -22,6 +22,7 @@ Cascade selection box.
| --- | --- | --- | --- | --- |
| allowClear | whether allow clear | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| bordered | whether has border style | boolean | true | |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false | |
| className | additional css class | string | - | |
| defaultValue | initial selected value | string\[] | \[] | |

8
components/cascader/index.tsx
View File

@ -83,6 +83,8 @@ export interface CascaderProps {
placeholder?: string;
/** 输入框大小，可选 `large` `default` `small` */
size?: SizeType;
/** whether has border style */
bordered?: boolean;
/** 禁用 */
disabled?: boolean;
/** 是否支持清除 */
@ -221,6 +223,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
options: [],
disabled: false,
allowClear: true,
bordered: true,
};
static getDerivedStateFromProps(nextProps: CascaderProps, { prevProps }: CascaderState) {
@ -456,6 +459,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
suffixIcon,
notFoundContent,
popupClassName,
bordered,
...otherProps
} = props;
const mergedSize = customizeSize || size;
@ -489,6 +493,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
[`${prefixCls}-picker-${mergedSize}`]: !!mergedSize,
[`${prefixCls}-picker-show-search`]: !!showSearch,
[`${prefixCls}-picker-focused`]: inputFocused,
[`${prefixCls}-picker-borderless`]: !bordered,
});
// Fix bug of https://github.com/facebook/react/pull/5004
@ -511,6 +516,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
'sortFilteredOption',
'notFoundContent',
'fieldNames',
'bordered',
]);
let { options } = props;
@ -594,7 +600,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
);
const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon']);
const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered']);
const rcCascaderRtlPopupClassName = classNames(popupClassName, {
[`${prefixCls}-menu-${direction}`]: direction === 'rtl',
});

1
components/cascader/index.zh-CN.md
View File

@ -23,6 +23,7 @@ subtitle: 级联选择
| --- | --- | --- | --- | --- |
| allowClear | 是否支持清除 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | |
| className | 自定义类名 | string | - | |
| defaultValue | 默认的选中项 | string\[] | \[] | |

5
components/cascader/style/index.less
View File

@ -59,6 +59,11 @@
.active;
}
&-borderless .@{cascader-prefix-cls}-input {
border-color: transparent !important;
box-shadow: none !important;
}
&-show-search&-focused {
color: @disabled-color;
}

408
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -160,6 +160,414 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
</div>
`;
exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
<div>
<div
class="ant-picker ant-picker-borderless"
>
<div
class="ant-picker-input"
>
<input
placeholder="Select date"
readonly=""
size="12"
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
<br />
<div
class="ant-picker ant-picker-borderless"
>
<div
class="ant-picker-input"
>
<input
placeholder="Select week"
readonly=""
size="12"
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
<br />
<div
class="ant-picker ant-picker-borderless"
>
<div
class="ant-picker-input"
>
<input
placeholder="Select month"
readonly=""
size="12"
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
<br />
<div
class="ant-picker ant-picker-borderless"
>
<div
class="ant-picker-input"
>
<input
placeholder="Select year"
readonly=""
size="12"
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
<br />
<div
class="ant-picker ant-picker-range ant-picker-borderless"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
placeholder="Start date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
class="ant-picker-separator"
>
→
</span>
</div>
<div
class="ant-picker-input"
>
<input
placeholder="End date"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
<br />
<div
class="ant-picker ant-picker-range ant-picker-borderless"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
placeholder="Start week"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
class="ant-picker-separator"
>
→
</span>
</div>
<div
class="ant-picker-input"
>
<input
placeholder="End week"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
<br />
<div
class="ant-picker ant-picker-range ant-picker-borderless"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
placeholder="Start month"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
class="ant-picker-separator"
>
→
</span>
</div>
<div
class="ant-picker-input"
>
<input
placeholder="End month"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
<br />
<div
class="ant-picker ant-picker-range ant-picker-borderless"
>
<div
class="ant-picker-input ant-picker-input-active"
>
<input
placeholder="Start year"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-range-separator"
>
<span
class="ant-picker-separator"
>
→
</span>
</div>
<div
class="ant-picker-input"
>
<input
placeholder="End year"
readonly=""
size="12"
value=""
/>
</div>
<div
class="ant-picker-active-bar"
style="left:0;width:0;position:absolute"
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
</div>
`;
exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
<div>
<div

41
components/date-picker/demo/bordered.md Normal file
View File

@ -0,0 +1,41 @@
---
order: 23
title:
zh-CN: 无边框
en-US: Bordered-less
---
## zh-CN
无边框样式。
## en-US
Bordered-less style component.
```jsx
import { DatePicker } from 'antd';
const { RangePicker } = DatePicker;
ReactDOM.render(
<div>
<DatePicker bordered={false} />
<br />
<DatePicker picker="week" bordered={false} />
<br />
<DatePicker picker="month" bordered={false} />
<br />
<DatePicker picker="year" bordered={false} />
<br />
<RangePicker bordered={false} />
<br />
<RangePicker picker="week" bordered={false} />
<br />
<RangePicker picker="month" bordered={false} />
<br />
<RangePicker picker="year" bordered={false} />
</div>,
mountNode,
);
```

6
components/date-picker/generatePicker.tsx
View File

@ -78,6 +78,7 @@ type InjectDefaultProps<Props> = Omit<
> & {
locale?: typeof enUS;
size?: SizeType;
bordered?: boolean;
};
// Picker Props
@ -148,6 +149,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
prefixCls: customizePrefixCls,
className,
size: customizeSize,
bordered = true,
...restProps
} = this.props;
const { format, showTime } = this.props as any;
@ -192,6 +194,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
locale={locale!.lang}
className={classNames(className, {
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
})}
prefixCls={prefixCls}
generateConfig={generateConfig}
@ -265,7 +268,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
renderPicker = (locale: any) => {
const { getPrefixCls, direction } = this.context;
const { prefixCls: customizePrefixCls, className, size, ...restProps } = this.props;
const { prefixCls: customizePrefixCls, className, size, bordered = true, ...restProps } = this.props;
const { format, showTime, picker } = this.props as any;
const prefixCls = getPrefixCls('picker', customizePrefixCls);
@ -289,6 +292,7 @@ function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
{...restProps}
className={classNames(className, {
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-borderless`]: !bordered,
})}
{...additionalOverrideProps}
locale={locale!.lang}

1
components/date-picker/index.en-US.md
View File

@ -60,6 +60,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
| popupStyle | to customize the style of the popup calendar | object | {} | |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - | |
| bordered | whether has border style | Boolean | true | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| style | to customize the style of the input box | object | {} | |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - | |

1
components/date-picker/index.zh-CN.md
View File

@ -62,6 +62,7 @@ import 'moment/locale/zh-cn';
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
| popupStyle | 额外的弹出日历样式 | object | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 | |
| bordered | 是否有边框 | Boolean | true | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| style | 自定义输入框样式 | object | {} | |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 | |

6
components/date-picker/style/index.less
View File

@ -51,6 +51,12 @@
border-color: @select-border-color;
}
&&-borderless {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
// ======================== Input =========================
&-input {
position: relative;

123
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -410,6 +410,129 @@ exports[`renders ./components/select/demo/big-data.md correctly 1`] = `
</div>
`;
exports[`renders ./components/select/demo/bordered.md correctly 1`] = `
Array [
<div
class="ant-select ant-select-borderless ant-select-single ant-select-show-arrow"
style="width:120px"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<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"
readonly=""
role="combobox"
style="opacity:0"
value=""
/>
</span>
<span
class="ant-select-selection-item"
>
Lucy
</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 ant-select-borderless ant-select-single ant-select-show-arrow ant-select-disabled"
style="width:120px"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="undefined_list_0"
aria-autocomplete="list"
aria-controls="undefined_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="undefined_list"
autocomplete="off"
class="ant-select-selection-search-input"
disabled=""
readonly=""
role="combobox"
style="opacity:0"
value=""
/>
</span>
<span
class="ant-select-selection-item"
>
Lucy
</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>,
]
`;
exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
<div>
<div

34
components/select/demo/bordered.md Normal file
View File

@ -0,0 +1,34 @@
---
order: 23
title:
zh-CN: 无边框
en-US: Bordered-less
---
## zh-CN
无边框样式。
## en-US
Bordered-less style component.
```jsx
import { Select } from 'antd';
const { Option } = Select;
ReactDOM.render(
<>
<Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{ width: 120 }} disabled bordered={false}>
<Option value="lucy">Lucy</Option>
</Select>
</>,
mountNode,
);
```

1
components/select/index.en-US.md
View File

@ -69,6 +69,7 @@ Select component to select value from options.
| open | Controlled open state of dropdown | boolean | - | |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
| loading | indicate loading state | Boolean | false | |
| bordered | whether has border style | Boolean | true | |
### Select Methods

5
components/select/index.tsx
View File

@ -24,6 +24,7 @@ export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'>
suffixIcon?: React.ReactNode;
size?: SizeType;
mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
bordered?: boolean;
}
export interface SelectProps<VT>
@ -44,6 +45,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
static defaultProps = {
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
bordered: true,
};
selectRef = React.createRef<RcSelect<ValueType>>();
@ -89,6 +91,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
listItemHeight = 32,
getPopupContainer,
dropdownClassName,
bordered,
} = this.props as InternalSelectProps<ValueType>;
const prefixCls = getPrefixCls('select', customizePrefixCls);
@ -119,6 +122,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
'removeIcon',
'clearIcon',
'size',
'bordered',
]);
const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
@ -132,6 +136,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered,
});
return (

1
components/select/index.zh-CN.md
View File

@ -70,6 +70,7 @@ title: Select
| open | 是否展开下拉菜单 | boolean | - | |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
| loading | 加载中状态 | Boolean | false | |
| bordered | 是否有边框 | Boolean | true | |
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。

7
components/select/style/index.less
View File

@ -272,4 +272,11 @@
&-lg {
font-size: @font-size-lg;
}
// no border style
&-borderless &-selector {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
}

1
components/time-picker/index.en-US.md
View File

@ -25,6 +25,7 @@ import moment from 'moment';
| --- | --- | --- | --- | --- |
| allowClear | allow clearing text | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| bordered | whether has border style | boolean | true | |
| className | className of picker | string | '' | |
| clearText | clear tooltip of icon | string | clear | |
| defaultValue | to set default time | [moment](http://momentjs.com/) | - | |

1
components/time-picker/index.zh-CN.md
View File

@ -26,6 +26,7 @@ import moment from 'moment';
| --- | --- | --- | --- | --- |
| allowClear | 是否展示清除按钮 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有 | boolean | true | |
| className | 选择器类名 | string | '' | |
| clearText | 清除按钮的提示文案 | string | clear | |
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | |

1
components/tree-select/index.en-US.md
View File

@ -18,6 +18,7 @@ Tree selection control.
| --- | --- | --- | --- | --- |
| allowClear | Whether allow clear | boolean | false | |
| autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | |
| bordered | whether has border style | boolean | true | |
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - | |
| disabled | Disabled or not | boolean | false | |
| dropdownClassName | className of dropdown menu | string | - | |

5
components/tree-select/index.tsx
View File

@ -32,6 +32,7 @@ export interface TreeSelectProps<T>
'showTreeIcon' | 'treeMotion' | 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'
> {
size?: SizeType;
bordered?: boolean;
}
class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
@ -46,6 +47,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
static defaultProps = {
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
bordered: true,
};
selectRef = React.createRef<RcTreeSelect>();
@ -91,6 +93,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
treeLine,
getPopupContainer,
dropdownClassName,
bordered,
} = this.props;
const prefixCls = getPrefixCls('select', customizePrefixCls);
@ -130,6 +133,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
'clearIcon',
'switcherIcon',
'size',
'bordered',
]);
return (
@ -142,6 +146,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
[`${prefixCls}-lg`]: mergedSize === 'large',
[`${prefixCls}-sm`]: mergedSize === 'small',
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-borderless`]: !bordered,
},
className,
);

1
components/tree-select/index.zh-CN.md
View File

@ -19,6 +19,7 @@ title: TreeSelect
| --- | --- | --- | --- | --- |
| allowClear | 显示清除按钮 | boolean | false | |
| autoClearSearchValue | 当多选模式下值被选择，自动清空搜索框 | boolean | true | |
| bordered | 是否显示边框 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string/string\[] | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |