Merge branch 'feature-3.7.0' of github.com:ant-design/ant-design into feature-3.7.0

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

@@ -211,6 +211,29 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
+<div>
+  <div
+    class="ant-tag"
+    data-show="true"
+  >
+    Movies
+    <i
+      class="anticon anticon-cross"
+    />
+  </div>
+  <br />
+  <button
+    class="ant-btn ant-btn-sm"
+    type="button"
+  >
+    <span>
+      Toggle
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
 <div>
   <h6

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

@@ -0,0 +1,17 @@
+// 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`;
+
+exports[`Tag can be controlled by visible 3`] = `
+<div
+  class="ant-tag"
+  data-show="true"
+/>
+`;

components/tag/__tests__/index.test.js

@@ -38,4 +38,17 @@ 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();
+    wrapper.setProps({ visible: true });
+    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

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import { polyfill } from 'react-lifecycles-compat';
 import Icon from '../icon';
 import CheckableTag from './CheckableTag';
 
@@ -14,6 +15,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   color?: string;
   /** 标签是否可以关闭 */
   closable?: boolean;
+  visible?: boolean;
   /** 关闭时的回调 */
   onClose?: Function;
   /** 动画关闭后的回调 */
@@ -24,30 +26,47 @@ 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> {
+class Tag extends React.Component<TagProps, TagState> {
   static CheckableTag = CheckableTag;
   static defaultProps = {
     prefixCls: 'ant-tag',
     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 +78,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 +95,10 @@ export default class Tag extends React.Component<TagProps, TagState> {
       if (afterClose) {
         afterClose();
       }
+    } else {
+      this.setState({
+        closed: false,
+      });
     }
   }
 
@@ -83,7 +112,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 +123,7 @@ export default class Tag extends React.Component<TagProps, TagState> {
     const divProps = omit(otherProps, [
       'onClose',
       'afterClose',
+      'visible',
     ]);
     const tagStyle = {
       backgroundColor: (color && !isPresetColor) ? color : null,
@@ -123,3 +153,7 @@ export default class Tag extends React.Component<TagProps, TagState> {
     );
   }
 }
+
+polyfill(Tag);
+
+export default Tag;

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
 

package.json

@@ -80,6 +80,7 @@
     "rc-upload": "~2.5.0",
     "rc-util": "^4.0.4",
     "react-lazy-load": "^3.0.12",
+    "react-lifecycles-compat": "^3.0.4",
     "react-slick": "~0.23.1",
     "shallowequal": "^1.0.1",
     "warning": "~4.0.1"

typings/custom-typings.d.ts

@@ -102,3 +102,5 @@ declare module "lodash/uniqBy";
 declare module 'intersperse';
 
 declare module "raf";
+
+declare module "react-lifecycles-compat";