| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- 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);
- });
|