react-form-ui-y/lib/form/dateRange/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 _reactScrollY = require('react-scroll-y');

var _reactScrollY2 = _interopRequireDefault(_reactScrollY);

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 _publicField = require('../publicField');

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 merge(o1, o2) {
    for (var p in o2) {
        o1[p] = o2[p];
    }
    return o1;
}
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) {
    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: '1.56rem', height: '1.56rem', fill: '#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)
            )
        ),
        _this.state.showMonth || _this.state.showYear ? _react2.default.createElement('div', { style: styles.backbg, onClick: _this.colseSelest }) : null
    );
};

//日历天数遍历的样式
var getRowStyle = function getRowStyle(_this, value, type, styles) {
    var props = _objectWithoutProperties(_this.props, []);

    var activeDate = value.year + '-' + formatTen(value.month) + '-' + formatTen(value.day),
        minDateTimes = new Date(_this.state.beginDay).getTime(),
        maxDateTimes = new Date(_this.state.endDay).getTime(),
        activeDateTimes = new Date(activeDate).getTime(),
        minDate = minDateTimes < maxDateTimes ? _this.state.beginDay : _this.state.endDay,
        maxDate = minDateTimes < maxDateTimes ? _this.state.endDay : _this.state.beginDay;

    minDateTimes = minDateTimes < maxDateTimes ? minDateTimes : maxDateTimes;
    maxDateTimes = minDateTimes < maxDateTimes ? maxDateTimes : minDateTimes;

    /*获取父组件的minData,maxDate的时间戳*/
    var pMinDateTimes = new Date(props.minDate).getTime(),
        pMaxDateTimes = new Date(props.maxDate).getTime();

    if (!type) {
        if (_this.state.beginDay == activeDate || _this.state.endDay == activeDate) {
            /*圆圈的背景色*/
            return styles.dayDataOn;
        }

        if (minDateTimes <= activeDateTimes && activeDateTimes <= maxDateTimes) {
            /*方块的背景色*/
            return styles.dayDataOn2;
        }

        //是否需要排班，
        // 0不需要排班，所有日期可选，
        // 1需要排班，仅排班日可选，
        // 2需要排版，仅非排班日可选
        var scheduleData = _this.props.scheduleData || [];
        var schedule = _this.props.schedule || "0";
        if (schedule == "1") {
            if (!scheduleData.in_array(value.year + "-" + formatTen(value.month) + "-" + formatTen(value.day))) {
                return styles.dayDataDisabled;
            }
        }
        if (schedule == "2") {
            if (scheduleData.in_array(value.year + "-" + formatTen(value.month) + "-" + formatTen(value.day))) {
                return styles.dayDataDisabled;
            }
        }

        /*disabled的日期*/
        if (pMinDateTimes > activeDateTimes || activeDateTimes > pMaxDateTimes) {
            return styles.dayDataDisabled;
        }

        return styles.dayDataOff;
    } else {
        if (type == "F" && minDateTimes < maxDateTimes && minDate == activeDate) {
            return styles.fixedOn;
        }

        if (type == "S" && minDateTimes < maxDateTimes && maxDate == activeDate) {
            return styles.fixedOn;
        }

        return styles.fixedOff;
    }
};
//星期    和  上下月份切换
var dateTitle = function dateTitle(renderType) {
    return renderType == "ch" ? ['一', '二', '三', '四', '五', '六', '日'] : ['日', '一', '二', '三', '四', '五', '六'];
};
//日历天数遍历
var dateDay = function dateDay(_this, styles, listDomDays, year, month, type, theme) {
    return _react2.default.createElement(
        'div',
        { style: styles.flexBox },
        type == "up" ? _react2.default.createElement(
            'div',
            { style: styles.titleBox },
            _react2.default.createElement(
                'span',
                { onClick: _this.lastMonth.bind(_this, year, month), style: styles.leftBox },
                _react2.default.createElement(_reactSvgY2.default, { type: 'Left', width: '1rem', height: '1rem', fill: theme.dateRange.contSvg })
            ),
            _react2.default.createElement(
                'span',
                { style: styles.monthText },
                month,
                '\u6708'
            ),
            _react2.default.createElement(
                'span',
                { onClick: _this.nextMonth.bind(_this, year, month), style: styles.rightBox },
                _react2.default.createElement(_reactSvgY2.default, { type: 'Right', width: '1rem', height: '1rem', fill: theme.dateRange.contSvg })
            )
        ) : null,
        _react2.default.createElement(
            'div',
            { style: styles.dateWeek },
            dateTitle(_this.props.renderType).map(function (value, index) {
                return _react2.default.createElement(
                    'a',
                    { style: styles.dateWeekDay, key: index },
                    _react2.default.createElement(
                        'span',
                        { style: styles.monthSty },
                        value
                    )
                );
            })
        ),
        _react2.default.createElement(
            'div',
            { style: styles.dateDay },
            listDomDays.map(function (rows, index) {
                return _react2.default.createElement(
                    'ul',
                    { key: index + "rows", style: styles.dateRow },
                    rows.map(function (value, index) {
                        return _react2.default.createElement(
                            'li',
                            { key: index + "cols",
                                style: styles.dayBox
                            },
                            _react2.default.createElement(
                                'div',
                                { style: styles.fixedBox },
                                _react2.default.createElement(
                                    'span',
                                    { style: getRowStyle(_this, value, "S", styles) },
                                    ' '
                                ),
                                _react2.default.createElement(
                                    'span',
                                    { style: getRowStyle(_this, value, "F", styles) },
                                    ' '
                                )
                            ),
                            value ? _react2.default.createElement(
                                'label',
                                { style: _reactUtilsY._Date.format(_this.state.date, "yyyy-MM-dd") == _reactUtilsY._Date.format(new Date(year + '-' + month + '-' + value.day), "yyyy-MM-dd") ? merge({ color: "red" }, getRowStyle(_this, value, '', styles)) : getRowStyle(_this, value, '', styles),
                                    onClick: _this.handleDayOpen.bind(_this, value)
                                },
                                value.day
                            ) : _react2.default.createElement(
                                'label',
                                null,
                                ' '
                            )
                        );
                    })
                );
            })
        )
    );
};

//input按钮
var inputBtnBox = function inputBtnBox(_this, styles) {
    return _react2.default.createElement(
        'div',
        { style: styles.inputBtnBox },
        _react2.default.createElement(
            'div',
            { style: styles.inputBox },
            _this.state.beginDay || _this.state.beginDayTemp
        ),
        _this.state.beginDay ? _react2.default.createElement(
            'span',
            { style: styles.inputTo },
            '\u81F3'
        ) : null,
        _react2.default.createElement(
            'div',
            { style: styles.inputBox },
            _this.state.endDay || _this.state.endDayTemp
        ),
        _this.state.beginDay ? _react2.default.createElement(
            'div',
            { style: styles.clearDateBtn },
            _react2.default.createElement(_reactButtonY2.default, { scenesType: 'import', svgName: 'Clear', btnText: '\u6E05\u9664',
                handleBtn: _this.handleDayClear })
        ) : null
    );
};

//快捷按钮
var fastDataFn = function fastDataFn(_this, _Date) {
    var date = new Date();
    var toDay = _Date.format(date, "yyyy-MM-dd");
    var yesterday = _Date.format(new Date(date.getTime() - 1 * 24 * 60 * 60 * 1000));

    var lastWeekList = _Date.getWeek(new Date(date.getTime() - 7 * 24 * 60 * 60 * 1000), _this.props.renderType || "en");
    var nextWeekList = _Date.getWeek(new Date(date.getTime() + 7 * 24 * 60 * 60 * 1000), _this.props.renderType || "en");

    var lastMonth = new Date(date.getFullYear(), date.getMonth() - 1),
        lastMonthY = lastMonth.getFullYear(),
        lastMonthM = lastMonth.getMonth();
    var lastMonthBegin = _Date.format(new Date(lastMonthY, lastMonthM, 1));
    var lastMonthEnd = _Date.format(new Date(lastMonthY, lastMonthM, new Date(lastMonthY, lastMonthM + 1, 0).getDate()));

    var nextMonth = new Date(date.getFullYear(), date.getMonth() + 1),
        nextMonthY = nextMonth.getFullYear(),
        nextMonthM = nextMonth.getMonth();
    var nextMonthBegin = _Date.format(new Date(nextMonthY, nextMonthM, 1));
    var nextMonthEnd = _Date.format(new Date(nextMonthY, nextMonthM, new Date(nextMonthY, nextMonthM + 1, 0).getDate()));

    return [{ text: "今天", beginDate: toDay, endDate: toDay }, { text: "昨天", beginDate: yesterday, endDate: yesterday }, { text: "上一周", beginDate: lastWeekList[0].date, endDate: lastWeekList[6].date }, { text: "下一周", beginDate: nextWeekList[0].date, endDate: nextWeekList[6].date }, { text: "上个月", beginDate: lastMonthBegin, endDate: lastMonthEnd }, { text: "下个月", beginDate: nextMonthBegin, endDate: nextMonthEnd }, { text: "自定义", beginDate: "", endDate: "" }];
};
var fastBtnBox = function fastBtnBox(_this, styles) {
    var fastData = fastDataFn(_this, _reactUtilsY._Date);
    return _react2.default.createElement(
        'div',
        { key: 1, style: styles.fastBtnBox },
        fastData.map(function (item, index) {
            return _react2.default.createElement(
                'div',
                { key: index, onClick: _this.chooseFastFn.bind(undefined, item),
                    style: _this.state.chooseFast == item.text ? styles.fastChooseItem : styles.fastItem },
                item.text
            );
        }),
        _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: { display: "block", width: "1rem" } },
                ' '
            ),
            _react2.default.createElement(_reactButtonY2.default, { scenesType: 'back', btnText: '\u8FD4\u56DE', handleBtn: _this.handleDayClose })
        )
    );
};

//日期下拉
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.DateFieldBox },
            dateHead(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day, _theme),
            dateDay(_this, styles, _this.state.renderDateData.listDomDays, _this.state.renderDateData.year, _this.state.renderDateData.month, "up", _theme),
            inputBtnBox(_this, styles),
            fastBtnBox(_this, styles),
            _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}

            //双 {maxWidth: "67rem", minWidth: "67rem",width:"67rem"}
            //单 {maxWidth: "42rem", minWidth: "42rem",width:"42rem"}
            , contentStyle: { maxWidth: "42rem", minWidth: "42rem", width: "42rem" },
            bodyStyle: { padding: 0 }
        },
        _react2.default.createElement(
            'div',
            { style: styles.DateFieldBox },
            dateHead(_this, styles, _this.state.renderDateData.year, _this.state.renderDateData.month, _this.state.renderDateData.day),
            dateDay(_this, styles, _this.state.renderDateData.listDomDays, _this.state.renderDateData.year, _this.state.renderDateData.month, "up", _theme),
            inputBtnBox(_this, styles),
            fastBtnBox(_this, styles),
            _this.props.scheduleLoading ? _react2.default.createElement(
                'div',
                { style: styles.loadingBox },
                '\u6B63\u5728\u8BF7\u6C42\u6392\u73ED'
            ) : null
        )
    );
};

/**
 * 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