@aplus-frontend/antdv
Version:
Vue basic component library maintained based on ant-design-vue
215 lines (214 loc) • 8.41 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _TimeUnitColumn = _interopRequireDefault(require("./TimeUnitColumn"));
var _miscUtil = require("../../utils/miscUtil");
var _timeUtil = require("../../utils/timeUtil");
var _vnode = require("../../../_util/vnode");
function generateUnits(start, end, step, disabledUnits) {
const units = [];
for (let i = start; i <= end; i += step) {
units.push({
label: (0, _miscUtil.leftPad)(i, 2),
value: i,
disabled: (disabledUnits || []).includes(i)
});
}
return units;
}
const TimeBody = (0, _vue.defineComponent)({
compatConfig: {
MODE: 3
},
name: 'TimeBody',
inheritAttrs: false,
props: ['generateConfig', 'prefixCls', 'operationRef', 'activeColumnIndex', 'value', 'showHour', 'showMinute', 'showSecond', 'use12Hours', 'hourStep', 'minuteStep', 'secondStep', 'disabledHours', 'disabledMinutes', 'disabledSeconds', 'disabledTime', 'hideDisabledOptions', 'onSelect'],
setup(props) {
const originHour = (0, _vue.computed)(() => props.value ? props.generateConfig.getHour(props.value) : -1);
const isPM = (0, _vue.computed)(() => {
if (props.use12Hours) {
return originHour.value >= 12; // -1 means should display AM
} else {
return false;
}
});
const hour = (0, _vue.computed)(() => {
// Should additional logic to handle 12 hours
if (props.use12Hours) {
return originHour.value % 12;
} else {
return originHour.value;
}
});
const minute = (0, _vue.computed)(() => props.value ? props.generateConfig.getMinute(props.value) : -1);
const second = (0, _vue.computed)(() => props.value ? props.generateConfig.getSecond(props.value) : -1);
const now = (0, _vue.ref)(props.generateConfig.getNow());
const mergedDisabledHours = (0, _vue.ref)();
const mergedDisabledMinutes = (0, _vue.ref)();
const mergedDisabledSeconds = (0, _vue.ref)();
(0, _vue.onBeforeUpdate)(() => {
now.value = props.generateConfig.getNow();
});
(0, _vue.watchEffect)(() => {
if (props.disabledTime) {
const disabledConfig = props.disabledTime(now);
[mergedDisabledHours.value, mergedDisabledMinutes.value, mergedDisabledSeconds.value] = [disabledConfig.disabledHours, disabledConfig.disabledMinutes, disabledConfig.disabledSeconds];
} else {
[mergedDisabledHours.value, mergedDisabledMinutes.value, mergedDisabledSeconds.value] = [props.disabledHours, props.disabledMinutes, props.disabledSeconds];
}
});
const setTime = (isNewPM, newHour, newMinute, newSecond) => {
let newDate = props.value || props.generateConfig.getNow();
const mergedHour = Math.max(0, newHour);
const mergedMinute = Math.max(0, newMinute);
const mergedSecond = Math.max(0, newSecond);
newDate = (0, _timeUtil.setTime)(props.generateConfig, newDate, !props.use12Hours || !isNewPM ? mergedHour : mergedHour + 12, mergedMinute, mergedSecond);
return newDate;
};
// ========================= Unit =========================
const rawHours = (0, _vue.computed)(() => {
var _a;
return generateUnits(0, 23, (_a = props.hourStep) !== null && _a !== void 0 ? _a : 1, mergedDisabledHours.value && mergedDisabledHours.value());
});
// const memorizedRawHours = useMemo(() => rawHours, rawHours, shouldUnitsUpdate);
const AMPMDisabled = (0, _vue.computed)(() => {
if (!props.use12Hours) {
return [false, false];
}
const AMPMDisabled = [true, true];
rawHours.value.forEach(_ref => {
let {
disabled,
value: hourValue
} = _ref;
if (disabled) return;
if (hourValue >= 12) {
AMPMDisabled[1] = false;
} else {
AMPMDisabled[0] = false;
}
});
return AMPMDisabled;
});
const hours = (0, _vue.computed)(() => {
if (!props.use12Hours) return rawHours.value;
return rawHours.value.filter(isPM.value ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12).map(hourMeta => {
const hourValue = hourMeta.value % 12;
const hourLabel = hourValue === 0 ? '12' : (0, _miscUtil.leftPad)(hourValue, 2);
return (0, _extends2.default)((0, _extends2.default)({}, hourMeta), {
label: hourLabel,
value: hourValue
});
});
});
const minutes = (0, _vue.computed)(() => {
var _a;
return generateUnits(0, 59, (_a = props.minuteStep) !== null && _a !== void 0 ? _a : 1, mergedDisabledMinutes.value && mergedDisabledMinutes.value(originHour.value));
});
const seconds = (0, _vue.computed)(() => {
var _a;
return generateUnits(0, 59, (_a = props.secondStep) !== null && _a !== void 0 ? _a : 1, mergedDisabledSeconds.value && mergedDisabledSeconds.value(originHour.value, minute.value));
});
return () => {
const {
prefixCls,
operationRef,
activeColumnIndex,
showHour,
showMinute,
showSecond,
use12Hours,
hideDisabledOptions,
onSelect
} = props;
const columns = [];
const contentPrefixCls = `${prefixCls}-content`;
const columnPrefixCls = `${prefixCls}-time-panel`;
// ====================== Operations ======================
operationRef.value = {
onUpDown: diff => {
const column = columns[activeColumnIndex];
if (column) {
const valueIndex = column.units.findIndex(unit => unit.value === column.value);
const unitLen = column.units.length;
for (let i = 1; i < unitLen; i += 1) {
const nextUnit = column.units[(valueIndex + diff * i + unitLen) % unitLen];
if (nextUnit.disabled !== true) {
column.onSelect(nextUnit.value);
break;
}
}
}
}
};
// ======================== Render ========================
function addColumnNode(condition, node, columnValue, units, onColumnSelect) {
if (condition !== false) {
columns.push({
node: (0, _vnode.cloneElement)(node, {
prefixCls: columnPrefixCls,
value: columnValue,
active: activeColumnIndex === columns.length,
onSelect: onColumnSelect,
units,
hideDisabledOptions
}),
onSelect: onColumnSelect,
value: columnValue,
units
});
}
}
// Hour
addColumnNode(showHour, (0, _vue.createVNode)(_TimeUnitColumn.default, {
"key": "hour"
}, null), hour.value, hours.value, num => {
onSelect(setTime(isPM.value, num, minute.value, second.value), 'mouse');
});
// Minute
addColumnNode(showMinute, (0, _vue.createVNode)(_TimeUnitColumn.default, {
"key": "minute"
}, null), minute.value, minutes.value, num => {
onSelect(setTime(isPM.value, hour.value, num, second.value), 'mouse');
});
// Second
addColumnNode(showSecond, (0, _vue.createVNode)(_TimeUnitColumn.default, {
"key": "second"
}, null), second.value, seconds.value, num => {
onSelect(setTime(isPM.value, hour.value, minute.value, num), 'mouse');
});
// 12 Hours
let PMIndex = -1;
if (typeof isPM.value === 'boolean') {
PMIndex = isPM.value ? 1 : 0;
}
addColumnNode(use12Hours === true, (0, _vue.createVNode)(_TimeUnitColumn.default, {
"key": "12hours"
}, null), PMIndex, [{
label: 'AM',
value: 0,
disabled: AMPMDisabled.value[0]
}, {
label: 'PM',
value: 1,
disabled: AMPMDisabled.value[1]
}], num => {
onSelect(setTime(!!num, hour.value, minute.value, second.value), 'mouse');
});
return (0, _vue.createVNode)("div", {
"class": contentPrefixCls
}, [columns.map(_ref2 => {
let {
node
} = _ref2;
return node;
})]);
};
}
});
var _default = exports.default = TimeBody;