jimu-mobile/src/components/search/search.js

积木组件库助力移动端开发

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import reactComposition from 'react-composition';
import { getComponentLocale } from '../localeprovider/getLocale';
import Defaultlanguage from '../localeprovider/zh-CN';

/* eslint-disable no-script-url */
class Search extends React.Component {
  static stopPropagation(e) {
    e.preventDefault();
    e.stopPropagation();
  }
  static propTypes = {
    name: PropTypes.string,
    onChangeHandle: PropTypes.func,
    onClearHandle: PropTypes.func,
    onSubmitHandle: PropTypes.func,
    onFocusHandle: PropTypes.func,
    onBlurHandle: PropTypes.func,
    onCancelHandle: PropTypes.func,
  };
  static defaultProps = {
    name: 'jimu-search',
    onChangeHandle: null,
    onClearHandle: null,
    onCancelHandle: null,
    onFocusHandle: null,
    onBlurHandle: null,
    onSubmitHandle: null,
  };
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      focus: false,
      isShowAction: false,
    };
    this.focusHandle = this.focusHandle.bind(this);
    this.blurHandle = this.blurHandle.bind(this);
    this.changeHandle = this.changeHandle.bind(this);
    this.clearHandle = this.clearHandle.bind(this);
    this.cancelHandle = this.cancelHandle.bind(this);
  }
  changeHandle(e) {
    const text = e.target.value;
    if (e.reactComposition.composition === false && this.props.onChangeHandle) { // 解决中文输入法多次触发问题
      this.props.onChangeHandle(text, e);
    }
    this.setState({ text });
  }

  cancelHandle(e) {
    Search.stopPropagation(e);
    this.setState({
      focus: false,
      isShowAction: false,
      text: '',
    });
    if (this.props.onCancelHandle) this.props.onCancelHandle(e);
  }

  clearHandle(e) {
    this.setState({ text: '' });
    if (this.props.onClearHandle) this.props.onClearHandle(e);
    this.searchInput.focus();
  }

  blurHandle() {
    if (this.state.text === '') {
      this.setState({ focus: false });
    }

    this.props.onBlurHandle && this.props.onBlurHandle();
  }

  focusHandle() {
    const { onCancelHandle } = this.props;

    this.setState({ focus: true, isShowAction: !!onCancelHandle });
    this.props.onFocusHandle && this.props.onFocusHandle();
  }

  render() {
    const {
      className, onCancelHandle, ...others
    } = this.props;
    const { focus, text, isShowAction } = this.state;
    const locale = getComponentLocale(this.props, this.context, 'Search', () => Defaultlanguage.Search);
    const { cancelText, placeholder } = locale;
    const cls = classNames({
      'jimu-search-wrapper': true,
      'jimu-search-layout-row': true,
      'jimu-search-layout-row-center': true,
      [className]: className,
    });

    const clsSearchWrapper = classNames({
      'jimu-search-input-wrapper': true,
      'jimu-search-layout-row': true,
      'jimu-search-layout-row-center': true,
      'jimu-search-item-grow-1': true,
      'jimu-search-focusing': focus,
    });

    return (
      <form action="javascript: void(0);">
        <div className={cls}>
          <div className={clsSearchWrapper}>

            <input
              ref={(n) => { this.searchInput = n; }}
              type="search"
              className="jimu-search-input jimu-search-item-grow-1"
              onFocus={this.focusHandle}
              onBlur={this.blurHandle}
              {...reactComposition({ onChange: this.changeHandle })}
              value={text}
              {...others}
              placeholder={placeholder}
              autoComplete="off"
            />

            {text && <span className="jimu-search-close icon-del" onClick={this.clearHandle} />}
          </div>
          {isShowAction && <a className="jimu-search-action" onClick={this.cancelHandle}>{cancelText}</a> }
        </div>
      </form>
    );
  }
}

Search.contextTypes = {
  jimuLocale: PropTypes.object,
};

export default Search;