mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

Fix Input.Search not support addonAfter (#14799)

Browse Source 
* fix addonAfter

* update snapshot
This commit is contained in:
zombieJ 2019-02-12 21:39:36 +08:00 committed by GitHub
parent ee1aa103a2
commit 47e53ab0fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 128 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/input/Search.tsx
View File

@ -68,14 +68,16 @@ export default class Search extends React.Component<SearchProps, any> {
};
renderAddonAfter = (prefixCls: string) => {
const { enterButton, size, disabled } = this.props;
if (!enterButton) return null;
const { enterButton, size, disabled, addonAfter } = this.props;
if (!enterButton) return addonAfter;
const btnClassName = `${prefixCls}-button`;
let button: React.ReactNode;
const enterButtonAsElement = enterButton as React.ReactElement<any>;
if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
return React.cloneElement(enterButtonAsElement, {
button = React.cloneElement(enterButtonAsElement, {
onClick: this.onSearch,
key: 'enterButton',
...(enterButtonAsElement.type === Button
? {
className: btnClassName,
@ -83,20 +85,26 @@ export default class Search extends React.Component<SearchProps, any> {
}
: {}),
});
} else {
button = (
<Button
className={btnClassName}
type="primary"
size={size}
disabled={disabled}
key="enterButton"
onClick={this.onSearch}
>
{enterButton === true ? <Icon type="search" /> : enterButton}
</Button>
);
}
return (
<Button
className={btnClassName}
type="primary"
size={size}
disabled={disabled}
key="enterButton"
onClick={this.onSearch}
>
{enterButton === true ? <Icon type="search" /> : enterButton}
</Button>
);
if (addonAfter) {
return [button, addonAfter];
}
return button;
};
renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => {

9
components/input/__tests__/Search.test.js
View File

@ -126,4 +126,13 @@ describe('Input.Search', () => {
}),
);
});
// https://github.com/ant-design/ant-design/issues/14785
it('should support addonAfter', () => {
const addonAfter = <span>Addon After</span>;
const wrapper = mount(<Search addonAfter={addonAfter} />);
const wrapperWithEnterButton = mount(<Search enterButton addonAfter={addonAfter} />);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapperWithEnterButton.render()).toMatchSnapshot();
});
});

96
components/input/__tests__/__snapshots__/Search.test.js.snap
View File

@ -1,5 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input.Search should support addonAfter 1`] = `
<span
class="ant-input-search ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<span
class="ant-input-search ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<i
aria-label="icon: search"
class="anticon anticon-search ant-input-search-icon"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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>
</i>
</span>
</span>
<span
class="ant-input-group-addon"
>
<span>
Addon After
</span>
</span>
</span>
</span>
`;
exports[`Input.Search should support addonAfter 2`] = `
<span
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
>
<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-input-search-button ant-btn-primary"
type="button"
>
<i
aria-label="icon: search"
class="anticon anticon-search"
>
<svg
aria-hidden="true"
class=""
data-icon="search"
fill="currentColor"
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 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-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>
</i>
</button>
<span>
Addon After
</span>
</span>
</span>
</span>
`;
exports[`Input.Search should support custom Button 1`] = `
<span
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"

1
components/input/__tests__/__snapshots__/index.test.js.snap
View File

@ -541,7 +541,6 @@ exports[`Input.Search should support suffix 1`] = `
>
<Consumer>
<Input
addonAfter={null}
className="ant-input-search"
disabled={false}
onPressEnter={[Function]}