taro-material/h5/Search/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Text, Input } from '@tarojs/components';
import classNames from 'classnames';
import PropTypes from 'prop-types';

import RMIcon from "../Icon/index";
import AtComponent from "../common/component";

import theme from "../styles/theme";

import './Search.scss';

const defaultFunc = () => {};

export default class RMSearch extends AtComponent {
  constructor(props) {
    super(...arguments);
    this.state = {
      isFocus: props.focus
    };
  }

  handleFocus(e) {
    this.setState({
      isFocus: true
    });
    this.props.onFocus(e, ...arguments);
  }

  handleBlur(e) {
    this.setState({
      isFocus: false
    });
    this.props.onBlur(e, ...arguments);
  }

  handleChange(e) {
    this.props.onChange(e.target.value, e, ...arguments);
  }

  handleClear(e) {
    this.props.onChange('', e, ...arguments);
    this.props.onClear();
  }

  handleConfirm(e) {
    this.props.onConfirm(e, ...arguments);
  }

  handleActionClick(e) {
    this.props.onActionClick(e);
  }

  render() {
    const {
      value,
      placeholder,
      maxlength,
      fixed,
      focus,
      disabled,
      showActionButton,
      actionName,
      className,
      customStyle,
      color,
      square
    } = this.props;
    const { isFocus } = this.state;

    const placeholderStyle = {};
    const actionStyle = {};
    if (isFocus || !isFocus && value) {
      placeholderStyle.width = `${(placeholder.length + 2.5) * 14}px`;
      actionStyle.opacity = 1;
      actionStyle.marginRight = `0`;
    } else if (!isFocus && !value) {
      placeholderStyle.width = '100%';
      actionStyle.opacity = 0;
      actionStyle.marginRight = `-${(actionName.length + 1) * 14 + 7}px`;
    }
    if (showActionButton) {
      actionStyle.opacity = 1;
      actionStyle.marginRight = `0`;
    }
    let _color = '';
    if (color && color.length >= 1) {
      _color = color.charAt(0).toUpperCase() + color.substring(1);
    }
    let hint = null;
    if (color === 'action' || color === 'disabled' || color === 'default') {
      hint = theme.palette.text.hint;
    } else if (color === 'inherit') {
      hint = 'inherit';
    } else {
      hint = theme.palette.text.hint2;
    }
    return <View className={classNames({
      'at-search-bar': true,
      'at-search-bar--fixed': fixed,
      [`color${_color}`]: color !== 'inherit'
    }, className)} style={customStyle}>
        <View className={classNames({
        'at-search-bar__container': true,
        rounded: !square
      })}>
          <View className="at-search-bar__placeholder_wrap" style={placeholderStyle}>
            <RMIcon fontSize={15} fill={hint}>
              search
            </RMIcon>
            <Text className="at-search-bar__placeholder" style={value.length ? 'visibility: hidden;' : 'visibility: visible;'}>
              {placeholder}
            </Text>
          </View>
          <Input className="at-search-bar__input" type="search" value={value} focus={focus} disabled={disabled} maxlength={maxlength} onInput={this.handleChange.bind(this)} onFocus={this.handleFocus.bind(this)} onBlur={this.handleBlur.bind(this)} onConfirm={this.handleConfirm.bind(this)} />
          <View className="at-search-bar__clear" style={value.length ? 'display: flex;' : 'display: none;'} onTouchStart={this.handleClear.bind(this)}>
            <RMIcon fontSize={15} fill={hint}>
              cancel
            </RMIcon>
          </View>
        </View>
        <View className="at-search-bar__action" onClick={this.handleActionClick.bind(this)} style={actionStyle}>
          {actionName}
        </View>
      </View>;
  }
}

RMSearch.defaultProps = {
  value: '',
  placeholder: '搜索',
  maxlength: 140,
  fixed: false,
  focus: false,
  disabled: false,
  showActionButton: false,
  actionName: '搜索',
  onChange: defaultFunc,
  onFocus: defaultFunc,
  onBlur: defaultFunc,
  onConfirm: defaultFunc,
  onActionClick: defaultFunc,
  onClear: defaultFunc,
  color: 'default',
  square: false
};

RMSearch.propTypes = {
  value: PropTypes.string,
  placeholder: PropTypes.string,
  maxlength: PropTypes.number,
  fixed: PropTypes.bool,
  focus: PropTypes.bool,
  disabled: PropTypes.bool,
  showActionButton: PropTypes.bool,
  actionName: PropTypes.string,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onConfirm: PropTypes.func,
  onActionClick: PropTypes.func,
  onClear: PropTypes.func,
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'error', 'success', 'warning', 'progress']),
  square: PropTypes.bool
};