react-form-ui-y/lib/form/dateRange/dateRangeField.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 _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRedux = require('react-redux');

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

var _themeY = require('theme-y');

var _index = require('../../actions/index');

var _dateRangeStyle = require('./dateRangeStyle');

var _subpage = require('./subpage');

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 _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; }
// import {Theme} from '../../../theme/index';

var propTypes = {
    designationTheme: _propTypes2.default.string,
    formType: _propTypes2.default.string,
    inputName: _propTypes2.default.string.isRequired,
    formText: _propTypes2.default.string,
    disabled: _propTypes2.default.bool,
    required: _propTypes2.default.bool,
    hintText: _propTypes2.default.string,
    textWidth: _propTypes2.default.string,
    valueWidth: _propTypes2.default.string,
    changeValue: _propTypes2.default.func,
    errorText: _propTypes2.default.string,
    dataType: _propTypes2.default.string,
    // remarks  无规则 自定义传参
    // regex:PropTypes.number,//正则 input特有
    regexText: _propTypes2.default.string //input特有
};

var isLeap = function isLeap(year) {
    return year % 100 == 0 ? year % 400 == 0 ? 1 : 0 : year % 4 == 0 ? 1 : 0;
};

var dateReg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;

var formatTen = function formatTen(num) {
    return num > 9 ? num + "" : "0" + num;
},
    timesFormat = function timesFormat(a) {
    return _reactUtilsY._Date.format(new Date(a), "yyyy-MM-dd");
},
    returnMinValue = function returnMinValue(a, b) {
    if (!a && !b) return "";
    if (a && b) {
        var minDateTimes = new Date(a).getTime(),
            maxDateTimes = new Date(b).getTime();
        return minDateTimes < maxDateTimes ? timesFormat(minDateTimes) : timesFormat(maxDateTimes);
    } else {
        return a ? a : b;
    }
},
    returnMaxValue = function returnMaxValue(a, b) {
    if (!a && !b) return "";
    if (a && b) {
        var minDateTimes = new Date(a).getTime(),
            maxDateTimes = new Date(b).getTime();
        return minDateTimes < maxDateTimes ? timesFormat(maxDateTimes) : timesFormat(minDateTimes);
    } else {
        return a ? a : b;
    }
};

//遍历渲染的日期数据集合
//当月的上月计算
var hiddenDayUp = function hiddenDayUp(year, month, i) {
    var yearU = month == 1 ? year - 1 : year,
        monthU = month == 1 ? 12 : month - 1,
        datU = [31, 28 + isLeap(yearU), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
        monthFirstWeekU = new Date(year + '/' + month + '/' + 1 + " 00:00:00").getDay(),
        dayU = datU[monthU - 1] - (monthFirstWeekU - 1 - i);
    return {
        day: dayU,
        month: monthU,
        year: yearU,
        flag: "up"
    };
},

//当月的下月计算
hiddenDayNext = function hiddenDayNext(year, month, dayNumN) {
    var monthN = month == 12 ? 1 : month + 1,
        yearN = month == 12 ? year + 1 : year;
    return {
        day: dayNumN,
        month: monthN,
        year: yearN,
        flag: "next"
    };
};
var setDateData = function setDateData(_date, _this) {
    var date = _date,
        year = date.getFullYear(),
        //2018
    month = date.getMonth() + 1,
        //0-11   +1
    day = date.getDate(),
        //1,2,
    monthFirstWeek = new Date(year + '/' + month + '/1').getDay(),
        //获取这个月分第一天是星期几。 0-6 0是星期日
    monthMaxDay = new Date(year, month, 0).getDate();

    var iNum = monthMaxDay + monthFirstWeek < 36 ? 35 : 42;
    var listDomDays = iNum == 35 ? [[], [], [], [], []] : [[], [], [], [], [], []],
        thisDay = 0,
        nextDay = 0,
        rows = 0;
    for (var i = 0; i < iNum; i++) {
        rows = parseInt(i / 7);
        //renderType  日期渲染重 星期日开始 还是星期一开始
        var flag = _this.props.renderType == "ch" ? i + 1 : i;
        if (flag < monthFirstWeek) {
            //上月
            //需要展示上个月信息 把这个打开
            // listDomDays[rows].push(hiddenDayUp(year, month, i));
            listDomDays[rows].push(0);
            continue;
        }
        if (flag >= monthFirstWeek && thisDay < monthMaxDay) {
            //这个月
            listDomDays[rows].push({
                day: thisDay + 1,
                month: month,
                year: year,
                flag: "now"
            });
            thisDay++;
            continue;
        }
        if (flag > parseInt(monthMaxDay + monthFirstWeek) - 1) {
            //下个月
            //需要展示下个月信息 把这个打开
            // if (monthMaxDay + monthFirstWeek > 35) {
            //     nextDay++;
            //     listDomDays[rows].push(hiddenDayNext(year, month, nextDay));
            // } else {
            //     if (i + 1 > 35) {
            //         listDomDays[rows].push(0)
            //     } else {
            //         nextDay++;
            //         listDomDays[rows].push(hiddenDayNext(year, month, nextDay));
            //     }
            // }
            listDomDays[rows].push(0);
            continue;
        }
    }

    //排班 带处理
    if (_this.props.schedule == "1" || _this.props.schedule == "2") {
        var beginDate = listDomDays[0][0].year + "-" + formatTen(listDomDays[0][0].month) + "-" + formatTen(listDomDays[0][0].day);
        var endDate = listDomDays[listDomDays.length - 1][6].year + "-" + formatTen(listDomDays[listDomDays.length - 1][6].month) + "-" + formatTen(listDomDays[listDomDays.length - 1][6].day);
        // _this.setState({
        //     loading: true
        // });
        // _this.getScheduleListFn(beginDate, endDate);
        _this.props.getScheduleFn && _this.props.getScheduleFn(beginDate, endDate);
    }

    return {
        year: year,
        month: month,
        day: day,
        listDomDays: listDomDays
    };
};

var DateRangeField = function (_Theme) {
    _inherits(DateRangeField, _Theme);

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

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

        _initialiseProps.call(_this2);

        var _state = {
            focusState: false, //处理点击的样式
            initFocusState: 0, //是否触发过 0 未触发  1 已经触发
            errorState: false, //是否显示报错提示框，  true  显示报错  false  不显示


            dateOpen: false,

            shouldUpdate: true, //选择年份或者月份滚动分页状态
            showYear: false, //显示年份下拉
            chooseYear: new Date().getFullYear(), //显示选择的年份值
            showMonth: false, //显示月份下拉
            chooseMonth: new Date().getMonth(), //显示选择的月份值

            date: new Date(), //当前日期

            renderDateData: { year: 0, month: 0, day: 0, listDomDays: [] },
            //renderDateData2: {year: 0, month: 0, day: 0, listDomDays: []},

            handleDayFlag: true, //单机日期的状态机  第一次开始     第二次结束   第三次清空状态  第四次又开始

            beginDay: "",
            endDay: "",
            beginDayTemp: "",
            endDayTemp: "",
            errorText: '该值不能为空！',

            selLocationH: "bottom", // selLocation:"bottom"  // top  bottom
            selLocationW: "right" // left   right
        };
        _this2.state = _reactUtilsY._Object.merge(_this2.state || {}, _state);
        return _this2;
    }

    //年份的下拉滚动条

    //选择年份 月份

    //移动年份 月份

    //选择年份 月份

    //点旁边关闭下拉


    /*点击显示日期*/

    /*上个月点击*/

    /*下个月点击*/

    /*选择日期*/


    /*清空数据*/

    /*输入框change*/


    //快捷方式点击


    //下拉点击旁边关闭下拉  设置date值

    //返回 关闭弹出框

    /*数据提交*/

    /*弹出框关闭*/


    _createClass(DateRangeField, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
            var props = this.props;
            var flag = "set";
            try {
                //已经存在数据 就不 重新赋值
                flag = props.formData[props.dataType || "default"][props.inputName] ? "none" : "set";
            } catch (ex) {
                flag = "set";
            } finally {
                if (props.inputName && flag == "set") {
                    var obj = [{
                        type: "dateRange", //type 类型
                        name: this.props.inputName, //name input名称
                        text: "", //text input值
                        value: "",
                        obj: {},
                        remarks: this.props.remarks, //备注
                        other: {
                            required: this.props.required
                        }
                    }];
                    props.setFormData(obj, props.dataType);
                }
            }
        }
    }, {
        key: 'componentDidMount',
        value: function componentDidMount() {}
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {
            this.props.delFormData(this.props.inputName || "", this.props.dataType);
        }
    }, {
        key: 'render',
        value: function render() {
            return (0, _publicField.renderBox)(this, _dateRangeStyle.dateRangeStyle, _subpage.formTypeDom, _subpage.verifyFn);
        }
    }]);

    return DateRangeField;
}(_themeY.Theme);

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

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

    this.handleHead = function (type) {
        if (type == "year") {
            _this3.setState({
                showMonth: false,
                showYear: true
            });
        } else {
            _this3.setState({
                showMonth: true,
                showYear: false
            });
        }
    };

    this.moveYear = function (value, type) {
        if (type == "year") {
            _this3.setState({ chooseYear: value });
        } else {
            _this3.setState({ chooseMonth: value });
        }
    };

    this.handleYear = function (value, type) {
        if (type == "year") {
            var renderDateData = setDateData(new Date(value + "/01/01"), _this3);
            var nextYear = renderDateData.month == 12 ? renderDateData.year + 1 : renderDateData.year,
                nextMonth = renderDateData.month == 12 ? 1 : renderDateData.month + 1;

            _this3.setState({
                showYear: false,
                showMonth: false,
                date: new Date(value + "/01/01"),

                renderDateData: renderDateData
                //renderDateData2 : setDateData(new Date(nextYear + '/' + nextMonth + '/' + 1), this)
            });
        } else {
            var _renderDateData = setDateData(new Date(_this3.state.date.getFullYear() + "/" + formatTen(value) + "/01"), _this3);
            var _nextYear = _renderDateData.month == 12 ? _renderDateData.year + 1 : _renderDateData.year,
                _nextMonth = _renderDateData.month == 12 ? 1 : _renderDateData.month + 1;

            _this3.setState({
                showYear: false,
                showMonth: false,
                date: new Date(_this3.state.date.getFullYear() + "/" + formatTen(value) + "/01"),

                renderDateData: _renderDateData
                // renderDateData2: setDateData(new Date(nextYear + '/' + nextMonth + '/' + 1), this)
            });
        }
    };

    this.colseSelest = function (year) {
        _this3.setState({
            showYear: false,
            showMonth: false
        });
    };

    this.showDate = function (e) {
        if (_this3.props.disabled) return;
        _this3.setState({ dateOpen: true });
        var _this = _this3;
        var formDataValue = _this.props.formData[_this.props.dataType || "default"];
        var inputData = formDataValue && formDataValue[_this.props.inputName];
        var dateValue = inputData && inputData.text ? inputData.text : ""; //_this.props.dataObj[_this.props.inputName];

        dateValue = dateValue.replace(/-/g, "/");
        var setDate = _this.props.setDate && _this.props.setDate.replace(/-/g, "/");

        var renderDateData = setDateData(dateValue ? new Date(dateValue.split("至")[0].trim()) : setDate ? new Date(setDate) : new Date(), _this);
        var nextYear = renderDateData.month == 12 ? renderDateData.year + 1 : renderDateData.year,
            nextMonth = renderDateData.month == 12 ? 1 : renderDateData.month + 1;

        _this.setState({
            renderDateData: renderDateData
            //renderDateData2: setDateData(new Date(nextYear + '/' + nextMonth + '/' + 1), _this)
        });

        (0, _publicField.setLocationFn)(_this, e);
    };

    this.lastMonth = function (year, month) {
        var yearL = month == 1 ? year - 1 : year,
            monthL = month == 1 ? 12 : month - 1;

        var renderDateData = setDateData(new Date(yearL + '/' + monthL + '/' + 1), _this3);
        var nextYear = renderDateData.month == 12 ? renderDateData.year + 1 : renderDateData.year,
            nextMonth = renderDateData.month == 12 ? 1 : renderDateData.month + 1;

        _this3.setState({
            date: new Date(yearL + '/' + monthL + '/' + 1),
            renderDateData: renderDateData
            // renderDateData2: setDateData(new Date(nextYear + '/' + nextMonth + '/' + 1), this)
        });
    };

    this.nextMonth = function (year, month) {
        //如果只是一个日历模块 用此处
        var yearN = month == 12 ? year + 1 : year,
            monthN = month == 12 ? 1 : month + 1;

        // //如果是两个日历模块 用此处
        // let yearN = year,
        //     monthN = month;

        var renderDateData = setDateData(new Date(yearN + '/' + monthN + '/' + 1), _this3);
        var nextYear = renderDateData.month == 12 ? renderDateData.year + 1 : renderDateData.year,
            nextMonth = renderDateData.month == 12 ? 1 : renderDateData.month + 1;

        _this3.setState({
            date: new Date(yearN + '/' + monthN + '/' + 1),
            renderDateData: renderDateData
            // renderDateData2: setDateData(new Date(nextYear + '/' + nextMonth + '/' + 1), this)
        });
    };

    this.handleDayOpen = function (value) {
        var props = _objectWithoutProperties(_this3.props, []);

        var day = value.year + '-' + formatTen(value.month) + '-' + formatTen(value.day),

        /*每一个日历的时间戳*/
        activeDateTimes = new Date(day).getTime(),

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

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

        if (_this3.state.handleDayFlag) {
            _this3.setState({
                beginDay: day,
                endDay: day
            });
        } else {
            _this3.setState({
                beginDay: returnMinValue(_this3.state.beginDay, day),
                endDay: returnMaxValue(_this3.state.endDay, day)
            });
        }
        _this3.setState({
            handleDayFlag: !_this3.state.handleDayFlag,
            chooseFast: "自定义"
        });
    };

    this.handleDayClear = function () {
        _this3.setState({
            beginDay: "",
            beginDayTemp: "",
            endDay: "",
            endDayTemp: ""
        });
    };

    this.inputChangeFn = function (name, e) {

        var value = e.target.value;
        if (dateReg.test(value)) {
            /*满足日期正则*/
            _this3.setState({
                beginDay: returnMinValue(_this3.state[name], value),
                endDay: returnMaxValue(_this3.state[name], value),
                date: new Date(returnMinValue(_this3.state[name], value))
            });
        } else {
            if (name == "endDay") {
                _this3.setState({
                    beginDay: "",
                    beginDayTemp: value
                });
            } else {
                _this3.setState({
                    endDay: "",
                    endDayTemp: value
                });
            }
        }
    };

    this.chooseFastFn = function (item) {
        _this3.setState({
            chooseFast: item.text,
            beginDay: item.beginDate,
            endDay: item.endDate
        });
    };

    this.handleDayCloseSelect = function () {
        _this3.setState({ dateOpen: false, initFocusState: 1 });

        var value = _this3.state.beginDay == _this3.state.endDay ? _this3.state.beginDay : _this3.state.beginDay + ' \u81F3 ' + _this3.state.endDay;
        // if (value) {
        var bdTime = new Date(_this3.state.beginDay.replace(/-/g, '/') + " 00:00:00").getTime();
        var edTime = new Date(_this3.state.endDay.replace(/-/g, '/') + " 00:00:00").getTime();
        var arr = [];
        for (var i = bdTime; i <= edTime; i += 86400000) {
            arr.push(_reactUtilsY._Date.format(new Date(i), "yyyy-MM-dd"));
        }
        _this3.setState({
            focusState: false,
            dateOpen: false
        });

        var obj = [{
            type: "dateRange", //type 类型
            name: _this3.props.inputName, //name input名称
            text: value, //text input值
            value: value,
            obj: {
                beginDate: _this3.state.beginDay,
                endDate: _this3.state.endDay,
                arr: arr
            },
            remarks: _this3.props.remarks, //备注
            other: {
                required: _this3.props.required
            }
        }];
        _this3.props.setFormData(obj, _this3.props.dataType);
        _this3.props.changeValue && _this3.props.changeValue(obj[0]);
        // }
    };

    this.handleDayCloseDialog = function () {
        _this3.setState({ dateOpen: false, initFocusState: 1 });
    };

    this.handleDaySubmit = function () {
        var value = _this3.state.beginDay == _this3.state.endDay ? _this3.state.beginDay : _this3.state.beginDay + ' \u81F3 ' + _this3.state.endDay;
        // if (value) {
        var bdTime = new Date(_this3.state.beginDay.replace(/-/g, '/') + " 00:00:00").getTime();
        var edTime = new Date(_this3.state.endDay.replace(/-/g, '/') + " 00:00:00").getTime();
        var arr = [];
        for (var i = bdTime; i <= edTime; i += 86400000) {
            arr.push(_reactUtilsY._Date.format(new Date(i), "yyyy-MM-dd"));
        }
        _this3.setState({
            focusState: false,
            dateOpen: false
        });

        var obj = [{
            type: "dateRange", //type 类型
            name: _this3.props.inputName, //name input名称
            text: value, //text input值 如：2018-01-01 至 2018-01-23
            value: {
                beginDate: _this3.state.beginDay, //2018-01-01
                endDate: _this3.state.endDay //2018-01-23
            },
            obj: {
                arr: arr //如： ["2018-01-01","2018-01-02"]
            },
            remarks: _this3.props.remarks, //备注
            other: {
                required: _this3.props.required
            }
        }];
        _this3.props.setFormData(obj, _this3.props.dataType);
        _this3.props.changeValue && _this3.props.changeValue(obj[0]);
        // }
        // this.props.getValue && this.props.getValue("dateFieldRange", this.props.inputName, value, arr);
    };

    this.handleDayClose = function () {
        _this3.setState({
            focusState: false,
            dateOpen: false,
            initFocusState: 1
        });
    };
};

DateRangeField.propTypes = propTypes;

var mapStateToProps = function mapStateToProps(state) {
    return {
        formData: state.formData,
        subVerifyRes: state.subVerifyRes,
        theme: state.theme
    };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
    return {
        setFormData: function setFormData(data, dataType) {
            return dispatch((0, _index.setFormData)(data, dataType));
        },
        delFormData: function delFormData(inputName, dataType) {
            return dispatch((0, _index.delFormData)(inputName, dataType));
        }
    };
};

exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(DateRangeField);
//# sourceMappingURL=dateRangeField.js.map