@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
895 lines (893 loc) • 36.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _pick2 = _interopRequireDefault(require("lodash/pick"));
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
var _get2 = _interopRequireDefault(require("lodash/get"));
var _isDate2 = _interopRequireDefault(require("lodash/isDate"));
var _stubFalse2 = _interopRequireDefault(require("lodash/stubFalse"));
var _noop2 = _interopRequireDefault(require("lodash/noop"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _context = _interopRequireDefault(require("../configProvider/context"));
var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/foundation"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _index = _interopRequireDefault(require("../popover/index"));
var _dateInput = _interopRequireDefault(require("./dateInput"));
var _monthsGrid = _interopRequireDefault(require("./monthsGrid"));
var _quickControl = _interopRequireDefault(require("./quickControl"));
var _footer = _interopRequireDefault(require("./footer"));
var _trigger = _interopRequireDefault(require("../trigger"));
var _yearAndMonth = _interopRequireDefault(require("./yearAndMonth"));
require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
var _utils = require("../_utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
class DatePicker extends _baseComponent.default {
constructor(props) {
var _this;
super(props);
_this = this;
this.setTriggerRef = node => this.triggerElRef.current = node;
// Called when changes are selected by clicking on the selected date
this.handleSelectedChange = (v, options) => this.foundation.handleSelectedChange(v, options);
// Called when the year and month change
this.handleYMSelectedChange = item => this.foundation.handleYMSelectedChange(item);
this.disabledDisposeDate = function (date) {
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
rest[_key - 1] = arguments[_key];
}
return _this.foundation.disabledDisposeDate(date, ...rest);
};
this.disabledDisposeTime = function (date) {
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
rest[_key2 - 1] = arguments[_key2];
}
return _this.foundation.disabledDisposeTime(date, ...rest);
};
this.handleOpenPanel = () => this.foundation.openPanel();
this.handleInputChange = function () {
return _this.foundation.handleInputChange(...arguments);
};
this.handleInsetInputChange = options => this.foundation.handleInsetInputChange(options);
this.handleInputComplete = v => this.foundation.handleInputComplete(v);
this.handleInputBlur = e => this.foundation.handleInputBlur((0, _get2.default)(e, 'nativeEvent.target.value'), e);
this.handleInputFocus = function () {
return _this.foundation.handleInputFocus(...arguments);
};
this.handleInputClear = e => this.foundation.handleInputClear(e);
this.handleTriggerWrapperClick = e => this.foundation.handleTriggerWrapperClick(e);
this.handleSetRangeFocus = rangeInputFocus => this.foundation.handleSetRangeFocus(rangeInputFocus);
this.handleRangeInputBlur = (value, e) => this.foundation.handleRangeInputBlur(value, e);
this.handleRangeInputClear = e => this.foundation.handleRangeInputClear(e);
this.handleRangeEndTabPress = e => this.foundation.handleRangeEndTabPress(e);
this.isAnotherPanelHasOpened = currentRangeInput => {
if (currentRangeInput === 'rangeStart') {
return this.focusRecordsRef.current.rangeEnd;
} else {
return this.focusRecordsRef.current.rangeStart;
}
};
this.handleInsetDateFocus = (e, rangeType) => {
const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
if (monthGridFoundation) {
monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_LEFT);
monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_RIGHT);
}
this.handleInputFocus(e, rangeType);
};
this.handleInsetTimeFocus = () => {
const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
if (monthGridFoundation) {
monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_LEFT);
monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_RIGHT);
}
};
this.handlePanelVisibleChange = visible => {
this.foundation.handlePanelVisibleChange(visible);
};
this.handleConfirm = e => this.foundation.handleConfirm();
this.handleCancel = e => this.foundation.handleCancel();
this.renderFooter = (locale, localeCode) => {
if (this.adapter.needConfirm()) {
return /*#__PURE__*/_react.default.createElement(_footer.default, Object.assign({}, this.props, {
locale: locale,
localeCode: localeCode,
onConfirmClick: this.handleConfirm,
onCancelClick: this.handleCancel
}));
}
return null;
};
this.renderPanel = (locale, localeCode, dateFnsLocale) => {
const {
dropdownClassName,
dropdownStyle,
density,
topSlot,
bottomSlot,
presetPosition,
type,
leftSlot,
rightSlot
} = this.props;
const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
[_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
[`${_constants.cssClasses.PREFIX}-compact`]: density === 'compact'
}, dropdownClassName);
return /*#__PURE__*/_react.default.createElement("div", {
ref: this.panelRef,
className: wrapCls,
style: dropdownStyle,
"x-type": type
}, /*#__PURE__*/_react.default.createElement("div", {
className: `${_constants.cssClasses.PREFIX}-container`
}, leftSlot && (/*#__PURE__*/_react.default.createElement("div", {
className: `${_constants.cssClasses.PREFIX}-leftSlot`,
"x-semi-prop": "leftSlot"
}, leftSlot)), /*#__PURE__*/_react.default.createElement("div", null, topSlot && (/*#__PURE__*/_react.default.createElement("div", {
className: `${_constants.cssClasses.PREFIX}-topSlot`,
"x-semi-prop": "topSlot"
}, topSlot)), presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls(), bottomSlot && (/*#__PURE__*/_react.default.createElement("div", {
className: `${_constants.cssClasses.PREFIX}-bottomSlot`,
"x-semi-prop": "bottomSlot"
}, bottomSlot))), rightSlot && (/*#__PURE__*/_react.default.createElement("div", {
className: `${_constants.cssClasses.PREFIX}-rightSlot`,
"x-semi-prop": "rightSlot"
}, rightSlot))), this.renderFooter(locale, localeCode));
};
this.renderYearMonthPanel = (locale, localeCode) => {
const {
density,
presetPosition,
yearAndMonthOpts,
type,
startYear,
endYear
} = this.props;
const date = this.state.value[0];
const year = {
left: 0,
right: 0
};
const month = {
left: 0,
right: 0
};
if ((0, _isDate2.default)(date)) {
year.left = date.getFullYear();
month.left = date.getMonth() + 1;
}
if (type === 'monthRange') {
const dateRight = this.state.value[1];
if ((0, _isDate2.default)(dateRight)) {
year.right = dateRight.getFullYear();
month.right = dateRight.getMonth() + 1;
}
}
return /*#__PURE__*/_react.default.createElement(_yearAndMonth.default, {
locale: locale,
localeCode: localeCode,
disabledDate: this.disabledDisposeDate,
noBackBtn: true,
monthCycled: true,
onSelect: this.handleYMSelectedChange,
currentYear: year,
currentMonth: month,
density: density,
presetPosition: presetPosition,
renderQuickControls: this.renderQuickControls(),
renderDateInput: this.renderDateInput(),
type: type,
yearAndMonthOpts: yearAndMonthOpts,
startYear: startYear,
endYear: endYear
});
};
this.wrapPopover = children => {
const {
panelShow
} = this.state;
// rtl changes the default position
const {
direction
} = this.context;
const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
const {
motion,
zIndex,
position = defaultPosition,
getPopupContainer,
locale,
localeCode,
dateFnsLocale,
stopPropagation,
autoAdjustOverflow,
spacing,
dropdownMargin
} = this.props;
return /*#__PURE__*/_react.default.createElement(_index.default, {
getPopupContainer: getPopupContainer,
// wrapWhenSpecial={false}
autoAdjustOverflow: autoAdjustOverflow,
zIndex: zIndex,
motion: motion,
margin: dropdownMargin,
content: this.renderPanel(locale, localeCode, dateFnsLocale),
trigger: "custom",
position: position,
visible: panelShow,
stopPropagation: stopPropagation,
spacing: spacing,
onVisibleChange: this.handlePanelVisibleChange
}, children);
};
this.state = {
panelShow: props.open || props.defaultOpen,
isRange: false,
inputValue: null,
value: [],
cachedSelectedValue: [],
prevTimeZone: null,
rangeInputFocus: undefined,
autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen),
insetInputValue: null,
triggerDisabled: undefined
};
this.triggerElRef = /*#__PURE__*/_react.default.createRef();
this.panelRef = /*#__PURE__*/_react.default.createRef();
this.monthGrid = /*#__PURE__*/_react.default.createRef();
this.inputRef = /*#__PURE__*/_react.default.createRef();
this.rangeInputStartRef = /*#__PURE__*/_react.default.createRef();
this.rangeInputEndRef = /*#__PURE__*/_react.default.createRef();
this.focusRecordsRef = /*#__PURE__*/_react.default.createRef();
// @ts-ignore ignore readonly
this.focusRecordsRef.current = {
rangeStart: false,
rangeEnd: false
};
this.foundation = new _foundation.default(this.adapter);
}
get adapter() {
var _this2 = this;
return Object.assign(Object.assign({}, super.adapter), {
togglePanel: (panelShow, cb) => {
this.setState({
panelShow
}, cb);
if (!panelShow) {
this.focusRecordsRef.current.rangeEnd = false;
this.focusRecordsRef.current.rangeStart = false;
}
},
registerClickOutSide: () => {
if (this.clickOutSideHandler) {
this.adapter.unregisterClickOutSide();
this.clickOutSideHandler = null;
}
this.clickOutSideHandler = e => {
const triggerEl = this.triggerElRef && this.triggerElRef.current;
const panelEl = this.panelRef && this.panelRef.current;
const target = e.target;
const path = e.composedPath && e.composedPath() || [target];
if (!(triggerEl && triggerEl.contains(target)) && !(panelEl && panelEl.contains(target)) && !(path.includes(triggerEl) || path.includes(panelEl))) {
this.props.onClickOutSide(e);
if (!this.adapter.needConfirm()) {
this.foundation.closePanel();
}
}
};
document.addEventListener('mousedown', this.clickOutSideHandler);
},
unregisterClickOutSide: () => {
document.removeEventListener('mousedown', this.clickOutSideHandler);
},
notifyBlur: function () {
return _this2.props.onBlur(...arguments);
},
notifyFocus: function () {
return _this2.props.onFocus(...arguments);
},
notifyClear: function () {
return _this2.props.onClear(...arguments);
},
notifyChange: function () {
return _this2.props.onChange(...arguments);
},
notifyCancel: function () {
return _this2.props.onCancel(...arguments);
},
notifyConfirm: function () {
return _this2.props.onConfirm(...arguments);
},
notifyOpenChange: function () {
return _this2.props.onOpenChange(...arguments);
},
notifyPresetsClick: function () {
return _this2.props.onPresetClick(...arguments);
},
updateValue: value => this.setState({
value
}),
updatePrevTimezone: prevTimeZone => this.setState({
prevTimeZone
}),
updateCachedSelectedValue: cachedSelectedValue => {
let _cachedSelectedValue = cachedSelectedValue;
if (cachedSelectedValue && !Array.isArray(cachedSelectedValue)) {
_cachedSelectedValue = [...cachedSelectedValue];
}
this.setState({
cachedSelectedValue: _cachedSelectedValue
});
},
updateInputValue: inputValue => {
this.setState({
inputValue
});
},
updateInsetInputValue: insetInputValue => {
const {
insetInput
} = this.props;
if (insetInput && !(0, _isEqual2.default)(insetInputValue, this.state.insetInputValue)) {
this.setState({
insetInputValue
});
}
},
needConfirm: () => ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
typeIsYearOrMonth: () => ['month', 'year', 'monthRange'].includes(this.props.type),
setRangeInputFocus: rangeInputFocus => {
const {
preventScroll
} = this.props;
if (rangeInputFocus !== this.state.rangeInputFocus) {
this.setState({
rangeInputFocus
});
}
switch (rangeInputFocus) {
case 'rangeStart':
const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
inputStartNode && inputStartNode.focus({
preventScroll
});
/**
* 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
* 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
* 同时会走到datePicker/foundation.js中的handleSelectedChange方法，在这个方法里会根据focusRecordsRef来判断是否可以关闭panel。
* 如果在setRangeInputFocus里同步修改了focusRecordsRef的状态为true，那在handleSelectedChange里会误判startDate和endDate都已经完成选择，
* 导致endDate还没选就关闭了panel
*
* Fix the problem that the panel is closed immediately after switching to endDate after starting Date is selected.
* The user opens the panel and after starting Date is selected, setRangeInputFocus ('rangeEnd') will be executed, focus to endDateInput,
* At the same time, it will go to the handleSelectedChange method in datePicker/foundation.js, where it will be determined whether the panel can be closed according to focusRecordsRef.
* If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
* resulting in the panel being closed before endDate is selected
*/
setTimeout(() => {
this.focusRecordsRef.current.rangeStart = true;
}, 0);
break;
case 'rangeEnd':
const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
inputEndNode && inputEndNode.focus({
preventScroll
});
/**
* 解决选择完startDate，切换到endDate后panel被立马关闭的问题。
* 用户打开panel，选了startDate后，会执行setRangeInputFocus('rangeEnd'),focus到endDateInput，
* 同时会走到datePicker/foundation.js中的handleSelectedChange方法，在这个方法里会根据focusRecordsRef来判断是否可以关闭panel。
* 如果在setRangeInputFocus里同步修改了focusRecordsRef的状态为true，那在handleSelectedChange里会误判startDate和endDate都已经完成选择，
* 导致endDate还没选就关闭了panel
*
* Fix the problem that the panel is closed immediately after switching to endDate after starting Date is selected.
* The user opens the panel and after starting Date is selected, setRangeInputFocus ('rangeEnd') will be executed, focus to endDateInput,
* At the same time, it will go to the handleSelectedChange method in datePicker/foundation.js, where it will be determined whether the panel can be closed according to focusRecordsRef.
* If the status of focusRecordsRef is modified synchronously in setRangeInputFocus to true, then in handleSelectedChange it will be misjudged that both begDate and endDate have completed the selection,
* resulting in the panel being closed before endDate is selected
*/
setTimeout(() => {
this.focusRecordsRef.current.rangeEnd = true;
}, 0);
break;
default:
return;
}
},
couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
isEventTarget: e => e && e.target === e.currentTarget,
setInsetInputFocus: () => {
const {
preventScroll
} = this.props;
const {
rangeInputFocus
} = this.state;
switch (rangeInputFocus) {
case 'rangeEnd':
if (document.activeElement !== this.rangeInputEndRef.current) {
const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
inputEndNode && inputEndNode.focus({
preventScroll
});
}
break;
case 'rangeStart':
default:
if (document.activeElement !== this.rangeInputStartRef.current) {
const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
inputStartNode && inputStartNode.focus({
preventScroll
});
}
break;
}
},
setInputFocus: () => {
const {
preventScroll
} = this.props;
const inputNode = (0, _get2.default)(this, 'inputRef.current');
inputNode && inputNode.focus({
preventScroll
});
},
setInputBlur: () => {
const inputNode = (0, _get2.default)(this, 'inputRef.current');
inputNode && inputNode.blur();
},
setRangeInputBlur: () => {
const {
rangeInputFocus
} = this.state;
if (rangeInputFocus === 'rangeStart') {
const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
inputStartNode && inputStartNode.blur();
} else if (rangeInputFocus === 'rangeEnd') {
const inputEndNode = (0, _get2.default)(this, 'rangeInputEndRef.current');
inputEndNode && inputEndNode.blur();
}
this.adapter.setRangeInputFocus(false);
},
setTriggerDisabled: disabled => {
this.setState({
triggerDisabled: disabled
});
}
});
}
isRangeType(type, triggerRender) {
return /range/i.test(type) && !(0, _isFunction2.default)(triggerRender);
}
componentDidUpdate(prevProps) {
if (!(0, _isEqual2.default)(prevProps.value, this.props.value)) {
this.foundation.initFromProps(Object.assign({}, this.props));
} else if (this.props.timeZone !== prevProps.timeZone) {
this.foundation.initFromProps({
value: this.state.value,
timeZone: this.props.timeZone,
prevTimeZone: prevProps.timeZone
});
}
if (prevProps.open !== this.props.open) {
this.foundation.initPanelOpenStatus();
if (!this.props.open) {
this.foundation.clearRangeInputFocus();
}
}
}
componentDidMount() {
this._mounted = true;
super.componentDidMount();
}
componentWillUnmount() {
this._mounted = false;
super.componentWillUnmount();
}
open() {
this.foundation.open();
}
close() {
this.foundation.close();
}
/**
*
* When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
*
* When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
*
* 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
*
* `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
*/
focus(focusType) {
this.foundation.focus(focusType);
}
blur() {
this.foundation.blur();
}
renderMonthGrid(locale, localeCode, dateFnsLocale) {
const {
type,
multiple,
max,
weekStartsOn,
timePickerOpts,
defaultPickerValue,
format,
hideDisabledOptions,
disabledTimePicker,
renderDate,
renderFullDate,
startDateOffset,
endDateOffset,
autoSwitchDate,
density,
syncSwitchMonth,
onPanelChange,
timeZone,
triggerRender,
insetInput,
presetPosition,
yearAndMonthOpts,
startYear,
endYear
} = this.props;
const {
cachedSelectedValue,
rangeInputFocus
} = this.state;
const defaultValue = cachedSelectedValue;
return /*#__PURE__*/_react.default.createElement(_monthsGrid.default, {
ref: this.monthGrid,
locale: locale,
localeCode: localeCode,
dateFnsLocale: dateFnsLocale,
weekStartsOn: weekStartsOn,
type: type,
multiple: multiple,
max: max,
format: format,
disabledDate: this.disabledDisposeDate,
hideDisabledOptions: hideDisabledOptions,
disabledTimePicker: disabledTimePicker,
disabledTime: this.disabledDisposeTime,
defaultValue: defaultValue,
defaultPickerValue: defaultPickerValue,
timePickerOpts: timePickerOpts,
isControlledComponent: !this.adapter.needConfirm() && this.isControlled('value'),
onChange: this.handleSelectedChange,
renderDate: renderDate,
renderFullDate: renderFullDate,
startDateOffset: startDateOffset,
endDateOffset: endDateOffset,
autoSwitchDate: autoSwitchDate,
density: density,
rangeInputFocus: rangeInputFocus,
setRangeInputFocus: this.handleSetRangeFocus,
isAnotherPanelHasOpened: this.isAnotherPanelHasOpened,
syncSwitchMonth: syncSwitchMonth,
onPanelChange: onPanelChange,
timeZone: timeZone,
focusRecordsRef: this.focusRecordsRef,
triggerRender: triggerRender,
insetInput: insetInput,
presetPosition: presetPosition,
renderQuickControls: this.renderQuickControls(),
renderDateInput: this.renderDateInput(),
yearAndMonthOpts: yearAndMonthOpts,
startYear: startYear,
endYear: endYear
});
}
renderQuickControls() {
const {
presets,
type,
presetPosition,
insetInput,
locale
} = this.props;
return /*#__PURE__*/_react.default.createElement(_quickControl.default, {
type: type,
presets: presets,
insetInput: insetInput,
presetPosition: presetPosition,
onPresetClick: (item, e) => this.foundation.handlePresetClick(item, e),
locale: locale
});
}
renderDateInput() {
const {
insetInput,
dateFnsLocale,
density,
type,
format,
rangeSeparator,
defaultPickerValue
} = this.props;
const {
insetInputValue,
value
} = this.state;
const props = {
dateFnsLocale,
format,
insetInputValue,
rangeSeparator,
type,
value: value,
handleInsetDateFocus: this.handleInsetDateFocus,
handleInsetTimeFocus: this.handleInsetTimeFocus,
onInsetInputChange: this.handleInsetInputChange,
rangeInputStartRef: this.rangeInputStartRef,
rangeInputEndRef: this.rangeInputEndRef,
density,
defaultPickerValue
};
return insetInput ? /*#__PURE__*/_react.default.createElement(_dateInput.default, Object.assign({}, props, {
insetInput: insetInput
})) : null;
}
renderInner(extraProps) {
const {
clearIcon,
type,
format,
multiple,
disabled,
showClear,
insetLabel,
insetLabelId,
placeholder,
validateStatus,
inputStyle,
prefix,
locale,
dateFnsLocale,
triggerRender,
size,
inputReadOnly,
rangeSeparator,
insetInput,
defaultPickerValue,
borderless
} = this.props;
const {
value,
inputValue,
rangeInputFocus,
triggerDisabled
} = this.state;
// This class is not needed when triggerRender is function
const isRangeType = this.isRangeType(type, triggerRender);
const inputDisabled = disabled || insetInput && triggerDisabled;
const inputCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-input`, {
[`${_constants.cssClasses.PREFIX}-range-input`]: isRangeType,
[`${_constants.cssClasses.PREFIX}-range-input-${size}`]: isRangeType && size,
[`${_constants.cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
[`${_constants.cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
[`${_constants.cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
[`${_constants.cssClasses.PREFIX}-borderless`]: borderless
});
const phText = placeholder || locale.placeholder[type]; // i18n
// These values should be passed to triggerRender, do not delete any key if it is not necessary
const props = Object.assign(Object.assign({}, extraProps), {
showClearIgnoreDisabled: Boolean(insetInput),
placeholder: phText,
clearIcon,
disabled: inputDisabled,
inputValue,
value: value,
defaultPickerValue,
onChange: this.handleInputChange,
onEnterPress: this.handleInputComplete,
// TODO: remove in next major version
block: true,
inputStyle,
showClear,
insetLabel,
insetLabelId,
type,
format,
multiple,
validateStatus,
inputReadOnly: inputReadOnly || Boolean(insetInput),
// onClick: this.handleOpenPanel,
onBlur: this.handleInputBlur,
onFocus: this.handleInputFocus,
onClear: this.handleInputClear,
prefix,
size,
autofocus: this.state.autofocus,
dateFnsLocale,
rangeInputFocus,
rangeSeparator,
onRangeBlur: this.handleRangeInputBlur,
onRangeClear: this.handleRangeInputClear,
onRangeEndTabPress: this.handleRangeEndTabPress,
rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
inputRef: this.inputRef
});
return /*#__PURE__*/_react.default.createElement("div", {
// tooltip will mount a11y props to children
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
role: "combobox",
"aria-label": Array.isArray(value) && value.length ? "Change date" : "Choose date",
"aria-disabled": disabled,
onClick: this.handleTriggerWrapperClick,
className: inputCls
}, typeof triggerRender === 'function' ? (/*#__PURE__*/_react.default.createElement(_trigger.default, Object.assign({}, props, {
triggerRender: triggerRender,
componentName: "DatePicker",
componentProps: Object.assign({}, this.props)
}))) : (/*#__PURE__*/_react.default.createElement(_dateInput.default, Object.assign({}, props))));
}
render() {
const _a = this.props,
{
style,
className,
prefixCls,
type
} = _a,
rest = __rest(_a, ["style", "className", "prefixCls", "type"]);
const outerProps = Object.assign({
style,
className: (0, _classnames.default)(className, {
[prefixCls]: true
}),
ref: this.setTriggerRef,
'aria-invalid': this.props['aria-invalid'],
'aria-errormessage': this.props['aria-errormessage'],
'aria-labelledby': this.props['aria-labelledby'],
'aria-describedby': this.props['aria-describedby'],
'aria-required': this.props['aria-required']
}, this.getDataAttr(rest));
const innerPropKeys = [];
if (!type.toLowerCase().includes("range")) {
innerPropKeys.push("borderless");
}
const inner = this.renderInner((0, _pick2.default)(this.props, innerPropKeys));
const wrappedInner = this.wrapPopover(inner);
return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, outerProps), wrappedInner);
}
}
exports.default = DatePicker;
DatePicker.contextType = _context.default;
DatePicker.propTypes = {
'aria-describedby': _propTypes.default.string,
'aria-errormessage': _propTypes.default.string,
'aria-invalid': _propTypes.default.bool,
'aria-labelledby': _propTypes.default.string,
'aria-required': _propTypes.default.bool,
borderless: _propTypes.default.bool,
type: _propTypes.default.oneOf(_constants.strings.TYPE_SET),
size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
clearIcon: _propTypes.default.node,
density: _propTypes.default.oneOf(_constants.strings.DENSITY_SET),
defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
defaultPickerValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
disabledTime: _propTypes.default.func,
disabledTimePicker: _propTypes.default.bool,
hideDisabledOptions: _propTypes.default.bool,
format: _propTypes.default.string,
disabled: _propTypes.default.bool,
multiple: _propTypes.default.bool,
max: _propTypes.default.number,
placeholder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
presets: _propTypes.default.array,
presetPosition: _propTypes.default.oneOf(_constants.strings.PRESET_POSITION_SET),
onChange: _propTypes.default.func,
onChangeWithDateFirst: _propTypes.default.bool,
weekStartsOn: _propTypes.default.number,
disabledDate: _propTypes.default.func,
timePickerOpts: _propTypes.default.object,
showClear: _propTypes.default.bool,
onOpenChange: _propTypes.default.func,
open: _propTypes.default.bool,
defaultOpen: _propTypes.default.bool,
motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
className: _propTypes.default.string,
prefixCls: _propTypes.default.string,
prefix: _propTypes.default.node,
insetLabel: _propTypes.default.node,
insetLabelId: _propTypes.default.string,
zIndex: _propTypes.default.number,
position: _propTypes.default.oneOf(_constants2.strings.POSITION_SET),
getPopupContainer: _propTypes.default.func,
onCancel: _propTypes.default.func,
onConfirm: _propTypes.default.func,
needConfirm: _propTypes.default.bool,
inputStyle: _propTypes.default.object,
timeZone: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
triggerRender: _propTypes.default.func,
stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
autoAdjustOverflow: _propTypes.default.bool,
onBlur: _propTypes.default.func,
onFocus: _propTypes.default.func,
onClear: _propTypes.default.func,
style: _propTypes.default.object,
autoFocus: _propTypes.default.bool,
inputReadOnly: _propTypes.default.bool,
validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
renderDate: _propTypes.default.func,
renderFullDate: _propTypes.default.func,
spacing: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
startDateOffset: _propTypes.default.func,
endDateOffset: _propTypes.default.func,
autoSwitchDate: _propTypes.default.bool,
dropdownClassName: _propTypes.default.string,
dropdownStyle: _propTypes.default.object,
dropdownMargin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
topSlot: _propTypes.default.node,
bottomSlot: _propTypes.default.node,
dateFnsLocale: _propTypes.default.object,
// Support synchronous switching of months
syncSwitchMonth: _propTypes.default.bool,
// Callback function for panel date switching
onPanelChange: _propTypes.default.func,
rangeSeparator: _propTypes.default.string,
preventScroll: _propTypes.default.bool,
yearAndMonthOpts: _propTypes.default.object,
onClickOutSide: _propTypes.default.func
};
DatePicker.__SemiComponentName__ = "DatePicker";
DatePicker.defaultProps = (0, _utils.getDefaultPropsFromGlobalConfig)(DatePicker.__SemiComponentName__, {
onChangeWithDateFirst: true,
borderless: false,
autoAdjustOverflow: true,
stopPropagation: true,
motion: true,
prefixCls: _constants.cssClasses.PREFIX,
presetPosition: 'bottom',
// position: 'bottomLeft',
zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
type: 'date',
size: 'default',
density: 'default',
multiple: false,
defaultOpen: false,
disabledHours: _noop2.default,
disabledMinutes: _noop2.default,
disabledSeconds: _noop2.default,
hideDisabledOptions: false,
onBlur: _noop2.default,
onFocus: _noop2.default,
onClear: _noop2.default,
onCancel: _noop2.default,
onConfirm: _noop2.default,
onChange: _noop2.default,
onOpenChange: _noop2.default,
onPanelChange: _noop2.default,
onPresetClick: _noop2.default,
weekStartsOn: _constants.numbers.WEEK_START_ON,
disabledDate: _stubFalse2.default,
disabledTime: _stubFalse2.default,
inputReadOnly: false,
spacing: _constants.numbers.SPACING,
autoSwitchDate: true,
syncSwitchMonth: false,
rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE,
insetInput: false,
onClickOutSide: _noop2.default
});