@txdfe/at
Version:
一个设计体系组件库
845 lines (841 loc) • 39.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames8 = _interopRequireDefault(require("classnames"));
var _moment = _interopRequireDefault(require("moment"));
var _overlay = _interopRequireDefault(require("../overlay"));
var _input = _interopRequireDefault(require("../input"));
var _icon = _interopRequireDefault(require("../icon"));
var _rangeCalendar = _interopRequireDefault(require("../calendar/range-calendar"));
var _panel = _interopRequireDefault(require("../time-picker/panel"));
var _zhCn = _interopRequireDefault(require("../locale/zh-cn"));
var _util = require("../util");
var _util2 = require("./util");
var _panelFooter = _interopRequireDefault(require("./module/panel-footer"));
var _excluded = ["prefix", "rtl", "defaultVisibleMonth", "onVisibleMonthChange", "showTime", "disabledDate", "footerRender", "label", "ranges", "state", "size", "disabled", "hasClear", "popupTriggerType", "popupAlign", "popupContainer", "popupStyle", "popupClassName", "popupProps", "followTrigger", "className", "locale", "inputProps", "triggerRender", "dateCellRender", "monthCellRender", "yearCellRender", "startDateInputAriaLabel", "startTimeInputAriaLabel", "endDateInputAriaLabel", "endTimeInputAriaLabel", "inline"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Popup = _overlay["default"].Popup;
function mapInputStateName(name) {
return {
startValue: 'startDateInputStr',
endValue: 'endDateInputStr',
startTime: 'startTimeInputStr',
endTime: 'endTimeInputStr'
}[name];
}
function mapTimeToValue(name) {
return {
startTime: 'startValue',
endTime: 'endValue'
}[name];
}
function getFormatValues(values, format) {
if (!Array.isArray(values)) {
return [null, null];
}
return [(0, _util2.formatDateValue)(values[0], format), (0, _util2.formatDateValue)(values[1], format)];
}
/**
* DatePicker.RangePicker
*/
var RangePicker = exports["default"] = /*#__PURE__*/function (_Component) {
function RangePicker(props, context) {
var _this;
_classCallCheck(this, RangePicker);
_this = _callSuper(this, RangePicker, [props, context]);
// 获取底层的overlay实例
_defineProperty(_this, "getOverlay", function () {
return _this.popup && _this.popup.getInstance() && _this.popup.getInstance().getOverlay();
});
_defineProperty(_this, "onValueChange", function (values) {
var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
var ret;
if (!values.length || !_this.inputAsString) {
ret = values;
} else {
ret = [values[0] ? values[0].format(_this.dateTimeFormat) : null, values[1] ? values[1].format(_this.dateTimeFormat) : null];
}
_this.props[handler](ret);
});
_defineProperty(_this, "onSelectCalendarPanel", function (value) {
var _this$props = _this.props,
showTime = _this$props.showTime,
resetTime = _this$props.resetTime;
var _this$state = _this.state,
prevActiveDateInput = _this$state.activeDateInput,
prevStartValue = _this$state.startValue,
prevEndValue = _this$state.endValue;
var newState = {
activeDateInput: prevActiveDateInput,
inputing: false
};
var newValue = value;
switch (prevActiveDateInput) {
case 'startValue':
{
if (!prevEndValue || value.valueOf() <= prevEndValue.valueOf()) {
newState.activeDateInput = 'endValue';
}
if (showTime) {
if (!prevStartValue) {
// 第一次选择，如果设置了时间默认值，则使用该默认时间
if (showTime.defaultValue) {
var defaultTimeValue = (0, _util2.formatDateValue)(showTime.defaultValue, _this.timeFormat);
newValue = (0, _util2.resetValueTime)(value, defaultTimeValue);
}
} else if (!resetTime) {
// 非第一次选择，如果开启了 resetTime ，则记住之前选择的时间值
newValue = (0, _util2.resetValueTime)(value, prevStartValue);
}
}
newState.startValue = newValue;
if (prevEndValue && value.valueOf() > prevEndValue.valueOf()) {
newState.endValue = null;
newState.activeDateInput = 'endValue';
}
break;
}
case 'endValue':
if (!prevStartValue) {
newState.activeDateInput = 'startValue';
}
if (showTime) {
if (!prevEndValue) {
// 第一次选择，如果设置了时间默认值，则使用该默认时间
if (showTime.defaultValue) {
var _defaultTimeValue = (0, _util2.formatDateValue)(showTime.defaultValue, _this.timeFormat);
newValue = (0, _util2.resetValueTime)(value, _defaultTimeValue);
}
} else if (!resetTime) {
// 非第一次选择，如果开启了 resetTime ，则记住之前选择的时间值
newValue = (0, _util2.resetValueTime)(value, prevEndValue);
}
}
newState.endValue = newValue;
// 选择了一个比开始日期更小的结束日期，此时表示用户重新选择了
if (prevStartValue && value.valueOf() < prevStartValue.valueOf()) {
newState.startValue = value;
newState.endValue = null;
}
break;
}
var newStartValue = 'startValue' in newState ? newState.startValue : prevStartValue;
var newEndValue = 'endValue' in newState ? newState.endValue : prevEndValue;
// 受控状态选择不更新值
if ('value' in _this.props) {
delete newState.startValue;
delete newState.endValue;
}
_this.setState(newState);
_this.onValueChange([newStartValue, newEndValue]);
});
_defineProperty(_this, "clearRange", function () {
_this.setState({
startDateInputStr: '',
endDateInputStr: '',
startTimeInputStr: '',
endTimeInputStr: ''
});
if (!('value' in _this.props)) {
_this.setState({
startValue: null,
endValue: null
});
}
_this.onValueChange([]);
});
_defineProperty(_this, "onDateInputChange", function (inputStr, e, eventType) {
if (eventType === 'clear' || !inputStr) {
e.stopPropagation();
_this.clearRange();
} else {
var stateName = mapInputStateName(_this.state.activeDateInput);
_this.setState(_defineProperty(_defineProperty({}, stateName, inputStr), "inputing", _this.state.activeDateInput));
}
});
_defineProperty(_this, "onDateInputBlur", function () {
var stateName = mapInputStateName(_this.state.activeDateInput);
var dateInputStr = _this.state[stateName];
if (dateInputStr) {
var _this$props2 = _this.props,
format = _this$props2.format,
disabledDate = _this$props2.disabledDate;
var parsed = (0, _moment["default"])(dateInputStr, format, true);
_this.setState(_defineProperty(_defineProperty({}, stateName, ''), "inputing", false));
if (parsed.isValid() && !disabledDate(parsed, 'date')) {
var valueName = _this.state.activeDateInput;
var newValue = parsed;
_this.handleChange(valueName, newValue);
}
}
});
_defineProperty(_this, "onDateInputKeyDown", function (e) {
var activeDateInput = _this.state.activeDateInput;
var stateName = mapInputStateName(activeDateInput);
var dateInputStr = _this.state[stateName];
var format = _this.props.format;
var dateStr = (0, _util2.onDateKeydown)(e, {
format: format,
value: _this.state[activeDateInput],
dateInputStr: dateInputStr
}, 'day');
if (!dateStr) return;
return _this.onDateInputChange(dateStr);
});
_defineProperty(_this, "onFocusDateInput", function (type) {
if (type !== _this.state.activeDateInput) {
_this.setState({
activeDateInput: type
});
}
if (_this.state.panel !== _util2.PANEL.DATE) {
_this.setState({
panel: _util2.PANEL.DATE
});
}
});
_defineProperty(_this, "onFocusTimeInput", function (type) {
if (type !== _this.state.activeDateInput) {
_this.setState({
activeDateInput: type
});
}
if (_this.state.panel !== _util2.PANEL.TIME) {
_this.setState({
panel: _util2.PANEL.TIME
});
}
});
_defineProperty(_this, "onSelectStartTime", function (value) {
if (!('value' in _this.props)) {
_this.setState({
startValue: value,
inputing: false,
activeDateInput: 'startTime'
});
}
if (value.valueOf() !== _this.state.startValue.valueOf()) {
_this.onValueChange([value, _this.state.endValue]);
}
});
_defineProperty(_this, "onSelectEndTime", function (value) {
if (!('value' in _this.props)) {
_this.setState({
endValue: value,
inputing: false,
activeDateInput: 'endTime'
});
}
if (value.valueOf() !== _this.state.endValue.valueOf()) {
_this.onValueChange([_this.state.startValue, value]);
}
});
_defineProperty(_this, "onTimeInputChange", function (inputStr) {
var stateName = mapInputStateName(_this.state.activeDateInput);
_this.setState(_defineProperty(_defineProperty({}, stateName, inputStr), "inputing", _this.state.activeDateInput));
});
_defineProperty(_this, "onTimeInputBlur", function () {
var stateName = mapInputStateName(_this.state.activeDateInput);
var timeInputStr = _this.state[stateName];
if (timeInputStr) {
var parsed = (0, _moment["default"])(timeInputStr, _this.timeFormat, true);
_this.setState(_defineProperty(_defineProperty({}, stateName, ''), "inputing", false));
if (parsed.isValid()) {
var hour = parsed.hour();
var minute = parsed.minute();
var second = parsed.second();
var valueName = mapTimeToValue(_this.state.activeDateInput);
var newValue = _this.state[valueName].clone().hour(hour).minute(minute).second(second);
_this.handleChange(valueName, newValue);
}
}
});
_defineProperty(_this, "onTimeInputKeyDown", function (e) {
var showTime = _this.props.showTime;
var activeDateInput = _this.state.activeDateInput;
var stateName = mapInputStateName(activeDateInput);
var timeInputStr = _this.state[stateName];
var _ref = _typeof(showTime) === 'object' ? showTime : {},
disabledMinutes = _ref.disabledMinutes,
disabledSeconds = _ref.disabledSeconds,
_ref$hourStep = _ref.hourStep,
hourStep = _ref$hourStep === void 0 ? 1 : _ref$hourStep,
_ref$minuteStep = _ref.minuteStep,
minuteStep = _ref$minuteStep === void 0 ? 1 : _ref$minuteStep,
_ref$secondStep = _ref.secondStep,
secondStep = _ref$secondStep === void 0 ? 1 : _ref$secondStep;
var unit = 'second';
if (disabledSeconds) {
unit = disabledMinutes ? 'hour' : 'minute';
}
var timeStr = (0, _util2.onTimeKeydown)(e, {
format: _this.timeFormat,
timeInputStr: timeInputStr,
value: _this.state[activeDateInput.indexOf('start') ? 'startValue' : 'endValue'],
steps: {
hour: hourStep,
minute: minuteStep,
second: secondStep
}
}, unit);
if (!timeStr) return;
_this.onTimeInputChange(timeStr);
});
_defineProperty(_this, "handleChange", function (valueName, newValue) {
if (!('value' in _this.props)) {
_this.setState(_defineProperty({}, valueName, newValue));
}
var startValue = valueName === 'startValue' ? newValue : _this.state.startValue;
var endValue = valueName === 'endValue' ? newValue : _this.state.endValue;
_this.onValueChange([startValue, endValue]);
});
_defineProperty(_this, "onVisibleChange", function (visible, type) {
if (!('visible' in _this.props)) {
_this.setState({
visible: visible
});
}
_this.props.onVisibleChange(visible, type);
});
_defineProperty(_this, "changePanel", function (panel) {
_this.setState({
panel: panel,
activeDateInput: panel === _util2.PANEL.DATE ? 'startValue' : 'startTime'
});
});
_defineProperty(_this, "onOk", function () {
_this.onVisibleChange(false, 'okBtnClick');
_this.onValueChange([_this.state.startValue, _this.state.endValue], 'onOk');
});
// 如果用户没有给定时间禁用逻辑，则给默认到禁用逻辑，即如果是同一天，则时间不能是同样的
_defineProperty(_this, "getDisabledTime", function (_ref2) {
var startValue = _ref2.startValue,
endValue = _ref2.endValue;
var _ref3 = _this.props.showTime || {},
disabledHours = _ref3.disabledHours,
disabledMinutes = _ref3.disabledMinutes,
disabledSeconds = _ref3.disabledSeconds;
var disabledTime = {};
if (startValue && endValue) {
var isSameDay = startValue.format('L') === endValue.format('L');
var newDisabledHours = (0, _util2.isFunction)(disabledHours) ? disabledHours : function (index) {
if (isSameDay && index < startValue.hour()) {
return true;
}
};
var newDisabledMinutes = (0, _util2.isFunction)(disabledMinutes) ? disabledMinutes : function (index) {
if (isSameDay && startValue.hour() === endValue.hour() && index < startValue.minute()) {
return true;
}
};
var newDisabledSeconds = (0, _util2.isFunction)(disabledSeconds) ? disabledSeconds : function (index) {
if (isSameDay && startValue.hour() === endValue.hour() && startValue.minute() === endValue.minute() && index <= startValue.second()) {
return true;
}
};
disabledTime = {
disabledHours: newDisabledHours,
disabledMinutes: newDisabledMinutes,
disabledSeconds: newDisabledSeconds
};
}
return disabledTime;
});
var dateTimeFormat = (0, _util2.getDateTimeFormat)(props.format, props.showTime);
(0, _util2.extend)(dateTimeFormat, _this);
var val = props.value || props.defaultValue;
var _values = getFormatValues(val, _this.dateTimeFormat);
_this.inputAsString = val && (typeof val[0] === 'string' || typeof val[1] === 'string');
_this.state = {
visible: props.visible || props.defaultVisible,
startValue: _values[0],
endValue: _values[1],
startDateInputStr: '',
endDateInputStr: '',
activeDateInput: 'startValue',
startTimeInputStr: '',
endTimeInputStr: '',
inputing: false,
// 当前是否处于输入状态
panel: _util2.PANEL.DATE
};
_this.popup = null;
return _this;
}
_inherits(RangePicker, _Component);
return _createClass(RangePicker, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if ('showTime' in nextProps) {
var dateTimeFormat = (0, _util2.getDateTimeFormat)(nextProps.format || this.props.format, nextProps.showTime);
(0, _util2.extend)(dateTimeFormat, this);
}
if ('value' in nextProps) {
var values = getFormatValues(nextProps.value, this.dateTimeFormat);
this.setState({
startValue: values[0],
endValue: values[1]
});
this.inputAsString = nextProps.value && (typeof nextProps.value[0] === 'string' || typeof nextProps.value[1] === 'string');
}
if ('visible' in nextProps) {
this.setState({
visible: nextProps.visible
});
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props3 = this.props,
prefix = _this$props3.prefix,
rtl = _this$props3.rtl,
defaultVisibleMonth = _this$props3.defaultVisibleMonth,
onVisibleMonthChange = _this$props3.onVisibleMonthChange,
showTime = _this$props3.showTime,
disabledDate = _this$props3.disabledDate,
footerRender = _this$props3.footerRender,
label = _this$props3.label,
_this$props3$ranges = _this$props3.ranges,
ranges = _this$props3$ranges === void 0 ? {} : _this$props3$ranges,
inputState = _this$props3.state,
size = _this$props3.size,
disabled = _this$props3.disabled,
hasClear = _this$props3.hasClear,
popupTriggerType = _this$props3.popupTriggerType,
popupAlign = _this$props3.popupAlign,
popupContainer = _this$props3.popupContainer,
popupStyle = _this$props3.popupStyle,
popupClassName = _this$props3.popupClassName,
popupProps = _this$props3.popupProps,
followTrigger = _this$props3.followTrigger,
className = _this$props3.className,
locale = _this$props3.locale,
inputProps = _this$props3.inputProps,
triggerRender = _this$props3.triggerRender,
dateCellRender = _this$props3.dateCellRender,
monthCellRender = _this$props3.monthCellRender,
yearCellRender = _this$props3.yearCellRender,
startDateInputAriaLabel = _this$props3.startDateInputAriaLabel,
startTimeInputAriaLabel = _this$props3.startTimeInputAriaLabel,
endDateInputAriaLabel = _this$props3.endDateInputAriaLabel,
endTimeInputAriaLabel = _this$props3.endTimeInputAriaLabel,
inline = _this$props3.inline,
others = _objectWithoutProperties(_this$props3, _excluded);
var state = this.state;
var classNames = (0, _classnames8["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker"), true), "".concat(prefix).concat(size), size), "".concat(prefix, "disabled"), disabled), className);
var panelBodyClassName = (0, _classnames8["default"])(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-body"), true), "".concat(prefix, "range-picker-inline"), inline), "".concat(prefix, "range-picker-body-show-time"), showTime));
var triggerCls = (0, _classnames8["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-trigger"), true), "".concat(prefix, "error"), inputState === 'error'));
var startDateInputCls = (0, _classnames8["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-panel-input-start-date"), true), "".concat(prefix, "focus"), state.activeDateInput === 'startValue'));
var endDateInputCls = (0, _classnames8["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-panel-input-end-date"), true), "".concat(prefix, "focus"), state.activeDateInput === 'endValue'));
if (rtl) {
others.dir = 'rtl';
}
var startDateInputValue = state.inputing === 'startValue' ? state.startDateInputStr : state.startValue && state.startValue.format(this.format) || '';
var endDateInputValue = state.inputing === 'endValue' ? state.endDateInputStr : state.endValue && state.endValue.format(this.format) || '';
var startTriggerValue = startDateInputValue;
var endTriggerValue = endDateInputValue;
var sharedInputProps = _objectSpread(_objectSpread({}, inputProps), {}, {
size: size,
disabled: disabled,
onChange: this.onDateInputChange,
onBlur: this.onDateInputBlur,
onPressEnter: this.onDateInputBlur,
onKeyDown: this.onDateInputKeyDown
});
var startDateInput = /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedInputProps, {
hasClear: true,
size: "xs",
"aria-label": startDateInputAriaLabel,
placeholder: this.format,
value: startDateInputValue,
onFocus: function onFocus() {
return _this2.onFocusDateInput('startValue');
},
className: startDateInputCls
}));
var endDateInput = /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedInputProps, {
hasClear: true,
size: "xs",
"aria-label": endDateInputAriaLabel,
placeholder: this.format,
value: endDateInputValue,
onFocus: function onFocus() {
return _this2.onFocusDateInput('endValue');
},
className: endDateInputCls
}));
var datePanel = /*#__PURE__*/_react["default"].createElement(_rangeCalendar["default"], {
showOtherMonth: true,
dateCellRender: dateCellRender,
monthCellRender: monthCellRender,
yearCellRender: yearCellRender,
format: this.format,
defaultVisibleMonth: defaultVisibleMonth,
onVisibleMonthChange: onVisibleMonthChange,
disabledDate: disabledDate,
onSelect: this.onSelectCalendarPanel,
startValue: state.startValue,
endValue: state.endValue
});
var startTimeInput = null;
var endTimeInput = null;
var timePanel = null;
var panelFooter = footerRender();
if (showTime) {
var startTimeInputValue = state.inputing === 'startTime' ? state.startTimeInputStr : state.startValue && state.startValue.format(this.timeFormat) || '';
var endTimeInputValue = state.inputing === 'endTime' ? state.endTimeInputStr : state.endValue && state.endValue.format(this.timeFormat) || '';
startTriggerValue = state.startValue && state.startValue.format(this.dateTimeFormat) || '';
endTriggerValue = state.endValue && state.endValue.format(this.dateTimeFormat) || '';
var sharedTimeInputProps = {
size: size,
placeholder: this.timeFormat,
onFocus: this.onFocusTimeInput,
onBlur: this.onTimeInputBlur,
onPressEnter: this.onTimeInputBlur,
onChange: this.onTimeInputChange,
onKeyDown: this.onTimeInputKeyDown
};
var startTimeInputCls = (0, _classnames8["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-panel-input-start-time"), true), "".concat(prefix, "focus"), state.activeDateInput === 'startTime'));
startTimeInput = /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedTimeInputProps, {
size: "xs",
value: startTimeInputValue,
"aria-label": startTimeInputAriaLabel,
disabled: disabled || !state.startValue || !state.endValue,
onFocus: function onFocus() {
return _this2.onFocusTimeInput('startTime');
},
className: startTimeInputCls
}));
var endTimeInputCls = (0, _classnames8["default"])(_defineProperty(_defineProperty({}, "".concat(prefix, "range-picker-panel-input-end-time"), true), "".concat(prefix, "focus"), state.activeDateInput === 'endTime'));
endTimeInput = /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedTimeInputProps, {
size: "xs",
value: endTimeInputValue,
"aria-label": endTimeInputAriaLabel,
disabled: disabled || !state.endValue || !state.startValue,
onFocus: function onFocus() {
return _this2.onFocusTimeInput('endTime');
},
className: endTimeInputCls
}));
var showSecond = this.timeFormat.indexOf('s') > -1;
var sharedTimePickerProps = _objectSpread(_objectSpread({}, showTime), {}, {
prefix: prefix,
locale: locale,
disabled: disabled,
showSecond: showSecond
});
var disabledTime = this.getDisabledTime(state);
timePanel = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "range-picker-panel-time")
}, /*#__PURE__*/_react["default"].createElement(_panel["default"], _extends({}, sharedTimePickerProps, {
className: "".concat(prefix, "range-picker-panel-time-start"),
value: state.startValue,
onSelect: this.onSelectStartTime
})), /*#__PURE__*/_react["default"].createElement(_panel["default"], _extends({}, sharedTimePickerProps, disabledTime, {
className: "".concat(prefix, "range-picker-panel-time-end"),
value: state.endValue,
onSelect: this.onSelectEndTime
})));
}
panelFooter = panelFooter || /*#__PURE__*/_react["default"].createElement(_panelFooter["default"], {
prefix: prefix,
value: state.startValue && state.endValue,
ranges: Object.keys(ranges).map(function (key) {
return {
label: key,
value: ranges[key],
onChange: function onChange(values) {
_this2.setState({
startValue: values[0],
endValue: values[1]
});
_this2.onValueChange(values);
}
};
}),
disabledOk: !state.startValue || !state.endValue || state.startValue.valueOf() > state.endValue.valueOf(),
locale: locale,
panel: state.panel,
onPanelChange: showTime ? this.changePanel : null,
onOk: this.onOk
});
var panelBody = _defineProperty(_defineProperty({}, _util2.PANEL.DATE, datePanel), _util2.PANEL.TIME, timePanel)[state.panel];
var allowClear = state.startValue && state.endValue && hasClear;
var trigger = triggerRender ? triggerRender([state.startValue, state.endValue], {
popupVisible: state.visible
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: triggerCls
}, /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedInputProps, {
readOnly: true,
role: "combobox",
"aria-expanded": state.visible,
label: label,
placeholder: locale.startPlaceholder,
value: startTriggerValue,
hasBorder: false,
className: "".concat(prefix, "range-picker-trigger-input"),
onFocus: function onFocus() {
return _this2.onFocusDateInput('startValue');
}
})), /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefix, "range-picker-trigger-separator")
}, "~"), /*#__PURE__*/_react["default"].createElement(_input["default"], _extends({}, sharedInputProps, {
readOnly: true,
role: "combobox",
"aria-expanded": state.visible,
placeholder: locale.endPlaceholder,
value: endTriggerValue,
hasBorder: false,
className: "".concat(prefix, "range-picker-trigger-input"),
onFocus: function onFocus() {
return _this2.onFocusDateInput('endValue');
},
hasClear: allowClear
})), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
type: "calendar",
className: "".concat(prefix, "range-picker-trigger-icon")
}));
var body = /*#__PURE__*/_react["default"].createElement("div", {
dir: others.dir,
className: panelBodyClassName
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "range-picker-panel-header")
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(prefix, "range-picker-panel-input")
}, startDateInput, startTimeInput, /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(prefix, "range-picker-panel-input-separator")
}, "~"), endDateInput, endTimeInput)), panelBody, panelFooter);
return inline ? body : /*#__PURE__*/_react["default"].createElement("div", _extends({}, _util.obj.pickOthers(RangePicker.propTypes, others), {
className: classNames
}), /*#__PURE__*/_react["default"].createElement(Popup, _extends({
offset: [0, 4]
}, popupProps, {
followTrigger: followTrigger,
autoFocus: true,
ref: function ref(popup) {
_this2.popup = popup;
},
disabled: disabled,
visible: state.visible,
onVisibleChange: this.onVisibleChange,
align: popupAlign,
triggerType: popupTriggerType,
container: popupContainer,
style: popupStyle,
className: popupClassName,
trigger: trigger
}), body));
}
}]);
}(_react.Component);
_defineProperty(RangePicker, "propTypes", {
prefix: _propTypes["default"].string,
rtl: _propTypes["default"].bool,
/**
* 默认展示的起始月份
* @return {MomentObject} 返回包含指定月份的 moment 对象实例
*/
defaultVisibleMonth: _propTypes["default"].func,
onVisibleMonthChange: _propTypes["default"].func,
/**
* 日期范围值数组 [moment, moment]
*/
value: _propTypes["default"].array,
/**
* 初始的日期范围值数组 [moment, moment]
*/
defaultValue: _propTypes["default"].array,
/**
* 日期格式
*/
format: _propTypes["default"].string,
/**
* 是否使用时间控件，支持传入 TimePicker 的属性
*/
showTime: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].bool]),
/**
* 每次选择是否重置时间（仅在 showTime 开启时有效）
*/
resetTime: _propTypes["default"].bool,
/**
* 禁用日期函数
* @param {MomentObject} 日期值
* @param {String} view 当前视图类型，year: 年， month: 月, date: 日
* @return {Boolean} 是否禁用
*/
disabledDate: _propTypes["default"].func,
/**
* 自定义面板页脚
* @return {Node} 自定义的面板页脚组件
*/
footerRender: _propTypes["default"].func,
/**
* 日期范围值改变时的回调 [ MomentObject|String, MomentObject|String ]
* @param {Array<MomentObject|String>} value 日期值
*/
onChange: _propTypes["default"].func,
/**
* 点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObject|String, MomentObject|String ]`
* @return {Array} 日期范围
*/
onOk: _propTypes["default"].func,
/**
* 输入框内置标签
*/
label: _propTypes["default"].node,
/**
* 输入框状态
*/
state: _propTypes["default"].oneOf(['error', 'loading', 'success']),
/**
* 输入框尺寸
*/
size: _propTypes["default"].oneOf(['small', 'medium']),
/**
* 是否禁用
*/
disabled: _propTypes["default"].bool,
/**
* 是否显示清空按钮
*/
hasClear: _propTypes["default"].bool,
/**
* 弹层显示状态
*/
visible: _propTypes["default"].bool,
/**
* 弹层默认是否显示
*/
defaultVisible: _propTypes["default"].bool,
/**
* 弹层展示状态变化时的回调
* @param {Boolean} visible 弹层是否显示
* @param {String} type 触发弹层显示和隐藏的来源 okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
*/
onVisibleChange: _propTypes["default"].func,
/**
* 弹层触发方式
*/
popupTriggerType: _propTypes["default"].oneOf(['click', 'hover']),
/**
* 弹层对齐方式, 具体含义见 OverLay文档
*/
popupAlign: _propTypes["default"].string,
/**
* 弹层容器
* @param {Element} target 目标元素
* @return {Element} 弹层的容器元素
*/
popupContainer: _propTypes["default"].func,
/**
* 弹层自定义样式
*/
popupStyle: _propTypes["default"].object,
/**
* 弹层自定义样式类
*/
popupClassName: _propTypes["default"].string,
/**
* 弹层其他属性
*/
popupProps: _propTypes["default"].object,
/**
* 是否跟随滚动
*/
followTrigger: _propTypes["default"].bool,
/**
* 输入框其他属性
*/
inputProps: _propTypes["default"].object,
/**
* 自定义触发器
* @param {Array} value 日期值（moment对象)数组
* @param {Object} state 附加状态
* @returns {ReactNode}
*/
triggerRender: _propTypes["default"].func,
/**
* 自定义日期单元格渲染
*/
dateCellRender: _propTypes["default"].func,
/**
* 自定义月份渲染函数
* @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
* @returns {ReactNode}
*/
monthCellRender: _propTypes["default"].func,
yearCellRender: _propTypes["default"].func,
// 兼容 0.x yearCellRender
/**
* 开始日期输入框的 aria-label 属性
*/
startDateInputAriaLabel: _propTypes["default"].string,
/**
* 开始时间输入框的 aria-label 属性
*/
startTimeInputAriaLabel: _propTypes["default"].string,
/**
* 结束日期输入框的 aria-label 属性
*/
endDateInputAriaLabel: _propTypes["default"].string,
/**
* 结束时间输入框的 aria-label 属性
*/
endTimeInputAriaLabel: _propTypes["default"].string,
ranges: _propTypes["default"].object,
locale: _propTypes["default"].object,
className: _propTypes["default"].string,
/**
* 是否开启行内模式
*/
inline: _propTypes["default"].bool
});
_defineProperty(RangePicker, "defaultProps", {
prefix: 'next-',
rtl: false,
format: 'YYYY/MM/DD',
size: 'medium',
showTime: false,
resetTime: false,
disabledDate: function disabledDate() {
return false;
},
footerRender: function footerRender() {
return null;
},
hasClear: true,
defaultVisible: false,
popupTriggerType: 'click',
popupAlign: 'tl bl',
locale: _zhCn["default"].DatePicker,
onChange: _util.func.noop,
onOk: _util.func.noop,
onVisibleChange: _util.func.noop
});