mini-check/dist/h5/components/Input/index.js

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { AtToast } from 'taro-ui';
import { View, Image, Input } from '@tarojs/components';
import classnames from 'classnames';
import { phoneReg, linkReg } from '../../util/constants';
import { CustomLabel, ItemExtra, UnEditeableView } from '../index';
import './index.scss';
import iconClose from '../../assets/clear.png';
import iconError from '../../assets/error.png';

class CustomInput extends Taro.Component {
  render() {
    const { itemExtra, editable, name, placeholder, term, value, onChange, help, required, type = 'text', defaultValue, onView, listItemChildren } = this.props;

    const [errorStatus, setErrorStatus] = Taro.useState(false);
    const [isOpened, setIsOpened] = Taro.useState(false);
    const inputOnChange = e => {
      const { value } = e.detail;
      if (type === 'phone') {
        if (!phoneReg.test(value)) {
          setErrorStatus(true);
        } else {
          setErrorStatus(false);
        }
      }
      if (type === 'link') {
        if (!linkReg.test(value)) {
          setErrorStatus(true);
        } else {
          setErrorStatus(false);
        }
      }
      onChange(value);
    };
    const onErrorClick = () => {
      triggleToast();
    };
    const triggleToast = () => {
      setIsOpened(!isOpened);
    };
    const handleClear = () => {
      onChange('');
    };
    const inputType = type === 'number' ? 'number' : 'text';
    const disabled = editable === undefined || editable === true ? false : true;
    const showValue = value === '' || value ? value : defaultValue;
    if (editable === false || editable === undefined && onView) {
      return <UnEditeableView term={term} help={help} value={showValue} listItemChildren={listItemChildren} />;
    }
    const containerCLs = classnames(['input-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    const inputCls = classnames(['comp-input-item__input', showValue ? '' : 'opacity']);
    return <View className={containerCLs}>
      <View className="comp-input-item">
        <CustomLabel term={term} help={help} required={required} />
        <Input className={inputCls} name={name} type={inputType} placeholder={placeholder}
        // placeholderClass='comp-input-item__input--placeholder'
        value={showValue} onInput={inputOnChange} disabled={disabled} maxLength={type === 'phone' ? 11 : -1} />
        {errorStatus ? <View className="comp-input-item__clear" onClick={onErrorClick}>
            <Image className="comp-input-item__clear-img" src={iconError} />
          </View> : !!showValue ? <View className="comp-input-item__clear" onClick={handleClear}>
              <Image className="comp-input-item__clear-img" src={iconClose} />
            </View> : null}

      </View>
      <ItemExtra text={itemExtra} />
      <AtToast isOpened={isOpened} text={`${term}格式错误`} onClose={triggleToast}></AtToast>
    </View>;
  }

}

export default CustomInput;