react-form-fy
Version:
516 lines (461 loc) • 27.9 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 _reactUiSvg = require("react-ui-svg");
var svg = _interopRequireWildcard(_reactUiSvg);
var _utilsFy = require("utils-fy");
var _publicStyle = require("./publicStyle");
var _theme = require("./theme");
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 _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; } /**
* gufuyan
* @content 日期控件
* @date 2017-05-02 1.0版本
* @param props
* @constructor
*/
var propTypes = {
inputName: _react.PropTypes.string.isRequired,
showFormText: _react.PropTypes.bool,
svgName: _react.PropTypes.string,
formText: _react.PropTypes.string,
hintText: _react.PropTypes.string,
getValue: _react.PropTypes.func.isRequired,
required: _react.PropTypes.bool,
dataObj: _react.PropTypes.object.isRequired,
textWidth: _react.PropTypes.string,
valueWidth: _react.PropTypes.string,
textIconWidth: _react.PropTypes.string,
textIconHeight: _react.PropTypes.string,
regexText: _react.PropTypes.string,
disabled: _react.PropTypes.bool,
maxDate: _react.PropTypes.string,
minDate: _react.PropTypes.string
};
var getTimestamp = function getTimestamp(str) {
var year = parseInt(str.split("-")[0]);
var month = parseInt(str.split("-")[1]);
var day = parseInt(str.split("-")[2]);
return new Date(year, month - 1, day, 0, 0, 0).getTime();
};
var DateFy = function (_Component) {
_inherits(DateFy, _Component);
function DateFy(props) {
_classCallCheck(this, DateFy);
var _this = _possibleConstructorReturn(this, (DateFy.__proto__ || Object.getPrototypeOf(DateFy)).call(this, props));
_initialiseProps.call(_this);
_this.state = {
showDate: false,
date: new Date(),
showMonths: false,
showYears: false,
chooseDate: '',
moveDay: new Date(),
moveYear: new Date(),
showHintText: false,
errorText: '该值不能为空！',
initsState: 0,
styles: {
publicStyles: (0, _publicStyle.publicStyles)(_this.props.themeObj),
inputStyle: (0, _publicStyle.inputStyle)(_this.props.themeObj),
dateStyles: (0, _publicStyle.dateStyles)(_this.props.themeObj),
dateAmi: (0, _publicStyle.dateAmi)(_this.props.themeObj)
}
};
return _this;
}
_createClass(DateFy, [{
key: "render",
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []);
var Svg = svg[props.svgName];
var dateTitle = ['一', '二', '三', '四', '五', '六', '日'];
var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var years = [];
for (var y = 1980; y <= 2030; y++) {
years.push(y);
}
var isLeap = function isLeap(year) {
return year % 100 == 0 ? year % 400 == 0 ? 1 : 0 : year % 4 == 0 ? 1 : 0;
};
var date = props.minDate && this.state.date.getTime() - new Date(props.minDate).getTime() <= 0 ? new Date(props.minDate) : this.state.date,
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
monthFirstDay = new Date(year + '/' + month + '/' + 1),
monthFirstWeek = monthFirstDay.getDay() == 0 ? 7 : monthFirstDay.getDay(),
monthDays = [31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var listDomDays = [],
dayNum = 0,
monthMaxDay = monthDays[month - 1];
for (var i = 1; i <= 42; i++) {
if (i < monthFirstWeek) {
listDomDays.push(0);
continue;
}
if (i >= monthFirstWeek && dayNum < monthMaxDay) {
dayNum++;
listDomDays.push(dayNum);
continue;
}
if (i > monthMaxDay) {
listDomDays.push(0);
continue;
}
}
var _value = props.dataObj[props.inputName] ? props.dataObj[props.inputName] : '';
var _showHintText = _value ? false : true;
var required = props.required || false;
var errorState = false;
if (required) {
if (props.dataObj.required) {
validate(_value);
} else {
if (this.state.initsState == 1) {
validate(_value);
}
}
}
function validate(value) {
if (props.dataObj[props.inputName]) {
errorState = false;
return;
}
if (!value) {
errorState = true;
return;
}
if (value) {
errorState = false;
return;
}
}
var styles = eval('(' + JSON.stringify(this.state.styles) + ')');
styles.publicStyles.formText.width = props.textWidth || '7.5rem';
styles.publicStyles.formVInput.width = props.valueWidth || '14.375rem';
var tipDef = JSON.stringify(styles.inputStyle.tipDef),
tipDisabled = JSON.stringify(styles.inputStyle.tipDisabled);
var tipOne = {};
props.disabled ? tipOne = _utilsFy.Obj.merge(eval('(' + tipDef + ')'), eval('(' + tipDisabled + ')')) : tipOne = eval('(' + tipDef + ')');
var tipTwo = eval('(' + tipDef + ')');
var publicStyles = styles.publicStyles,
inputStyle = styles.inputStyle,
dateStyles = styles.dateStyles,
dateAmi = styles.dateAmi;
return _react2.default.createElement(
"div",
{ style: publicStyles.formBox },
props.showFormText == false ? null : _react2.default.createElement(
"div",
{ style: publicStyles.formText },
props.svgName ? _react2.default.createElement(Svg, { fill: _theme.svgFill,
width: props.textIconWidth || _theme.formTextIconSize / 16 + "rem",
height: props.textIconHeight || _theme.formTextIconSize / 16 + "rem",
style: publicStyles.formSvg }) : null,
_react2.default.createElement(
"span",
null,
props.formText || "i am date",
required ? _react2.default.createElement(
"label",
{ style: publicStyles.formRequired },
"*"
) : null
)
),
_react2.default.createElement(
"div",
{ style: publicStyles.formVInput },
_react2.default.createElement(
"div",
{ onClick: this.showDateFn.bind(this, this.state.chooseDate) },
_showHintText ? _react2.default.createElement(
"span",
{ style: publicStyles.inputHintText },
props.hintText
) : null,
_react2.default.createElement("input", { style: inputStyle.inputBox,
name: props.inputName,
value: _value.replace(/\//g, '-'),
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 : null
),
this.state.showDate == true ? _react2.default.createElement(
"div",
{ style: dateStyles.dateDialogBox },
_react2.default.createElement("div", { style: dateStyles.dateBack, onClick: this.hideDateFn }),
_react2.default.createElement(
"div",
{ style: dateStyles.dateBox },
_react2.default.createElement(
"div",
{ style: dateStyles.dateHead },
_react2.default.createElement(
"p",
{ style: dateStyles.dateHeadNear,
onClick: this.chooseYear.bind(this, year) },
year
),
_react2.default.createElement(
"span",
{ style: dateStyles.dateHeadMonth },
month,
"\u6708",
day,
"\u65E5"
)
),
this.state.showYears == true ? _react2.default.createElement(
"div",
{ style: dateStyles.yearListBox },
years.map(function (value, index) {
return _react2.default.createElement(
"span",
{ key: index, style: _utilsFy.DateFormat.yyyy_MM_dd(_this2.state.moveYear).split("-")[0] == value ? dateStyles.yearListSelected : dateStyles.yearListDefault,
onClick: _this2.nowYear.bind(_this2, value),
onMouseMove: _this2.moveDate.bind(_this2, value) },
value
);
})
) : _react2.default.createElement(
"div",
null,
_react2.default.createElement(
"div",
{ style: dateStyles.chooseMonthBox },
_react2.default.createElement(
"span",
{ onClick: this.upperMonth.bind(this, year, month),
style: dateStyles.chooseMonthBtn },
_react2.default.createElement(svg.Left, {
fill: props.minDate && (getTimestamp(props.minDate) > getTimestamp(year + "-" + month + "-01") || getTimestamp(props.minDate) == getTimestamp(year + "-" + month + "-01")) ? "#ccc" : "#000",
width: "1.25rem", height: "1.25rem" })
),
_react2.default.createElement(
"label",
{ onClick: this.chooseMonth,
style: dateStyles.chooseMonthBtn },
month,
"\u6708"
),
_react2.default.createElement(
"span",
{ onClick: this.nextMonth.bind(this, year, month),
style: dateStyles.chooseMonthBtn },
_react2.default.createElement(svg.Right, {
fill: props.maxDate && getTimestamp(props.maxDate) < getTimestamp(year + "-" + (month + 1) + "-01") ? "#ccc" : "#000",
width: "1.25rem", height: "1.25rem" })
)
),
this.state.showMonths == true ? _react2.default.createElement(
"div",
{ style: dateStyles.monthListBox },
months.map(function (value, index) {
return _react2.default.createElement(
"span",
{ key: index, style: dateStyles.monthList,
onClick: _this2.nowMonth.bind(_this2, year, index + 1) },
value
);
})
) : _react2.default.createElement(
"div",
{ style: dateStyles.calendarBox },
_react2.default.createElement(
"div",
{ style: dateStyles.dateTitle },
dateTitle.map(function (value, index) {
return _react2.default.createElement(
"span",
{ key: index },
value
);
})
),
_react2.default.createElement(
"div",
{ style: dateStyles.dateContBox },
listDomDays.map(function (value, index) {
return _react2.default.createElement(
"div",
{ style: dateStyles.dateContDay, key: index },
value == 0 ? null : _react2.default.createElement(
"div",
{ style: dateStyles.dateTextBox,
onMouseMove: _this2.moveDay.bind(_this2, year, month, value),
onMouseLeave: _this2.leaveDay.bind(_this2, year, month, day),
onClick: _this2.chooseDay.bind(_this2, year, month, value)
},
_react2.default.createElement(
"label",
{ style: props.minDate && getTimestamp(props.minDate) > getTimestamp(year + "-" + month + "-" + value) || props.maxDate && getTimestamp(props.maxDate) < getTimestamp(year + "-" + month + "-" + value) ? dateAmi.disabled : _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + day)) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + value)) ? dateAmi.dayTextOn : _utilsFy.DateFormat.yyyy_MM_dd(_this2.state.moveDay) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + value)) ? dateAmi.dayTextOn : dateAmi.dayTextUp },
value
),
_react2.default.createElement("span", { style: _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + day)) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + value)) ? dateAmi.dayBackOn : _utilsFy.DateFormat.yyyy_MM_dd(_this2.state.moveDay) == _utilsFy.DateFormat.yyyy_MM_dd(new Date(year + "/" + month + "/" + value)) ? dateAmi.dayBackMove : dateAmi.dayBackDefault })
)
);
})
)
)
),
_react2.default.createElement(
"div",
{ style: dateStyles.dateBtnBox },
_react2.default.createElement(
"span",
{ style: dateStyles.dateBtn,
onClick: this.submitDate.bind(this, year, month, day) },
"\u63D0\u4EA4"
),
_react2.default.createElement(
"span",
{ style: dateStyles.dateBtn, onClick: this.hideDateFn },
"\u8FD4\u56DE"
)
)
)
) : null
)
);
}
}]);
return DateFy;
}(_react.Component);
var _initialiseProps = function _initialiseProps() {
var _this3 = this;
this.showDateFn = function (chooseDate) {
if (_this3.props.disabled) return;
_this3.setState({
showDate: true,
initsState: 1
});
};
this.hideDateFn = function () {
_this3.setState({ showDate: false });
};
this.moveDate = function (year) {
_this3.setState({
moveYear: new Date(year + "/" + 1 + "/" + 1)
});
};
this.moveDay = function (year, month, day) {
if (_this3.props.minDate && getTimestamp(_this3.props.minDate) > getTimestamp(year + "-" + month + "-" + day) || _this3.props.maxDate && getTimestamp(_this3.props.maxDate) < getTimestamp(year + "-" + month + "-" + day)) {
return false;
} else {
_this3.setState({
moveDay: new Date(year + "/" + month + "/" + day)
});
}
};
this.leaveDay = function (year, month, day) {
_this3.setState({
moveDay: new Date(year + "/" + month + "/" + day)
});
};
this.chooseYear = function () {
if (_this3.props.minDate || _this3.props.maxDate) {
return false;
} else {
_this3.setState({
showYears: true
});
}
};
this.nowYear = function (year) {
_this3.setState({
date: new Date(year + "/" + 1 + "/" + 1),
showYears: false
});
};
this.chooseMonth = function (year, month) {
if (_this3.props.minDate && getTimestamp(_this3.props.minDate) > getTimestamp(year + "-" + month + "-" + day) || _this3.props.maxDate && getTimestamp(_this3.props.maxDate) < getTimestamp(year + "-" + month + "-" + day)) {
return false;
} else {
_this3.setState({
showMonths: true
});
}
};
this.nowMonth = function (year, month) {
_this3.setState({
date: new Date(year + "/" + month + "/" + 1),
showMonths: false
});
};
this.nextMonth = function (year, month) {
if (_this3.props.maxDate && getTimestamp(_this3.props.maxDate) < getTimestamp(year + "-" + (month + 1) + "-01")) {
return false;
} else {
var year_n = month + 1 == 13 ? year + 1 : year,
month_n = year_n == year ? month + 1 : 1;
_this3.setState({
date: new Date(year_n + "/" + month_n + "/" + 1),
showMonths: false
});
}
};
this.upperMonth = function (year, month) {
if (_this3.props.minDate && (getTimestamp(_this3.props.minDate) > getTimestamp(year + "-" + month + "-01") || getTimestamp(_this3.props.minDate) == getTimestamp(year + "-" + month + "-01"))) {
return false;
} else {
var year_n = month - 1 == 0 ? year - 1 : year,
month_n = year_n == year ? month - 1 : 12;
_this3.setState({
date: new Date(year_n + "/" + month_n + "/" + 1),
showMonths: false
});
}
};
this.chooseDay = function (year, month, day) {
if (_this3.props.minDate && getTimestamp(_this3.props.minDate) > getTimestamp(year + "-" + month + "-" + day) || _this3.props.maxDate && getTimestamp(_this3.props.maxDate) < getTimestamp(year + "-" + month + "-" + day)) {
return false;
} else {
_this3.setState({
date: new Date(year + "/" + month + "/" + day)
});
}
};
this.submitDate = function (year, month, day) {
var props = _this3.props;
var formatTen = function formatTen(num) {
return num > 9 ? num + "" : "0" + num;
};
var chooseDate = year + "-" + formatTen(month) + "-" + formatTen(day);
if (props.minDate) {
if (new Date(chooseDate).getTime() < new Date(props.minDate).getTime()) return;
}
if (props.maxDate) {
if (new Date(chooseDate).getTime() > new Date(props.maxDate).getTime()) return;
}
_this3.setState({
chooseDate: year + "/" + formatTen(month) + "/" + formatTen(day),
showHintText: false
});
props.getValue && props.getValue('date', props.inputName, chooseDate);
_this3.hideDateFn();
};
};
DateFy.propTypes = propTypes;
exports.default = DateFy;
//# sourceMappingURL=dateField.js.map