react-form-fy/lib/lenovoDownField.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 _reactScrollFy = require("react-scroll-fy");

var _reactScrollFy2 = _interopRequireDefault(_reactScrollFy);

var _reactLoadingFy = require("react-loading-fy");

var _reactLoadingFy2 = _interopRequireDefault(_reactLoadingFy);

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,
    dataSource: _react.PropTypes.array.isRequired,
    textWidth: _react.PropTypes.string,
    valueWidth: _react.PropTypes.string,
    textIconWidth: _react.PropTypes.string,
    textIconHeight: _react.PropTypes.string,
    regexText: _react.PropTypes.string,
    disabled: _react.PropTypes.bool,
    onUpdateInput: _react.PropTypes.func,
    requestDataBack: _react.PropTypes.func,
    requestFlag: _react.PropTypes.bool,
    shouldUpdate: _react.PropTypes.bool
};

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

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

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

        _initialiseProps.call(_this2);

        _this2.state = {
            errorText: '该值不能为空!',
            focusState: false,
            initsState: 0,
            showLenovo: 0,
            listMove: -1,
            requestFlag: props.requestFlag,
            shouldUpdate: false,
            tipState: 0,
            styles: {
                publicStyles: (0, _publicStyle.publicStyles)(_this2.props.themeObj),
                inputStyle: (0, _publicStyle.inputStyle)(_this2.props.themeObj),
                LenovoDownStyle: (0, _publicStyle.LenovoDownStyle)(_this2.props.themeObj)
            }
        };
        return _this2;
    }

    _createClass(LenovoDownField, [{
        key: "componentWillReceiveProps",
        value: function componentWillReceiveProps(nextProps) {
            this.setState({ shouldUpdate: nextProps.shouldUpdate, requestFlag: nextProps.requestFlag });
        }
    }, {
        key: "render",
        value: function render() {
            var _this3 = this;

            var props = _objectWithoutProperties(this.props, []);

            var Svg = svg[props.svgName];

            var required = props.required || false,
                initsState = this.state.initsState,
                value = props.dataObj[props.inputName] ? typeof props.dataObj[props.inputName] == "string" ? props.dataObj[props.inputName] : props.dataObj[props.inputName].text : "";

            var errorState = false;
            required && props.dataObj.required ? props.dataObj[props.inputName] ? errorState = false : validate(value, this) : initsState == 1 ? validate(value, this) : errorState = false;
            function validate(value, _this) {
                if (!value) errorState = true;
                if (value) errorState = false;
            }

            var _showHintText = value ? false : true;

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

            var pullDownDiv = eval('(' + JSON.stringify(styles.LenovoDownStyle.pullDownDiv) + ')');
            pullDownDiv.height = "0";
            pullDownDiv.boxShadow = "0.08rem 0.08rem 0.3125rem 0 rgba(255, 255, 255, 0)";
            var showLenovoState = false;
            if (this.state.showLenovo == 1) {
                if (props.dataSource) {
                    if (props.dataSource.length) {
                        showLenovoState = true;
                        pullDownDiv.height = props.dataSource.length * 38 / 16 + "rem", //38行高
                        pullDownDiv.boxShadow = "0.08rem 0.08rem 0.3125rem 0 rgba(0, 0, 0, 0.19)";
                    }
                }
            }

            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,
                LenovoDownStyle = styles.LenovoDownStyle;

            var tipState = props.dataSource.length == "1" || !this.state.tipState ? 0 : 1;

            var uldom = showLenovoState ? _react2.default.createElement(
                "ul",
                { style: LenovoDownStyle.pullDownUl },
                props.dataSource.map(function (data, index) {
                    return _react2.default.createElement(
                        "li",
                        { style: _this3.state.listMove == index ? LenovoDownStyle.pullDownLiMove : LenovoDownStyle.pullDownLiDef,
                            onClick: _this3.setInput.bind(_this3, data, props.inputName),
                            onMouseMove: _this3.moveLi.bind(_this3, index),
                            key: index },
                        data.text
                    );
                })
            ) : null;

            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 lenovoDownField",
                        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 })
                    ),
                    initsState >= 1 ? props.dataSource && props.dataSource[0] ? tipState ? _react2.default.createElement(
                        "span",
                        { className: !props.reErSubmit ? "errorTipBox" : "", style: publicStyles.errorBox },
                        "\u8BF7\u9009\u62E9\u503C\uFF01"
                    ) : null : _react2.default.createElement(
                        "span",
                        { className: !props.reErSubmit ? "errorTipBox" : "", style: publicStyles.errorBox },
                        props.requestErrorText || '无效值，无该下拉选项！'
                    ) : null,
                    required && errorState ? _react2.default.createElement(
                        "span",
                        { className: "errorTipBox", style: publicStyles.errorBox },
                        this.state.errorText
                    ) : null,
                    _react2.default.createElement(
                        "div",
                        { style: pullDownDiv },
                        props.dataSource && props.dataSource.length <= 6 ? uldom : _react2.default.createElement(
                            _reactScrollFy2.default,
                            { shouldUpdate: this.state.shouldUpdate, initScroll: this.initScroll,
                                requestFlag: this.state.requestFlag, requestDataBack: this.requestDataBack },
                            uldom
                        ),
                        props.requestPending ? _react2.default.createElement(
                            "div",
                            null,
                            _react2.default.createElement(_reactLoadingFy2.default, null)
                        ) : null
                    )
                ),
                showLenovoState ? _react2.default.createElement("div", { onClick: this.closeDown, style: LenovoDownStyle.dialogBackground }) : null
            );
        }
    }]);

    return LenovoDownField;
}(_react.Component);

var _initialiseProps = function _initialiseProps() {
    var _this4 = this;

    this.onfocus = function (e) {
        _this4.setState({ focusState: true, shouldUpdate: true, showLenovo: 1 });
    };

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

    this.onchange = function (e) {
        _this4.setState({
            initsState: 2,
            shouldUpdate: true,
            value: e.target.value,
            showHintText: e.target.value ? false : true,
            tipState: 1
        });
        _this4.props.onUpdateInput && _this4.props.onUpdateInput(_this4.props.inputName, e.target.value.trim());
        _this4.props.getValue && _this4.props.getValue('LenovoDownField', _this4.props.inputName, e.target.value, '', {
            text: "",
            value: ""
        }, '');
    };

    this.setInput = function (value, inputName) {
        _this4.setState({ showLenovo: 0, value: value.text, showHintText: false, tipState: 0 });
        _this4.props.getValue && _this4.props.getValue('LenovoDownField', _this4.props.inputName, value.text, value.value, value, 'setInput');
    };

    this.closeDown = function () {
        var props = _objectWithoutProperties(_this4.props, []);

        var value = props.dataSource.length == "1" ? props.dataSource[0] : "";
        if (value) {
            _this4.props.getValue && _this4.props.getValue('LenovoDownField', props.inputName, value.text, value.value, value, 'setInput');
        }
        _this4.setState({
            showLenovo: 0
        });
    };

    this.moveLi = function (index) {
        _this4.setState({ listMove: index });
    };

    this.initScroll = function () {
        _this4.setState({ shouldUpdate: false });
    };

    this.requestDataBack = function () {
        _this4.props.requestDataBack(_this4.props.inputName);
    };
};

LenovoDownField.propTypes = propTypes;

exports.default = LenovoDownField;
//# sourceMappingURL=lenovoDownField.js.map