@fesjs/fes-design
Version:
fes-design for PC
269 lines (264 loc) • 10.9 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { defineComponent, computed, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList } from 'vue';
import { isArray, isFunction, isNumber } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { useNormalModel } from '../_util/use/useModel';
import FButton from '../button';
import { useLocale } from '../config-provider/useLocale';
import Calendar from './calendar.js';
import { getTimestampFromFormat } from './helper';
import { RANGE_POSITION, COMMON_PROPS, RANGE_PROPS } from './const';
import { useSelectStatus, useRange } from './useRange';
import { useDisable } from './use';
import { pickerFactory, PickerType } from './pickerHandler';
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; }
const prefixCls = getPrefixCls('date-picker-calendars');
const calendarsProps = _objectSpread(_objectSpread(_objectSpread({}, COMMON_PROPS), RANGE_PROPS), {}, {
visible: {
type: Boolean,
default: false
},
disabledDate: {
type: Function,
default: () => false
},
control: Boolean,
shortcuts: Object
});
var script = defineComponent({
name: 'FCalendars',
components: {
Calendar,
FButton
},
props: calendarsProps,
emits: ['update:modelValue', 'tmpSelectedDateChange', 'change'],
setup(props, _ref) {
let {
emit
} = _ref;
const [selectedDates] = useNormalModel(props, emit);
const pickerRef = computed(() => {
return pickerFactory(props.type);
});
const tempCurrentValue = ref([]);
const {
innerDisabledDate
} = useDisable(props);
const {
t
} = useLocale();
const currentText = computed(() => {
const confirmLang = pickerRef.value.confirmLang;
return confirmLang ? t(confirmLang) : '';
});
const {
selectedStatus,
selectedDay,
lastSelectedPosition
} = useSelectStatus(props);
const {
leftActiveDate,
rightActiveDate,
changeCurrentDate,
rangeDisabledDate,
resetActiveDate
} = useRange({
props,
tempCurrentValue,
innerDisabledDate,
selectedStatus,
lastSelectedPosition,
picker: pickerRef
});
const confirmDisabled = computed(() => {
if (pickerRef.value.isRange) {
return !tempCurrentValue.value.length;
}
if (pickerRef.value.name === PickerType.datemultiple) {
return false;
}
return !tempCurrentValue.value[0];
});
const visibleFooter = computed(() => props.control || pickerRef.value.name === PickerType.datemultiple || pickerRef.value.isRange || pickerRef.value.hasTime);
const change = () => {
if (pickerRef.value.isRange || pickerRef.value.name === PickerType.datemultiple) {
emit('change', tempCurrentValue.value);
} else {
emit('change', tempCurrentValue.value[0]);
}
};
const updateTempCurrentValue = val => {
tempCurrentValue.value = val;
if (pickerRef.value.isRange || pickerRef.value.name === PickerType.datemultiple) {
emit('tmpSelectedDateChange', tempCurrentValue.value);
} else {
emit('tmpSelectedDateChange', tempCurrentValue.value[0]);
}
if (!visibleFooter.value) {
change();
}
};
const handleTempCurrentValue = () => {
if (isArray(selectedDates.value)) {
tempCurrentValue.value = selectedDates.value;
} else {
tempCurrentValue.value = selectedDates.value ? [selectedDates.value] : [];
}
};
watch(selectedDates, handleTempCurrentValue, {
deep: true
});
const defaultActiveDate = ref(Date.now());
watch(() => props.visible, () => {
if (props.visible) {
handleTempCurrentValue();
if (tempCurrentValue.value.length) {
if (pickerRef.value.isRange) {
resetActiveDate();
} else {
defaultActiveDate.value = tempCurrentValue.value[0];
}
}
}
}, {
immediate: true
});
const selectCurrentTime = () => {
if (pickerRef.value.isRange) {
// FEATURE：时间范围的没想清楚怎么处理，后续优化
const format = pickerRef.value.format;
updateTempCurrentValue([getTimestampFromFormat(null, format), getTimestampFromFormat(null, format, true)]);
} else {
updateTempCurrentValue([getTimestampFromFormat(null, pickerRef.value.format)]);
change();
}
};
const confirm = () => {
change();
};
const handleShortcut = val => {
if (isFunction(val)) {
val = val();
}
if (isArray(val)) {
tempCurrentValue.value = val;
} else if (isNumber(val)) {
tempCurrentValue.value = [val];
}
change();
};
return {
RANGE_POSITION,
prefixCls,
tempCurrentValue,
change,
pickerRef,
leftActiveDate,
rightActiveDate,
changeCurrentDate,
visibleFooter,
selectCurrentTime,
confirmDisabled,
innerDisabledDate,
rangeDisabledDate,
selectedStatus,
selectedDay,
updateTempCurrentValue,
confirm,
t,
currentText,
handleShortcut,
defaultActiveDate
};
}
});
const _hoisted_1 = ["onClick"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Calendar = resolveComponent("Calendar");
const _component_FButton = resolveComponent("FButton");
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.prefixCls)
}, [createElementVNode("div", null, [_ctx.pickerRef.isRange ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(`${_ctx.prefixCls}-daterange`)
}, [createVNode(_component_Calendar, {
modelValue: _ctx.tempCurrentValue,
type: _ctx.type,
disabledTime: _ctx.disabledTime,
disabledDate: _ctx.rangeDisabledDate,
rangePosition: _ctx.RANGE_POSITION.LEFT,
activeDate: _ctx.leftActiveDate,
selectedStatus: _ctx.selectedStatus,
hourStep: _ctx.hourStep,
minuteStep: _ctx.minuteStep,
secondStep: _ctx.secondStep,
defaultTime: _ctx.defaultTime,
onChange: _ctx.updateTempCurrentValue,
onSelectedDay: _cache[0] || (_cache[0] = $event => _ctx.selectedDay(_ctx.RANGE_POSITION.LEFT)),
"onUpdate:activeDate": _cache[1] || (_cache[1] = timestamp => _ctx.changeCurrentDate(timestamp, _ctx.RANGE_POSITION.LEFT))
}, null, 8 /* PROPS */, ["modelValue", "type", "disabledTime", "disabledDate", "rangePosition", "activeDate", "selectedStatus", "hourStep", "minuteStep", "secondStep", "defaultTime", "onChange"]), createVNode(_component_Calendar, {
modelValue: _ctx.tempCurrentValue,
type: _ctx.type,
disabledTime: _ctx.disabledTime,
disabledDate: _ctx.rangeDisabledDate,
rangePosition: _ctx.RANGE_POSITION.RIGHT,
activeDate: _ctx.rightActiveDate,
selectedStatus: _ctx.selectedStatus,
hourStep: _ctx.hourStep,
minuteStep: _ctx.minuteStep,
secondStep: _ctx.secondStep,
defaultTime: _ctx.defaultTime,
onChange: _ctx.updateTempCurrentValue,
onSelectedDay: _cache[2] || (_cache[2] = $event => _ctx.selectedDay(_ctx.RANGE_POSITION.RIGHT)),
"onUpdate:activeDate": _cache[3] || (_cache[3] = timestamp => _ctx.changeCurrentDate(timestamp, _ctx.RANGE_POSITION.RIGHT))
}, null, 8 /* PROPS */, ["modelValue", "type", "disabledTime", "disabledDate", "rangePosition", "activeDate", "selectedStatus", "hourStep", "minuteStep", "secondStep", "defaultTime", "onChange"])], 2 /* CLASS */)) : (openBlock(), createBlock(_component_Calendar, {
key: 1,
activeDate: _ctx.defaultActiveDate,
"onUpdate:activeDate": _cache[4] || (_cache[4] = $event => _ctx.defaultActiveDate = $event),
modelValue: _ctx.tempCurrentValue,
type: _ctx.type,
disabledTime: _ctx.disabledTime,
disabledDate: _ctx.innerDisabledDate,
hourStep: _ctx.hourStep,
minuteStep: _ctx.minuteStep,
secondStep: _ctx.secondStep,
defaultTime: _ctx.defaultTime,
onChange: _ctx.updateTempCurrentValue
}, null, 8 /* PROPS */, ["activeDate", "modelValue", "type", "disabledTime", "disabledDate", "hourStep", "minuteStep", "secondStep", "defaultTime", "onChange"])), _ctx.visibleFooter ? (openBlock(), createElementBlock("div", {
key: 2,
class: normalizeClass(`${_ctx.prefixCls}-footer`)
}, [createElementVNode("div", {
class: normalizeClass(`${_ctx.prefixCls}-footer-inner`),
onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
}, [_ctx.currentText ? (openBlock(), createBlock(_component_FButton, {
key: 0,
type: "link",
size: "small",
onClick: _ctx.selectCurrentTime
}, {
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentText), 1 /* TEXT */)]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["onClick"])) : createCommentVNode("v-if", true), createVNode(_component_FButton, {
disabled: _ctx.confirmDisabled,
type: "primary",
size: "small",
onClick: _ctx.confirm
}, {
default: withCtx(() => [createTextVNode(toDisplayString(_ctx.t('datePicker.confirm')), 1 /* TEXT */)]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["disabled", "onClick"])], 34 /* CLASS, NEED_HYDRATION */)], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), _ctx.shortcuts && Object.keys(_ctx.shortcuts).length ? (openBlock(), createElementBlock("ul", {
key: 0,
class: normalizeClass(`${_ctx.prefixCls}-shortcuts`),
onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"]))
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.shortcuts, (val, name) => {
return openBlock(), createElementBlock("li", {
key: name,
onClick: $event => _ctx.handleShortcut(val)
}, toDisplayString(name), 9 /* TEXT, PROPS */, _hoisted_1);
}), 128 /* KEYED_FRAGMENT */))], 34 /* CLASS, NEED_HYDRATION */)) : createCommentVNode("v-if", true)], 2 /* CLASS */);
}
script.render = render;
script.__file = "components/date-picker/calendars.vue";
export { script as default };