react-form-fy/lib/inputField.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

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 _reactUiSvg = require("react-ui-svg");

var svg = _interopRequireWildcard(_reactUiSvg);

var _utilsFy = require("utils-fy");

var _publicStyle = require("./publicStyle");

var _theme = require("./theme");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }

var propTypes = {
    inputName: _react.PropTypes.string.isRequired,
    showFormText: _react.PropTypes.bool,
    svgName: _react.PropTypes.string,
    formText: _react.PropTypes.string,
    hintText: _react.PropTypes.string,
    getValue: _react.PropTypes.func.isRequired,
    required: _react.PropTypes.bool,
    dataObj: _react.PropTypes.object.isRequired,
    textWidth: _react.PropTypes.string,
    valueWidth: _react.PropTypes.string,
    textIconWidth: _react.PropTypes.string,
    textIconHeight: _react.PropTypes.string,
    // regex:PropTypes.number,//正则
    regexText: _react.PropTypes.string,
    disabled: _react.PropTypes.bool
};

var InputField = function (_Component) {
    _inherits(InputField, _Component);

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

        var _this2 = _possibleConstructorReturn(this, (InputField.__proto__ || Object.getPrototypeOf(InputField)).call(this, props));

        _this2.onfocus = function (e) {
            _this2.setState({ focusState: true });
        };

        _this2.onblur = function (e) {
            _this2.setState({ focusState: false, initsState: 1 });
        };

        _this2.onchange = function (e) {
            _this2.props.getValue && _this2.props.getValue("input", _this2.props.inputName, e.target.value.trim());
        };

        _this2.state = {
            focusState: false,
            errorState: false,
            errorText: '该值不能为空！',
            initsState: 0,
            styles: {
                publicStyles: (0, _publicStyle.publicStyles)(_this2.props.themeObj),
                inputStyle: (0, _publicStyle.inputStyle)(_this2.props.themeObj)
            }
        };
        return _this2;
    }

    _createClass(InputField, [{
        key: "render",
        value: function render() {
            var props = _objectWithoutProperties(this.props, []);

            var Svg = svg[props.svgName];

            var required = props.required || false,
                regex = props.regex || false,
                initsState = this.state.initsState,
                value = props.dataObj[props.inputName] ? props.dataObj[props.inputName] : '';
            var errorState = false;
            if (required) {
                if (props.dataObj.required || initsState == 1) {
                    validate(value, this);
                } else {
                    errorState = false;
                }
            }
            function validate(value, _this) {
                if (!value) errorState = true;
                if (value && !regex || value && regex && regex.test(value)) errorState = false;
                if (value && regex && !regex.test(value)) {
                    errorState = true;
                    _this.state.errorText = props.regexText;
                }
            }

            if (!required && regex && initsState == 1) {
                if (regex.test(value)) {
                    errorState = false;
                } else {
                    errorState = true;
                    this.state.errorText = props.regexText;
                }
            }

            var _showHintText = value ? false : true;

            var styles = eval('(' + JSON.stringify(this.state.styles) + ')');

            var tipDef = JSON.stringify(styles.inputStyle.tipDef),
                tipDisabled = JSON.stringify(styles.inputStyle.tipDisabled),
                tipBack = JSON.stringify(styles.inputStyle.tipBack),
                tipMove = JSON.stringify(styles.inputStyle.tipMove),
                tipTwoBorder = JSON.stringify(styles.inputStyle.tipTwoBorder),
                tipTwoBack = _utilsFy.Obj.merge(eval('(' + tipBack + ')'), eval('(' + tipTwoBorder + ')'));
            var tipOne = {};
            props.disabled ? tipOne = _utilsFy.Obj.merge(eval('(' + tipDef + ')'), eval('(' + tipDisabled + ')')) : tipOne = eval('(' + tipDef + ')');
            var tipTwo = {};
            this.state.focusState ? tipTwo = _utilsFy.Obj.merge(eval('(' + tipDef + ')'), eval('(' + tipMove + ')')) : tipTwo = _utilsFy.Obj.merge(eval('(' + tipDef + ')'), tipTwoBack);

            styles.publicStyles.formText.width = props.textWidth || '7.5rem';
            styles.publicStyles.formVInput.width = props.valueWidth || '14.375rem';

            var publicStyles = styles.publicStyles,
                inputStyle = styles.inputStyle;

            return _react2.default.createElement(
                "div",
                { style: publicStyles.formBox },
                props.showFormText === false ? null : _react2.default.createElement(
                    "div",
                    { style: publicStyles.formText },
                    props.svgName ? _react2.default.createElement(Svg, { fill: _theme.svgFill,
                        width: props.textIconWidth || _theme.formTextIconSize / 16 + "rem",
                        height: props.textIconHeight || _theme.formTextIconSize / 16 + "rem",
                        style: publicStyles.formSvg }) : null,
                    _react2.default.createElement(
                        "span",
                        null,
                        props.formText || "i am input",
                        required ? _react2.default.createElement(
                            "label",
                            { style: publicStyles.formRequired },
                            "*"
                        ) : null
                    )
                ),
                _react2.default.createElement(
                    "div",
                    { style: publicStyles.formVInput },
                    _showHintText ? _react2.default.createElement(
                        "span",
                        { style: publicStyles.inputHintText },
                        props.hintText
                    ) : null,
                    _react2.default.createElement("input", { style: inputStyle.inputBox,
                        name: props.inputName,
                        disabled: props.disabled || false,
                        onFocus: this.onfocus,
                        onBlur: this.onblur,
                        onChange: this.onchange,
                        value: value,
                        title: value
                    }),
                    _react2.default.createElement(
                        "span",
                        null,
                        _react2.default.createElement("hr", { style: tipOne }),
                        _react2.default.createElement("hr", { style: tipTwo })
                    ),
                    required ? errorState ? _react2.default.createElement(
                        "span",
                        { className: "errorTipBox",
                            style: publicStyles.errorBox },
                        this.state.errorText
                    ) : null : null,
                    !required ? errorState ? _react2.default.createElement(
                        "span",
                        { className: "errorTipBox",
                            style: publicStyles.errorBox },
                        this.state.errorText
                    ) : null : null
                )
            );
        }
    }]);

    return InputField;
}(_react.Component);

InputField.propTypes = propTypes;

exports.default = InputField;
//# sourceMappingURL=inputField.js.map