ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
446 lines (445 loc) • 17.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _TimePanel = _interopRequireDefault(require("./panels/TimePanel"));
var _DatetimePanel = _interopRequireDefault(require("./panels/DatetimePanel"));
var _DatePanel = _interopRequireDefault(require("./panels/DatePanel"));
var _WeekPanel = _interopRequireDefault(require("./panels/WeekPanel"));
var _MonthPanel = _interopRequireDefault(require("./panels/MonthPanel"));
var _QuarterPanel = _interopRequireDefault(require("./panels/QuarterPanel"));
var _YearPanel = _interopRequireDefault(require("./panels/YearPanel"));
var _DecadePanel = _interopRequireDefault(require("./panels/DecadePanel"));
var _dateUtil = require("./utils/dateUtil");
var _PanelContext = require("./PanelContext");
var _uiUtil = require("./utils/uiUtil");
var _RangeContext = require("./RangeContext");
var _getExtraFooter = _interopRequireDefault(require("./utils/getExtraFooter"));
var _getRanges = _interopRequireDefault(require("./utils/getRanges"));
var _timeUtil = require("./utils/timeUtil");
var _useMergedState = _interopRequireDefault(require("../_util/hooks/useMergedState"));
var _warning = require("../vc-util/warning");
var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
var _classNames = _interopRequireDefault(require("../_util/classNames"));
function PickerPanel() {
return (0, _vue.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(props, _ref) {
let {
attrs
} = _ref;
const needConfirmButton = (0, _vue.computed)(() => props.picker === 'date' && !!props.showTime || props.picker === 'time');
const isHourStepValid = (0, _vue.computed)(() => 24 % props.hourStep === 0);
const isMinuteStepValid = (0, _vue.computed)(() => 60 % props.minuteStep === 0);
const isSecondStepValid = (0, _vue.computed)(() => 60 % props.secondStep === 0);
if (process.env.NODE_ENV !== 'production') {
(0, _vue.watchEffect)(() => {
const {
generateConfig,
value,
hourStep = 1,
minuteStep = 1,
secondStep = 1
} = props;
(0, _warning.warning)(!value || generateConfig.isValidate(value), 'Invalidate date pass to `value`.');
(0, _warning.warning)(!value || generateConfig.isValidate(value), 'Invalidate date pass to `defaultValue`.');
(0, _warning.warning)(isHourStepValid.value, `\`hourStep\` ${hourStep} is invalid. It should be a factor of 24.`);
(0, _warning.warning)(isMinuteStepValid.value, `\`minuteStep\` ${minuteStep} is invalid. It should be a factor of 60.`);
(0, _warning.warning)(isSecondStepValid.value, `\`secondStep\` ${secondStep} is invalid. It should be a factor of 60.`);
});
}
const panelContext = (0, _PanelContext.useInjectPanel)();
const {
operationRef,
onSelect: onContextSelect,
hideRanges,
defaultOpenValue
} = panelContext;
const {
inRange,
panelPosition,
rangedValue,
hoverRangedValue
} = (0, _RangeContext.useInjectRange)();
const panelRef = (0, _vue.ref)({});
// Value
const [mergedValue, setInnerValue] = (0, _useMergedState.default)(null, {
value: (0, _vue.toRef)(props, 'value'),
defaultValue: props.defaultValue,
postState: val => {
if (!val && (defaultOpenValue === null || defaultOpenValue === void 0 ? void 0 : defaultOpenValue.value) && props.picker === 'time') {
return defaultOpenValue.value;
}
return val;
}
});
// View date control
const [viewDate, setInnerViewDate] = (0, _useMergedState.default)(null, {
value: (0, _vue.toRef)(props, 'pickerValue'),
defaultValue: props.defaultPickerValue || mergedValue.value,
postState: date => {
const {
generateConfig,
showTime,
defaultValue
} = props;
const now = generateConfig.getNow();
if (!date) return now;
// When value is null and set showTime
if (!mergedValue.value && props.showTime) {
if (typeof showTime === 'object') {
return (0, _timeUtil.setDateTime)(generateConfig, Array.isArray(date) ? date[0] : date, showTime.defaultValue || now);
}
if (defaultValue) {
return (0, _timeUtil.setDateTime)(generateConfig, Array.isArray(date) ? date[0] : date, defaultValue);
}
return (0, _timeUtil.setDateTime)(generateConfig, Array.isArray(date) ? date[0] : date, now);
}
return date;
}
});
const setViewDate = date => {
setInnerViewDate(date);
if (props.onPickerValueChange) {
props.onPickerValueChange(date);
}
};
// Panel control
const getInternalNextMode = nextMode => {
const getNextMode = _uiUtil.PickerModeMap[props.picker];
if (getNextMode) {
return getNextMode(nextMode);
}
return nextMode;
};
// Save panel is changed from which panel
const [mergedMode, setInnerMode] = (0, _useMergedState.default)(() => {
if (props.picker === 'time') {
return 'time';
}
return getInternalNextMode('date');
}, {
value: (0, _vue.toRef)(props, 'mode')
});
(0, _vue.watch)(() => props.picker, () => {
setInnerMode(props.picker);
});
const sourceMode = (0, _vue.ref)(mergedMode.value);
const setSourceMode = val => {
sourceMode.value = val;
};
const onInternalPanelChange = (newMode, viewValue) => {
const {
onPanelChange,
generateConfig
} = props;
const nextMode = getInternalNextMode(newMode || mergedMode.value);
setSourceMode(mergedMode.value);
setInnerMode(nextMode);
if (onPanelChange && (mergedMode.value !== nextMode || (0, _dateUtil.isEqual)(generateConfig, viewDate.value, viewDate.value))) {
onPanelChange(viewValue, nextMode);
}
};
const triggerSelect = function (date, type) {
let forceTriggerSelect = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
const {
picker,
generateConfig,
onSelect,
onChange,
disabledDate
} = props;
if (mergedMode.value === picker || forceTriggerSelect) {
setInnerValue(date);
if (onSelect) {
onSelect(date);
}
if (onContextSelect) {
onContextSelect(date, type);
}
if (onChange && !(0, _dateUtil.isEqual)(generateConfig, date, mergedValue.value) && !(disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date))) {
onChange(date);
}
}
};
// ========================= Interactive ==========================
const onInternalKeydown = e => {
if (panelRef.value && panelRef.value.onKeydown) {
if ([_KeyCode.default.LEFT, _KeyCode.default.RIGHT, _KeyCode.default.UP, _KeyCode.default.DOWN, _KeyCode.default.PAGE_UP, _KeyCode.default.PAGE_DOWN, _KeyCode.default.ENTER].includes(e.which)) {
e.preventDefault();
}
return panelRef.value.onKeydown(e);
}
/* istanbul ignore next */
/* eslint-disable no-lone-blocks */
{
(0, _warning.warning)(false, 'Panel not correct handle keyDown event. Please help to fire issue about this.');
return false;
}
/* eslint-enable no-lone-blocks */
};
const onInternalBlur = e => {
if (panelRef.value && panelRef.value.onBlur) {
panelRef.value.onBlur(e);
}
};
const onNow = () => {
const {
generateConfig,
hourStep,
minuteStep,
secondStep
} = props;
const now = generateConfig.getNow();
const lowerBoundTime = (0, _timeUtil.getLowerBoundTime)(generateConfig.getHour(now), generateConfig.getMinute(now), generateConfig.getSecond(now), isHourStepValid.value ? hourStep : 1, isMinuteStepValid.value ? minuteStep : 1, isSecondStepValid.value ? secondStep : 1);
const adjustedNow = (0, _timeUtil.setTime)(generateConfig, now, lowerBoundTime[0],
// hour
lowerBoundTime[1],
// minute
lowerBoundTime[2]);
triggerSelect(adjustedNow, 'submit');
};
const classString = (0, _vue.computed)(() => {
const {
prefixCls,
direction
} = props;
return (0, _classNames.default)(`${prefixCls}-panel`, {
[`${prefixCls}-panel-has-range`]: rangedValue && rangedValue.value && rangedValue.value[0] && rangedValue.value[1],
[`${prefixCls}-panel-has-range-hover`]: hoverRangedValue && hoverRangedValue.value && hoverRangedValue.value[0] && hoverRangedValue.value[1],
[`${prefixCls}-panel-rtl`]: direction === 'rtl'
});
});
(0, _PanelContext.useProvidePanel)((0, _extends2.default)((0, _extends2.default)({}, panelContext), {
mode: mergedMode,
hideHeader: (0, _vue.computed)(() => {
var _a;
return props.hideHeader !== undefined ? props.hideHeader : (_a = panelContext.hideHeader) === null || _a === void 0 ? void 0 : _a.value;
}),
hidePrevBtn: (0, _vue.computed)(() => inRange.value && panelPosition.value === 'right'),
hideNextBtn: (0, _vue.computed)(() => inRange.value && panelPosition.value === 'left')
}));
(0, _vue.watch)(() => props.value, () => {
if (props.value) {
setInnerViewDate(props.value);
}
});
return () => {
const {
prefixCls = 'ant-picker',
locale,
generateConfig,
disabledDate,
picker = 'date',
tabindex = 0,
showNow,
showTime,
showToday,
renderExtraFooter,
onMousedown,
onOk,
components
} = props;
if (operationRef && panelPosition.value !== 'right') {
operationRef.value = {
onKeydown: onInternalKeydown,
onClose: () => {
if (panelRef.value && panelRef.value.onClose) {
panelRef.value.onClose();
}
}
};
}
// ============================ Panels ============================
let panelNode;
const pickerProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, attrs), props), {
operationRef: panelRef,
prefixCls,
viewDate: viewDate.value,
value: mergedValue.value,
onViewDateChange: setViewDate,
sourceMode: sourceMode.value,
onPanelChange: onInternalPanelChange,
disabledDate
});
delete pickerProps.onChange;
delete pickerProps.onSelect;
switch (mergedMode.value) {
case 'decade':
panelNode = (0, _vue.createVNode)(_DecadePanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'year':
panelNode = (0, _vue.createVNode)(_YearPanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'month':
panelNode = (0, _vue.createVNode)(_MonthPanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'quarter':
panelNode = (0, _vue.createVNode)(_QuarterPanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'week':
panelNode = (0, _vue.createVNode)(_WeekPanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
case 'time':
delete pickerProps.showTime;
panelNode = (0, _vue.createVNode)(_TimePanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), typeof showTime === 'object' ? showTime : null), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
break;
default:
if (showTime) {
panelNode = (0, _vue.createVNode)(_DatetimePanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
} else {
panelNode = (0, _vue.createVNode)(_DatePanel.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickerProps), {}, {
"onSelect": (date, type) => {
setViewDate(date);
triggerSelect(date, type);
}
}), null);
}
}
// ============================ Footer ============================
let extraFooter;
let rangesNode;
if (!(hideRanges === null || hideRanges === void 0 ? void 0 : hideRanges.value)) {
extraFooter = (0, _getExtraFooter.default)(prefixCls, mergedMode.value, renderExtraFooter);
rangesNode = (0, _getRanges.default)({
prefixCls,
components,
needConfirmButton: needConfirmButton.value,
okDisabled: !mergedValue.value || disabledDate && disabledDate(mergedValue.value),
locale,
showNow,
onNow: needConfirmButton.value && onNow,
onOk: () => {
if (mergedValue.value) {
triggerSelect(mergedValue.value, 'submit', true);
if (onOk) {
onOk(mergedValue.value);
}
}
}
});
}
let todayNode;
if (showToday && mergedMode.value === 'date' && picker === 'date' && !showTime) {
const now = generateConfig.getNow();
const todayCls = `${prefixCls}-today-btn`;
const disabled = disabledDate && disabledDate(now);
todayNode = (0, _vue.createVNode)("a", {
"class": (0, _classNames.default)(todayCls, disabled && `${todayCls}-disabled`),
"aria-disabled": disabled,
"onClick": () => {
if (!disabled) {
triggerSelect(now, 'mouse', true);
}
}
}, [locale.today]);
}
return (0, _vue.createVNode)("div", {
"tabindex": tabindex,
"class": (0, _classNames.default)(classString.value, attrs.class),
"style": attrs.style,
"onKeydown": onInternalKeydown,
"onBlur": onInternalBlur,
"onMousedown": onMousedown
}, [panelNode, extraFooter || rangesNode || todayNode ? (0, _vue.createVNode)("div", {
"class": `${prefixCls}-footer`
}, [extraFooter, rangesNode, todayNode]) : null]);
};
}
});
}
const InterPickerPanel = PickerPanel();
var _default = props => (0, _vue.createVNode)(InterPickerPanel, props);
exports.default = _default;