mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
Merge branch 'master' into feature
This commit is contained in:
陈帅
commit
3ff7cf329d
@ -15,6 +15,19 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.22.1
|
||||
|
||||
- 🔥 The official website now supports the search icon through the picture! [#18425](https://github.com/ant-design/ant-design/pull/18425)
|
||||
- 💄 Tweak Table expand icon style. [c5344bd](https://github.com/ant-design/ant-design/commit/c5344bde529a2f2ec814f46e7ec5d249eac8d608)
|
||||
- 🐞 Fix prop `style` is getting duplicated on Table. [#18330](https://github.com/ant-design/ant-design/pull/18330) [@MrHeer](https://github.com/MrHeer)
|
||||
- 🐞 Fix Input line height style bug in IE11. [#17759](https://github.com/ant-design/ant-design/pull/17759)
|
||||
- 🐞 Fix Steps progressDot broken style. [#18356](https://github.com/ant-design/ant-design/pull/18356)
|
||||
- 🐞 Fix an issue with plain icon button style errors. [#18458](https://github.com/ant-design/ant-design/pull/18458) [@qhanw](https://github.com/qhanw)
|
||||
- 🐞 Fix TextArea with `autosize` in controlled mode that scrollbar blink when typing. [#18401](https://github.com/ant-design/ant-design/pull/18401)
|
||||
- 🐞 Fixed an issue where Input.Password `ref` could not get the input element and had no `focus` and `blur` method. [#18441](https://github.com/ant-design/ant-design/pull/18441)
|
||||
- 🐞 Fix Upload wrong line break. [#18423](https://github.com/ant-design/ant-design/pull/18423)
|
||||
- 💄 Add less variables `@select-dropdown-bg` `@select-item-selected-bg` `@select-item-active-bg` `@anchor-border-colorr` `@descriptions-bg`. [#18444](https://github.com/ant-design/ant-design/pull/18444) [#18372](https://github.com/ant-design/ant-design/pull/18440) [@MrHeer](https://github.com/MrHeer)
|
||||
|
||||
## 3.22.0
|
||||
|
||||
`2019-08-17`
|
||||
|
||||
@ -15,6 +15,19 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 3.22.1
|
||||
|
||||
- 🔥 官网现在支持通过图片搜索图标啦！[#18425](https://github.com/ant-design/ant-design/pull/18425)
|
||||
- 💄 调整 Table 展开按钮的样式。[c5344bd](https://github.com/ant-design/ant-design/commit/c5344bde529a2f2ec814f46e7ec5d249eac8d608)
|
||||
- 🐞 修复 Table 的 `style` 属性被应用了两次的问题。[#18330](https://github.com/ant-design/ant-design/pull/18330) [@MrHeer](https://github.com/MrHeer)
|
||||
- 🐞 修复 Input 在 IE11 下错位的问题。[#17759](https://github.com/ant-design/ant-design/pull/17759)
|
||||
- 🐞 修复 Input.Password `ref` 获取不到 input 元素且没有 `focus` 和 `blur` 方法的问题。[#18441](https://github.com/ant-design/ant-design/pull/18441)
|
||||
- 🐞 修复 Steps `progressDot` 样式错位问题。[#18356](https://github.com/ant-design/ant-design/pull/18356)
|
||||
- 🐞 修复纯图标按钮样式错误的问题。[#18458](https://github.com/ant-design/ant-design/pull/18458) [@qhanw](https://github.com/qhanw)
|
||||
- 🐞 修复 TextArea 受控模式下配置 `autosize` 时，输入会导致滚动条闪烁的问题。[#18401](https://github.com/ant-design/ant-design/pull/18401)
|
||||
- 🐞 修复 Upload 错误换行的问题。[#18423](https://github.com/ant-design/ant-design/pull/18423)
|
||||
- 💄 增加 less 变量 `@select-dropdown-bg` `@select-item-selected-bg` `@select-item-active-bg` `@anchor-border-colorr` `@descriptions-bg`。[#18444](https://github.com/ant-design/ant-design/pull/18444) [#18372](https://github.com/ant-design/ant-design/pull/18440) [@MrHeer](https://github.com/MrHeer)
|
||||
|
||||
## 3.22.0
|
||||
|
||||
`2019-08-17`
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
width: @anchor-border-width;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: @border-color-split;
|
||||
background-color: @anchor-border-color;
|
||||
content: ' ';
|
||||
}
|
||||
&-ball {
|
||||
|
||||
@ -1,75 +1,150 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
input here
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div
|
||||
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
|
||||
style="width:200px"
|
||||
>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-controls=""
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-select-selection
|
||||
ant-select-selection--single"
|
||||
role="combobox"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
<div
|
||||
class="ant-select-selection__rendered"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<div
|
||||
class="ant-select-selection__placeholder"
|
||||
style="display:block;user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
control mode
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
class="ant-select-search ant-select-search--inline"
|
||||
>
|
||||
<div
|
||||
class="ant-select-search__field__wrap"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-select-search__field"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-select-search__field__mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: down"
|
||||
class="anticon anticon-down ant-select-arrow-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -11,7 +11,7 @@ title:
|
||||
|
||||
## en-US
|
||||
|
||||
Basic Usage, set datasource of autocomplete with `dataSource` property.
|
||||
Basic Usage, set data source of autocomplete with `dataSource` property.
|
||||
|
||||
```jsx
|
||||
import { AutoComplete } from 'antd';
|
||||
@ -22,25 +22,43 @@ function onSelect(value) {
|
||||
|
||||
class Complete extends React.Component {
|
||||
state = {
|
||||
value: '',
|
||||
dataSource: [],
|
||||
};
|
||||
|
||||
handleSearch = value => {
|
||||
onSearch = searchText => {
|
||||
this.setState({
|
||||
dataSource: !value ? [] : [value, value + value, value + value + value],
|
||||
dataSource: !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)],
|
||||
});
|
||||
};
|
||||
|
||||
onChange = value => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const { dataSource, value } = this.state;
|
||||
return (
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.handleSearch}
|
||||
placeholder="input here"
|
||||
/>
|
||||
<div>
|
||||
<AutoComplete
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.onSearch}
|
||||
placeholder="input here"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AutoComplete
|
||||
value={value}
|
||||
dataSource={dataSource}
|
||||
style={{ width: 200 }}
|
||||
onSelect={onSelect}
|
||||
onSearch={this.onSearch}
|
||||
onChange={this.onChange}
|
||||
placeholder="control mode"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,3 +48,11 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| ------- | ------------ | ------- |
|
||||
| blur() | remove focus | |
|
||||
| focus() | get focus | |
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why text composition system not works well with onSearch in controlled mode?
|
||||
|
||||
Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, click on the option also not trigger the `onSearch` event.
|
||||
|
||||
Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
|
||||
|
||||
@ -50,3 +50,11 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| ------- | -------- | ---- |
|
||||
| blur() | 移除焦点 | |
|
||||
| focus() | 获取焦点 | |
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为何受控状态下使用 onSearch 无法输入中文？
|
||||
|
||||
请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点选选项时也不会触发 `onSearch` 事件。
|
||||
|
||||
相关 issue：[#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
|
||||
|
||||
@ -19,4 +19,27 @@ describe('BackTop', () => {
|
||||
expect(window.pageYOffset).toBe(0);
|
||||
scrollToSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('could be unmount without error', async () => {
|
||||
const wrapper = mount(<BackTop />);
|
||||
expect(() => {
|
||||
wrapper.unmount();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('support onClick', async () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount(<BackTop onClick={onClick} visibilityHeight={-1} />);
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
|
||||
window.scrollY = y;
|
||||
window.pageYOffset = y;
|
||||
});
|
||||
window.scrollTo(0, 400);
|
||||
// trigger scroll manually
|
||||
wrapper.instance().handleScroll();
|
||||
await sleep();
|
||||
wrapper.find('.ant-back-top').simulate('click');
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
scrollToSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
@ -47,33 +47,13 @@ export default class BackTop extends React.Component<BackTopProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
setScrollTop(value: number) {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
const targetNode = getTarget();
|
||||
if (targetNode === window) {
|
||||
document.body.scrollTop = value;
|
||||
document.documentElement!.scrollTop = value;
|
||||
} else {
|
||||
(targetNode as HTMLElement).scrollTop = value;
|
||||
}
|
||||
}
|
||||
|
||||
getCurrentScrollTop = () => {
|
||||
const getTarget = this.props.target || getDefaultTarget;
|
||||
const targetNode = getTarget();
|
||||
if (targetNode === window) {
|
||||
return window.pageYOffset || document.body.scrollTop || document.documentElement!.scrollTop;
|
||||
}
|
||||
return (targetNode as HTMLElement).scrollTop;
|
||||
};
|
||||
|
||||
scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const { target = getDefaultTarget } = this.props;
|
||||
const { target = getDefaultTarget, onClick } = this.props;
|
||||
scrollTo(0, {
|
||||
getContainer: target,
|
||||
});
|
||||
if (typeof this.props.onClick === 'function') {
|
||||
this.props.onClick(e);
|
||||
if (typeof onClick === 'function') {
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -290,6 +290,61 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-btn-group"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: cloud"
|
||||
class="anticon anticon-cloud"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="cloud"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 0 1-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: cloud-download"
|
||||
class="anticon anticon-cloud-download"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="cloud-download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"
|
||||
/>
|
||||
<path
|
||||
d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -741,7 +796,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
class="ant-btn ant-btn-circle ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-icon-only ant-btn-loading"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
@ -765,7 +820,31 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"
|
||||
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only ant-btn-loading"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: loading"
|
||||
class="anticon anticon-loading"
|
||||
>
|
||||
<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 0 0-94.3-139.9 437.71 437.71 0 0 0-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>
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-danger ant-btn-round ant-btn-icon-only ant-btn-loading"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
@ -946,6 +1025,30 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
|
||||
type="button"
|
||||
@ -970,6 +1073,30 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: download"
|
||||
class="anticon anticon-download"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="download"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
|
||||
type="button"
|
||||
|
||||
@ -253,18 +253,19 @@ class Button extends React.Component<ButtonProps, ButtonState> {
|
||||
break;
|
||||
}
|
||||
|
||||
const iconType = loading ? 'loading' : icon;
|
||||
|
||||
const classes = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
|
||||
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
|
||||
[`${prefixCls}-loading`]: loading,
|
||||
[`${prefixCls}-background-ghost`]: ghost,
|
||||
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
|
||||
[`${prefixCls}-block`]: block,
|
||||
});
|
||||
|
||||
const iconType = loading ? 'loading' : icon;
|
||||
const iconNode = iconType ? <Icon type={iconType} /> : null;
|
||||
const kids =
|
||||
children || children === 0
|
||||
|
||||
@ -55,6 +55,10 @@ ReactDOM.render(
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="primary" size="small" icon="cloud" />
|
||||
<Button type="primary" size="small" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
|
||||
@ -52,8 +52,9 @@ class App extends React.Component {
|
||||
Click me!
|
||||
</Button>
|
||||
<br />
|
||||
<Button shape="circle" loading />
|
||||
<Button type="primary" loading />
|
||||
<Button type="primary" shape="circle" loading />
|
||||
<Button type="danger" shape="round" loading />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -54,7 +54,9 @@ class ButtonSize extends React.Component {
|
||||
Link
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="primary" icon="download" size={size} />
|
||||
<Button type="primary" shape="circle" icon="download" size={size} />
|
||||
<Button type="primary" shape="round" icon="download" size={size} />
|
||||
<Button type="primary" shape="round" icon="download" size={size}>
|
||||
Download
|
||||
</Button>
|
||||
|
||||
@ -71,8 +71,15 @@
|
||||
.btn-link;
|
||||
}
|
||||
|
||||
&-icon-only {
|
||||
.btn-square(@btn-prefix-cls);
|
||||
}
|
||||
|
||||
&-round {
|
||||
.btn-round(@btn-prefix-cls);
|
||||
&.@{btn-prefix-cls}-icon-only {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-circle,
|
||||
@ -136,11 +143,6 @@
|
||||
.btn-group(@btn-prefix-cls);
|
||||
}
|
||||
|
||||
&:not(&-circle):not(&-circle-outline)&-icon-only {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
// http://stackoverflow.com/a/21281554/3040605
|
||||
&:focus > span,
|
||||
&:active > span {
|
||||
|
||||
@ -237,17 +237,25 @@
|
||||
);
|
||||
}
|
||||
}
|
||||
// circle button: the content only contains icon
|
||||
.btn-circle(@btnClassName: btn) {
|
||||
.square(@btn-circle-size);
|
||||
.button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%);
|
||||
// square button: the content only contains icon
|
||||
.btn-square(@btnClassName: btn) {
|
||||
.square(@btn-square-size);
|
||||
.button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base);
|
||||
&.@{btnClassName}-lg {
|
||||
.square(@btn-circle-size-lg);
|
||||
.button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%);
|
||||
.square(@btn-square-size-lg);
|
||||
.button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
|
||||
}
|
||||
&.@{btnClassName}-sm {
|
||||
.square(@btn-circle-size-sm);
|
||||
.button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
|
||||
.square(@btn-square-size-sm);
|
||||
.button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
|
||||
}
|
||||
}
|
||||
// circle button: the content only contains icon
|
||||
.btn-circle(@btnClassName: btn) {
|
||||
border-radius: 50%;
|
||||
&.@{btnClassName}-lg,
|
||||
&.@{btnClassName}-sm {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
// Horizontal button groups style
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
}
|
||||
|
||||
.@{descriptions-prefix-cls}-item-label {
|
||||
background-color: #fafafa;
|
||||
background-color: @descriptions-bg;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ title: Form
|
||||
| labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
|
||||
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
|
||||
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | | |
|
||||
| wrapperCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
|
||||
| wrapperCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid-cn/#Col) | | 3.14.0 |
|
||||
| colon | 配置 Form.Item 的 colon 的默认值 | boolean | true | 3.15.0 |
|
||||
|
||||
### Form.create(options)
|
||||
|
||||
@ -20,6 +20,8 @@ const ActionMap: Record<string, string> = {
|
||||
};
|
||||
|
||||
export default class Password extends React.Component<PasswordProps, PasswordState> {
|
||||
input: HTMLInputElement;
|
||||
|
||||
static defaultProps = {
|
||||
inputPrefixCls: 'ant-input',
|
||||
prefixCls: 'ant-input-password',
|
||||
@ -52,6 +54,22 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
return <Icon {...iconProps} />;
|
||||
}
|
||||
|
||||
saveInput = (instance: Input) => {
|
||||
this.input = instance.input;
|
||||
};
|
||||
|
||||
focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
blur() {
|
||||
this.input.blur();
|
||||
}
|
||||
|
||||
select() {
|
||||
this.input.select();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
@ -73,6 +91,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
|
||||
className={inputClassName}
|
||||
prefixCls={inputPrefixCls}
|
||||
suffix={suffixIcon}
|
||||
ref={this.saveInput}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
|
||||
componentDidUpdate(prevProps: TextAreaProps) {
|
||||
// Re-render with the new content then recalculate the height as required.
|
||||
if (prevProps.value !== this.props.value) {
|
||||
this.resizeOnNextFrame();
|
||||
this.resizeTextarea();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
64
components/input/__tests__/Password.test.js
Normal file
64
components/input/__tests__/Password.test.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import Input from '..';
|
||||
import focusTest from '../../../tests/shared/focusTest';
|
||||
|
||||
describe('Input.Password', () => {
|
||||
focusTest(Input.Password);
|
||||
|
||||
it('should get input element from ref', () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
expect(wrapper.instance().input instanceof HTMLInputElement).toBe(true);
|
||||
expect(() => {
|
||||
wrapper.instance().select();
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should change type when click', () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper.find('input').simulate('change', { target: { value: '111' } });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('visibilityToggle should work', () => {
|
||||
const wrapper = mount(<Input.Password visibilityToggle={false} />);
|
||||
expect(wrapper.find('.anticon-eye').length).toBe(0);
|
||||
wrapper.setProps({ visibilityToggle: true });
|
||||
expect(wrapper.find('.anticon-eye-invisible').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should keep focus state', () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="111" autoFocus />);
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
});
|
||||
});
|
||||
258
components/input/__tests__/__snapshots__/Password.test.js.snap
Normal file
258
components/input/__tests__/__snapshots__/Password.test.js.snap
Normal file
@ -0,0 +1,258 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Input.Password should change type when click 1`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
/>
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
|
||||
exports[`Input.Password should change type when click 2`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
/>
|
||||
}
|
||||
type="text"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
key="svg-eye-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
|
||||
exports[`Input.Password should change type when click 3`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
/>
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
@ -230,6 +230,13 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
|
||||
class="ant-input"
|
||||
placeholder="Autosize height with minimum and maximum number of lines"
|
||||
/>
|
||||
<div
|
||||
style="margin:24px 0"
|
||||
/>
|
||||
<textarea
|
||||
class="ant-input"
|
||||
placeholder="Controlled autosize"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -246,263 +246,6 @@ exports[`Input should support maxLength 1`] = `
|
||||
</Input>
|
||||
`;
|
||||
|
||||
exports[`Input.Password should change type when click 1`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
/>
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
|
||||
exports[`Input.Password should change type when click 2`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
/>
|
||||
}
|
||||
type="text"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="text"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye"
|
||||
className="anticon anticon-eye ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
|
||||
key="svg-eye-svg-0"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
|
||||
exports[`Input.Password should change type when click 3`] = `
|
||||
<Password
|
||||
action="click"
|
||||
inputPrefixCls="ant-input"
|
||||
prefixCls="ant-input-password"
|
||||
visibilityToggle={true}
|
||||
>
|
||||
<Input
|
||||
action="click"
|
||||
className="ant-input-password"
|
||||
prefixCls="ant-input"
|
||||
suffix={
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
/>
|
||||
}
|
||||
type="password"
|
||||
>
|
||||
<span
|
||||
className="ant-input-password ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
action="click"
|
||||
className="ant-input"
|
||||
onChange={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
style={null}
|
||||
type="password"
|
||||
value="111"
|
||||
/>
|
||||
<span
|
||||
className="ant-input-suffix"
|
||||
>
|
||||
<Icon
|
||||
className="ant-input-password-icon"
|
||||
key="passwordIcon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
type="eye-invisible"
|
||||
>
|
||||
<LocaleReceiver
|
||||
componentName="Icon"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: eye-invisible"
|
||||
className="anticon anticon-eye-invisible ant-input-password-icon"
|
||||
onClick={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<IconReact
|
||||
className=""
|
||||
type="eye-invisible-o"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className=""
|
||||
data-icon="eye-invisible"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
key="svg-eye-invisible"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"
|
||||
key="svg-eye-invisible-svg-0"
|
||||
/>
|
||||
<path
|
||||
d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"
|
||||
key="svg-eye-invisible-svg-1"
|
||||
/>
|
||||
</svg>
|
||||
</IconReact>
|
||||
</i>
|
||||
</LocaleReceiver>
|
||||
</Icon>
|
||||
</span>
|
||||
</span>
|
||||
</Input>
|
||||
</Password>
|
||||
`;
|
||||
|
||||
exports[`Input.Search should support suffix 1`] = `
|
||||
<Search
|
||||
enterButton={false}
|
||||
|
||||
@ -79,6 +79,7 @@ describe('TextArea', () => {
|
||||
wrapper.setProps({ value: '1111' });
|
||||
jest.runAllTimers();
|
||||
expect(mockFunc).toHaveBeenCalledTimes(2);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('textarea').props().style.overflow).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -216,55 +217,6 @@ describe('Input.Search', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Input.Password', () => {
|
||||
it('should change type when click', () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper.find('input').simulate('change', { target: { value: '111' } });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('visibilityToggle should work', () => {
|
||||
const wrapper = mount(<Input.Password visibilityToggle={false} />);
|
||||
expect(wrapper.find('.anticon-eye').length).toBe(0);
|
||||
wrapper.setProps({ visibilityToggle: true });
|
||||
expect(wrapper.find('.anticon-eye-invisible').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should keep focus state', () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="111" autoFocus />);
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Input allowClear', () => {
|
||||
it('should change type when click', () => {
|
||||
const wrapper = mount(<Input allowClear />);
|
||||
|
||||
@ -18,15 +18,37 @@ import { Input } from 'antd';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<TextArea placeholder="Autosize height based on content lines" autosize />
|
||||
<div style={{ margin: '24px 0' }} />
|
||||
<TextArea
|
||||
placeholder="Autosize height with minimum and maximum number of lines"
|
||||
autosize={{ minRows: 2, maxRows: 6 }}
|
||||
/>
|
||||
</div>,
|
||||
mountNode,
|
||||
);
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
value: '',
|
||||
};
|
||||
|
||||
onChange = ({ target: { value } }) => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TextArea placeholder="Autosize height based on content lines" autosize />
|
||||
<div style={{ margin: '24px 0' }} />
|
||||
<TextArea
|
||||
placeholder="Autosize height with minimum and maximum number of lines"
|
||||
autosize={{ minRows: 2, maxRows: 6 }}
|
||||
/>
|
||||
<div style={{ margin: '24px 0' }} />
|
||||
<TextArea
|
||||
value={value}
|
||||
onChange={this.onChange}
|
||||
placeholder="Controlled autosize"
|
||||
autosize={{ minRows: 3, maxRows: 5 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
@ -443,7 +443,7 @@
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
font-variant: initial;
|
||||
background-color: @component-background;
|
||||
background-color: @select-dropdown-bg;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
@ -528,7 +528,7 @@
|
||||
&-selected {
|
||||
color: @text-color;
|
||||
font-weight: @select-item-selected-font-weight;
|
||||
background-color: @background-color-light;
|
||||
background-color: @select-item-selected-bg;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
@ -542,7 +542,7 @@
|
||||
}
|
||||
|
||||
&-active:not(&-disabled) {
|
||||
background-color: @item-active-bg;
|
||||
background-color: @select-item-active-bg;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
|
||||
@ -728,7 +728,7 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
|
||||
style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
|
||||
style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
|
||||
@ -877,7 +877,7 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
|
||||
style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
|
||||
style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
|
||||
@ -1024,7 +1024,7 @@ exports[`renders ./components/steps/demo/nav.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal ant-steps-navigation"
|
||||
style="margin-bottom:60px;border-bottom:1px solid rgb(235, 237, 240)"
|
||||
style="margin-bottom:60px;box-shadow:0px -1px 0 0 #e8e8e8 inset"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-active"
|
||||
|
||||
@ -20,7 +20,7 @@ const { Step } = Steps;
|
||||
|
||||
const stepStyle = {
|
||||
marginBottom: 60,
|
||||
borderBottom: '1px solid rgb(235, 237, 240)',
|
||||
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
|
||||
};
|
||||
|
||||
class Demo extends React.Component {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
|
||||
.@{steps-prefix-cls}-small {
|
||||
&.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
|
||||
.@{steps-prefix-cls}-item {
|
||||
margin-right: 12px;
|
||||
@ -28,7 +28,6 @@
|
||||
}
|
||||
.@{steps-prefix-cls}-item-tail {
|
||||
top: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
|
||||
width: inherit;
|
||||
|
||||
@ -178,6 +178,10 @@
|
||||
@btn-circle-size-lg: @btn-height-lg;
|
||||
@btn-circle-size-sm: @btn-height-sm;
|
||||
|
||||
@btn-square-size: @btn-height-base;
|
||||
@btn-square-size-lg: @btn-height-lg;
|
||||
@btn-square-size-sm: @btn-height-sm;
|
||||
|
||||
@btn-group-border: @primary-5;
|
||||
|
||||
// Checkbox
|
||||
@ -186,8 +190,10 @@
|
||||
@checkbox-check-color: #fff;
|
||||
@checkbox-border-width: @border-width-base;
|
||||
|
||||
// Dropdown
|
||||
// Descriptions
|
||||
@descriptions-bg: #fafafa;
|
||||
|
||||
// Dropdown
|
||||
@dropdown-selected-color: @primary-color;
|
||||
|
||||
// Empty
|
||||
@ -324,6 +330,13 @@
|
||||
// ---
|
||||
@select-border-color: @border-color-base;
|
||||
@select-item-selected-font-weight: 600;
|
||||
@select-dropdown-bg: @component-background;
|
||||
@select-item-selected-bg: @background-color-light;
|
||||
@select-item-active-bg: @item-active-bg;
|
||||
|
||||
// Anchor
|
||||
// ---
|
||||
@anchor-border-color: @border-color-split;
|
||||
|
||||
// Tooltip
|
||||
// ---
|
||||
|
||||
@ -133,6 +133,7 @@
|
||||
.clearfix;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "3.22.0",
|
||||
"version": "3.22.1",
|
||||
"title": "Ant Design",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"homepage": "http://ant.design/",
|
||||
|
||||
@ -111,5 +111,18 @@ module.exports = {
|
||||
'app.docs.components.icon.category.data': 'Data Icons',
|
||||
'app.docs.components.icon.category.other': 'Application Icons',
|
||||
'app.docs.components.icon.category.logo': 'Brand and Logos',
|
||||
'app.docs.components.icon.pic-searcher.intro':
|
||||
'AI Search by image is online, welcome to use! 🎉',
|
||||
'app.docs.components.icon.pic-searcher.title': 'Search by image',
|
||||
'app.docs.components.icon.pic-searcher.upload-text':
|
||||
'Click or drag or paste file to this area to upload',
|
||||
'app.docs.components.icon.pic-searcher.upload-hint':
|
||||
'We will find the most matching icon based on the image',
|
||||
'app.docs.components.icon.pic-searcher.server-error':
|
||||
'Predict service is temporarily unavailable',
|
||||
'app.docs.components.icon.pic-searcher.matching': 'Matching...',
|
||||
'app.docs.components.icon.pic-searcher.result-tip': 'Match the following icons for you:',
|
||||
'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
|
||||
'app.docs.components.icon.pic-searcher.th-score': 'Probability',
|
||||
},
|
||||
};
|
||||
|
||||
52
site/theme/static/icon-pic-searcher.less
Normal file
52
site/theme/static/icon-pic-searcher.less
Normal file
@ -0,0 +1,52 @@
|
||||
.icon-pic-searcher {
|
||||
margin: 1px 8px;
|
||||
display: inline-block;
|
||||
|
||||
.icon-pic-btn {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-pic-preview {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
padding: 8px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 4px;
|
||||
|
||||
> img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-pic-search-result {
|
||||
min-height: 50px;
|
||||
padding: 0 10px;
|
||||
> .result-tip {
|
||||
padding: 10px 0;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
> table {
|
||||
width: 100%;
|
||||
.col-icon {
|
||||
width: 80px;
|
||||
padding: 10px 0;
|
||||
> i {
|
||||
font-size: 30px;
|
||||
|
||||
:hover {
|
||||
color: @link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,7 @@
|
||||
@import './demo';
|
||||
@import './colors';
|
||||
@import './icons';
|
||||
@import './icon-pic-searcher';
|
||||
@import './mock-browser';
|
||||
@import './new-version-info-modal';
|
||||
@import './motion';
|
||||
|
||||
219
site/theme/template/IconDisplay/IconPicSearcher.tsx
Normal file
219
site/theme/template/IconDisplay/IconPicSearcher.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Upload, Tooltip, Popover, Icon, Modal, Progress, message, Spin, Result } from 'antd';
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { injectIntl } from 'react-intl';
|
||||
|
||||
const { Dragger } = Upload;
|
||||
|
||||
interface PicSearcherProps {
|
||||
intl: any;
|
||||
}
|
||||
|
||||
interface PicSearcherState {
|
||||
loading: boolean;
|
||||
modalVisible: boolean;
|
||||
popoverVisible: boolean;
|
||||
icons: Array<string>;
|
||||
fileList: Array<any>;
|
||||
error: boolean;
|
||||
}
|
||||
|
||||
interface iconObject {
|
||||
type: string;
|
||||
score: number;
|
||||
}
|
||||
|
||||
class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
|
||||
state = {
|
||||
loading: false,
|
||||
modalVisible: false,
|
||||
popoverVisible: false,
|
||||
icons: [],
|
||||
fileList: [],
|
||||
error: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('paste', this.onPaste);
|
||||
this.setState({ popoverVisible: !localStorage.getItem('disableIconTip') });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('paste', this.onPaste);
|
||||
}
|
||||
|
||||
onPaste = (event: ClipboardEvent) => {
|
||||
const items = event.clipboardData && event.clipboardData.items;
|
||||
let file = null;
|
||||
if (items && items.length) {
|
||||
for (let i = 0; i < items.length; i += 1) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
file = items[i].getAsFile();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (file) this.uploadFile(file);
|
||||
};
|
||||
|
||||
uploadFile = (file: File) => {
|
||||
const reader: FileReader = new FileReader();
|
||||
reader.onload = () => {
|
||||
this.downscaleImage(reader.result).then(this.predict);
|
||||
this.setState(() => ({
|
||||
fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
|
||||
}));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
downscaleImage = (url: any) => {
|
||||
return new Promise(resolve => {
|
||||
const img = new Image();
|
||||
img.setAttribute('crossOrigin', 'anonymous');
|
||||
img.src = url;
|
||||
img.onload = function() {
|
||||
const scale = Math.min(1, 300 / Math.max(img.width, img.height));
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = img.width * scale;
|
||||
canvas.height = img.height * scale;
|
||||
const ctx = canvas.getContext('2d');
|
||||
(ctx as CanvasRenderingContext2D).drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
const newDataUrl = canvas.toDataURL('image/jpeg');
|
||||
resolve(newDataUrl);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
predict = async (imageBase64: any) => {
|
||||
this.setState(() => ({ loading: true }));
|
||||
try {
|
||||
const res = await fetch(
|
||||
'//1647796581073291.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/cr-sh.cr-fc-predict__stable/cr-fc-predict/',
|
||||
{
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
modelId: 'data_icon',
|
||||
type: 'ic',
|
||||
imageBase64,
|
||||
}),
|
||||
},
|
||||
);
|
||||
let icons = await res.json();
|
||||
icons = icons.map((i: any) => ({ score: i.score, type: i.class_name.replace(/\s/g, '-') }));
|
||||
this.setState(() => ({ icons, loading: false, error: false }));
|
||||
} catch (err) {
|
||||
this.setState(() => ({ loading: false, error: true }));
|
||||
}
|
||||
};
|
||||
|
||||
toggleModal = () => {
|
||||
this.setState(prev => ({
|
||||
modalVisible: !prev.modalVisible,
|
||||
popoverVisible: false,
|
||||
fileList: [],
|
||||
icons: [],
|
||||
}));
|
||||
if (!localStorage.getItem('disableIconTip')) {
|
||||
localStorage.setItem('disableIconTip', 'true');
|
||||
}
|
||||
};
|
||||
|
||||
onCopied = (text: string) => {
|
||||
message.success(
|
||||
<span>
|
||||
<code className="copied-code">{text}</code> copied 🎉
|
||||
</span>,
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl: { messages },
|
||||
} = this.props;
|
||||
const { modalVisible, popoverVisible, icons, fileList, loading, error } = this.state;
|
||||
return (
|
||||
<div className="icon-pic-searcher">
|
||||
<Popover
|
||||
content={messages[`app.docs.components.icon.pic-searcher.intro`]}
|
||||
visible={popoverVisible}
|
||||
>
|
||||
<Icon type="camera" className="icon-pic-btn" onClick={this.toggleModal} />
|
||||
</Popover>
|
||||
<Modal
|
||||
title={messages[`app.docs.components.icon.pic-searcher.title`]}
|
||||
visible={modalVisible}
|
||||
onCancel={this.toggleModal}
|
||||
footer={null}
|
||||
>
|
||||
<Dragger
|
||||
accept="image/jpeg, image/png"
|
||||
listType="picture"
|
||||
customRequest={(o: any) => this.uploadFile(o.file)}
|
||||
fileList={fileList}
|
||||
showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">
|
||||
{messages['app.docs.components.icon.pic-searcher.upload-text']}
|
||||
</p>
|
||||
<p className="ant-upload-hint">
|
||||
{messages['app.docs.components.icon.pic-searcher.upload-hint']}
|
||||
</p>
|
||||
</Dragger>
|
||||
<Spin spinning={loading} tip={messages['app.docs.components.icon.pic-searcher.matching']}>
|
||||
<div className="icon-pic-search-result">
|
||||
{icons.length > 0 && (
|
||||
<div className="result-tip">
|
||||
{messages['app.docs.components.icon.pic-searcher.result-tip']}
|
||||
</div>
|
||||
)}
|
||||
<table>
|
||||
{icons.length > 0 && (
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="col-icon">
|
||||
{messages['app.docs.components.icon.pic-searcher.th-icon']}
|
||||
</th>
|
||||
<th>{messages['app.docs.components.icon.pic-searcher.th-score']}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
)}
|
||||
<tbody>
|
||||
{icons.map((icon: iconObject) => (
|
||||
<tr key={icon.type}>
|
||||
<td className="col-icon">
|
||||
<CopyToClipboard
|
||||
text={`<Icon type="${icon.type}" />`}
|
||||
onCopy={this.onCopied}
|
||||
>
|
||||
<Tooltip title={icon.type} placement="right">
|
||||
<Icon type={icon.type} />
|
||||
</Tooltip>
|
||||
</CopyToClipboard>
|
||||
</td>
|
||||
<td>
|
||||
<Progress percent={Math.ceil(icon.score * 100)} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{error && (
|
||||
<Result
|
||||
status="500"
|
||||
title="503"
|
||||
subTitle={messages['app.docs.components.icon.pic-searcher.server-error']}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(PicSearcher);
|
||||
@ -7,6 +7,7 @@ import { injectIntl } from 'react-intl';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { ThemeType } from 'antd/es/icon';
|
||||
import Category from './Category';
|
||||
import IconPicSearcher from './IconPicSearcher';
|
||||
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
|
||||
import categories, { Categories, CategoriesKeys } from './fields';
|
||||
|
||||
@ -124,6 +125,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
|
||||
onChange={e => this.handleSearchIcon(e.currentTarget.value)}
|
||||
size="large"
|
||||
autoFocus
|
||||
suffix={<IconPicSearcher />}
|
||||
/>
|
||||
</div>
|
||||
{this.renderCategories(list)}
|
||||
|
||||
@ -108,5 +108,15 @@ module.exports = {
|
||||
'app.docs.components.icon.category.data': '数据类图标',
|
||||
'app.docs.components.icon.category.other': '网站通用图标',
|
||||
'app.docs.components.icon.category.logo': '品牌和标识',
|
||||
'app.docs.components.icon.pic-searcher.intro': 'AI 截图搜索上线了，快来体验吧！🎉',
|
||||
'app.docs.components.icon.pic-searcher.title': '上传图片搜索图标',
|
||||
'app.docs.components.icon.pic-searcher.upload-text': '点击/拖拽/粘贴上传图片',
|
||||
'app.docs.components.icon.pic-searcher.upload-hint':
|
||||
'我们会通过上传的图片进行匹配，得到最相似的图标',
|
||||
'app.docs.components.icon.pic-searcher.server-error': '识别服务暂不可用',
|
||||
'app.docs.components.icon.pic-searcher.matching': '匹配中...',
|
||||
'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
|
||||
'app.docs.components.icon.pic-searcher.th-icon': '图标',
|
||||
'app.docs.components.icon.pic-searcher.th-score': '匹配度',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user