react-form-fy/lib/selectField.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 _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
};

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

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

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

        _this2.handleChange = function () {
            if (_this2.props.disabled) {
                return;
            }
            _this2.setState({
                focusState: true,
                shouldUpdate: true,
                initsState: 1,
                showLenovo: 1
            });
        };

        _this2.setInput = function (value) {
            _this2.setState({ showLenovo: 0, focusState: false });
            _this2.props.getValue && _this2.props.getValue("selectField", _this2.props.inputName, value.text, value.value, value);
        };

        _this2.closeDown = function () {
            _this2.setState({ showLenovo: 0, focusState: false });
        };

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

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

        _this2.state = {
            errorText: '该值不能为空！',
            focusState: false,
            initsState: 0,
            showLenovo: 0,
            listMove: -1,
            requestFlag: false,
            shouldUpdate: false,
            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(SelectField, [{
        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 ? validate(value, this) : initsState == 1 ? validate(value, this) : errorState = false;
            function validate(value, _this) {
                if (props.dataObj[props.inputName]) {
                    errorState = false;return;
                }
                if (!value) {
                    errorState = true;return;
                }
                if (value) {
                    errorState = false;return;
                }
            }

            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) {
                    showLenovoState = true;
                    if (props.dataSource.length) {
                        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 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),
                            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 selectField",
                        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,
                        onClick: this.handleChange,
                        readOnly: "readOnly",
                        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,
                    _react2.default.createElement(
                        "div",
                        { style: pullDownDiv },
                        props.dataSource.length <= 6 ? uldom : _react2.default.createElement(
                            _reactScrollFy2.default,
                            { shouldUpdate: this.state.shouldUpdate, initScroll: this.initScroll },
                            uldom
                        )
                    )
                ),
                showLenovoState ? _react2.default.createElement("div", { onClick: this.closeDown, style: LenovoDownStyle.dialogBackground }) : null
            );
        }
    }]);

    return SelectField;
}(_react.Component);

SelectField.propTypes = propTypes;

exports.default = SelectField;
//# sourceMappingURL=selectField.js.map