lm-form/lib/inputValidHoc.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
var _jsxFileName = 'src/inputValidHoc.js';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lmCell = require('lm-cell');

var _events = require('./events');

var _events2 = _interopRequireDefault(_events);

require('./index.scss');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// 识别每个input实例的唯一id。
var id = 0;

var InputValidateHoc = function InputValidateHoc(Input) {
    var _class, _temp;

    return _temp = _class = function (_Component) {
        _inherits(InputValidate, _Component);

        function InputValidate(props) {
            _classCallCheck(this, InputValidate);

            var _this = _possibleConstructorReturn(this, (InputValidate.__proto__ || Object.getPrototypeOf(InputValidate)).call(this, props));

            _this.id = id++;

            _this.validateValue = function (value) {
                var _this$props = _this.props,
                    validate = _this$props.validate,
                    required = _this$props.required;

                return _this.props.inputValidate(_extends({ value: value }, validate, { required: required }));
            };

            _this.handleBlur = function (value) {
                var _this$props2 = _this.props,
                    onBlur = _this$props2.onBlur,
                    type = _this$props2.validate.type;

                var _this$validateValue = _this.validateValue(value),
                    isValid = _this$validateValue.isValid,
                    message = _this$validateValue.message;

                // 验证不通过


                if (!isValid && type !== "submitValidate") {
                    // 下划线变红  并展示错误提示
                    _this.setState({
                        hintShow: true,
                        err: true,
                        message: message
                    });
                }
                // 将验证信息发送出去--->Form接收
                _events2.default.emit('validateEvent', { id: _this.id }, { isValid: isValid, message: message, name: _this.props.name, value: value, type: type });
                // 触发回调
                onBlur(value, { isValid: isValid, message: message });
            };

            _this.handleFocus = function (value) {
                var _this$props3 = _this.props,
                    onFocus = _this$props3.onFocus,
                    type = _this$props3.validate.type;
                // 如果有错误提示时 干掉错误提示

                if (_this.state.hintShow && type !== "submitValidate") {
                    _this.setState({
                        hintShow: false,
                        err: false
                    });
                }
                // 触发回调
                onFocus(value);
            };

            _this.handleChange = function (value) {
                return _this.props.onChange(value);
            };

            _this.state = {
                hintShow: false,
                err: false,
                message: ''
            };
            _this.handleErrState = _this.handleErrState.bind(_this);
            return _this;
        }

        _createClass(InputValidate, [{
            key: 'componentDidMount',
            value: function componentDidMount() {
                this.props.validate.type === "submitValidate" && _events2.default.on('inputErrEvent', this.handleErrState);
            }
        }, {
            key: 'componentWillUnmount',
            value: function componentWillUnmount() {
                this.props.validate.type === "submitValidate" && _events2.default.removeListener('inputErrEvent', this.handleErrState);
            }
        }, {
            key: 'handleErrState',
            value: function handleErrState(param) {
                if (param.id === this.id) {
                    this.setState({
                        err: true
                    });
                }
            }

            // 验证值


            // 失焦处理 下划线变红 下面红字提示


            // focus时 干掉错误提示


            // 输入框变化

        }, {
            key: 'render',
            value: function render() {
                var _props = this.props,
                    hintClassName = _props.hintClassName,
                    inputValidate = _props.inputValidate,
                    onChange = _props.onChange,
                    onFocus = _props.onFocus,
                    onBlur = _props.onBlur,
                    validate = _props.validate,
                    required = _props.required,
                    err = _props.err,
                    onlySubmitValidate = _props.onlySubmitValidate,
                    label = _props.label,
                    others = _objectWithoutProperties(_props, ['hintClassName', 'inputValidate', 'onChange', 'onFocus', 'onBlur', 'validate', 'required', 'err', 'onlySubmitValidate', 'label']);

                var _state = this.state,
                    hintShow = _state.hintShow,
                    message = _state.message;

                if (message === 'required') message = validate.requireMsg || '该字段不能为空';
                return _react2.default.createElement(
                    'div',
                    _defineProperty({ className: 'lm-valid ' + (hintShow ? 'err' : ''), __source: {
                            fileName: _jsxFileName,
                            lineNumber: 113
                        },
                        __self: this
                    }, '__self', this),
                    _react2.default.createElement(
                        _lmCell.Cell,
                        _defineProperty({
                            __source: {
                                fileName: _jsxFileName,
                                lineNumber: 114
                            },
                            __self: this
                        }, '__self', this),
                        label ? _react2.default.createElement(
                            _lmCell.Label,
                            _defineProperty({
                                __source: {
                                    fileName: _jsxFileName,
                                    lineNumber: 115
                                },
                                __self: this
                            }, '__self', this),
                            label
                        ) : null,
                        _react2.default.createElement(
                            _lmCell.CellBody,
                            _defineProperty({
                                __source: {
                                    fileName: _jsxFileName,
                                    lineNumber: 116
                                },
                                __self: this
                            }, '__self', this),
                            _react2.default.createElement(Input, Object.assign({ err: this.state.err, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange }, others, _defineProperty({
                                __source: {
                                    fileName: _jsxFileName,
                                    lineNumber: 117
                                },
                                __self: this
                            }, '__self', this)))
                        )
                    ),
                    hintShow ? _react2.default.createElement(
                        'div',
                        _defineProperty({ className: 'lm-valid-hint', __source: {
                                fileName: _jsxFileName,
                                lineNumber: 120
                            },
                            __self: this
                        }, '__self', this),
                        message
                    ) : null
                );
            }
        }]);

        return InputValidate;
    }(_react.Component), _class.propTypes = {
        hintClassName: _propTypes2.default.string, // hint自定义类名
        value: _propTypes2.default.oneOfType([// 值，配合onChange使用
        _propTypes2.default.string, _propTypes2.default.number]),
        validate: _propTypes2.default.object, // 验证参数配置
        required: _propTypes2.default.bool, // 是否必填
        onChange: _propTypes2.default.func, // onchange事件回调
        onFocus: _propTypes2.default.func, // onfocus事件回调
        onBlur: _propTypes2.default.func, // onblur事件回调
        label: _propTypes2.default.string // label左侧文案
    }, _class.defaultProps = {
        validate: {},
        required: false,
        onChange: function onChange() {},
        onFocus: function onFocus() {},
        onBlur: function onBlur() {},

        label: ''
    }, _temp;
};

exports.default = InputValidateHoc;
module.exports = exports['default'];