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

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactUtilsY = require('react-utils-y');

var _reactButtonY = require('react-button-y');

var _reactButtonY2 = _interopRequireDefault(_reactButtonY);

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

var _reactDialogY2 = _interopRequireDefault(_reactDialogY);

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

var _reactSvgY2 = _interopRequireDefault(_reactSvgY);

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

var _reactScrollY2 = _interopRequireDefault(_reactScrollY);

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

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

var date = void 0,
    year = void 0,
    month = void 0,
    day = void 0,
    monthFirstWeek = void 0,
    monthDays = void 0,
    monthMaxDay = void 0;

var formatTen = function formatTen(num) {
    return num > 9 ? num + "" : "0" + num;
};

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 : "";
};

//input的校验
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 };
};

//日期弹出头部  年份  月份
var yearItem = function yearItem(_this, styles, year) {
    var yearMin = new Date().getFullYear() - 100,
        yearArr = [];
    for (var i = 0; i < 150; i++) {
        yearArr.push(_react2.default.createElement(
            'li',
            { key: i + 'year',
                style: _this.state.chooseYear == yearMin + i ? styles.dateYearActive : styles.dateYearRow,
                onClick: _this.handleYear.bind(_this, yearMin + i, "year"),
                onMouseMove: _this.moveYear.bind(_this, yearMin + i, "year")
            },
            yearMin + i
        ));
    }
    return yearArr;
};
var monthItem = function monthItem(_this, styles) {
    var monthArr = [];
    for (var i = 1; i <= 12; i++) {
        monthArr.push(_react2.default.createElement(
            'li',
            { key: i + 'year',
                style: _this.state.chooseMonth == i ? styles.dateMonthActive : styles.dateMonthRow,
                onClick: _this.handleYear.bind(_this, i, "month"),
                onMouseMove: _this.moveYear.bind(_this, i, "month")
            },
            i,
            ' \u6708'
        ));
    }
    return monthArr;
};
var dateHead = function dateHead(_this, styles, year, month, day, _theme) {
    return _react2.default.createElement(
        'div',
        { style: styles.dateHead },
        _react2.default.createElement(
            'div',
            { style: styles.dateYearBtn, onClick: _this.handleHead.bind(_this, "year") },
            _react2.default.createElement(
                'label',
                null,
                year,
                '\u5E74'
            ),
            _react2.default.createElement(_reactSvgY2.default, { type: 'Bottom', width: '1rem', height: '1rem', fill: _theme.date.selectSvg || "#dfdfdf" })
        ),
        _react2.default.createElement(
            'div',
            { style: styles.dateMonthBtn, onClick: _this.handleHead.bind(_this, "month") },
            _react2.default.createElement(
                'label',
                null,
                month,
                '\u6708'
            ),
            _react2.default.createElement(_reactSvgY2.default, { type: 'Bottom', width: '1rem', height: '1rem', fill: _theme.date.selectSvg || "#dfdfdf" })
        ),
        _react2.default.createElement(
            'ul',
            { style: _this.state.showYear ? styles.dateYearUlActive : styles.dateYearUl },
            _react2.default.createElement(
                _reactScrollY2.default,
                { shouldUpdate: _this.state.shouldUpdate,
                    initScroll: _this.initScroll,
                    width: '6.5rem'
                },
                yearItem(_this, styles, year)
            )
        ),
        _react2.default.createElement(
            'ul',
            { style: _this.state.showMonth ? styles.dateMonthUlActive : styles.dateMonthUl },
            _react2.default.createElement(
                _reactScrollY2.default,
                { shouldUpdate: _this.state.shouldUpdate,
                    initScroll: _this.initScroll,
                    width: '5rem'
                },
                monthItem(_this, styles)
            )
        ),
        _this.state.showMonth || _this.state.showYear ? _react2.default.createElement('div', { style: styles.backbg, onClick: _this.colseSelest }) : null
    );
};

//星期    和  上下月份切换
var dateTitle = function dateTitle(renderType) {
    return renderType == "ch" ? ['一', '二', '三', '四', '五', '六', '日'] : ['日', '一', '二', '三', '四', '五', '六'];
};
var dateWeek = function dateWeek(_this, styles, year, month, day, theme) {
    return _react2.default.createElement(
        'div',
        { style: styles.dateDayBox },
        _react2.default.createElement(
            'div',
            { style: styles.dateSwitchMonth },
            _react2.default.createElement(
                'span',
                { onClick: _this.lastMonth.bind(_this, year, month), style: styles.dateSvgClick },
                _react2.default.createElement(_reactSvgY2.default, { type: 'Left', width: '1.56rem', height: '1.56rem', fill: theme.dateWeek.contSvg })
            ),
            _react2.default.createElement(
                'div',
                { style: styles.handleDayText },
                _this.state.chooseWeekVal
            ),
            _react2.default.createElement(
                'span',
                { onClick: _this.nextMonth.bind(_this, year, month), style: styles.dateSvgClick },
                _react2.default.createElement(_reactSvgY2.default, { type: 'Right', width: '1.56rem', height: '1.56rem', fill: theme.dateWeek.contSvg })
            )
        ),
        _react2.default.createElement(
            'div',
            { style: styles.dateWeek },
            dateTitle(_this.props.renderType).map(function (value, index) {
                return _react2.default.createElement(
                    'span',
                    { style: styles.dateWeekDay, key: index },
                    value
                );
            }),
            _react2.default.createElement(
                'span',
                { style: styles.dateWeekDay },
                ' '
            )
        )
    );
};
//遍历天数  处理 样式
var dateDay = function dateDay(_this, listDomDays, styles, scheduleData, theme) {
    var getDayStyle = function getDayStyle(_this, value) {
        var flag = "default";
        var activeDateStr = value.year + '/' + formatTen(value.month) + '/' + formatTen(value.day),
            //当前日期
        activeDateTimes = new Date(activeDateStr).getTime(),
            //当前日期毫秒数
        minDate = _this.props.minDate,
            //最小日期
        maxDate = _this.props.maxDate,
            //最大日期
        minDateTimes = void 0,
            //最小日期毫秒数
        maxDateTimes = void 0; //最大日期毫秒数

        if (minDate) {
            //当最小日期存在的时候  设置最小日期毫秒数
            minDateTimes = new Date(_this.props.minDate.replace(/-/g, "/")).getTime();
        }

        if (maxDate) {
            //当最大日期存在的时候 设置最大日期毫秒数
            maxDateTimes = new Date(_this.props.maxDate.replace(/-/g, "/")).getTime();
        }

        var scheduleData = _this.props.scheduleData;
        var schedule = _this.props.schedule || "0";
        var style = {};

        //up上月 now今月 next下月
        if (value.flag == "now") {
            style = styles.dayDefault;
            flag = "default";
        } else {
            style = styles.dayDisabled;
            flag = "disabled";
        }
        //移动
        if (activeDateStr == _this.state.dayMoveOn) {
            style = styles.dayMoveOn;
            //flag = "move";
        }
        //今天
        if (activeDateStr == _reactUtilsY._Date.format(new Date(), "yyyy-MM-dd").replace(/-/g, "/")) {
            style = styles.dayToday;
            flag = "today";
        }
        //选中
        if (activeDateStr == _this.state.dayActive) {
            style = styles.dayActive;
            flag = "active";
        }
        //是否需要排班，
        // 0不需要排班，所有日期可选，
        // 1需要排班，仅排班日可选，
        // 2需要排版，仅非排班日可选
        if (schedule == "1") {
            if (!scheduleData.in_array(value.year + "-" + formatTen(value.month) + "-" + formatTen(value.day))) {
                style = styles.dayDisabled;
                flag = "disabled";
            }
        }
        if (schedule == "2") {
            if (scheduleData.in_array(value.year + "-" + formatTen(value.month) + "-" + formatTen(value.day))) {
                style = styles.dayDisabled;
                flag = "disabled";
            }
        }
        //min  和  max 外的disabled日期
        if (minDateTimes > activeDateTimes || activeDateTimes > maxDateTimes) {
            style = styles.dayDisabled;
            flag = "disabled";
        }
        return { style: style, flag: flag };
    };
    return _react2.default.createElement(
        'div',
        { style: styles.dateCont },
        listDomDays.map(function (rows, index) {

            var fristDay = rows[0].year + "-" + formatTen(rows[0].month) + "-" + formatTen(rows[0].day);

            var bgFlag = rows.some(function (item) {
                var day = rows[0].year + "-" + formatTen(rows[0].month) + "-" + formatTen(rows[0].day);
                return day == _this.state.chooseWeek;
            });

            var checkFlag = rows.every(function (item) {
                var day = getDayStyle(_this, item);
                return day.flag == "disabled";
            });

            return [_react2.default.createElement(
                'div',
                { key: index + "d", style: bgFlag ? styles.rosBoxCheck : styles.rosBox,
                    onClick: !checkFlag ? _this.chooseWeek.bind(_this, rows) : null },
                _react2.default.createElement(
                    'ul',
                    { key: index + "rows", style: styles.dateRow },
                    rows.map(function (value, index) {
                        var day = getDayStyle(_this, value);
                        return _react2.default.createElement(
                            'li',
                            { key: index + "cols",
                                style: styles.dayBox,
                                onMouseEnter: _this.handleDayMoveEnter.bind(_this, value),
                                onClick: _this.handleDayActiveFn.bind(_this, value, day.flag)
                            },
                            value ? _react2.default.createElement(
                                'label',
                                { style: day.style },
                                ' ',
                                value.day,
                                ' '
                            ) : _react2.default.createElement(
                                'label',
                                null,
                                ' '
                            )
                        );
                    })
                ),
                checkFlag ? _react2.default.createElement('div', { style: styles.rosBtnBox }) : _react2.default.createElement(
                    'div',
                    { style: styles.rosBtnBox },
                    _react2.default.createElement(_reactSvgY2.default, { type: 'Correct', width: '1.56rem', height: '1.56rem',
                        fill: fristDay == _this.state.chooseWeek ? theme.dateWeek.chooseSvg : "#ccc" })
                )
            )];
        })
    );
};

var defaultSelect = function defaultSelect(_this, styles, _theme) {
    return [_react2.default.createElement('div', { key: '1', onClick: _this.handleDayCloseSelect, style: styles.selectdialogMask }), _react2.default.createElement(
        'div',
        { key: '2', style: styles[(0, _publicField.setLocationClass)(_this)] },
        _react2.default.createElement(
            'div',
            { style: styles.DateFieldBoxSelect },
            dateHead(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day, _theme),
            dateWeek(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day, _theme),
            dateDay(_this, _this.state.renderDateData.listDomDays, styles, _this.props.scheduleData, _theme),
            _this.props.scheduleLoading ? _react2.default.createElement(
                'div',
                { style: styles.loadingBox },
                '\u6B63\u5728\u8BF7\u6C42\u6392\u73ED'
            ) : null
        )
    )];
};

var defaultDialog = function defaultDialog(_this, styles, _theme) {
    return _react2.default.createElement(
        _reactDialogY2.default,
        { open: _this.state.dateOpen
            //onRequestClose={_this.handleDayClose}
            , contentStyle: { maxWidth: "26rem" },
            bodyStyle: { padding: 0 } },
        _react2.default.createElement(
            'div',
            { style: styles.DateFieldBoxDialog },
            dateHead(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day, _theme),
            dateWeek(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day, _theme),
            dateDay(_this, _this.state.renderDateData.listDomDays, styles, _this.props.scheduleData, _theme),
            _this.props.scheduleLoading ? _react2.default.createElement(
                'div',
                { style: styles.loadingBox },
                '\u6B63\u5728\u8BF7\u6C42\u6392\u73ED'
            ) : null,
            _react2.default.createElement(
                'div',
                { style: styles.btnBox },
                _react2.default.createElement(_reactButtonY2.default, { scenesType: 'submit', btnText: '\u786E\u8BA4', handleBtn: _this.handleDaySubmit }),
                _react2.default.createElement(
                    'span',
                    { style: { width: "1rem", display: "block" } },
                    ' '
                ),
                _react2.default.createElement(_reactButtonY2.default, { scenesType: 'back', btnText: '\u8FD4\u56DE', handleBtn: _this.handleDayClose })
            )
        )
    );
};

/**
 * 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.dateBoxDis, title: value },
        value
    ) : _react2.default.createElement(
        'div',
        { key: 3, style: _this.state.focusState ? styles.dateBoxFocus : styles.dateBox,
            title: value,
            onClick: _this.showDate
        },
        _react2.default.createElement(
            'div',
            { style: styles.inputText },
            value
        ),
        _react2.default.createElement(
            'div',
            { style: styles.inputSvg },
            _react2.default.createElement(_reactSvgY2.default, { type: 'Date', 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 selectType = _this.props.selectType || "select";
    return _react2.default.createElement(
        'div',
        { ref: 'formBox', style: styles.formBox },
        (0, _publicField.formContDefault)(_this, styles, verifyFlag, getValue(_this), formValueDom, _theme),
        (0, _publicField.defaultError)(verifyFlag, styles),
        _this.state.dateOpen && selectType == "select" && defaultSelect(_this, styles, _theme),
        _this.state.dateOpen && selectType == "dialog" && defaultDialog(_this, styles, _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 selectType = _this.props.selectType || "select";
    return _react2.default.createElement(
        'div',
        { ref: 'formBox', style: styles.formBox },
        (0, _publicField.formContBox)(_this, styles, verifyFlag, getValue(_this), formValueDom, _theme),
        (0, _publicField.boxError)(verifyFlag, styles),
        _this.state.dateOpen && selectType == "select" && defaultSelect(_this, styles, _theme),
        _this.state.dateOpen && selectType == "dialog" && defaultDialog(_this, styles, _theme)
    );
};

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