lm-form/src/input.js

* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`1.0.2`**

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Autoclear from './autoclear';

import './index.scss';

// wrapper for input
class Input extends Component {

    static propTypes = {
        className: PropTypes.string,    // 自定义类名
        placeholder: PropTypes.string,  // 提示信息
        defaultValue: PropTypes.string, // 默认值，用于非控制input
        value: PropTypes.oneOfType([    // 值，配合onChange使用
            PropTypes.string,
            PropTypes.number
        ]),
        type: PropTypes.string,         // input类型
        err: PropTypes.bool,            // 判断输入是否符合错误，错误：true，正确：false
        onChange: PropTypes.func,       // onchange事件回调
        onFocus: PropTypes.func,        // onfocus事件回调
        onBlur: PropTypes.func,         // onblur事件回调
        refName: PropTypes.string,      // ref属性值
        useClear: PropTypes.bool        // 是否使用clear组件
    };

    static defaultProps = {
        placeholder: '请输入',
        defaultValue: '',
        type: 'text',
        err: false,
        onChange() { },
        onFocus() { },
        onBlur() { },
        refName: 'inputRef',
        useClear: true
    };

    constructor(props) {
        super(props);
        this.state = {
            value: 'value' in props ? props.value : props.defaultValue,
            xshow: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleFocus = this.handleFocus.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
        this.handleClear = this.handleClear.bind(this);

        this.timer = null;
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: nextProps.value
            });
        } else if ('defaultValue' in nextProps) {
            this.setState({
                value: nextProps.defaultValue
            });
        }
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    handleChange(e) {
        e.persist(); // 在React.js中执行去抖动
        let { value } = e.target;
        // type === number, maxlength not work bugfix
        if (this.props.type === 'number') {
            value = this.maxLengthCheck(value);
        }
        this.setState({ value }, () => {
            this.controlXshow(value); // 自动显示clear btn
            this.props.onChange(value);
        });
    }

    maxLengthCheck(value) {
        if (!value) return '';
        value = `${value}`.length > this.props.maxLength ? `${value}`.slice(0, this.props.maxLength) : value;
        value = parseFloat(value, 10);
        try {
            return Number.isNaN(value) ? '' : value;
        } catch (error) {
            return /^NaN$/.test(value) ? '' : value;
        }
    }

    handleFocus(e) {
        e.persist(); // 在React.js中执行去抖动
        // readonly直接返回
        if (this.props.readOnly || this.props.readonly) return;
        const { value } = this.state;
        // 如果有值则显示x
        this.controlXshow(value); // 自动显示clear btn
        this.props.onFocus(value);
    }

    handleBlur(e) {
        e.persist(); // 在React.js中执行去抖动
        // 通过异步操作保证先执行clearbtn中click事件，后执行input的onblur事件，保证clearbtn的存在可以清楚value
        const { xshow } = this.state;

        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            // 异步执行 需要先判断目标是否被删除
            if (!e.target) return;
            // 自动隐藏clear btn
            if (xshow) {
                this.controlXshow('');
            }
        }, 20);
        
        this.props.onBlur(this.state.value); 
    }
    
    // 清空input
    handleClear() {
        this.setState({
            value: ''
        }, () => {
            this.props.onChange('');
        });
    }

    // 控制x号显示隐藏
    controlXshow(value) {
        this.setState({
            xshow: !!`${value}`
        })
    }

    render() {
        const {
            className,
            children,
            type,
            defaultValue,
            value,
            placeholder,
            onChange,
            onFocus,
            onBlur,
            err,
            refName,
            useClear,
            ...others
        } = this.props;
        const { xshow } = this.state;
        const clsPrefix = 'lm-input';
        const cls = classNames(clsPrefix, {
            [`${clsPrefix}-err`]: err
        }, className);

        return (
            <div className={cls}>
                <input
                    ref={el => this[refName] = el}
                    type={type}
                    value={(this.state.value || this.state.value === 0) ? this.state.value : ''}
                    placeholder={placeholder}
                    onChange={this.handleChange}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    {...others} />
                {
                    useClear
                        ? <Autoclear show={xshow} err={err} onClear={this.handleClear} />
                        : null
                }
                {children}
            </div>
        );
    }
};

export default Input;