初始化 antd-pro

admin-web/src/components/HeaderSearch/demo/basic.md

@@ -0,0 +1,34 @@
+---
+order: 0
+title: 全局搜索
+---
+
+通常放置在导航工具条右侧。（点击搜索图标预览效果）
+
+````jsx
+import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
+
+ReactDOM.render(
+  <div
+    style={{
+      textAlign: 'right',
+      height: '64px',
+      lineHeight: '64px',
+      boxShadow: '0 1px 4px rgba(0,21,41,.12)',
+      padding: '0 32px',
+      width: '400px',
+    }}
+  >
+    <HeaderSearch
+      placeholder="站内搜索"
+      dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
+      onSearch={(value) => {
+        console.log('input', value); // eslint-disable-line
+      }}
+      onPressEnter={(value) => {
+        console.log('enter', value); // eslint-disable-line
+      }}
+    />
+  </div>
+, mountNode);
+````

admin-web/src/components/HeaderSearch/index.d.ts

@@ -0,0 +1,15 @@
+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;
+}
+
+export default class HeaderSearch extends React.Component<IHeaderSearchProps, any> {}

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

@@ -0,0 +1,22 @@
+---
+title: HeaderSearch
+subtitle:
+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 | Called when searching items. | function(value) | -
+onChange | Called when select an option or input value change, or value of input is changed | function(value) | -
+onSelect | Called when a option is selected. param is option's value and option instance. | 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 | boolean |false

admin-web/src/components/HeaderSearch/index.js

@@ -0,0 +1,145 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Icon, AutoComplete } from 'antd';
+import classNames from 'classnames';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import styles from './index.less';
+
+export default class HeaderSearch extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+    onSearch: PropTypes.func,
+    onChange: PropTypes.func,
+    onPressEnter: PropTypes.func,
+    defaultActiveFirstOption: PropTypes.bool,
+    dataSource: PropTypes.array,
+    defaultOpen: PropTypes.bool,
+    onVisibleChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    defaultActiveFirstOption: false,
+    onPressEnter: () => {},
+    onSearch: () => {},
+    onChange: () => {},
+    className: '',
+    placeholder: '',
+    dataSource: [],
+    defaultOpen: false,
+    onVisibleChange: () => {},
+  };
+
+  static getDerivedStateFromProps(props) {
+    if ('open' in props) {
+      return {
+        searchMode: props.open,
+      };
+    }
+    return null;
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchMode: props.defaultOpen,
+      value: '',
+    };
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  onKeyDown = e => {
+    if (e.key === 'Enter') {
+      const { onPressEnter } = this.props;
+      const { value } = this.state;
+      this.timeout = setTimeout(() => {
+        onPressEnter(value); // Fix duplicate onPressEnter
+      }, 0);
+    }
+  };
+
+  onChange = value => {
+    const { onSearch, onChange } = this.props;
+    this.setState({ value });
+    if (onSearch) {
+      onSearch(value);
+    }
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  enterSearchMode = () => {
+    const { onVisibleChange } = this.props;
+    onVisibleChange(true);
+    this.setState({ searchMode: true }, () => {
+      const { searchMode } = this.state;
+      if (searchMode) {
+        this.input.focus();
+      }
+    });
+  };
+
+  leaveSearchMode = () => {
+    this.setState({
+      searchMode: false,
+      value: '',
+    });
+  };
+
+  // NOTE: 不能小于500，如果长按某键，第一次触发auto repeat的间隔是500ms，小于500会导致触发2次
+  @Bind()
+  @Debounce(500, {
+    leading: true,
+    trailing: false,
+  })
+  debouncePressEnter() {
+    const { onPressEnter } = this.props;
+    const { value } = this.state;
+    onPressEnter(value);
+  }
+
+  render() {
+    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}
+        onTransitionEnd={({ propertyName }) => {
+          if (propertyName === 'width' && !searchMode) {
+            const { onVisibleChange } = this.props;
+            onVisibleChange(searchMode);
+          }
+        }}
+      >
+        <Icon type="search" key="Icon" />
+        <AutoComplete
+          key="AutoComplete"
+          {...restProps}
+          className={inputClass}
+          value={value}
+          onChange={this.onChange}
+        >
+          <Input
+            ref={node => {
+              this.input = node;
+            }}
+            aria-label={placeholder}
+            placeholder={placeholder}
+            onKeyDown={this.onKeyDown}
+            onBlur={this.leaveSearchMode}
+          />
+        </AutoComplete>
+      </span>
+    );
+  }
+}

admin-web/src/components/HeaderSearch/index.less

@@ -0,0 +1,32 @@
+@import '~antd/lib/style/themes/default.less';
+
+.headerSearch {
+  :global(.anticon-search) {
+    font-size: 16px;
+    cursor: pointer;
+  }
+  .input {
+    width: 0;
+    background: transparent;
+    border-radius: 0;
+    transition: width 0.3s, margin-left 0.3s;
+    :global(.ant-select-selection) {
+      background: transparent;
+    }
+    input {
+      padding-right: 0;
+      padding-left: 0;
+      border: 0;
+      box-shadow: none !important;
+    }
+    &,
+    &:hover,
+    &:focus {
+      border-bottom: 1px solid @border-color-base;
+    }
+    &.show {
+      width: 210px;
+      margin-left: 8px;
+    }
+  }
+}

admin-web/src/components/HeaderSearch/index.zh-CN.md

@@ -0,0 +1,22 @@
+---
+title: HeaderSearch
+subtitle: 顶部搜索框
+cols: 1
+order: 8
+---
+
+通常作为全局搜索的入口，放置在导航工具条右侧。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+placeholder | 占位文字 | string | -
+dataSource | 当前提示内容列表 | string[] | -
+onSearch | 搜索补全项的时候调用 | function(value) | -
+onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | -
+onSelect | 被选中时调用，参数为选中项的 value 值 | function(value) | -
+onPressEnter | 按下回车时的回调 | function(value) | -
+onVisibleChange | 显示或隐藏文本框的回调 | function(value) |-
+defaultOpen | 输入框首次显示是否显示  | boolean | false
+open | 控制输入框是否显示 | boolean |false