test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Fix button two-chinese-words update bug

Browse Source
This commit is contained in:
afc163 2018-03-23 22:23:03 +08:00
parent 07d6988f0d
commit 4502ad8376
2 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,24 @@ describe('Button', () => {
expect(wrapper2).toMatchSnapshot();
});
it('renders Chinese characters correctly in HOC', () => {
const Text = props => <span>{props.children}</span>;
const wrapper = mount(
<Button><Text>按钮</Text></Button>
);
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
wrapper.setProps({
children: <Text>大按钮</Text>,
});
wrapper.update();
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
wrapper.setProps({
children: <Text>按钮</Text>,
});
wrapper.update();
expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
});
it('have static perperty for type detecting', () => {
const wrapper = mount(
<Button>Button Text</Button>

29
components/button/button.tsx
View File

@ -95,13 +95,7 @@ export default class Button extends React.Component<ButtonProps, any> {
}
componentDidMount() {
// Fix for HOC usage like <FormatMessage />
const buttonText = (findDOMNode(this) as HTMLElement).innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
this.setState({
hasTwoCNChar: true,
});
}
this.fixTwoCNChar();
}
componentWillReceiveProps(nextProps: ButtonProps) {
@ -119,6 +113,10 @@ export default class Button extends React.Component<ButtonProps, any> {
}
}
componentDidUpdate() {
this.fixTwoCNChar();
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
@ -128,6 +126,23 @@ export default class Button extends React.Component<ButtonProps, any> {
}
}
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />
const node = (findDOMNode(this) as HTMLElement);
const buttonText = node.textContent || node.innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: true,
});
}
} else if (this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: false,
});
}
}
handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
// Add click effect
this.setState({ clicked: true });