taro-material/h5/TextField/index.js

Mini Program components that implement Google's Material Design.

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

import RMIcon from "../Icon/index";
import RMTypography from "../Typography/index";

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

import './TextField.scss';

const defaultFunc = () => {};

class RMTextField extends Component {
  onInput(e) {
    const { multiline, count, maxlength } = this.props;
    if (multiline && count) {
      this.setState({
        _count: `${(e.target.value || '').length} / ${maxlength}`
      });
    }
    this.props.onChange(e.target.value, ...arguments);
  }

  onLinechange(e) {
    this.props.onLinechange(e.target.lineCount, ...arguments);
  }

  onFocus(e) {
    this.setState({
      focus: true
    });
    this.props.onFocus(e.target.value, ...arguments);
  }

  onBlur(e) {
    this.setState({
      focus: false
    });
    this.props.onBlur(e.target.value, ...arguments);
  }

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

  onClick(e) {
    !this.props.editable && this.props.onClick(e, ...arguments);
  }

  clearValue() {
    this.props.onChange('', ...arguments);
  }

  onErrorClick() {
    this.props.onErrorClick(...arguments);
  }

  componentWillMount() {
    const { disabled, editable, readOnlyStyle, multiline, count, value, maxlength } = this.props;

    if (multiline && count) {
      this.setState({
        _count: `${(value || '').length} / ${maxlength}`
      });
    }

    if (!disabled && !editable) {
      this.setState({
        readOnly: readOnlyStyle === 'normal'
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const { focus } = this.props;
    if (nextProps.focus !== focus) {
      this.setState({ focus: nextProps.focus });
    }
  }

  componentDidUpdate(nextProps, nextState) {}

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    const {
      className,
      customStyle,
      name,
      cursorSpacing,
      confirmType,
      cursor,
      selectionStart,
      selectionEnd,
      adjustPosition,
      border,
      title,
      editable,
      error,
      clear,
      placeholder,
      placeholderStyle,
      placeholderClass,
      autoFocus,
      value,
      readOnlyStyle,
      startAdornment,
      endAdornment,
      required,
      helperText,
      helperTextClass,
      helperTextStyle,
      multiline,
      count,
      autoHeight,
      fixed,
      margin
    } = this.props;
    let { maxlength, type, disabled } = this.props;
    const { readOnly, focus, _count } = this.state;

    if (type === 'phone') {
      maxlength = 11;
      type = 'number';
    }

    if (!disabled && !editable) {
      disabled = true;
    }

    const _title = title || name;

    const textareaStyle = {
      borderRadius: '0'
    };
    if (error) {
      textareaStyle.borderWidth = '2px';
      textareaStyle.borderColor = theme.palette.error.main;
    } else if (readOnly) {
      textareaStyle.borderWidth = '1px';
      textareaStyle.borderColor = theme.palette.text.divider;
    } else if (disabled) {
      textareaStyle.borderWidth = '1px';
      textareaStyle.borderStyle = 'dashed';
      textareaStyle.borderColor = theme.palette.text.divider;
      textareaStyle.opacity = 0.38;
    } else if (focus) {
      textareaStyle.borderWidth = '2px';
      textareaStyle.borderColor = theme.palette.primary.main;
    }

    return <View className="at-input__root">
        <View className={classNames({
        'at-input': true,
        'at-input--without-border': !border
      }, className)} style={customStyle}>
          <View className={classNames({
          'at-input__container': true,
          'at-input--error': error,
          'at-input--disabled': !readOnly && disabled,
          'at-input--readonly': readOnly,
          'at-input--focus': !error && !disabled && !readOnly && focus
        })} onClick={this.onClick.bind(this)}>
            {_title && <Label className="at-input__title" for={name}>
                <RMTypography className="subheading" color="inherit" block>
                  {_title}
                </RMTypography>
                <View className="at-input__required">
                  <RMTypography className="subheading" color="inherit">
                    {required ? '*' : ''}
                  </RMTypography>
                </View>
              </Label>}
            <View className={classNames({
            'at-input__box': true,
            multiline
          })}>
              {!multiline && startAdornment && <View className="at-input__start-adornment">
                    <RMTypography className="body2" color="inherit">
                      {startAdornment}
                    </RMTypography>
                  </View>}
              {!multiline && <Input className="at-input__input" id={name} name={name} type={type} placeholderStyle={placeholderStyle} placeholderClass={classNames('placeholder', placeholderClass)} placeholder={placeholder} cursorSpacing={cursorSpacing} maxlength={maxlength} autoFocus={autoFocus} value={value} confirmType={confirmType} cursor={cursor} selectionStart={selectionStart} selectionEnd={selectionEnd} adjustPosition={adjustPosition} disabled={disabled} onInput={this.onInput.bind(this)}
            // onChange={this.onInput.bind(this)}
            onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} onConfirm={this.onConfirm.bind(this)} focus={focus} />}
              {multiline && <Textarea className="at-input__textarea" id={name} name={name} placeholderClass={classNames('placeholder', placeholderClass)} placeholder={placeholder} cursorSpacing={cursorSpacing} maxlength={maxlength} autoFocus={autoFocus} value={value} disabled={disabled} selectionStart={selectionStart} selectionEnd={selectionEnd} customStyle={textareaStyle} onInput={this.onInput.bind(this)} onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} onConfirm={this.onConfirm.bind(this)} onLinechange={this.onLinechange.bind(this)} count autoHeight fixed={fixed} />}
              {!multiline && clear && value && <View className="at-input__icon" onTouchStart={this.clearValue.bind(this)}>
                    <RMIcon color="default" fontSize="default">
                      cancel
                    </RMIcon>
                  </View>}
              {!multiline && error && <View className="at-input__icon" onTouchStart={this.onErrorClick.bind(this)}>
                    <RMIcon color="error" fontSize="default">
                      error
                    </RMIcon>
                  </View>}
              {!multiline && endAdornment && <View className="at-input__end-adornment">
                    <RMTypography className="body2" color="inherit">
                      {endAdornment}
                    </RMTypography>
                  </View>}
              {!multiline && <View className="at-input__children">{this.props.children}</View>}
            </View>
            <View className={classNames({
            'at-input__desc': true,
            [helperTextClass]: !!helperTextClass
          })} style={helperTextStyle}>
              {helperText && <View className="at-input__desc_icon">
                  <RMIcon color="inherit" fontSize="default" block>
                    warning
                  </RMIcon>
                </View>}
              <RMTypography color="inherit" className="caption" block>
                {helperText || ''}
              </RMTypography>

              {multiline && count && <View className="auto">
                    <RMTypography color="inherit" className="caption" block>
                      {_count}
                    </RMTypography>
                  </View>}
            </View>
          </View>
        </View>
      </View>;
  }
}

RMTextField.defaultProps = {
  className: '',
  customStyle: '',
  value: '',
  name: '',
  placeholder: '',
  placeholderStyle: '',
  placeholderClass: '',
  title: '',
  cursorSpacing: 50,
  confirmType: '完成',
  cursor: 0,
  selectionStart: -1,
  selectionEnd: -1,
  adjustPosition: true,
  maxlength: 140,
  type: 'text',
  disabled: false,
  border: true,
  editable: true,
  error: false,
  clear: false,
  autoFocus: false,
  onChange: defaultFunc,
  onFocus: defaultFunc,
  onBlur: defaultFunc,
  onConfirm: defaultFunc,
  onErrorClick: defaultFunc,
  onClick: defaultFunc,
  onLinechange: defaultFunc,
  readOnlyStyle: 'disabled',
  startAdornment: null,
  endAdornment: null,
  required: false,
  helperText: '',
  helperTextStyle: {},
  helperTextClass: '',
  multiline: false,
  autoHeight: true,
  count: true,
  fixed: false,
  margin: 'normal'
};

RMTextField.propTypes = {
  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  customStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  name: PropTypes.string,
  placeholder: PropTypes.string,
  placeholderStyle: PropTypes.string,
  placeholderClass: PropTypes.string,
  title: PropTypes.string,
  confirmType: PropTypes.string,
  cursor: PropTypes.number,
  selectionStart: PropTypes.number,
  selectionEnd: PropTypes.number,
  adjustPosition: PropTypes.bool,
  cursorSpacing: PropTypes.number,
  maxlength: PropTypes.number,
  type: PropTypes.string,
  disabled: PropTypes.bool,
  border: PropTypes.bool,
  editable: PropTypes.bool,
  error: PropTypes.bool,
  clear: PropTypes.bool,
  backgroundColor: PropTypes.string,
  autoFocus: PropTypes.bool,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onConfirm: PropTypes.func,
  onErrorClick: PropTypes.func,
  onClick: PropTypes.func,
  onLinechange: PropTypes.func,
  readOnlyStyle: PropTypes.string,
  startAdornment: PropTypes.string,
  endAdornment: PropTypes.string,
  required: PropTypes.bool,
  helperText: PropTypes.string,
  helperTextStyle: PropTypes.object,
  helperTextClass: PropTypes.string,
  multiline: PropTypes.bool,
  autoHeight: PropTypes.bool,
  count: PropTypes.bool,
  fixed: PropTypes.bool,
  margin: PropTypes.oneOf(['none', 'dense', 'normal'])
};

export default RMTextField;