lm-form
Version:
* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`1.0.2`**
259 lines (216 loc) • 11.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _jsxFileName = 'src/inputvalidateHoc.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 _hint = require('./hint');
var _hint2 = _interopRequireDefault(_hint);
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.state = {
hintShow: false,
err: false,
message: ''
};
_this.validateChange = _this.validateChange.bind(_this);
_this.validateFocus = _this.validateFocus.bind(_this);
_this.validateBlur = _this.validateBlur.bind(_this);
_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);
clearTimeout(this._timeout);
}
}, {
key: 'handleErrState',
value: function handleErrState(param) {
if (param.id === this.id) {
this.setState({
err: true
});
}
}
}, {
key: 'validateChange',
value: function validateChange(value) {
// 触发回调
this.props.onChange(value);
// 恢复状态时机
if (this.state.err) {
// input验证
var _validateValue = this.validateValue(value),
isValid = _validateValue.isValid;
if (isValid) {
this.setState({
err: !isValid
});
}
}
}
}, {
key: 'validateFocus',
value: function validateFocus(value) {
// 当校验不同过，显示错误信息
if (this.state.err && this.props.validate.type !== "submitValidate") {
this.showHint();
}
// 触发回调
this.props.onFocus(value);
}
}, {
key: 'validateBlur',
value: function validateBlur(value) {
var type = this.props.validate.type;
// 如果有hint，blur时去掉
if (this.state.hintShow && type !== "submitValidate") {
this.destroyHint();
}
// 失去焦点开始验证
var _validateValue2 = this.validateValue(value),
isValid = _validateValue2.isValid,
message = _validateValue2.message;
// 验证不通过
if (!isValid && type !== "submitValidate") {
// 文字爆红
this.setState({
err: true,
message: message
});
}
// 将验证信息发送出去--->Form接收
_events2.default.emit('validateEvent', { id: this.id }, { isValid: isValid, message: message, name: this.props.name, value: value, type: type });
// 触发回调
this.props.onBlur(value, { isValid: isValid, message: message });
}
// 验证值
}, {
key: 'validateValue',
value: function validateValue(value) {
var _props = this.props,
validate = _props.validate,
required = _props.required;
return this.props.inputValidate(_extends({ value: value }, validate, { required: required }));
}
// 显示错误信息
}, {
key: 'showHint',
value: function showHint() {
var _this2 = this;
this.setState({
hintShow: true
}, function () {
_this2._timeout = setTimeout(function () {
_this2.destroyHint();
}, 3000);
});
}
// 销毁错误信息
}, {
key: 'destroyHint',
value: function destroyHint() {
if (this._timeout) this._timeout = clearTimeout(this._timeout);
this.setState({
hintShow: false
});
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
hintClassName = _props2.hintClassName,
inputValidate = _props2.inputValidate,
onChange = _props2.onChange,
onFocus = _props2.onFocus,
onBlur = _props2.onBlur,
validate = _props2.validate,
required = _props2.required,
err = _props2.err,
onlySubmitValidate = _props2.onlySubmitValidate,
others = _objectWithoutProperties(_props2, ['hintClassName', 'inputValidate', 'onChange', 'onFocus', 'onBlur', 'validate', 'required', 'err', 'onlySubmitValidate']);
var _state = this.state,
hintShow = _state.hintShow,
message = _state.message;
return _react2.default.createElement(
'div',
_defineProperty({ className: 'lm-validate', __source: {
fileName: _jsxFileName,
lineNumber: 143
},
__self: this
}, '__self', this),
_react2.default.createElement(
Input,
Object.assign({ err: this.state.err, onChange: this.validateChange, onFocus: this.validateFocus, onBlur: this.validateBlur }, others, _defineProperty({
__source: {
fileName: _jsxFileName,
lineNumber: 144
},
__self: this
}, '__self', this)),
hintShow ? _react2.default.createElement('i', _defineProperty({ className: 'lm-validate-arrow', __source: {
fileName: _jsxFileName,
lineNumber: 145
},
__self: this
}, '__self', this)) : null
),
_react2.default.createElement(_hint2.default, _defineProperty({ className: hintClassName, show: hintShow, message: message, requireMsg: validate.requireMsg, __source: {
fileName: _jsxFileName,
lineNumber: 147
},
__self: this
}, '__self', this))
);
}
}]);
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事件回调
}, _class.defaultProps = {
validate: {},
required: false,
onChange: function onChange() {},
onFocus: function onFocus() {},
onBlur: function onBlur() {}
}, _temp;
};
exports.default = InputValidateHoc;
module.exports = exports['default'];