Add Tag[visible]

components/tag/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag can be controlled by visible 1`] = `
+<div
+  class="ant-tag ant-tag-zoom-appear"
+  data-show="true"
+/>
+`;
+
+exports[`Tag can be controlled by visible 2`] = `null`;

components/tag/__tests__/index.test.js

@@ -38,4 +38,14 @@ describe('Tag', () => {
     jest.runAllTimers();
     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();
+  });
 });

components/tag/demo/controlled.md

@@ -0,0 +1,47 @@
+---
+order: 5
+title:
+  zh-CN: 控制关闭状态
+  en-US: Controlled
+---
+
+## zh-CN
+
+通过 `visible` 属性控制关闭状态。
+
+## en-US
+
+By using the `visible` prop, you can control the close state of Tag.
+
+````jsx
+import { Tag, Button } from 'antd';
+
+class Demo extends React.Component {
+  state = {
+    visible: true,
+  }
+
+  render() {
+    return (
+      <div>
+        <Tag
+          closable
+          visible={this.state.visible}
+          onClose={() => this.setState({ visible: false })}
+        >
+          Movies
+        </Tag>
+        <br />
+        <Button
+          size="small"
+          onClick={() => this.setState({ visible: !this.state.visible })}
+        >
+          Toggle
+        </Button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````

components/tag/index.en-US.md

@@ -19,9 +19,10 @@ Tag for categorizing or markup.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | afterClose | Callback executed when close animation is completed | () => void | - |
-| closable | Whether Tag can be closed | boolean | `false` |
+| closable | Whether the Tag can be closed | boolean | `false` |
 | color | Color of the Tag | string | - |
 | onClose | Callback executed when tag is closed | (e) => void | - |
+| visible | Whether the Tag is closed or not | boolean | `true` |
 
 ### Tag.CheckableTag
 

components/tag/index.tsx

@@ -14,6 +14,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   color?: string;
   /** 标签是否可以关闭 */
   closable?: boolean;
+  visible?: boolean;
   /** 关闭时的回调 */
   onClose?: Function;
   /** 动画关闭后的回调 */
@@ -24,6 +25,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface TagState {
   closing: boolean;
   closed: boolean;
+  visible: boolean;
 }
 
 export default class Tag extends React.Component<TagProps, TagState> {
@@ -33,21 +35,37 @@ export default class Tag extends React.Component<TagProps, TagState> {
     closable: false,
   };
 
-  constructor(props: TagProps) {
+  static getDerivedStateFromProps(nextProps: TagProps) {
-    super(props);
+    return  ('visible' in nextProps) ? { visible: nextProps.visible } : null;
-
-    this.state = {
-      closing: false,
-      closed: false,
-    };
   }
 
-  close = (e: React.MouseEvent<HTMLElement>) => {
+  state = {
+    closing: false,
+    closed: false,
+    visible: true,
+  };
+
+  componentDidUpdate(_prevProps: TagProps, prevState: TagState) {
+    if (prevState.visible && !this.state.visible) {
+      this.close();
+    } else if (!prevState.visible && this.state.visible) {
+      this.show();
+    }
+  }
+
+  handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
     const onClose = this.props.onClose;
     if (onClose) {
       onClose(e);
     }
-    if (e.defaultPrevented) {
+    if (e.defaultPrevented || 'visible' in this.props) {
+      return;
+    }
+    this.setState({ visible: false });
+  }
+
+  close = () => {
+    if (this.state.closing || this.state.closed) {
       return;
     }
     const dom = ReactDOM.findDOMNode(this) as HTMLElement;
@@ -59,6 +77,12 @@ export default class Tag extends React.Component<TagProps, TagState> {
     });
   }
 
+  show = () => {
+    this.setState({
+      closed: false,
+    });
+  }
+
   animationEnd = (_: string, existed: boolean) => {
     if (!existed && !this.state.closed) {
       this.setState({
@@ -70,6 +94,10 @@ export default class Tag extends React.Component<TagProps, TagState> {
       if (afterClose) {
         afterClose();
       }
+    } else {
+      this.setState({
+        closed: false,
+      });
     }
   }
 
@@ -83,7 +111,7 @@ export default class Tag extends React.Component<TagProps, TagState> {
 
   render() {
     const { prefixCls, closable, color, className, children, style, ...otherProps } = this.props;
-    const closeIcon = closable ? <Icon type="cross" onClick={this.close} /> : '';
+    const closeIcon = closable ? <Icon type="cross" onClick={this.handleIconClick} /> : '';
     const isPresetColor = this.isPresetColor(color);
     const classString = classNames(prefixCls, {
       [`${prefixCls}-${color}`]: isPresetColor,
@@ -94,6 +122,7 @@ export default class Tag extends React.Component<TagProps, TagState> {
     const divProps = omit(otherProps, [
       'onClose',
       'afterClose',
+      'visible',
     ]);
     const tagStyle = {
       backgroundColor: (color && !isPresetColor) ? color : null,

components/tag/index.zh-CN.md

@@ -22,6 +22,7 @@ title: Tag
 | closable | 标签是否可以关闭 | boolean | false |
 | color | 标签色 | string | - |
 | onClose | 关闭时的回调 | (e) => void | - |
+| visible | 是否显示标签 | boolean | `true` |
 
 ### Tag.CheckableTag