fix #2124 add new api: onVisibleChange and open

src/components/GlobalHeader/index.less

@@ -48,6 +48,7 @@ i.trigger {
 .right {
   float: right;
   height: 100%;
+  overflow: hidden;
   .action {
     cursor: pointer;
     padding: 0 12px;

src/components/HeaderSearch/index.d.ts

@@ -2,8 +2,11 @@ import * as React from 'react';
 export interface IHeaderSearchProps {
   placeholder?: string;
   dataSource?: string[];
+  defaultOpen: boolean;
+  open: boolean;
   onSearch?: (value: string) => void;
   onChange?: (value: string) => void;
+  onVisibleChange?: (visible: boolean) => void;
   onPressEnter?: (value: string) => void;
   style?: React.CSSProperties;
   className?: string;

src/components/HeaderSearch/index.en-US.md

@@ -0,0 +1,23 @@
+---
+title:
+  en-US: HeaderSearch
+  zh-CN: HeaderSearch
+subtitle: Top search box
+cols: 1
+order: 8
+---
+
+Usually placed as an entry to the global search, placed on the right side of the navigation toolbar.
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+placeholder | placeholder text | string | -
+dataSource | current list of prompts | string[] | -
+onSearch | Callback when selecting an item or pressing Enter | function(value) | -
+onChange | Enter a callback for the search text | function(value) | -
+onPressEnter | Callback when pressing Enter | function(value) | -
+onVisibleChange | Show or hide the callback of the text box | function(value) |-
+defaultOpen | The input box is displayed for the first time. | boolean | false
+open | The input box is displayed | booelan |false

src/components/HeaderSearch/index.js

@@ -15,6 +15,7 @@ export default class HeaderSearch extends PureComponent {
     defaultActiveFirstOption: PropTypes.bool,
     dataSource: PropTypes.array,
     defaultOpen: PropTypes.bool,
+    onVisibleChange: PropTypes.func,
   };
 
   static defaultProps = {
@@ -25,8 +26,18 @@ export default class HeaderSearch extends PureComponent {
     placeholder: '',
     dataSource: [],
     defaultOpen: false,
+    onVisibleChange: () => {},
   };
 
+  static getDerivedStateFromProps(props) {
+    if ('open' in props) {
+      return {
+        searchMode: props.open,
+      };
+    }
+    return null;
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -64,6 +75,8 @@ export default class HeaderSearch extends PureComponent {
         this.input.focus();
       }
     });
+    const { onVisibleChange } = this.props;
+    onVisibleChange(true);
   };
 
   leaveSearchMode = () => {
@@ -86,14 +99,25 @@ export default class HeaderSearch extends PureComponent {
   }
 
   render() {
-    const { className, placeholder, ...restProps } = this.props;
+    const { className, placeholder, open, ...restProps } = this.props;
     const { searchMode, value } = this.state;
     delete restProps.defaultOpen; // for rc-select not affected
     const inputClass = classNames(styles.input, {
       [styles.show]: searchMode,
     });
     return (
-      <span className={classNames(className, styles.headerSearch)} onClick={this.enterSearchMode}>
+      <span
+        className={classNames(className, styles.headerSearch)}
+        onClick={this.enterSearchMode}
+        onTransitionEnd={({ propertyName }) => {
+          if (propertyName === 'width') {
+            if (!searchMode) {
+              const { onVisibleChange } = this.props;
+              onVisibleChange(searchMode);
+            }
+          }
+        }}
+      >
         <Icon type="search" key="Icon" />
         <AutoComplete
           key="AutoComplete"

src/components/HeaderSearch/index.md

@@ -18,4 +18,6 @@ dataSource | 当前提示内容列表 | string[] | -
 onSearch | 选择某项或按下回车时的回调 | function(value) | -
 onChange | 输入搜索字符的回调 | function(value) | -
 onPressEnter | 按下回车时的回调 | function(value) | -
-defaultOpen | 输入框首次显示是否打开 | boolean | false
+onVisibleChange | 显示或隐藏文本框的回调 | function(value) |-
+defaultOpen | 输入框首次显示是否显示  | boolean | false
+open | 控制输入框是否显示 | booelan |false