mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

When there is icon, should not insert space in button children, #5977

Browse Source
This commit is contained in:
afc163 2017-05-02 20:16:18 +08:00
parent 2190f63959
commit 5d6439f15b
3 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/button/__tests__/__snapshots__/index.test.js.snap
View File

@ -11,6 +11,34 @@ exports[`Button renders Chinese characters correctly 1`] = `
</button>
`;
exports[`Button renders Chinese characters correctly 2`] = `
<button
class="ant-btn"
type="button"
>
<i
class="anticon anticon-search"
/>
<span>
按钮
</span>
</button>
`;
exports[`Button renders Chinese characters correctly 3`] = `
<button
class="ant-btn"
type="button"
>
<i
class="anticon anticon-search"
/>
<span>
按钮
</span>
</button>
`;
exports[`Button renders correctly 1`] = `
<button
class="ant-btn"

11
components/button/__tests__/index.test.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { render, mount } from 'enzyme';
import Button from '..';
import Icon from '../../icon';
describe('Button', () => {
it('renders correctly', () => {
@ -15,6 +16,16 @@ describe('Button', () => {
<Button>按钮</Button>
);
expect(wrapper).toMatchSnapshot();
// should not insert space when there is icon
const wrapper1 = render(
<Button icon="search">按钮</Button>
);
expect(wrapper1).toMatchSnapshot();
// should not insert space when there is icon
const wrapper2 = render(
<Button><Icon type="search" />按钮</Button>
);
expect(wrapper2).toMatchSnapshot();
});
it('have static perperty for type detecting', () => {

10
components/button/button.tsx
View File

@ -11,20 +11,21 @@ function isString(str: any) {
}
// Insert one space between two chinese characters automatically.
function insertSpace(child: React.ReactChild) {
function insertSpace(child: React.ReactChild, needInserted: boolean) {
// Check the child if is undefined or null.
if (child == null) {
return;
}
const SPACE = needInserted ? ' ' : '';
// strictNullChecks oops.
if (typeof child !== 'string' && typeof child !== 'number' &&
isString(child.type) && isTwoCNChar(child.props.children)) {
return React.cloneElement(child, {},
child.props.children.split('').join(' '));
child.props.children.split('').join(SPACE));
}
if (typeof child === 'string') {
if (isTwoCNChar(child)) {
child = child.split('').join(' ');
child = child.split('').join(SPACE);
}
return <span>{child}</span>;
}
@ -158,7 +159,8 @@ export default class Button extends React.Component<ButtonProps, any> {
const iconType = loading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const kids = React.Children.map(children, insertSpace);
const needInserted = React.Children.count(children) === 1 && !iconType;
const kids = React.Children.map(children, child => insertSpace(child, needInserted));
return (
<button