@beisen/ethos
Version:
beisencloud pc react components
562 lines (518 loc) • 22 kB
JavaScript
'use strict';
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _DatePicker = require('./DatePicker');
var _DatePicker2 = _interopRequireDefault(_DatePicker);
var _commonLabel = require('../common-label');
var _commonLabel2 = _interopRequireDefault(_commonLabel);
require('./index.scss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var RangePicker = _DatePicker2.default.RangePicker;
var MonthPicker = _DatePicker2.default.MonthPicker;
var YearPicker = _DatePicker2.default.YearPicker;
var defaultTranslation = {
localeName: 'zh_CN'
};
var DateTime = (_temp = _class = function (_Component) {
(0, _inherits3.default)(DateTime, _Component);
function DateTime(props) {
(0, _classCallCheck3.default)(this, DateTime);
var _this = (0, _possibleConstructorReturn3.default)(this, (DateTime.__proto__ || (0, _getPrototypeOf2.default)(DateTime)).call(this, props));
_this.renderCloseIcon = function () {
if (_this.props.showOutDel) {
return _react2.default.createElement('span', { ref: 'DateTimeClose', style: { "display": "none" }, className: 'sys-icon-close date-time__input-close', onClick: _this.clearData });
} else {
return null;
}
};
_this.state = {
value: "",
active: props.isActive ? props.isActive : false,
isActiveStyle: false,
isChange: false,
isClear: false
};
_this.clearData = _this.clearData.bind(_this);
_this.onChange = _this.onChange.bind(_this);
_this.changeActive = _this.changeActive.bind(_this);
_this.disabledDate = _this.disabledDate.bind(_this);
_this.headInputMouseOver = _this.headInputMouseOver.bind(_this);
_this.headInputMouseOut = _this.headInputMouseOut.bind(_this);
_this.hiddenClose = _this.hiddenClose.bind(_this);
_this.handleFocus = _this.handleFocus.bind(_this);
_this.handleBlur = _this.handleBlur.bind(_this);
_this.changeActiveStyle = _this.changeActiveStyle.bind(_this);
return _this;
}
(0, _createClass3.default)(DateTime, [{
key: 'onChange',
value: function onChange(value) {
var _props = this.props,
dateStyle = _props.dateStyle,
onChange = _props.onChange;
var type = dateStyle;
if (dateStyle.indexOf("RangePicker") > -1) {
var _value = (0, _slicedToArray3.default)(value, 2),
startValue = _value[0],
endValue = _value[1];
if (!startValue || !endValue || this.disabledDate(startValue) || this.disabledDate(endValue)) {
return;
}
}
if (value) {
onChange && onChange(value, true);
type.indexOf("RangePicker") > -1 ? this.setState({ value: [this.formatValue(value[0]), this.formatValue(value[1])], isChange: true, isClear: false }) : this.setState({ value: this.formatValue(value), isChange: true, isClear: false });
} else {
this.setState({ value: '', isChange: true, isClear: false });
onChange && onChange('', true);
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps) this.setState({ active: nextProps.isActive, value: nextProps.value });
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
var _props2 = this.props,
value = _props2.value,
defaultValue = _props2.defaultValue;
this.setState({ value: value.length > 0 ? value : defaultValue });
}
}, {
key: 'formatValue',
value: function formatValue(value) {
var tempDate = new Date(value);
var tempYear = tempDate.getFullYear().toString();
var tempMonth = (tempDate.getMonth() + 1).toString();
var tempDay = tempDate.getDate().toString();
var tempHours = tempDate.getHours().toString();
var tempMinutes = tempDate.getMinutes().toString();
var tempSeconds = tempDate.getSeconds().toString();
tempMonth = tempMonth.length == 1 ? '0' + tempMonth : tempMonth;
tempDay = tempDay.length == 1 ? '0' + tempDay : tempDay;
tempHours = tempHours.length == 1 ? '0' + tempHours : tempHours;
tempMinutes = tempMinutes.length == 1 ? '0' + tempMinutes : tempMinutes;
tempSeconds = tempSeconds.length == 1 ? '0' + tempSeconds : tempSeconds;
var formatData = this.props.format.indexOf('-') >= 0 ? tempYear + "-" + tempMonth + "-" + tempDay : tempYear + "/" + tempMonth + "/" + tempDay;
return formatData + " " + tempHours + ":" + tempMinutes + ":" + tempSeconds;
}
}, {
key: 'disabledDate',
value: function disabledDate(current) {
switch (this.props.disabledDate) {
case "all":
return current;
case "beforeNotToday":
if (current) {
var tempDate = new Date(current.getTime());
var tempYear = tempDate.getFullYear();
var tempMonth = tempDate.getMonth() + 1;
var tempDay = tempDate.getDate();
if (tempYear == new Date().getFullYear() && tempMonth == new Date().getMonth() + 1 && tempDay == new Date().getDate()) {
return false;
} else {
return current && current.getTime() - 60 < Date.now() - 86400;
}
}
case "beforeToday":
return current && current.getTime() < Date.now();
case "afterToday":
return current && current.getTime() > Date.now();
case "lasttwoweeks":
return !(current.getTime() > Date.now() - 1209600000 && current.getTime() < Date.now());
default:
return !current;
}
}
}, {
key: 'clearData',
value: function clearData(event) {
var _props3 = this.props,
dateStyle = _props3.dateStyle,
onChange = _props3.onChange;
var clearValue = dateStyle == "RangePicker" ? [] : "";
this.setState({ value: clearValue, isClear: true });
this.hiddenClose();
onChange && onChange(dateStyle == "RangePicker" ? [] : "", true);
}
}, {
key: 'changeActive',
value: function changeActive(val) {
this.props.changeActive && this.props.changeActive(val);
}
}, {
key: 'headInputMouseOver',
value: function headInputMouseOver(event) {
var dom = (0, _reactDom.findDOMNode)(this.refs.DateTimeClose);
if (dom && dom.style.display == 'block') {
return;
} else {
this.changeStyle(true);
}
}
}, {
key: 'headInputMouseOut',
value: function headInputMouseOut(event) {
var node = event.target;
if (this.props.dateStyle.match(/RangePicker/) && node.className === 'form-item__control form-item__control_is-active') {
console.log(event.target.className);
this.changeStyle(false);
return;
}
if (node.nodeName.toLowerCase() == 'span' && node.className.indexOf("date-time__input-close") >= 0) {
return;
} else {
this.changeStyle(false);
}
}
}, {
key: 'handleFocus',
value: function handleFocus(event) {
this.props.changeActive(true);
}
}, {
key: 'handleBlur',
value: function handleBlur(event) {
this.props.changeActive(false);
}
}, {
key: 'hiddenClose',
value: function hiddenClose() {
this.changeStyle(false);
}
}, {
key: 'changeActiveStyle',
value: function changeActiveStyle() {
this.setState({ isActiveStyle: !this.state.isActiveStyle });
}
}, {
key: 'changeStyle',
value: function changeStyle(bool) {
var dateTime = this.refs.dateTimeRef;
if (!dateTime) return;
var close = dateTime.querySelector('.date-time__input-close');
if (!close) return;
var dom = document.getElementsByClassName('ant-calendar-picker-open')[0];
var _props4 = this.props,
readonly = _props4.readonly,
disabled = _props4.disabled,
showStatus = _props4.showStatus;
var _state = this.state,
value = _state.value,
active = _state.active;
var displayStyle = void 0;
if (showStatus === 'searchBtn') {
displayStyle = '';
} else {
if (!readonly && !disabled && value.length != 0 && (bool || dom && active)) {
displayStyle = 'block';
} else {
displayStyle = 'none';
}
}
close.style.display = displayStyle;
}
}, {
key: 'render',
value: function render() {
var _props5 = this.props,
showStatus = _props5.showStatus,
hidden = _props5.hidden,
disabled = _props5.disabled,
readonly = _props5.readonly,
title = _props5.title,
format = _props5.format,
timeValue = _props5.timeValue,
cmp_id = _props5.cmp_id,
placeholder = _props5.placeholder,
showTime = _props5.showTime,
dateStyle = _props5.dateStyle,
startPlaceholder = _props5.startPlaceholder,
endPlaceholder = _props5.endPlaceholder,
today = _props5.today,
now = _props5.now,
style = _props5.style,
errorStatus = _props5.errorStatus,
defaultValue = _props5.defaultValue,
value = _props5.value,
errorMsg = _props5.errorMsg,
open = _props5.open,
lablePos = _props5.lablePos,
translation = _props5.translation;
var active = this.state.active;
var timeLabel = showStatus != 'searchBtn' && showStatus != 'search' && title && title.length > 0 ? _react2.default.createElement(_commonLabel2.default, this.props) : "";
var tempErrorMsg = "请填写正确信息",
errorContent = void 0;
if (errorStatus) {
tempErrorMsg = errorMsg.length > 0 ? errorMsg : tempErrorMsg;
errorContent = _react2.default.createElement(
'div',
{ className: 'base-input-show ' + (showStatus == 'search' ? 'search-label-margin' : '') },
_react2.default.createElement(
'span',
{ className: 'base-input-show-text input-pFoucus input-pError ' },
tempErrorMsg
)
);
}
var IsActive = { IsActive: active };
var tempValue = value != undefined ? { value: this.state.value } : {};
var tempDefaultValue = defaultValue.length > 0 ? { defaultValue: defaultValue } : {};
var disabledTime = disabled ? " datetime-disabled" : "";
var readonlyTime = readonly ? " datetime-readonly" : "";
var tempDisabled = disabled ? true : readonly ? true : false;
if (hidden) {
return _react2.default.createElement('div', null);
} else {
switch (dateStyle) {
case "RangePicker":
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
// onClick={this.headInputMouseOver}
, onMouseOver: this.headInputMouseOver,
onMouseOut: this.headInputMouseOut },
_react2.default.createElement(RangePicker, (0, _extends3.default)({
size: ""
}, tempValue, IsActive, {
type: dateStyle,
defaultValue: defaultValue,
showTime: showTime,
format: format,
disabled: tempDisabled,
onChange: this.onChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
placeholder: placeholder,
disabledDate: this.disabledDate,
style: style,
errorStatus: errorStatus,
changeActive: this.changeActive,
startPlaceholder: startPlaceholder,
endPlaceholder: endPlaceholder,
now: now,
readonly: readonly,
today: today,
showStatus: showStatus,
lablePos: lablePos,
localeName: translation.localeName,
ref: 'rangePickerRef'
})),
this.renderCloseIcon(),
errorContent
)
);
case 'RangePickerMonth':
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '') },
_react2.default.createElement(RangePicker, (0, _extends3.default)({
size: ""
}, tempValue, IsActive, {
type: 'RangePickerMonth',
defaultValue: defaultValue,
showTime: showTime,
format: format,
disabled: tempDisabled,
onChange: this.onChange,
disabledDate: this.disabledDate,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
placeholder: placeholder,
style: style,
errorStatus: errorStatus,
changeActive: this.changeActive,
startPlaceholder: startPlaceholder,
endPlaceholder: endPlaceholder,
now: now,
readonly: readonly,
today: today,
showStatus: showStatus,
lablePos: lablePos,
localeName: translation.localeName
})),
errorContent
)
);
case 'RangePickerYear':
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '') },
_react2.default.createElement(RangePicker, (0, _extends3.default)({
size: ""
}, tempValue, IsActive, {
type: 'RangePickerYear',
defaultValue: defaultValue,
showTime: showTime,
format: format,
disabled: tempDisabled,
onChange: this.onChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
placeholder: placeholder,
disabledDate: this.disabledDate,
style: style,
errorStatus: errorStatus,
changeActive: this.changeActive,
startPlaceholder: startPlaceholder,
endPlaceholder: endPlaceholder,
now: now,
lablePos: lablePos,
readonly: readonly,
today: today,
showStatus: showStatus,
localeName: translation.localeName
})),
errorContent
)
);
case "MonthPicker":
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''), onMouseOver: this.headInputMouseOver,
onMouseOut: this.headInputMouseOut },
_react2.default.createElement(MonthPicker, (0, _extends3.default)({
size: "",
type: dateStyle,
defaultValue: defaultValue
}, tempValue, IsActive, {
format: format,
disabledDate: this.disabledDate,
disabled: tempDisabled,
onChange: this.onChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
hiddenClose: this.hiddenClose,
changeActive: this.changeActive,
placeholder: placeholder,
style: style,
readonly: readonly,
lablePos: lablePos,
errorStatus: errorStatus,
showStatus: showStatus,
localeName: translation.localeName
})),
this.renderCloseIcon(),
errorContent
)
);
case 'YearPicker':
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''), onMouseOver: this.headInputMouseOver,
onMouseOut: this.headInputMouseOut },
_react2.default.createElement(YearPicker, (0, _extends3.default)({
size: "",
yearPicker: true,
defaultValue: defaultValue,
type: dateStyle
}, tempValue, IsActive, {
format: format,
disabled: tempDisabled,
disabledDate: this.disabledDate,
onChange: this.onChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
changeActive: this.changeActive,
hiddenClose: this.hiddenClose,
placeholder: placeholder,
style: style,
readonly: readonly,
lablePos: lablePos,
errorStatus: errorStatus,
showStatus: showStatus,
localeName: translation.localeName
})),
this.renderCloseIcon(),
errorContent
)
);
default:
return _react2.default.createElement(
'div',
{ ref: 'dateTimeRef', className: 'date-time__content form-item ' + disabledTime + readonlyTime },
timeLabel,
_react2.default.createElement(
'div',
{ tabIndex: '0', className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''), onMouseOver: this.headInputMouseOver,
onMouseOut: this.headInputMouseOut },
_react2.default.createElement(_DatePicker2.default, (0, _extends3.default)({
size: ""
}, IsActive, tempDefaultValue, tempValue, {
showTime: showTime //由于性能打点需要而添加
, dateStyle: dateStyle //由于性能打点需要而添加
, cmp_id: cmp_id //由于性能打点需要而添加
, format: format,
timeValue: timeValue,
disabled: tempDisabled,
changeActive: this.changeActive,
onChange: this.onChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
disabledDate: this.disabledDate,
hiddenClose: this.hiddenClose,
placeholder: placeholder,
showStatus: showStatus,
readonly: readonly,
lablePos: lablePos,
open: open,
style: style,
errorStatus: errorStatus,
changeActiveStyle: this.changeActiveStyle,
localeName: translation.localeName
})),
this.renderCloseIcon(),
errorContent
)
);
}
}
}
}]);
return DateTime;
}(_react.Component), _class.defaultProps = {
placeholder: "请选择",
showOutDel: true,
dateStyle: 'DatePicker',
changeActive: function changeActive() {},
translation: defaultTranslation
}, _temp);
module.exports = DateTime;