react-form-ui-y/lib/form/selectCheckbox/subpage.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.verifyFn = exports.formTypeDom = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactSvgY = require('react-svg-y');

var _reactSvgY2 = _interopRequireDefault(_reactSvgY);

var _reactDialogY = require('react-dialog-y');

var _reactDialogY2 = _interopRequireDefault(_reactDialogY);

var _reactScrollY = require('react-scroll-y');

var _reactScrollY2 = _interopRequireDefault(_reactScrollY);

var _publicField = require('../publicField');

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

//select 获取值
var getValue = function getValue(_this) {
    var formDataValue = _this.props.formData[_this.props.dataType || "default"];
    var inputData = formDataValue && formDataValue[_this.props.inputName];
    return inputData && inputData.text ? inputData.text.join() : "";
};

//select 的校验
var verifyFn = function verifyFn(_this) {
    var required = _this.props.required || false,
        initFocusState = _this.state.initFocusState,
        value = getValue(_this);

    var errorText = _this.props.errorText || "该值不能为空!";
    var errorState = false;

    var subVerifyRes = _this.props.subVerifyRes && _this.props.subVerifyRes[_this.props.dataType || "default"];

    //如果是必填
    if (required && (subVerifyRes == "fail" || initFocusState == 1)) {
        if (value.trim()) {
            errorState = false;
        } else {
            errorState = true;
        }
    }

    return { errorState: errorState, errorText: errorText };
};

/**
 * 下拉内容展示区
 * @returns {XML}
 */
var selectCont = function selectCont(_this, styles, inputData, width, theme) {
    return [inputData.obj.length ? _react2.default.createElement(
        'div',
        { key: 1, style: styles.chooseSelectBox },
        _react2.default.createElement(
            _reactScrollY2.default,
            { shouldUpdate: _this.state.shouldUpdateChoose,
                initScroll: _this.initScrollChoose,
                botFixed: false,
                width: width,
                maxHeight: '8.2rem',
                bottomScroll: 'N'
            },
            _react2.default.createElement(
                'div',
                { style: styles.chooseSelectCont },
                (inputData.obj || []).map(function (item, index) {
                    return _react2.default.createElement(
                        'div',
                        { key: index, style: styles.chooseSelectItem },
                        _react2.default.createElement(
                            'label',
                            { style: styles.chooseSelectItemText },
                            item.text
                        ),
                        _react2.default.createElement(
                            'div',
                            { style: styles.delSelectItem, onClick: _this.handleSelect.bind(undefined, item) },
                            _react2.default.createElement(_reactSvgY2.default, { type: 'Clear', width: '1rem', height: '1rem', fill: 'red' })
                        )
                    );
                })
            )
        )
    ) : null, _react2.default.createElement(
        'div',
        { key: 2, style: styles.chooseSelectBox },
        _react2.default.createElement(
            _reactScrollY2.default,
            { shouldUpdate: _this.state.shouldUpdateList,
                initScroll: _this.initScrollList,
                botFixed: false,
                width: width,
                maxHeight: '20rem',
                bottomScroll: 'N'
            },
            _this.props.dataSource.map(function (item, index) {
                return _react2.default.createElement(
                    'div',
                    { key: index,
                        style: _this.state.moveSelect == item.text ? styles.selectItemMove : (inputData.value || []).indexOf(item.value) >= 0 ? styles.selectItemCheck : styles.selectItem,
                        onMouseMove: _this.moveSelect.bind(undefined, item),
                        onMouseLeave: _this.leaveSelect.bind(undefined, item),
                        onClick: _this.handleSelect.bind(undefined, item) },
                    (inputData.value || []).indexOf(item.value) >= 0 ? _react2.default.createElement(_reactSvgY2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem',
                        fill: theme.selectCheckbox.svgFill }) : _react2.default.createElement(_reactSvgY2.default, { type: 'CheckboxUp', width: '1rem', height: '1rem',
                        fill: theme.selectCheckbox.svgFill }),
                    _react2.default.createElement(
                        'div',
                        { style: styles.selectItemText },
                        item.text
                    )
                );
            })
        )
    )];
};

/**
 * selectType 为 select 的类型
 */
var defaultSelect = function defaultSelect(_this, styles, value, theme) {
    var formDataValue = _this.props.formData[_this.props.dataType || "default"];
    var inputData = formDataValue && formDataValue[_this.props.inputName];
    var width = parseFloat(styles.formBox.width) - 0.2 + "rem";
    return [_react2.default.createElement('div', { key: '1', onClick: _this.closeSelect, style: styles.selectdialogMask }), _react2.default.createElement(
        'div',
        { key: '2', style: styles[(0, _publicField.setLocationClass)(_this)] },
        selectCont(_this, styles, inputData, _this.props.selectWidth || width, theme)
    )];
};

/**
 * selectType 为 dialog 的类型
 */
var defaultDialog = function defaultDialog(_this, styles, value, theme) {
    var width = parseFloat(styles.formBox.width);
    var widthScroll = (width < 30 ? 30 : width) + "rem";
    var widthDialog = (width < 30 ? 30 : width) + 4 + "rem";

    var formDataValue = _this.props.formData[_this.props.dataType || "default"];
    var inputData = formDataValue && formDataValue[_this.props.inputName];

    var dialogSty = {
        maxWidth: widthDialog,
        width: widthDialog,
        maxHeight: "35rem"
    };
    return [_react2.default.createElement(
        _reactDialogY2.default,
        { key: '1',
            open: _this.state.showSelect,
            onRequestClose: _this.closeSelect,
            contentStyle: dialogSty,
            bodyStyle: dialogSty },
        _react2.default.createElement(
            'div',
            null,
            _react2.default.createElement(
                'div',
                { style: styles.dialogTit },
                '\u8BF7\u9009\u62E9',
                _this.props.formText
            ),
            selectCont(_this, styles, inputData, widthScroll, theme)
        )
    )];
};

/**
 * input value dom
 */
var formValueDom = function formValueDom(_this, styles, value, theme) {
    return [!value ? _react2.default.createElement(
        'span',
        { key: 1, style: styles.inputHintText },
        _this.props.hintText
    ) : null, _this.props.disabled ? _react2.default.createElement(
        'div',
        { key: 2, style: styles.selectBoxDis, title: value },
        value
    ) : _react2.default.createElement(
        'div',
        { key: 3,
            style: _this.state.focusState ? styles.selectBoxFocus : styles.selectBox,
            title: value,
            onClick: _this.showSelectFn
        },
        _react2.default.createElement(
            'div',
            { style: styles.inputText },
            value,
            ' '
        ),
        _react2.default.createElement(
            'div',
            { style: styles.inputSvg },
            _react2.default.createElement(_reactSvgY2.default, { type: 'Bottom', width: '1rem', height: '1rem', fill: theme.publicForm.inputSvgFill })
        )
    )];
};

/**
 * formType 是 default 类型
 * @param verifyFlag 校验返回值
 */
var defaultDom = function defaultDom(_this, styles, verifyFlag, _theme) {
    if (!_this.props.inputName) {
        return _react2.default.createElement(
            'div',
            null,
            'inputName\u4E3A\u5FC5\u8981\u53C2\u6570'
        );
    }
    var value = getValue(_this);
    var selectType = _this.props.selectType || "select";
    return _react2.default.createElement(
        'div',
        { ref: 'formBox', style: styles.formBox },
        (0, _publicField.formContDefault)(_this, styles, verifyFlag, value, formValueDom, _theme),
        (0, _publicField.defaultError)(verifyFlag, styles),
        _this.state.showSelect && _this.props.dataSource && _this.props.dataSource.length > 0 && selectType == "select" && defaultSelect(_this, styles, value, _theme),
        _this.state.showSelect && _this.props.dataSource && _this.props.dataSource.length > 0 && selectType == "dialog" && defaultDialog(_this, styles, value, _theme)
    );
};

/**
 * formType 是 box 类型
 * @param verifyFlag 校验返回值
 */
var boxDom = function boxDom(_this, styles, verifyFlag, _theme) {
    if (!_this.props.inputName) {
        return _react2.default.createElement(
            'div',
            null,
            'inputName\u4E3A\u5FC5\u8981\u53C2\u6570'
        );
    }
    var value = getValue(_this);
    var selectType = _this.props.selectType || "select";
    return _react2.default.createElement(
        'div',
        { ref: 'formBox', style: styles.formBox },
        (0, _publicField.formContBox)(_this, styles, verifyFlag, value, formValueDom, _theme),
        (0, _publicField.boxError)(verifyFlag, styles),
        _this.state.showSelect && _this.props.dataSource && _this.props.dataSource.length > 0 && selectType == "select" && defaultSelect(_this, styles, value, _theme),
        _this.state.showSelect && _this.props.dataSource && _this.props.dataSource.length > 0 && selectType == "dialog" && defaultDialog(_this, styles, value, _theme)
    );
};

var formTypeDom = {
    defaultDom: defaultDom,
    boxDom: boxDom
};
exports.formTypeDom = formTypeDom;
exports.verifyFn = verifyFn;
//# sourceMappingURL=subpage.js.map