mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
Merge pull request #27137 from ant-design/master
chore: merge master into feature
This commit is contained in:
偏右
GitHub
parent
1123666ebe
commit
2788140d1a
@ -20,7 +20,9 @@ timeline: true
|
||||
`2020-10-10`
|
||||
|
||||
- 🔥 Input.TextArea support word count. [#26952](https://github.com/ant-design/ant-design/pull/26952) [@zhangchen915](https://github.com/zhangchen915)
|
||||
- 🔥 DatePicker support custom `format` by passing a function. [#26845](https://github.com/ant-design/ant-design/pull/26845)
|
||||
- DatePicker
|
||||
- 🔥 DatePicker support custom `format` by passing a function. [#26845](https://github.com/ant-design/ant-design/pull/26845)
|
||||
- 🐞 Fix RangePicker initial date of end panel cannot selected. [#23167](https://github.com/ant-design/ant-design/issues/23167)
|
||||
- Form
|
||||
- 🔥 Form.Item support `tooltip` to customize tooltip. [#26780](https://github.com/ant-design/ant-design/pull/26780)
|
||||
- 🆕 Form.List support `rules` validation and add Form.ErrorList to show the errors. [#26676](https://github.com/ant-design/ant-design/pull/26676)
|
||||
|
||||
@ -20,7 +20,9 @@ timeline: true
|
||||
`2020-10-10`
|
||||
|
||||
- 🔥 Input.TextArea 支持字数统计功能。[#26952](https://github.com/ant-design/ant-design/pull/26952) [@zhangchen915](https://github.com/zhangchen915)
|
||||
- 🔥 DatePicker `format` 支持传入一个函数以自定义显示内容。[#26845](https://github.com/ant-design/ant-design/pull/26845)
|
||||
- DatePicker
|
||||
- 🔥 DatePicker `format` 支持传入一个函数以自定义显示内容。[#26845](https://github.com/ant-design/ant-design/pull/26845)
|
||||
- 🐞 修复 RangePicker 结束日期初始值无法选择的问题。[#23167](https://github.com/ant-design/ant-design/issues/23167)
|
||||
- Form
|
||||
- 🔥 Form.Item 支持 `tooltip` 属性自定义提示信息。[#26780](https://github.com/ant-design/ant-design/pull/26780)
|
||||
- 🆕 Form.List 支持 `rules` 校验并添加 Form.ErrorList 组件用于展示。[#26676](https://github.com/ant-design/ant-design/pull/26676)
|
||||
|
||||
@ -79,44 +79,52 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-select-selection-search-input"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="input here"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="input here"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-lg ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -737,43 +745,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
|
||||
class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -881,43 +897,51 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
|
||||
class="ant-input-group-wrapper ant-input-search ant-select-selection-search-input"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -1041,7 +1065,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large ant-select-selection-search-input"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
|
||||
@ -48,7 +48,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
|
||||
<div className={`${prefixCls}-wrapper`}>
|
||||
{children}
|
||||
<div className={ribbonCls} style={{ ...colorStyle, ...style }}>
|
||||
{text}
|
||||
<span className={`${prefixCls}-text`}>{text}</span>
|
||||
<div className={`${prefixCls}-corner`} style={cornerColorStyle} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2060,7 +2060,11 @@ exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end"
|
||||
>
|
||||
Pushes open the window
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
Pushes open the window
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
@ -2092,7 +2096,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end"
|
||||
>
|
||||
啦啦啦啦
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
啦啦啦啦
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
@ -2118,7 +2126,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
|
||||
>
|
||||
啦啦啦啦
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
啦啦啦啦
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
@ -2145,7 +2157,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
|
||||
class="ant-ribbon ant-ribbon-placement-end"
|
||||
style="background:#2db7f5"
|
||||
>
|
||||
啦啦啦啦
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
啦啦啦啦
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
style="color:#2db7f5"
|
||||
@ -2173,7 +2189,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
|
||||
class="ant-ribbon ant-ribbon-placement-start"
|
||||
style="background:#2db7f5"
|
||||
>
|
||||
啦啦啦啦
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
啦啦啦啦
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
style="color:#2db7f5"
|
||||
@ -2200,7 +2220,11 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
|
||||
class="ant-ribbon ant-ribbon-placement-end"
|
||||
style="background:#2db7f5"
|
||||
>
|
||||
啦啦啦啦
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
>
|
||||
啦啦啦啦
|
||||
</span>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
style="color:#2db7f5"
|
||||
|
||||
@ -3505,6 +3505,9 @@ exports[`Ribbon rtl render component should be rendered correctly in RTL directi
|
||||
<div
|
||||
class="ant-ribbon ant-ribbon-placement-end ant-ribbon-rtl"
|
||||
>
|
||||
<span
|
||||
class="ant-ribbon-text"
|
||||
/>
|
||||
<div
|
||||
class="ant-ribbon-corner"
|
||||
/>
|
||||
|
||||
@ -21,12 +21,16 @@
|
||||
background-color: @primary-color;
|
||||
border-radius: @border-radius-sm;
|
||||
|
||||
&-text {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&-corner {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
color: @primary-color;
|
||||
color: currentColor;
|
||||
border: 4px solid;
|
||||
transform: scaleY(0.75);
|
||||
transform-origin: top;
|
||||
@ -50,10 +54,8 @@
|
||||
@color: extract(@preset-colors, @i);
|
||||
@darkColor: '@{color}-6';
|
||||
&-color-@{color} {
|
||||
background-color: @@darkColor;
|
||||
.@{ribbon-prefix-cls}-corner {
|
||||
color: @@darkColor;
|
||||
}
|
||||
color: @@darkColor;
|
||||
background: @@darkColor;
|
||||
}
|
||||
}
|
||||
.make-color-classes();
|
||||
@ -65,20 +67,15 @@
|
||||
.@{ribbon-prefix-cls}-corner {
|
||||
right: 0;
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
&::after {
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{ribbon-prefix-cls}-placement-start {
|
||||
left: -8px;
|
||||
border-bottom-left-radius: 0;
|
||||
.@{ribbon-prefix-cls}-corner {
|
||||
left: 0;
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
&::after {
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14459,36 +14459,44 @@ exports[`ConfigProvider components Input configProvider 1`] = `
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-affix-wrapper config-input-search"
|
||||
class="config-input-group-wrapper config-input-search"
|
||||
>
|
||||
<input
|
||||
class="config-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-suffix"
|
||||
class="config-input-wrapper config-input-group"
|
||||
>
|
||||
<input
|
||||
class="config-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search config-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="config-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="config-btn config-btn-icon-only config-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -14552,36 +14560,44 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-affix-wrapper config-input-affix-wrapper-lg config-input-search"
|
||||
class="config-input-group-wrapper config-input-group-wrapper-lg config-input-search config-input-search-large"
|
||||
>
|
||||
<input
|
||||
class="config-input config-input-lg"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-suffix"
|
||||
class="config-input-wrapper config-input-group"
|
||||
>
|
||||
<input
|
||||
class="config-input config-input-lg"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search config-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="config-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="config-btn config-btn-lg config-btn-icon-only config-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -14645,36 +14661,44 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-affix-wrapper config-input-search"
|
||||
class="config-input-group-wrapper config-input-search config-input-search-middle"
|
||||
>
|
||||
<input
|
||||
class="config-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="config-input-suffix"
|
||||
class="config-input-wrapper config-input-group"
|
||||
>
|
||||
<input
|
||||
class="config-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search config-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="config-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="config-btn config-btn-icon-only config-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -14738,36 +14762,44 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -14831,36 +14863,44 @@ exports[`ConfigProvider components Input normal 1`] = `
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -14924,36 +14964,44 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper prefix-Input"
|
||||
class="ant-input-group-wrapper prefix-Input"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search prefix-Input-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only prefix-Input-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
.@{divider-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
border-top: 1px solid @divider-color;
|
||||
border-top: @border-width-base solid @divider-color;
|
||||
|
||||
&-vertical {
|
||||
position: relative;
|
||||
@ -16,7 +16,7 @@
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
border-top: 0;
|
||||
border-left: 1px solid @divider-color;
|
||||
border-left: @border-width-base solid @divider-color;
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
@ -35,15 +35,15 @@
|
||||
font-size: @font-size-lg;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
border-color: @divider-color;
|
||||
border-top: 0;
|
||||
border-top-color: @divider-color;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
border-top: 1px solid transparent;
|
||||
border-top: @border-width-base solid transparent;
|
||||
// Chrome not accept `inherit` in `border-top`
|
||||
border-top-color: inherit;
|
||||
border-bottom: 0;
|
||||
@ -83,7 +83,7 @@
|
||||
background: none;
|
||||
border-color: @divider-color;
|
||||
border-style: dashed;
|
||||
border-width: 1px 0 0;
|
||||
border-width: @border-width-base 0 0;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
@ -95,7 +95,7 @@
|
||||
}
|
||||
|
||||
&-vertical&-dashed {
|
||||
border-width: 0 0 0 1px;
|
||||
border-width: 0 0 0 @border-width-base;
|
||||
}
|
||||
|
||||
&-plain&-with-text {
|
||||
|
||||
@ -209,18 +209,6 @@
|
||||
border-color: @error-color;
|
||||
}
|
||||
}
|
||||
.@{ant-prefix}-mention-wrapper {
|
||||
.@{ant-prefix}-mention-editor {
|
||||
&,
|
||||
&:not([disabled]):hover {
|
||||
border-color: @error-color;
|
||||
}
|
||||
}
|
||||
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
|
||||
.@{ant-prefix}-mention-editor:not([disabled]):focus {
|
||||
.active(@error-color);
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
|
||||
.active(@error-color);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import RowContext from './RowContext';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14324
|
||||
type ColSpanType = number | string;
|
||||
@ -46,93 +46,89 @@ function parseFlex(flex: FlexType): string {
|
||||
}
|
||||
|
||||
const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
|
||||
const renderCol = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
span,
|
||||
order,
|
||||
offset,
|
||||
push,
|
||||
pull,
|
||||
className,
|
||||
children,
|
||||
flex,
|
||||
style,
|
||||
...others
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('col', customizePrefixCls);
|
||||
let sizeClassObj = {};
|
||||
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
|
||||
let sizeProps: ColSize = {};
|
||||
const propSize = (props as any)[size];
|
||||
if (typeof propSize === 'number') {
|
||||
sizeProps.span = propSize;
|
||||
} else if (typeof propSize === 'object') {
|
||||
sizeProps = propSize || {};
|
||||
}
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const { gutter } = React.useContext(RowContext);
|
||||
|
||||
delete (others as any)[size];
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
span,
|
||||
order,
|
||||
offset,
|
||||
push,
|
||||
pull,
|
||||
className,
|
||||
children,
|
||||
flex,
|
||||
style,
|
||||
...others
|
||||
} = props;
|
||||
|
||||
sizeClassObj = {
|
||||
...sizeClassObj,
|
||||
[`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
|
||||
[`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
|
||||
[`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
|
||||
sizeProps.offset || sizeProps.offset === 0,
|
||||
[`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
|
||||
[`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
};
|
||||
});
|
||||
const classes = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-${span}`]: span !== undefined,
|
||||
[`${prefixCls}-order-${order}`]: order,
|
||||
[`${prefixCls}-offset-${offset}`]: offset,
|
||||
[`${prefixCls}-push-${push}`]: push,
|
||||
[`${prefixCls}-pull-${pull}`]: pull,
|
||||
},
|
||||
className,
|
||||
sizeClassObj,
|
||||
);
|
||||
const prefixCls = getPrefixCls('col', customizePrefixCls);
|
||||
|
||||
return (
|
||||
<RowContext.Consumer>
|
||||
{({ gutter }) => {
|
||||
let mergedStyle: React.CSSProperties = { ...style };
|
||||
if (gutter) {
|
||||
mergedStyle = {
|
||||
...(gutter[0]! > 0
|
||||
? {
|
||||
paddingLeft: gutter[0]! / 2,
|
||||
paddingRight: gutter[0]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...(gutter[1]! > 0
|
||||
? {
|
||||
paddingTop: gutter[1]! / 2,
|
||||
paddingBottom: gutter[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...mergedStyle,
|
||||
};
|
||||
let sizeClassObj = {};
|
||||
(['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const).forEach(size => {
|
||||
let sizeProps: ColSize = {};
|
||||
const propSize = props[size];
|
||||
if (typeof propSize === 'number') {
|
||||
sizeProps.span = propSize;
|
||||
} else if (typeof propSize === 'object') {
|
||||
sizeProps = propSize || {};
|
||||
}
|
||||
|
||||
delete others[size];
|
||||
|
||||
sizeClassObj = {
|
||||
...sizeClassObj,
|
||||
[`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
|
||||
[`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
|
||||
[`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
|
||||
sizeProps.offset || sizeProps.offset === 0,
|
||||
[`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
|
||||
[`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
};
|
||||
});
|
||||
|
||||
const classes = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-${span}`]: span !== undefined,
|
||||
[`${prefixCls}-order-${order}`]: order,
|
||||
[`${prefixCls}-offset-${offset}`]: offset,
|
||||
[`${prefixCls}-push-${push}`]: push,
|
||||
[`${prefixCls}-pull-${pull}`]: pull,
|
||||
},
|
||||
className,
|
||||
sizeClassObj,
|
||||
);
|
||||
|
||||
let mergedStyle: React.CSSProperties = { ...style };
|
||||
if (gutter) {
|
||||
mergedStyle = {
|
||||
...(gutter[0]! > 0
|
||||
? {
|
||||
paddingLeft: gutter[0]! / 2,
|
||||
paddingRight: gutter[0]! / 2,
|
||||
}
|
||||
if (flex) {
|
||||
mergedStyle.flex = parseFlex(flex);
|
||||
: {}),
|
||||
...(gutter[1]! > 0
|
||||
? {
|
||||
paddingTop: gutter[1]! / 2,
|
||||
paddingBottom: gutter[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...mergedStyle,
|
||||
};
|
||||
}
|
||||
if (flex) {
|
||||
mergedStyle.flex = parseFlex(flex);
|
||||
}
|
||||
|
||||
return (
|
||||
<div {...others} style={mergedStyle} className={classes} ref={ref}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</RowContext.Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
return <ConfigConsumer>{renderCol}</ConfigConsumer>;
|
||||
return (
|
||||
<div {...others} style={mergedStyle} className={classes} ref={ref}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Col.displayName = 'Col';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import RowContext from './RowContext';
|
||||
import { tuple } from '../_util/type';
|
||||
import ResponsiveObserve, {
|
||||
@ -21,6 +21,19 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
}
|
||||
|
||||
const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
justify,
|
||||
align,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
gutter = 0,
|
||||
...others
|
||||
} = props;
|
||||
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
const [screens, setScreens] = React.useState<ScreenMap>({
|
||||
xs: true,
|
||||
sm: true,
|
||||
@ -29,8 +42,8 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
xl: true,
|
||||
xxl: true,
|
||||
});
|
||||
const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>();
|
||||
gutterRef.current = props.gutter;
|
||||
|
||||
const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>(gutter);
|
||||
|
||||
React.useEffect(() => {
|
||||
const token = ResponsiveObserve.subscribe(screen => {
|
||||
@ -43,14 +56,11 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
setScreens(screen);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
ResponsiveObserve.unsubscribe(token);
|
||||
};
|
||||
return () => ResponsiveObserve.unsubscribe(token);
|
||||
}, []);
|
||||
|
||||
const getGutter = (): [number, number] => {
|
||||
const results: [number, number] = [0, 0];
|
||||
const { gutter = 0 } = props;
|
||||
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
|
||||
normalizedGutter.forEach((g, index) => {
|
||||
if (typeof g === 'object') {
|
||||
@ -68,55 +78,40 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
|
||||
return results;
|
||||
};
|
||||
|
||||
const renderRow = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
justify,
|
||||
align,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...others
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('row', customizePrefixCls);
|
||||
const gutter = getGutter();
|
||||
const classes = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-${justify}`]: justify,
|
||||
[`${prefixCls}-${align}`]: align,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
const rowStyle = {
|
||||
...(gutter[0]! > 0
|
||||
? {
|
||||
marginLeft: gutter[0]! / -2,
|
||||
marginRight: gutter[0]! / -2,
|
||||
}
|
||||
: {}),
|
||||
...(gutter[1]! > 0
|
||||
? {
|
||||
marginTop: gutter[1]! / -2,
|
||||
marginBottom: gutter[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...style,
|
||||
};
|
||||
const otherProps = { ...others };
|
||||
delete otherProps.gutter;
|
||||
|
||||
return (
|
||||
<RowContext.Provider value={{ gutter }}>
|
||||
<div {...otherProps} className={classes} style={rowStyle} ref={ref}>
|
||||
{children}
|
||||
</div>
|
||||
</RowContext.Provider>
|
||||
);
|
||||
const prefixCls = getPrefixCls('row', customizePrefixCls);
|
||||
const gutters = getGutter();
|
||||
const classes = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-${justify}`]: justify,
|
||||
[`${prefixCls}-${align}`]: align,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
const rowStyle = {
|
||||
...(gutters[0]! > 0
|
||||
? {
|
||||
marginLeft: gutters[0]! / -2,
|
||||
marginRight: gutters[0]! / -2,
|
||||
}
|
||||
: {}),
|
||||
...(gutters[1]! > 0
|
||||
? {
|
||||
marginTop: gutters[1]! / -2,
|
||||
marginBottom: gutters[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...style,
|
||||
};
|
||||
|
||||
return <ConfigConsumer>{renderRow}</ConfigConsumer>;
|
||||
return (
|
||||
<RowContext.Provider value={{ gutter: gutters }}>
|
||||
<div {...others} className={classes} style={rowStyle} ref={ref}>
|
||||
{children}
|
||||
</div>
|
||||
</RowContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
Row.displayName = 'Row';
|
||||
|
||||
@ -55,17 +55,12 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
|
||||
};
|
||||
|
||||
renderClearIcon(prefixCls: string) {
|
||||
const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props;
|
||||
|
||||
const { allowClear, value, disabled, readOnly, handleReset } = this.props;
|
||||
if (!allowClear) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const needClear = !disabled && !readOnly && value;
|
||||
const className =
|
||||
inputType === ClearableInputType[0]
|
||||
? `${prefixCls}-textarea-clear-icon`
|
||||
: `${prefixCls}-clear-icon`;
|
||||
const className = `${prefixCls}-clear-icon`;
|
||||
return (
|
||||
<CloseCircleFilled
|
||||
onClick={handleReset}
|
||||
|
||||
@ -2,12 +2,11 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
import SearchOutlined from '@ant-design/icons/SearchOutlined';
|
||||
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
|
||||
import Input, { InputProps } from './Input';
|
||||
import Button from '../button';
|
||||
import SizeContext, { SizeType } from '../config-provider/SizeContext';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { cloneElement, replaceElement } from '../_util/reactNode';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
|
||||
export interface SearchProps extends InputProps {
|
||||
inputPrefixCls?: string;
|
||||
@ -42,67 +41,20 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
};
|
||||
|
||||
const onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const { onSearch: customOnSearch, loading, disabled } = props;
|
||||
if (loading || disabled) {
|
||||
return;
|
||||
}
|
||||
const { onSearch: customOnSearch } = props;
|
||||
if (customOnSearch) {
|
||||
customOnSearch(inputRef.current?.input.value!, e);
|
||||
}
|
||||
};
|
||||
|
||||
const renderLoading = (prefixCls: string) => {
|
||||
const { enterButton, size: customizeSize } = props;
|
||||
|
||||
if (enterButton) {
|
||||
return (
|
||||
<SizeContext.Consumer key="enterButton">
|
||||
{size => (
|
||||
<Button className={`${prefixCls}-button`} type="primary" size={customizeSize || size}>
|
||||
<LoadingOutlined />
|
||||
</Button>
|
||||
)}
|
||||
</SizeContext.Consumer>
|
||||
);
|
||||
}
|
||||
return <LoadingOutlined className={`${prefixCls}-icon`} key="loadingIcon" />;
|
||||
};
|
||||
|
||||
const renderSuffix = (prefixCls: string) => {
|
||||
const { suffix, enterButton, loading } = props;
|
||||
|
||||
if (loading && !enterButton) {
|
||||
return [suffix, renderLoading(prefixCls)];
|
||||
}
|
||||
|
||||
if (enterButton) return suffix;
|
||||
|
||||
const icon = (
|
||||
<SearchOutlined className={`${prefixCls}-icon`} key="searchIcon" onClick={onSearch} />
|
||||
);
|
||||
|
||||
if (suffix) {
|
||||
return [
|
||||
replaceElement(suffix, null, {
|
||||
key: 'suffix',
|
||||
}),
|
||||
icon,
|
||||
];
|
||||
}
|
||||
|
||||
return icon;
|
||||
};
|
||||
|
||||
const renderAddonAfter = (prefixCls: string, size: SizeType) => {
|
||||
const { enterButton, disabled, addonAfter, loading } = props;
|
||||
const searchIcon =
|
||||
typeof enterButton === 'boolean' || typeof enterButton === 'undefined' ? (
|
||||
<SearchOutlined />
|
||||
) : null;
|
||||
const btnClassName = `${prefixCls}-button`;
|
||||
|
||||
if (loading && enterButton) {
|
||||
return [renderLoading(prefixCls), addonAfter];
|
||||
}
|
||||
|
||||
if (!enterButton) return addonAfter;
|
||||
|
||||
let button: React.ReactNode;
|
||||
const enterButtonAsElement = enterButton as React.ReactElement;
|
||||
const isAntdButton =
|
||||
@ -124,14 +76,16 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
button = (
|
||||
<Button
|
||||
className={btnClassName}
|
||||
type="primary"
|
||||
type={enterButton ? 'primary' : undefined}
|
||||
size={size}
|
||||
disabled={disabled}
|
||||
key="enterButton"
|
||||
onMouseDown={onMouseDown}
|
||||
onClick={onSearch}
|
||||
loading={loading}
|
||||
icon={searchIcon}
|
||||
>
|
||||
{enterButton === true ? <SearchOutlined /> : enterButton}
|
||||
{enterButton}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@ -139,7 +93,7 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
if (addonAfter) {
|
||||
return [
|
||||
button,
|
||||
replaceElement(addonAfter, null, {
|
||||
cloneElement(addonAfter, {
|
||||
key: 'addonAfter',
|
||||
}),
|
||||
];
|
||||
@ -152,41 +106,28 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
inputPrefixCls: customizeInputPrefixCls,
|
||||
enterButton,
|
||||
className,
|
||||
size: customizeSize,
|
||||
suffix,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
delete (restProps as any).onSearch;
|
||||
delete (restProps as any).loading;
|
||||
delete (restProps as any).enterButton;
|
||||
|
||||
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
||||
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
||||
|
||||
const getClassName = (size: SizeType) => {
|
||||
let inputClassName;
|
||||
if (enterButton) {
|
||||
inputClassName = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-enter-button`]: !!enterButton,
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
},
|
||||
className,
|
||||
);
|
||||
} else {
|
||||
inputClassName = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
}
|
||||
return inputClassName;
|
||||
};
|
||||
const getClassName = (size: SizeType) =>
|
||||
classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<SizeContext.Consumer>
|
||||
@ -198,7 +139,7 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
size={customizeSize || size}
|
||||
prefixCls={inputPrefixCls}
|
||||
addonAfter={renderAddonAfter(prefixCls, customizeSize || size)}
|
||||
suffix={renderSuffix(prefixCls)}
|
||||
suffix={suffix}
|
||||
onChange={onChange}
|
||||
className={getClassName(customizeSize || size)}
|
||||
/>
|
||||
|
||||
@ -36,14 +36,14 @@ describe('Input.Search', () => {
|
||||
it('should disable search icon when disabled prop is true', () => {
|
||||
const onSearch = jest.fn();
|
||||
const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} disabled />);
|
||||
wrapper.find('.anticon-search').simulate('click');
|
||||
wrapper.find('Button').simulate('click');
|
||||
expect(onSearch).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
it('should trigger onSearch when click search icon', () => {
|
||||
const onSearch = jest.fn();
|
||||
const wrapper = mount(<Search defaultValue="search text" onSearch={onSearch} />);
|
||||
wrapper.find('.anticon-search').simulate('click');
|
||||
wrapper.find('Button').simulate('click');
|
||||
expect(onSearch).toHaveBeenCalledTimes(1);
|
||||
expect(onSearch).toHaveBeenCalledWith(
|
||||
'search text',
|
||||
|
||||
@ -2,64 +2,27 @@
|
||||
|
||||
exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-rtl ant-input-search ant-input-search-rtl"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support addonAfter 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-rtl ant-input-search ant-input-search-rtl"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
class="ant-input-wrapper ant-input-group ant-input-group-rtl"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-rtl"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-btn-rtl ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@ -76,11 +39,52 @@ exports[`Input.Search should support addonAfter 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support addonAfter 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<span>
|
||||
Addon After
|
||||
</span>
|
||||
@ -91,7 +95,7 @@ exports[`Input.Search should support addonAfter 1`] = `
|
||||
|
||||
exports[`Input.Search should support addonAfter 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -156,31 +160,40 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
suffix
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading ant-input-search-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
addonAfter
|
||||
</span>
|
||||
</span>
|
||||
@ -189,13 +202,13 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
|
||||
|
||||
exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
@ -212,28 +225,32 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-input-search-button"
|
||||
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
addonAfter
|
||||
@ -244,7 +261,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
|
||||
|
||||
exports[`Input.Search should support custom Button 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -272,7 +289,7 @@ exports[`Input.Search should support custom Button 1`] = `
|
||||
|
||||
exports[`Input.Search should support custom button 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -297,7 +314,7 @@ exports[`Input.Search should support custom button 1`] = `
|
||||
|
||||
exports[`Input.Search should support invalid addonAfter 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -342,36 +359,51 @@ exports[`Input.Search should support invalid addonAfter 1`] = `
|
||||
|
||||
exports[`Input.Search should support invalid suffix 1`] = `
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -379,43 +411,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
|
||||
|
||||
exports[`Input.Search should support loading 1`] = `
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading ant-input-search-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support loading 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -429,28 +425,81 @@ exports[`Input.Search should support loading 2`] = `
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-input-search-button"
|
||||
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support loading 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -1020,7 +1020,7 @@ Array [
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -1133,7 +1133,7 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -1363,37 +1363,45 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
value="0571"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:30%"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -2315,45 +2323,53 @@ Array [
|
||||
exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:200px"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -2398,7 +2414,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -2426,13 +2442,13 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large"
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-large"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
@ -2486,43 +2502,56 @@ Array [
|
||||
exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `
|
||||
Array [
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search loading default"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search loading default"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading ant-input-search-icon"
|
||||
role="img"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-enter-button"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -2537,28 +2566,84 @@ Array [
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-input-search-button"
|
||||
class="ant-btn ant-btn-primary ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-loading-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="anticon-spin"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
Search
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
@ -357,36 +357,53 @@ exports[`Input should support size in form 1`] = `
|
||||
|
||||
exports[`Input.Search should support suffix 1`] = `
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
suffix
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -14,7 +14,7 @@ exports[`TextArea allowClear should change type when click 1`] = `
|
||||
</textarea>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -49,7 +49,7 @@ exports[`TextArea allowClear should change type when click 2`] = `
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -84,7 +84,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -119,7 +119,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -154,7 +154,7 @@ exports[`TextArea allowClear should not show icon if defaultValue is undefined,
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -189,7 +189,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -224,7 +224,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -259,7 +259,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
|
||||
/>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-textarea-clear-icon-hidden ant-input-textarea-clear-icon"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
|
||||
@ -153,7 +153,7 @@ describe('TextArea allowClear', () => {
|
||||
wrapper.find('textarea').simulate('change', { target: { value: '111' } });
|
||||
expect(wrapper.find('textarea').getDOMNode().value).toEqual('111');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
|
||||
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
|
||||
});
|
||||
@ -162,7 +162,7 @@ describe('TextArea allowClear', () => {
|
||||
const wrappers = [null, undefined, ''].map(val => mount(<TextArea allowClear value={val} />));
|
||||
wrappers.forEach(wrapper => {
|
||||
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
|
||||
expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
|
||||
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -173,7 +173,7 @@ describe('TextArea allowClear', () => {
|
||||
);
|
||||
wrappers.forEach(wrapper => {
|
||||
expect(wrapper.find('textarea').getDOMNode().value).toEqual('');
|
||||
expect(wrapper.find('.ant-textarea-clear-icon').exists()).toEqual(false);
|
||||
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -186,7 +186,7 @@ describe('TextArea allowClear', () => {
|
||||
argumentEventObjectValue = e.target.value;
|
||||
};
|
||||
const wrapper = mount(<TextArea allowClear defaultValue="111" onChange={onChange} />);
|
||||
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
|
||||
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
|
||||
expect(argumentEventObject.type).toBe('click');
|
||||
expect(argumentEventObjectValue).toBe('');
|
||||
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('');
|
||||
@ -200,7 +200,7 @@ describe('TextArea allowClear', () => {
|
||||
argumentEventObjectValue = e.target.value;
|
||||
};
|
||||
const wrapper = mount(<TextArea allowClear value="111" onChange={onChange} />);
|
||||
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
|
||||
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
|
||||
expect(argumentEventObject.type).toBe('click');
|
||||
expect(argumentEventObjectValue).toBe('');
|
||||
expect(wrapper.find('textarea').at(0).getDOMNode().value).toBe('111');
|
||||
@ -208,14 +208,14 @@ describe('TextArea allowClear', () => {
|
||||
|
||||
it('should focus textarea after clear', () => {
|
||||
const wrapper = mount(<TextArea allowClear defaultValue="111" />, { attachTo: document.body });
|
||||
wrapper.find('.ant-input-textarea-clear-icon').at(0).simulate('click');
|
||||
wrapper.find('.ant-input-clear-icon').at(0).simulate('click');
|
||||
expect(document.activeElement).toBe(wrapper.find('textarea').at(0).getDOMNode());
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('should not support allowClear when it is disabled', () => {
|
||||
const wrapper = mount(<TextArea allowClear defaultValue="111" disabled />);
|
||||
expect(wrapper.find('.ant-input-textarea-clear-icon-hidden').exists()).toBeTruthy();
|
||||
expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('not block input when `value` is undefined', () => {
|
||||
|
||||
@ -24,6 +24,9 @@ ReactDOM.render(
|
||||
<br />
|
||||
<br />
|
||||
<Search placeholder="input search loading with enterButton" loading enterButton />
|
||||
<br />
|
||||
<br />
|
||||
<Search placeholder="input search text" enterButton="Search" size="large" loading />
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -28,24 +28,17 @@ const suffix = (
|
||||
/>
|
||||
);
|
||||
|
||||
const onSearch = value => console.log(value);
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
onSearch={value => console.log(value)}
|
||||
style={{ width: 200 }}
|
||||
/>
|
||||
<Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
|
||||
<br />
|
||||
<br />
|
||||
<Search placeholder="input search text" onSearch={value => console.log(value)} enterButton />
|
||||
<Search placeholder="input search text" onSearch={onSearch} enterButton />
|
||||
<br />
|
||||
<br />
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
enterButton="Search"
|
||||
size="large"
|
||||
onSearch={value => console.log(value)}
|
||||
/>
|
||||
<Search placeholder="input search text" enterButton="Search" size="large" onSearch={onSearch} />
|
||||
<br />
|
||||
<br />
|
||||
<Search
|
||||
@ -53,7 +46,7 @@ ReactDOM.render(
|
||||
enterButton="Search"
|
||||
size="large"
|
||||
suffix={suffix}
|
||||
onSearch={value => console.log(value)}
|
||||
onSearch={onSearch}
|
||||
/>
|
||||
</>,
|
||||
mountNode,
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
@import './index';
|
||||
|
||||
.clear-icon() {
|
||||
// ========================= Input =========================
|
||||
.@{ant-prefix}-input-clear-icon {
|
||||
margin: 0 @input-affix-margin;
|
||||
color: @disabled-color;
|
||||
font-size: @font-size-sm;
|
||||
vertical-align: -1px;
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
// https://codesandbox.io/s/wizardly-sun-u10br
|
||||
cursor: pointer;
|
||||
@ -16,20 +19,9 @@
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
+ i {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================= Input =========================
|
||||
.@{ant-prefix}-input-clear-icon {
|
||||
.clear-icon;
|
||||
margin: 0 @input-affix-margin;
|
||||
vertical-align: -1px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
@ -40,13 +32,11 @@
|
||||
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-textarea-clear-icon {
|
||||
.clear-icon;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
margin: 8px 8px 0 0;
|
||||
.@{ant-prefix}-input-clear-icon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,17 +202,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand addon icon click area
|
||||
// https://github.com/ant-design/ant-design/issues/3714
|
||||
> i:only-child::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
@ -339,11 +328,8 @@
|
||||
|
||||
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
|
||||
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input,
|
||||
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
|
||||
border-right-width: @border-width-base;
|
||||
border-radius: 0;
|
||||
@ -368,23 +354,16 @@
|
||||
|
||||
& > *:first-child,
|
||||
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
& > *:last-child,
|
||||
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
|
||||
border-right-width: @border-width-base;
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
|
||||
@ -53,13 +53,10 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-textarea-clear-icon {
|
||||
.@{ant-prefix}-input-affix-wrapper-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin: 8px 0 0 8px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -139,11 +136,8 @@
|
||||
|
||||
& > *:first-child,
|
||||
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
|
||||
.@{inputClass}-group-rtl& {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
@ -151,12 +145,9 @@
|
||||
|
||||
& > *:last-child,
|
||||
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
|
||||
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
|
||||
.@{inputClass}-group-rtl& {
|
||||
border-left-width: @border-width-base;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
@ -169,79 +160,35 @@
|
||||
@search-prefix: ~'@{ant-prefix}-input-search';
|
||||
@search-rtl-cls: ~'@{search-prefix}-rtl';
|
||||
|
||||
.@{search-prefix} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.@{search-prefix}-rtl {
|
||||
direction: rtl;
|
||||
|
||||
&-icon {
|
||||
.@{search-rtl-cls} & {
|
||||
margin-right: 0.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.@{ant-prefix}-input {
|
||||
border-right: @border-width-base solid @border-color-base;
|
||||
border-left: 0;
|
||||
|
||||
&::before {
|
||||
.@{search-rtl-cls} & {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{search-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-right: @border-width-base @border-style-base @input-border-color;
|
||||
transition: all 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
|
||||
border-right-color: @input-hover-border-color;
|
||||
border-left-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-enter-button) {
|
||||
.@{search-rtl-cls}& {
|
||||
padding-right: @input-padding-horizontal-base;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-enter-button {
|
||||
input {
|
||||
.@{search-rtl-cls}& {
|
||||
border-right: @border-width-base @border-style-base @input-border-color;
|
||||
border-left: 0;
|
||||
}
|
||||
> .@{ant-prefix}-input-group {
|
||||
> .@{ant-prefix}-input-affix-wrapper {
|
||||
border-right: @border-width-base solid @border-color-base;
|
||||
border-left: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.@{search-rtl-cls}& {
|
||||
border-color: @input-hover-border-color;
|
||||
}
|
||||
&-focused {
|
||||
border-right-color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-input-affix-wrapper {
|
||||
.@{search-rtl-cls}& {
|
||||
border-right: @border-width-base @border-style-base @input-border-color;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.@{search-rtl-cls}& {
|
||||
border-color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .@{ant-prefix}-input-group-addon,
|
||||
input + .@{ant-prefix}-input-group-addon {
|
||||
.@{search-rtl-cls}& {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
.@{search-prefix}-button {
|
||||
width: 100%;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
> .@{ant-prefix}-input-group-addon {
|
||||
.@{search-prefix}-button {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,85 +5,47 @@
|
||||
|
||||
@search-prefix: ~'@{ant-prefix}-input-search';
|
||||
|
||||
.searchInputIcon(@input-height, @font-size) {
|
||||
.@{search-prefix}-icon {
|
||||
@horizontal-padding: (@input-height - @font-size) / 2;
|
||||
padding: 0 @horizontal-padding;
|
||||
|
||||
&::before {
|
||||
transform: translateX(-@horizontal-padding - @border-width-base);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: @input-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchInputIcon(@input-height-base, @font-size-base);
|
||||
|
||||
.@{ant-prefix}-input-affix-wrapper-lg {
|
||||
.searchInputIcon(@input-height-lg, @font-size-lg);
|
||||
}
|
||||
.@{ant-prefix}-input-affix-wrapper-sm {
|
||||
.searchInputIcon(@input-height-sm, @font-size-sm);
|
||||
}
|
||||
|
||||
.@{search-prefix} {
|
||||
&-icon {
|
||||
margin-left: 0.5em;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
color: @input-icon-hover-color;
|
||||
}
|
||||
.@{ant-prefix}-input {
|
||||
border-right: 0;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
border-left: @border-width-base @border-style-base @input-border-color;
|
||||
transition: all 0.3s;
|
||||
content: '';
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-hover-border-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-enter-button) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-enter-button {
|
||||
input {
|
||||
border-right: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-hover-border-color;
|
||||
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
|
||||
border-left-color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{ant-prefix}-input-affix-wrapper {
|
||||
// fix slight height diff in Firefox:
|
||||
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
|
||||
.@{ant-prefix}-input-lg {
|
||||
line-height: @line-height-base - 0.0002;
|
||||
}
|
||||
|
||||
> .@{ant-prefix}-input-group {
|
||||
> .@{ant-prefix}-input-affix-wrapper {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
& + .@{ant-prefix}-input-group-addon,
|
||||
input + .@{ant-prefix}-input-group-addon {
|
||||
> .@{ant-prefix}-input-group-addon {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
.@{search-prefix}-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
|
||||
.@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
|
||||
color: @text-color-secondary;
|
||||
|
||||
&.@{ant-prefix}-btn-loading::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
}
|
||||
|
||||
&-zero-width {
|
||||
& > * {
|
||||
> * {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
.@{layout-prefix-cls} {
|
||||
&-sider {
|
||||
&-light {
|
||||
background: @layout-sider-background-light;
|
||||
}
|
||||
&-light &-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
&-light &-zero-width-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
.@{layout-prefix-cls}-sider.@{layout-prefix-cls}-light {
|
||||
background: @layout-sider-background-light;
|
||||
.@{layout-prefix-cls}-sider-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
.@{layout-prefix-cls}-sider-zero-width-trigger {
|
||||
color: @layout-trigger-color-light;
|
||||
background: @layout-trigger-background-light;
|
||||
}
|
||||
}
|
||||
|
||||
@ -162,8 +162,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
jest.useFakeTimers();
|
||||
expect($$('.ant-modal-confirm')).toHaveLength(1);
|
||||
$$('.ant-btn')[0].click();
|
||||
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$('.ant-modal-confirm')).toHaveLength(0);
|
||||
jest.useRealTimers();
|
||||
});
|
||||
@ -188,10 +189,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
title: 'title',
|
||||
content: 'content',
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
$$('.ant-btn')[0].click();
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
|
||||
});
|
||||
jest.useRealTimers();
|
||||
@ -205,10 +210,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
content: 'content',
|
||||
onCancel,
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(1);
|
||||
$$('.ant-btn')[0].click();
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-confirm`)).toHaveLength(0);
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
jest.useRealTimers();
|
||||
@ -222,10 +231,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
content: 'content',
|
||||
onOk: close => null, // eslint-disable-line no-unused-vars
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
$$('.ant-btn')[0].click();
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
});
|
||||
jest.useRealTimers();
|
||||
@ -238,7 +251,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
title: 'title',
|
||||
content: 'content',
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
|
||||
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
|
||||
@ -246,7 +261,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
title: 'new title',
|
||||
content: 'new content',
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
|
||||
expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
|
||||
@ -263,10 +280,14 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
title: 'title',
|
||||
content: 'content',
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
instance.destroy();
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
|
||||
});
|
||||
jest.useRealTimers();
|
||||
@ -279,12 +300,16 @@ describe('Modal.confirm triggers callbacks correctly', () => {
|
||||
title: 'title',
|
||||
content: 'content',
|
||||
});
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
|
||||
});
|
||||
Modal.destroyAll();
|
||||
['info', 'success', 'warning', 'error'].forEach(type => {
|
||||
jest.runAllTimers();
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
|
||||
});
|
||||
jest.useRealTimers();
|
||||
|
||||
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
|
||||
| onCancel | 点击取消的回调 | function(e) | - |
|
||||
| onConfirm | 点击确认的回调 | function(e) | - |
|
||||
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | <ExclamationCircle /> |
|
||||
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |
|
||||
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
|
||||
|
||||
@ -135,6 +135,8 @@
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
.@{radio-inner-prefix-cls} {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base !important;
|
||||
|
||||
@ -5,7 +5,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
|
||||
import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import WarningFilled from '@ant-design/icons/WarningFilled';
|
||||
|
||||
import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import devWarning from '../_util/devWarning';
|
||||
|
||||
import noFound from './noFound';
|
||||
@ -66,7 +66,6 @@ const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const iconNode = React.createElement(
|
||||
IconMap[status as Exclude<ResultStatusType, ExceptionStatusType>],
|
||||
);
|
||||
@ -83,44 +82,36 @@ export interface ResultType extends React.FC<ResultProps> {
|
||||
PRESENTED_IMAGE_500: React.ReactNode;
|
||||
}
|
||||
|
||||
const Result: ResultType = props => (
|
||||
<ConfigConsumer>
|
||||
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className: customizeClassName,
|
||||
subTitle,
|
||||
title,
|
||||
style,
|
||||
children,
|
||||
status,
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
||||
const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
{renderIcon(prefixCls, props)}
|
||||
<div className={`${prefixCls}-title`}>{title}</div>
|
||||
{subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
|
||||
{renderExtra(prefixCls, props)}
|
||||
{children && <div className={`${prefixCls}-content`}>{children}</div>}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ConfigConsumer>
|
||||
);
|
||||
const Result: ResultType = ({
|
||||
prefixCls: customizePrefixCls,
|
||||
className: customizeClassName,
|
||||
subTitle,
|
||||
title,
|
||||
style,
|
||||
children,
|
||||
status = 'info',
|
||||
icon,
|
||||
extra,
|
||||
}) => {
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
|
||||
Result.defaultProps = {
|
||||
status: 'info',
|
||||
const prefixCls = getPrefixCls('result', customizePrefixCls);
|
||||
const className = classNames(prefixCls, `${prefixCls}-${status}`, customizeClassName, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
<div className={className} style={style}>
|
||||
{renderIcon(prefixCls, { status, icon })}
|
||||
<div className={`${prefixCls}-title`}>{title}</div>
|
||||
{subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}
|
||||
{renderExtra(prefixCls, { extra })}
|
||||
{children && <div className={`${prefixCls}-content`}>{children}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
Result.PRESENTED_IMAGE_403 = ExceptionMap[403];
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
Result.PRESENTED_IMAGE_404 = ExceptionMap[404];
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
Result.PRESENTED_IMAGE_500 = ExceptionMap[500];
|
||||
Result.PRESENTED_IMAGE_403 = ExceptionMap['403'];
|
||||
Result.PRESENTED_IMAGE_404 = ExceptionMap['404'];
|
||||
Result.PRESENTED_IMAGE_500 = ExceptionMap['500'];
|
||||
|
||||
export default Result;
|
||||
|
||||
@ -24,7 +24,7 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
|
||||
| activeKey | Current TabPane's key | string | - | |
|
||||
| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | "bottom"` | boolean \| {inkBar: boolean, tabPane: boolean} | false | |
|
||||
| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | |
|
||||
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
||||
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
|
||||
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
|
||||
|
||||
@ -27,7 +27,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
| --- | --- | --- | --- | --- |
|
||||
| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
|
||||
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
||||
| animated | 是否使用动画切换 Tabs，在 `tabPosition="top" | "bottom"` 时有效 | boolean \| {inkBar: boolean, tabPane: boolean} | false | |
|
||||
| animated | 是否使用动画切换 Tabs，在 `tabPosition="top" | "bottom"` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | |
|
||||
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |
|
||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
|
||||
|
||||
@ -2262,38 +2262,46 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
|
||||
exports[`renders ./components/tree/demo/search.md correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search ant-input-search-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@ -22,6 +22,8 @@
|
||||
|
||||
&&-danger {
|
||||
color: @error-color;
|
||||
a&:active,
|
||||
a&:focus,
|
||||
a&:hover {
|
||||
color: ~`colorPalette('@{error-color}', 5) `;
|
||||
}
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
"rc-table": "~7.10.0",
|
||||
"rc-tabs": "~11.6.0",
|
||||
"rc-tabs": "~11.7.0",
|
||||
"rc-textarea": "~0.3.0",
|
||||
"rc-tooltip": "~5.0.0",
|
||||
"rc-tree": "~3.10.0",
|
||||
@ -265,8 +265,8 @@
|
||||
"react-window": "^1.8.5",
|
||||
"remark": "^12.0.0",
|
||||
"remark-cli": "^8.0.0",
|
||||
"remark-lint": "^7.0.0",
|
||||
"remark-preset-lint-recommended": "^4.0.0",
|
||||
"remark-lint": "^8.0.0",
|
||||
"remark-preset-lint-recommended": "^5.0.0",
|
||||
"reqwest": "^2.0.5",
|
||||
"rimraf": "^3.0.0",
|
||||
"scrollama": "^2.0.0",
|
||||
|
||||
@ -194,12 +194,9 @@ a {
|
||||
}
|
||||
|
||||
#_hj_feedback_container {
|
||||
.path1::before {
|
||||
[class$='icon_emotion_path1']::before {
|
||||
color: @primary-color !important;
|
||||
}
|
||||
.path2::before {
|
||||
color: @body-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-widgets {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user