react-form-fy
Version:
746 lines (662 loc) • 34.5 kB
JavaScript
'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 _utilsFy = require('utils-fy');
var _reactUiSvg = require('react-ui-svg');
var svg = _interopRequireWildcard(_reactUiSvg);
var _reactButtonFy = require('react-button-fy');
var _reactButtonFy2 = _interopRequireDefault(_reactButtonFy);
var _reactDialogFy = require('react-dialog-fy');
var _reactDialogFy2 = _interopRequireDefault(_reactDialogFy);
var _publicStyle = require('./publicStyle');
var _leaveDays = require('./leaveDays');
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 _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; }
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; }
var amn1 = {
cont_color: "#fff",
cont_move_color: "#fff",
back_move_bgcolor: "rgb(186, 22, 77)",
botton_bgcolor: "rgb(235, 53, 114)"
};
var amn2 = {
cont_color: "#fff",
cont_move_color: "#fff",
back_move_bgcolor: "rgb(31, 158, 173)",
botton_bgcolor: "rgb(57, 188, 204)"
};
var amn3 = {
cont_color: "#fff",
cont_move_color: "#fff",
back_move_bgcolor: "rgb(128, 119, 119)",
botton_bgcolor: "rgb(188, 187, 187)"
};
var platType = _utilsFy.Platform.equipment;
var svgFill = "red";
var svgSize = 25;
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 date = void 0,
year = void 0,
month = void 0,
day = void 0,
monthFirstWeek = void 0,
monthDays = void 0,
monthMaxDay = void 0;
var year2 = void 0,
month2 = void 0,
monthFirstWeek2 = void 0,
monthDays2 = void 0,
monthMaxDay2 = void 0;
var flag = true;
var dateTitle = ['日', '一', '二', '三', '四', '五', '六'],
formatTen = function formatTen(num) {
return num > 9 ? num + "" : "0" + num;
},
getRowStyle = function getRowStyle(_this, value, type, dateRangeStyles) {
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 dateRangeStyles.dayDataOn;
}
if (minDateTimes <= activeDateTimes && activeDateTimes <= maxDateTimes && (props.iSleave && value.leaveDay || !props.iSleave && !value.leaveDay)) {
/*方块的背景色*/
return dateRangeStyles.dayDataOn2;
}
/*disabled的日期*/
if (pMinDateTimes > activeDateTimes || activeDateTimes > pMaxDateTimes || !value.leaveDay && props.iSleave) {
return dateRangeStyles.dayDataDisabled;
}
return dateRangeStyles.dayDataOff;
} else {
if (type == "F" && minDateTimes < maxDateTimes && minDate == activeDate) {
return dateRangeStyles.fixedOn;
}
if (type == "S" && minDateTimes < maxDateTimes && maxDate == activeDate) {
return dateRangeStyles.fixedOn;
}
return dateRangeStyles.fixedOff;
}
},
timesFormat = function timesFormat(a) {
return _utilsFy.DateFormat.yyyy_MM_dd(new Date(a));
},
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;
}
},
getLeaveDay = function getLeaveDay(_this, activeDate) {
if (_this.state.leaveDaysArr.in_array(activeDate)) {
return _this.state.leaveDays.map(function (value, i) {
if (value.date == activeDate) {
return value.name;
}
});
}
};
var DateField = function (_React$Component) {
_inherits(DateField, _React$Component);
function DateField(props, context) {
_classCallCheck(this, DateField);
var _this2 = _possibleConstructorReturn(this, (DateField.__proto__ || Object.getPrototypeOf(DateField)).call(this, props, context));
_initialiseProps.call(_this2);
_this2.state = {
date: new Date(),
beginDay: "",
endDay: "",
beginDayTemp: "",
endDayTemp: "",
focusState: false,
errorState: false,
errorText: '该值不能为空！',
dateOpen: false,
styles: {
dateRangeStyles: (0, _publicStyle.dateRangeStyles)(_this2.props.themeObj),
publicStyles: (0, _publicStyle.publicStyles)(_this2.props.themeObj),
inputStyle: (0, _publicStyle.inputStyle)(_this2.props.themeObj)
},
leaveDays: [],
leaveDaysArr: []
};
return _this2;
}
/*上个月点击*/
/*下个月点击*/
/*弹出框打开*/
/*弹出框关闭*/
/*数据提交*/
/*清空数据*/
_createClass(DateField, [{
key: 'componentWillMount',
value: function componentWillMount() {
var leaveDaysArr = [];
this.props.iSleave ? _leaveDays.leaveDays.map(function (value, i) {
leaveDaysArr.push(value.date);
}) : null;
this.setState({
date: this.props.setDate ? new Date(this.props.setDate) : this.state.date,
leaveDaysArr: leaveDaysArr,
leaveDays: _leaveDays.leaveDays
});
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
/*input*/
var props = _objectWithoutProperties(this.props, []);
var Svg = svg[props.svgName],
required = props.required || false,
value = props.dataObj[props.inputName] ? props.dataObj[props.inputName] : '',
errorState = required && props.dataObj.required && !value ? true : false;
var styles = eval('(' + JSON.stringify(this.state.styles) + ')');
var tipDef = JSON.stringify(styles.inputStyle.tipDef),
tipDisabled = JSON.stringify(styles.inputStyle.tipDisabled);
var tipOne = props.disabled ? _utilsFy.Obj.merge(eval('(' + tipDef + ')'), eval('(' + tipDisabled + ')')) : eval('(' + tipDef + ')');
styles.publicStyles.formText.width = props.textWidth || "7.5rem";
styles.publicStyles.formVInput.width = props.valueWidth || "14.375rem";
var publicStyles = styles.publicStyles,
inputStyle = styles.inputStyle,
dateRangeStyles = styles.dateRangeStyles;
/*date*/
date = this.state.date;
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
monthFirstWeek = new Date(year + '/' + month + '/1').getDay();
monthDays = [31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDay = monthDays[month - 1];
year2 = month == 12 ? year + 1 : year;
month2 = month == 12 ? 1 : month + 1;
monthFirstWeek2 = new Date(year2 + '/' + month2 + '/1').getDay();
monthDays2 = [31, 28 + isLeap(year2), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDay2 = monthDays[month2 - 1];
var iNum = monthMaxDay + monthFirstWeek < 36 ? 35 : 42;
var iNum2 = monthMaxDay2 + monthFirstWeek2 < 36 ? 35 : 42;
var listDomDays = iNum == 35 ? [[], [], [], [], []] : [[], [], [], [], [], []],
dayNum = 0,
rows = 0;
var listDomDays2 = iNum2 == 35 ? [[], [], [], [], []] : [[], [], [], [], [], []],
dayNum2 = 0,
rows2 = 0;
for (var i = 0; i < iNum; i++) {
rows = parseInt(i / 7);
if (i < monthFirstWeek) {
listDomDays[rows].push(0);
continue;
}
if (i >= monthFirstWeek && dayNum < monthMaxDay) {
listDomDays[rows].push({
day: dayNum + 1,
month: month,
year: year,
leaveDay: getLeaveDay(this, year + '-' + formatTen(month) + '-' + formatTen(dayNum + 1))
});
dayNum++;
continue;
}
if (i > parseInt(monthMaxDay + monthFirstWeek) - 1) {
listDomDays[rows].push(0);
continue;
}
}
for (var _i = 0; _i < iNum2; _i++) {
rows2 = parseInt(_i / 7);
if (_i < monthFirstWeek2) {
listDomDays2[rows2].push(0);
continue;
}
if (_i >= monthFirstWeek2 && dayNum2 < monthMaxDay2) {
listDomDays2[rows2].push({
day: dayNum2 + 1,
month: month2,
year: year2,
leaveDay: getLeaveDay(this, year2 + '-' + formatTen(month2) + '-' + formatTen(dayNum2 + 1))
});
dayNum2++;
continue;
}
if (_i > parseInt(monthMaxDay2 + monthFirstWeek2) - 1) {
listDomDays2[rows2].push(0);
continue;
}
}
function merge(o1, o2) {
for (var p in o2) {
o1[p] = o2[p];
}
return o1;
}
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ style: publicStyles.formBox },
props.formText ? _react2.default.createElement(
'div',
{ style: publicStyles.formText },
props.svgName ? _react2.default.createElement(Svg, { fill: props.svgFill || svgFill,
width: props.textIconWidth || svgSize,
height: props.textIconHeight || svgSize,
style: publicStyles.formSvg }) : null,
_react2.default.createElement(
'span',
null,
props.formText,
required ? _react2.default.createElement(
'label',
{ style: publicStyles.formRequired },
'*'
) : null
)
) : null,
_react2.default.createElement(
'div',
{ style: publicStyles.formVInput, onClick: this.showDate },
!value ? _react2.default.createElement(
'span',
{ style: publicStyles.inputHintText },
props.hintText
) : null,
_react2.default.createElement('input', { style: inputStyle.inputBox,
name: props.inputName,
value: value,
title: value,
type: 'text', disabled: 'disabled'
}),
_react2.default.createElement(
'span',
null,
_react2.default.createElement('hr', { style: tipOne })
),
required && errorState ? _react2.default.createElement(
'span',
{ className: 'errorTipBox',
style: publicStyles.errorBox },
this.state.errorText
) : null
)
),
_react2.default.createElement(
_reactDialogFy2.default,
{
open: this.state.dateOpen,
contentStyle: { maxWidth: "45rem", minWidth: "23rem" },
onRequestClose: this.handleDayClose
},
_react2.default.createElement(
'div',
{ style: dateRangeStyles.DateFieldBox },
_react2.default.createElement(
'div',
{ style: platType ? dateRangeStyles.flexBoxpc : dateRangeStyles.flexBoxapp },
_react2.default.createElement(
'div',
{ style: dateRangeStyles.titleBox },
_react2.default.createElement(
'span',
{ onClick: this.lastMonth.bind(this, year, month) },
_react2.default.createElement(svg.Left, { width: '1.56rem', height: '1.56rem', fill: '#000' })
),
platType ? _react2.default.createElement(
'h5',
null,
year,
'\u5E74',
month,
'\u6708'
) : _react2.default.createElement(
'h5',
null,
year,
'.',
month,
'-',
year2,
'.',
month2
),
_react2.default.createElement(
'span',
{ onClick: platType ? function () {} : this.nextMonth.bind(this, year, month) },
platType ? null : _react2.default.createElement(svg.Right, { width: '1.56rem', height: '1.56rem', fill: '#000' })
)
),
_react2.default.createElement(
'div',
{ style: dateRangeStyles.dateBox },
_react2.default.createElement(
'div',
{ style: dateRangeStyles.dateWeek },
dateTitle.map(function (value, index) {
return _react2.default.createElement(
'a',
{ style: dateRangeStyles.dateWeekDay, key: index },
_react2.default.createElement(
'span',
{ style: dateRangeStyles.monthSty },
value
)
);
})
),
_react2.default.createElement(
'div',
{ className: 'dateDay', style: dateRangeStyles.dateDay },
listDomDays.map(function (rows, index) {
return _react2.default.createElement(
'ul',
{ key: index + "rows", style: dateRangeStyles.dateRow },
rows.map(function (value, index) {
return _react2.default.createElement(
'li',
{ key: index + "cols",
style: dateRangeStyles.dayBox
},
_react2.default.createElement(
'div',
{ style: dateRangeStyles.fixedBox },
_react2.default.createElement(
'span',
{
style: getRowStyle(_this3, value, "S", dateRangeStyles) },
' '
),
_react2.default.createElement(
'span',
{
style: getRowStyle(_this3, value, "F", dateRangeStyles) },
' '
)
),
value ? _react2.default.createElement(
'label',
{ style: _utilsFy.DateFormat.yyyy_MM_dd(_this3.state.date) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + '-' + month + '-' + value.day)) ? merge({ border: "#00bcd4 solid 1px" }, getRowStyle(_this3, value, '', dateRangeStyles)) : getRowStyle(_this3, value, '', dateRangeStyles),
onClick: _this3.handleDayOpen.bind(_this3, value)
},
value.day
) : _react2.default.createElement('label', null)
);
})
);
})
)
)
),
_react2.default.createElement(
'div',
{ style: platType ? dateRangeStyles.flexBoxpc : dateRangeStyles.flexBoxapp },
platType ? _react2.default.createElement(
'div',
{ style: dateRangeStyles.titleBox },
_react2.default.createElement('span', null),
_react2.default.createElement(
'h5',
null,
year2,
'\u5E74',
month2,
'\u6708'
),
_react2.default.createElement(
'span',
{ onClick: this.nextMonth.bind(this, year, month) },
_react2.default.createElement(svg.Right, { width: '1.56rem', height: '1.56rem', fill: '#000' })
)
) : null,
_react2.default.createElement(
'div',
{ style: dateRangeStyles.dateBox },
platType ? _react2.default.createElement(
'div',
{ style: dateRangeStyles.dateWeek },
dateTitle.map(function (value, index) {
return _react2.default.createElement(
'a',
{ style: dateRangeStyles.dateWeekDay, key: index },
_react2.default.createElement(
'span',
{ style: dateRangeStyles.monthSty },
value
)
);
})
) : _react2.default.createElement('hr', { style: { border: "0.0625rem solid rgba(194, 223, 227, 0.53)" } }),
_react2.default.createElement(
'div',
{ className: 'dateDay', style: dateRangeStyles.dateDay },
listDomDays2.map(function (rows, index) {
return _react2.default.createElement(
'ul',
{ key: index + "rows", style: dateRangeStyles.dateRow },
rows.map(function (value, index) {
return _react2.default.createElement(
'li',
{ key: index + "cols",
style: dateRangeStyles.dayBox
},
_react2.default.createElement(
'div',
{ style: dateRangeStyles.fixedBox },
_react2.default.createElement('span', {
style: getRowStyle(_this3, value, "S", dateRangeStyles) }),
_react2.default.createElement('span', {
style: getRowStyle(_this3, value, "F", dateRangeStyles) })
),
value ? _react2.default.createElement(
'label',
{ style: _utilsFy.DateFormat.yyyy_MM_dd(_this3.state.date) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year2 + '-' + month2 + '-' + value.day)) ? merge({ border: "#00bcd4 solid 1px" }, getRowStyle(_this3, value, '', dateRangeStyles)) : getRowStyle(_this3, value, '', dateRangeStyles),
onClick: _this3.handleDayOpen.bind(_this3, value) },
value.day
) : _react2.default.createElement(
'label',
null,
' '
)
);
})
);
})
)
)
),
_react2.default.createElement(
'div',
{ style: dateRangeStyles.textBox },
_react2.default.createElement('input', { style: dateRangeStyles.inputBox,
type: 'text',
value: this.state.beginDay || this.state.beginDayTemp,
onChange: this.inputChangeFn.bind(this, "endDay")
}),
_react2.default.createElement(
'span',
null,
'\u81F3'
),
_react2.default.createElement('input', { style: dateRangeStyles.inputBox,
type: 'text',
value: this.state.endDay || this.state.endDayTemp,
onChange: this.inputChangeFn.bind(this, "beginDay")
})
),
_react2.default.createElement(
'div',
{ style: dateRangeStyles.btnBox },
_react2.default.createElement(_reactButtonFy2.default, { btnType: 'default',
handleBtn: this.handleDayClear,
btnSty: amn1,
btnText: '\u6E05\u7A7A' }),
'\xA0\xA0\xA0',
_react2.default.createElement(_reactButtonFy2.default, { btnType: 'second',
btnSty: amn2,
handleBtn: this.handleDaySubmit,
btnText: '\u63D0\u4EA4' }),
'\xA0\xA0\xA0',
_react2.default.createElement(_reactButtonFy2.default, { btnType: 'default',
btnSty: amn3,
handleBtn: this.handleDayClose,
btnText: '\u8FD4\u56DE' }),
'\xA0\xA0\xA0'
)
)
)
);
}
}]);
return DateField;
}(_react2.default.Component);
var _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.lastMonth = function (year, month) {
var yearL = month == 1 ? year - 1 : year,
monthL = month == 1 ? 12 : month - 1;
_this4.setState({
date: new Date(yearL + '/' + monthL + '/' + 1)
});
};
this.nextMonth = function (year, month) {
var yearN = month == 12 ? year + 1 : year,
monthN = month == 12 ? 1 : month + 1;
_this4.setState({
date: new Date(yearN + '/' + monthN + '/' + 1)
});
};
this.handleDayOpen = function (value) {
var props = _objectWithoutProperties(_this4.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 || !value.leaveDay && props.iSleave) {
return;
}
if (flag) {
_this4.setState({
beginDay: day,
endDay: day
});
} else {
_this4.setState({
beginDay: returnMinValue(_this4.state.beginDay, day),
endDay: returnMaxValue(_this4.state.endDay, day)
});
}
flag = !flag;
};
this.handleDayClose = function () {
_this4.setState({
focusState: false,
dateOpen: false
});
};
this.handleDaySubmit = function () {
var value = _this4.state.beginDay == _this4.state.endDay ? _this4.state.beginDay : _this4.state.beginDay + ' \u81F3 ' + _this4.state.endDay;
var bdTime = new Date(_this4.state.beginDay.replace(/-/g, '/') + " 00:00:00").getTime();
var edTime = new Date(_this4.state.endDay.replace(/-/g, '/') + " 00:00:00").getTime();
var arr = [],
leaveDaysArr = _this4.state.leaveDaysArr,
leaveDays = _this4.state.leaveDays;
if (_this4.props.iSleave) {
for (var i = leaveDaysArr.indexOf(_this4.state.beginDay); i <= leaveDaysArr.indexOf(_this4.state.endDay); i++) {
arr.push(leaveDays[i]);
}
} else {
for (var i = bdTime; i <= edTime; i += 86400000) {
arr.push(_utilsFy.DateFormat.yyyy_MM_dd(new Date(i)));
}
}
console.log(arr);
_this4.props.getValue && _this4.props.getValue("dateFieldRange", _this4.props.inputName, value, arr);
_this4.setState({
focusState: false,
dateOpen: false
});
};
this.handleDayClear = function () {
_this4.setState({
beginDay: "",
beginDayTemp: "",
endDay: "",
endDayTemp: ""
});
};
this.inputChangeFn = function (name, e) {
var value = e.target.value,
props = _objectWithoutProperties(_this4.props, []);
if (dateReg.test(value)) {
/*满足日期正则*/
if (props.iSleave && _this4.state.leaveDaysArr.in_array(value) || !props.iSleave) {
_this4.setState({
beginDay: returnMinValue(_this4.state[name], value),
endDay: returnMaxValue(_this4.state[name], value),
date: new Date(returnMinValue(_this4.state[name], value))
});
}
} else {
if (name == "endDay") {
_this4.setState({
beginDay: "",
beginDayTemp: value
});
} else {
_this4.setState({
endDay: "",
endDayTemp: value
});
}
}
};
this.showDate = function () {
if (_this4.props.disabled) return;
_this4.setState({ dateOpen: true });
};
this.onfocus = function (e) {
_this4.setState({ focusState: true, dateOpen: true });
};
this.onchange = function (e) {
_this4.props.getValue && _this4.props.getValue("input", _this4.props.inputName, e.target.value.trim());
};
};
exports.default = DateField;
//# sourceMappingURL=dateFieldRange.js.map