254 lines
12 KiB
JavaScript
254 lines
12 KiB
JavaScript
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
const vue_1 = require("vue");
|
||
|
|
const _internal_1 = require("../../_internal");
|
||
|
|
const button_1 = require("../../button");
|
||
|
|
const utils_1 = require("./utils");
|
||
|
|
const interface_1 = require("./interface");
|
||
|
|
const PanelCol_1 = __importDefault(require("./PanelCol"));
|
||
|
|
const timePickerPanelProps = {
|
||
|
|
actions: {
|
||
|
|
type: Array,
|
||
|
|
default: () => ['now', 'confirm']
|
||
|
|
},
|
||
|
|
showHour: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
showMinute: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
showSecond: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
showPeriod: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
isHourInvalid: Boolean,
|
||
|
|
isMinuteInvalid: Boolean,
|
||
|
|
isSecondInvalid: Boolean,
|
||
|
|
isAmPmInvalid: Boolean,
|
||
|
|
isValueInvalid: Boolean,
|
||
|
|
hourValue: {
|
||
|
|
type: Number,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
minuteValue: {
|
||
|
|
type: Number,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
secondValue: {
|
||
|
|
type: Number,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
amPmValue: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
isHourDisabled: Function,
|
||
|
|
isMinuteDisabled: Function,
|
||
|
|
isSecondDisabled: Function,
|
||
|
|
onHourClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onMinuteClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onSecondClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onAmPmClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
onNowClick: Function,
|
||
|
|
clearText: String,
|
||
|
|
nowText: String,
|
||
|
|
confirmText: String,
|
||
|
|
transitionDisabled: Boolean,
|
||
|
|
onClearClick: Function,
|
||
|
|
onConfirmClick: Function,
|
||
|
|
onFocusin: Function,
|
||
|
|
onFocusout: Function,
|
||
|
|
onFocusDetectorFocus: Function,
|
||
|
|
onKeydown: Function,
|
||
|
|
hours: [Number, Array],
|
||
|
|
minutes: [Number, Array],
|
||
|
|
seconds: [Number, Array],
|
||
|
|
use12Hours: Boolean
|
||
|
|
};
|
||
|
|
exports.default = (0, vue_1.defineComponent)({
|
||
|
|
name: 'TimePickerPanel',
|
||
|
|
props: timePickerPanelProps,
|
||
|
|
setup(props) {
|
||
|
|
const { mergedThemeRef, mergedClsPrefixRef
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||
|
|
} = (0, vue_1.inject)(interface_1.timePickerInjectionKey);
|
||
|
|
const hoursRef = (0, vue_1.computed)(() => {
|
||
|
|
const { isHourDisabled, hours, use12Hours, amPmValue } = props;
|
||
|
|
if (!use12Hours) {
|
||
|
|
return (0, utils_1.getTimeUnits)(utils_1.time.hours, hours).map((hour) => {
|
||
|
|
return {
|
||
|
|
label: hour,
|
||
|
|
value: Number(hour),
|
||
|
|
disabled: isHourDisabled ? isHourDisabled(Number(hour)) : false
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const mergedAmPmValue = amPmValue !== null && amPmValue !== void 0 ? amPmValue : (0, utils_1.getAmPm)(Date.now());
|
||
|
|
return (0, utils_1.getTimeUnits)(utils_1.time.hours, hours, mergedAmPmValue).map((hour) => {
|
||
|
|
const hourAs12FormattedNumber = Number(hour);
|
||
|
|
const hourAs24FormattedNumber = mergedAmPmValue === 'pm' && hourAs12FormattedNumber !== 12
|
||
|
|
? hourAs12FormattedNumber + 12
|
||
|
|
: hourAs12FormattedNumber;
|
||
|
|
return {
|
||
|
|
label: hour,
|
||
|
|
value: hourAs24FormattedNumber,
|
||
|
|
disabled: isHourDisabled
|
||
|
|
? isHourDisabled(hourAs24FormattedNumber)
|
||
|
|
: false
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const minutesRef = (0, vue_1.computed)(() => {
|
||
|
|
const { isMinuteDisabled, minutes } = props;
|
||
|
|
return (0, utils_1.getTimeUnits)(utils_1.time.minutes, minutes).map((minute) => {
|
||
|
|
return {
|
||
|
|
label: minute,
|
||
|
|
value: Number(minute),
|
||
|
|
disabled: isMinuteDisabled
|
||
|
|
? isMinuteDisabled(Number(minute), props.hourValue)
|
||
|
|
: false
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
const secondsRef = (0, vue_1.computed)(() => {
|
||
|
|
const { isSecondDisabled, seconds } = props;
|
||
|
|
return (0, utils_1.getTimeUnits)(utils_1.time.seconds, seconds).map((second) => {
|
||
|
|
return {
|
||
|
|
label: second,
|
||
|
|
value: Number(second),
|
||
|
|
disabled: isSecondDisabled
|
||
|
|
? isSecondDisabled(Number(second), props.minuteValue, props.hourValue)
|
||
|
|
: false
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
const amPmRef = (0, vue_1.computed)(() => {
|
||
|
|
const { isHourDisabled } = props;
|
||
|
|
let amDisabled = true;
|
||
|
|
let pmDisabled = true;
|
||
|
|
for (let i = 0; i < 12; ++i) {
|
||
|
|
if (!(isHourDisabled === null || isHourDisabled === void 0 ? void 0 : isHourDisabled(i))) {
|
||
|
|
amDisabled = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 12; i < 24; ++i) {
|
||
|
|
if (!(isHourDisabled === null || isHourDisabled === void 0 ? void 0 : isHourDisabled(i))) {
|
||
|
|
pmDisabled = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: 'AM',
|
||
|
|
value: 'am',
|
||
|
|
disabled: amDisabled
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'PM',
|
||
|
|
value: 'pm',
|
||
|
|
disabled: pmDisabled
|
||
|
|
}
|
||
|
|
];
|
||
|
|
});
|
||
|
|
return {
|
||
|
|
mergedTheme: mergedThemeRef,
|
||
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
||
|
|
hours: hoursRef,
|
||
|
|
minutes: minutesRef,
|
||
|
|
seconds: secondsRef,
|
||
|
|
amPm: amPmRef,
|
||
|
|
hourScrollRef: (0, vue_1.ref)(null),
|
||
|
|
minuteScrollRef: (0, vue_1.ref)(null),
|
||
|
|
secondScrollRef: (0, vue_1.ref)(null),
|
||
|
|
amPmScrollRef: (0, vue_1.ref)(null)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
var _a, _b, _c, _d;
|
||
|
|
const { mergedClsPrefix, mergedTheme } = this;
|
||
|
|
return ((0, vue_1.h)("div", { tabindex: 0, class: `${mergedClsPrefix}-time-picker-panel`, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeydown: this.onKeydown },
|
||
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-cols` },
|
||
|
|
this.showHour ? ((0, vue_1.h)("div", { class: [
|
||
|
|
`${mergedClsPrefix}-time-picker-col`,
|
||
|
|
this.isHourInvalid &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--invalid`,
|
||
|
|
this.transitionDisabled &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--transition-disabled`
|
||
|
|
] },
|
||
|
|
(0, vue_1.h)(_internal_1.NScrollbar, { ref: "hourScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
|
||
|
|
default: () => [
|
||
|
|
(0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.hours, activeValue: this.hourValue, onItemClick: this.onHourClick }),
|
||
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
|
||
|
|
]
|
||
|
|
}))) : null,
|
||
|
|
this.showMinute ? ((0, vue_1.h)("div", { class: [
|
||
|
|
`${mergedClsPrefix}-time-picker-col`,
|
||
|
|
this.transitionDisabled &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--transition-disabled`,
|
||
|
|
this.isMinuteInvalid &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--invalid`
|
||
|
|
] },
|
||
|
|
(0, vue_1.h)(_internal_1.NScrollbar, { ref: "minuteScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
|
||
|
|
default: () => [
|
||
|
|
(0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.minutes, activeValue: this.minuteValue, onItemClick: this.onMinuteClick }),
|
||
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
|
||
|
|
]
|
||
|
|
}))) : null,
|
||
|
|
this.showSecond ? ((0, vue_1.h)("div", { class: [
|
||
|
|
`${mergedClsPrefix}-time-picker-col`,
|
||
|
|
this.isSecondInvalid &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--invalid`,
|
||
|
|
this.transitionDisabled &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--transition-disabled`
|
||
|
|
] },
|
||
|
|
(0, vue_1.h)(_internal_1.NScrollbar, { ref: "secondScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
|
||
|
|
default: () => [
|
||
|
|
(0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.seconds, activeValue: this.secondValue, onItemClick: this.onSecondClick }),
|
||
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
|
||
|
|
]
|
||
|
|
}))) : null,
|
||
|
|
this.use12Hours ? ((0, vue_1.h)("div", { class: [
|
||
|
|
`${mergedClsPrefix}-time-picker-col`,
|
||
|
|
this.isAmPmInvalid &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--invalid`,
|
||
|
|
this.transitionDisabled &&
|
||
|
|
`${mergedClsPrefix}-time-picker-col--transition-disabled`
|
||
|
|
] },
|
||
|
|
(0, vue_1.h)(_internal_1.NScrollbar, { ref: "amPmScrollRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
|
||
|
|
default: () => [
|
||
|
|
(0, vue_1.h)(PanelCol_1.default, { clsPrefix: mergedClsPrefix, data: this.amPm, activeValue: this.amPmValue, onItemClick: this.onAmPmClick }),
|
||
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
|
||
|
|
]
|
||
|
|
}))) : null),
|
||
|
|
((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-actions` },
|
||
|
|
((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('clear')) ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: "tiny", onClick: this.onClearClick }, { default: () => this.clearText })) : null,
|
||
|
|
((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('now')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
|
||
|
|
((_d = this.actions) === null || _d === void 0 ? void 0 : _d.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null)) : null,
|
||
|
|
(0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })));
|
||
|
|
}
|
||
|
|
});
|