ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
455 lines (454 loc) • 19 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import TimePanel from './panels/TimePanel';
import DatetimePanel from './panels/DatetimePanel';
import DatePanel from './panels/DatePanel';
import WeekPanel from './panels/WeekPanel';
import MonthPanel from './panels/MonthPanel';
import QuarterPanel from './panels/QuarterPanel';
import YearPanel from './panels/YearPanel';
import DecadePanel from './panels/DecadePanel';
import { isEqual } from './utils/dateUtil';
import { useInjectPanel, useProvidePanel } from './PanelContext';
import { PickerModeMap } from './utils/uiUtil';
import { useInjectRange } from './RangeContext';
import getExtraFooter from './utils/getExtraFooter';
import getRanges from './utils/getRanges';
import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil';
import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue';
import useMergedState from '../_util/hooks/useMergedState';
import { warning } from '../vc-util/warning';
import KeyCode from '../_util/KeyCode';
import classNames from '../_util/classNames';
function PickerPanel() {
return defineComponent({
name: 'PickerPanel',
inheritAttrs: false,
props: {
prefixCls: String,
locale: Object,
generateConfig: Object,
value: Object,
defaultValue: Object,
pickerValue: Object,
defaultPickerValue: Object,
disabledDate: Function,
mode: String,
picker: {
type: String,
default: 'date'
},
tabindex: {
type: [Number, String],
default: 0
},
showNow: {
type: Boolean,
default: undefined
},
showTime: [Boolean, Object],
showToday: Boolean,
renderExtraFooter: Function,
dateRender: Function,
hideHeader: {
type: Boolean,
default: undefined
},
onSelect: Function,
onChange: Function,
onPanelChange: Function,
onMousedown: Function,
onPickerValueChange: Function,
onOk: Function,
components: Object,
direction: String,
hourStep: {
type: Number,
default: 1
},
minuteStep: {
type: Number,
default: 1
},
secondStep: {
type: Number,
default: 1
}
},
setup: function setup(props, _ref) {
var attrs = _ref.attrs;
var needConfirmButton = computed(function () {
return props.picker === 'date' && !!props.showTime || props.picker === 'time';
});
var isHourStepValid = computed(function () {
return 24 % props.hourStep === 0;
});
var isMinuteStepValid = computed(function () {
return 60 % props.minuteStep === 0;
});
var isSecondStepValid = computed(function () {
return 60 % props.secondStep === 0;
});
if (process.env.NODE_ENV !== 'production') {
watchEffect(function () {
var generateConfig = props.generateConfig,
value = props.value,
_props$hourStep = props.hourStep,
hourStep = _props$hourStep === void 0 ? 1 : _props$hourStep,
_props$minuteStep = props.minuteStep,
minuteStep = _props$minuteStep === void 0 ? 1 : _props$minuteStep,
_props$secondStep = props.secondStep,
secondStep = _props$secondStep === void 0 ? 1 : _props$secondStep;
warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `value`.');
warning(!value || generateConfig.isValidate(value), 'Invalidate date pass to `defaultValue`.');
warning(isHourStepValid.value, "`hourStep` ".concat(hourStep, " is invalid. It should be a factor of 24."));
warning(isMinuteStepValid.value, "`minuteStep` ".concat(minuteStep, " is invalid. It should be a factor of 60."));
warning(isSecondStepValid.value, "`secondStep` ".concat(secondStep, " is invalid. It should be a factor of 60."));
});
}
var panelContext = useInjectPanel();
var operationRef = panelContext.operationRef,
panelDivRef = panelContext.panelRef,
onContextSelect = panelContext.onSelect,
hideRanges = panelContext.hideRanges,
defaultOpenValue = panelContext.defaultOpenValue;
var _useInjectRange = useInjectRange(),
inRange = _useInjectRange.inRange,
panelPosition = _useInjectRange.panelPosition,
rangedValue = _useInjectRange.rangedValue,
hoverRangedValue = _useInjectRange.hoverRangedValue;
var panelRef = ref({});
// Value
var _useMergedState = useMergedState(null, {
value: toRef(props, 'value'),
defaultValue: props.defaultValue,
postState: function postState(val) {
if (!val && defaultOpenValue !== null && defaultOpenValue !== void 0 && defaultOpenValue.value && props.picker === 'time') {
return defaultOpenValue.value;
}
return val;
}
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
mergedValue = _useMergedState2[0],
setInnerValue = _useMergedState2[1];
// View date control
var _useMergedState3 = useMergedState(null, {
value: toRef(props, 'pickerValue'),
defaultValue: props.defaultPickerValue || mergedValue.value,
postState: function postState(date) {
var generateConfig = props.generateConfig,
showTime = props.showTime,
defaultValue = props.defaultValue;
var now = generateConfig.getNow();
if (!date) return now;
// When value is null and set showTime
if (!mergedValue.value && props.showTime) {
if (_typeof(showTime) === 'object') {
return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, showTime.defaultValue || now);
}
if (defaultValue) {
return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, defaultValue);
}
return setDateTime(generateConfig, Array.isArray(date) ? date[0] : date, now);
}
return date;
}
}),
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
viewDate = _useMergedState4[0],
setInnerViewDate = _useMergedState4[1];
var setViewDate = function setViewDate(date) {
setInnerViewDate(date);
if (props.onPickerValueChange) {
props.onPickerValueChange(date);
}
};
// Panel control
var getInternalNextMode = function getInternalNextMode(nextMode) {
var getNextMode = PickerModeMap[props.picker];
if (getNextMode) {
return getNextMode(nextMode);
}
return nextMode;
};
// Save panel is changed from which panel
var _useMergedState5 = useMergedState(function () {
if (props.picker === 'time') {
return 'time';
}
return getInternalNextMode('date');
}, {
value: toRef(props, 'mode')
}),
_useMergedState6 = _slicedToArray(_useMergedState5, 2),
mergedMode = _useMergedState6[0],
setInnerMode = _useMergedState6[1];
watch(function () {
return props.picker;
}, function () {
setInnerMode(props.picker);
});
var sourceMode = ref(mergedMode.value);
var setSourceMode = function setSourceMode(val) {
sourceMode.value = val;
};
var onInternalPanelChange = function onInternalPanelChange(newMode, viewValue) {
var onPanelChange = props.onPanelChange,
generateConfig = props.generateConfig;
var nextMode = getInternalNextMode(newMode || mergedMode.value);
setSourceMode(mergedMode.value);
setInnerMode(nextMode);
if (onPanelChange && (mergedMode.value !== nextMode || isEqual(generateConfig, viewDate.value, viewDate.value))) {
onPanelChange(viewValue, nextMode);
}
};
var triggerSelect = function triggerSelect(date, type) {
var forceTriggerSelect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var picker = props.picker,
generateConfig = props.generateConfig,
onSelect = props.onSelect,
onChange = props.onChange,
disabledDate = props.disabledDate;
if (mergedMode.value === picker || forceTriggerSelect) {
setInnerValue(date);
if (onSelect) {
onSelect(date);
}
if (onContextSelect) {
onContextSelect(date, type);
}
if (onChange && !isEqual(generateConfig, date, mergedValue.value) && !(disabledDate !== null && disabledDate !== void 0 && disabledDate(date))) {
onChange(date);
}
}
};
// ========================= Interactive ==========================
var onInternalKeydown = function onInternalKeydown(e) {
if (panelRef.value && panelRef.value.onKeydown) {
if ([KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN, KeyCode.PAGE_UP, KeyCode.PAGE_DOWN, KeyCode.ENTER].includes(e.which)) {
e.preventDefault();
}
return panelRef.value.onKeydown(e);
}
/* istanbul ignore next */
/* eslint-disable no-lone-blocks */
{
warning(false, 'Panel not correct handle keyDown event. Please help to fire issue about this.');
return false;
}
/* eslint-enable no-lone-blocks */
};
var onInternalBlur = function onInternalBlur(e) {
if (panelRef.value && panelRef.value.onBlur) {
panelRef.value.onBlur(e);
}
};
var onNow = function onNow() {
var generateConfig = props.generateConfig,
hourStep = props.hourStep,
minuteStep = props.minuteStep,
secondStep = props.secondStep;
var now = generateConfig.getNow();
var lowerBoundTime = getLowerBoundTime(generateConfig.getHour(now), generateConfig.getMinute(now), generateConfig.getSecond(now), isHourStepValid.value ? hourStep : 1, isMinuteStepValid.value ? minuteStep : 1, isSecondStepValid.value ? secondStep : 1);
var adjustedNow = setTime(generateConfig, now, lowerBoundTime[0],
// hour
lowerBoundTime[1],
// minute
lowerBoundTime[2]);
triggerSelect(adjustedNow, 'submit');
};
var classString = computed(function () {
var _classNames;
var prefixCls = props.prefixCls,
direction = props.direction;
return classNames("".concat(prefixCls, "-panel"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-panel-has-range"), rangedValue && rangedValue.value && rangedValue.value[0] && rangedValue.value[1]), _defineProperty(_classNames, "".concat(prefixCls, "-panel-has-range-hover"), hoverRangedValue && hoverRangedValue.value && hoverRangedValue.value[0] && hoverRangedValue.value[1]), _defineProperty(_classNames, "".concat(prefixCls, "-panel-rtl"), direction === 'rtl'), _classNames));
});
useProvidePanel(_objectSpread(_objectSpread({}, panelContext), {}, {
mode: mergedMode,
hideHeader: computed(function () {
var _panelContext$hideHea;
return props.hideHeader !== undefined ? props.hideHeader : (_panelContext$hideHea = panelContext.hideHeader) === null || _panelContext$hideHea === void 0 ? void 0 : _panelContext$hideHea.value;
}),
hidePrevBtn: computed(function () {
return inRange.value && panelPosition.value === 'right';
}),
hideNextBtn: computed(function () {
return inRange.value && panelPosition.value === 'left';
})
}));
watch(function () {
return props.value;
}, function () {
if (props.value) {
setInnerViewDate(props.value);
}
});
return function () {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'ant-picker' : _props$prefixCls,
locale = props.locale,
generateConfig = props.generateConfig,
disabledDate = props.disabledDate,
_props$picker = props.picker,
picker = _props$picker === void 0 ? 'date' : _props$picker,
_props$tabindex = props.tabindex,
tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
showNow = props.showNow,
showTime = props.showTime,
showToday = props.showToday,
renderExtraFooter = props.renderExtraFooter,
onMousedown = props.onMousedown,
_onOk = props.onOk,
components = props.components;
if (operationRef && panelPosition.value !== 'right') {
operationRef.value = {
onKeydown: onInternalKeydown,
onClose: function onClose() {
if (panelRef.value && panelRef.value.onClose) {
panelRef.value.onClose();
}
}
};
}
// ============================ Panels ============================
var panelNode;
var pickerProps = _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
operationRef: panelRef,
prefixCls: prefixCls,
viewDate: viewDate.value,
value: mergedValue.value,
onViewDateChange: setViewDate,
sourceMode: sourceMode.value,
onPanelChange: onInternalPanelChange,
disabledDate: disabledDate
});
delete pickerProps.onChange;
delete pickerProps.onSelect;
switch (mergedMode.value) {
case 'decade':
panelNode = _createVNode(DecadePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'year':
panelNode = _createVNode(YearPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'month':
panelNode = _createVNode(MonthPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'quarter':
panelNode = _createVNode(QuarterPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'week':
panelNode = _createVNode(WeekPanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'time':
delete pickerProps.showTime;
panelNode = _createVNode(TimePanel, _objectSpread(_objectSpread(_objectSpread({}, pickerProps), _typeof(showTime) === 'object' ? showTime : null), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
default:
if (showTime) {
panelNode = _createVNode(DatetimePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
} else {
panelNode = _createVNode(DatePanel, _objectSpread(_objectSpread({}, pickerProps), {}, {
"onSelect": function onSelect(date, type) {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
}
}
// ============================ Footer ============================
var extraFooter;
var rangesNode;
if (!(hideRanges !== null && hideRanges !== void 0 && hideRanges.value)) {
extraFooter = getExtraFooter(prefixCls, mergedMode.value, renderExtraFooter);
rangesNode = getRanges({
prefixCls: prefixCls,
components: components,
needConfirmButton: needConfirmButton.value,
okDisabled: !mergedValue.value || disabledDate && disabledDate(mergedValue.value),
locale: locale,
showNow: showNow,
onNow: needConfirmButton.value && onNow,
onOk: function onOk() {
if (mergedValue.value) {
triggerSelect(mergedValue.value, 'submit', true);
if (_onOk) {
_onOk(mergedValue.value);
}
}
}
});
}
var todayNode;
if (showToday && mergedMode.value === 'date' && picker === 'date' && !showTime) {
var now = generateConfig.getNow();
var todayCls = "".concat(prefixCls, "-today-btn");
var disabled = disabledDate && disabledDate(now);
todayNode = _createVNode("a", {
"class": classNames(todayCls, disabled && "".concat(todayCls, "-disabled")),
"aria-disabled": disabled,
"onClick": function onClick() {
if (!disabled) {
triggerSelect(now, 'mouse', true);
}
}
}, [locale.today]);
}
return _createVNode("div", {
"tabindex": tabindex,
"class": classNames(classString.value, attrs.class),
"style": attrs.style,
"onKeydown": onInternalKeydown,
"onBlur": onInternalBlur,
"onMousedown": onMousedown,
"ref": panelDivRef
}, [panelNode, extraFooter || rangesNode || todayNode ? _createVNode("div", {
"class": "".concat(prefixCls, "-footer")
}, [extraFooter, rangesNode, todayNode]) : null]);
};
}
});
}
var InterPickerPanel = PickerPanel();
export default (function (props) {
return createVNode(InterPickerPanel, props);
});