mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-24 15:38:45 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix: tags initially hidden, closing #11757 (#11761)

Browse Source 
* fix: tags initially hidden, closing #11757

* update snapshots
This commit is contained in:
Junbin Huang 2018-08-18 14:29:25 +08:00 committed by GitHub
parent 838be31543
commit 4622dce879
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/tag/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,17 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Tag can be controlled by visible 1`] = `
exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<div />`;
exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
<div
class="ant-tag"
data-show="true"
/>
`;
exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `
<div
style="width: 0px;"
/>
`;
exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
<div
class="ant-tag ant-tag-zoom-appear"
data-show="true"
/>
`;
exports[`Tag can be controlled by visible 2`] = `null`;
exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `
<div
style="width: 0px;"
/>
`;
exports[`Tag can be controlled by visible 3`] = `
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
<div
class="ant-tag"
data-show="true"
style="width: 0px;"
/>
`;

37
components/tag/__tests__/index.test.js
View File

@ -39,16 +39,31 @@ describe('Tag', () => {
expect(wrapper.find('.ant-tag').length).toBe(1);
});
it('can be controlled by visible', () => {
const wrapper = mount(
<Tag visible />
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: false });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: true });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
describe('visibility', () => {
it('can be controlled by visible with visible as initial value', () => {
const wrapper = mount(
<Tag visible />
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: false });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: true });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
});
it('can be controlled by visible with hidden as initial value', () => {
const wrapper = mount(
<Tag visible={false} />
);
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: true });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
wrapper.setProps({ visible: false });
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
});
});
});

24
components/tag/index.tsx
View File

@ -28,6 +28,7 @@ export interface TagState {
closing: boolean;
closed: boolean;
visible: boolean;
mounted: boolean;
}
class Tag extends React.Component<TagProps, TagState> {
@ -37,14 +38,30 @@ class Tag extends React.Component<TagProps, TagState> {
closable: false,
};
static getDerivedStateFromProps(nextProps: TagProps) {
return ('visible' in nextProps) ? { visible: nextProps.visible } : null;
static getDerivedStateFromProps(nextProps: TagProps, state: TagState) {
if ('visible' in nextProps) {
let newState: Partial<TagState> = {
visible: nextProps.visible,
mounted: true,
};
if (!state.mounted) {
newState = {
...newState,
closed: !nextProps.visible,
};
}
return newState;
}
return null;
}
state = {
closing: false,
closed: false,
visible: true,
mounted: false,
};
componentDidUpdate(_prevProps: TagProps, prevState: TagState) {
@ -130,7 +147,7 @@ class Tag extends React.Component<TagProps, TagState> {
backgroundColor: (color && !isPresetColor) ? color : null,
...style,
};
const tag = this.state.closed ? null : (
const tag = this.state.closed ? <div /> : (
<div
data-show={!this.state.closing}
{...divProps}
@ -141,6 +158,7 @@ class Tag extends React.Component<TagProps, TagState> {
{closeIcon}
</div>
);
return (
<Wave>
<Animate