eewing
990 lines
36 KiB
JavaScript
990 lines
36 KiB
JavaScript
import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
|
|
import { onDestroyEffect, attachRef, DOMContext, simpleBox, } from "svelte-toolbelt";
|
|
import { onMount, untrack } from "svelte";
|
|
import { Context, watch } from "runed";
|
|
import { createBitsAttrs, boolToStr, boolToStrTrueOrUndef, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
|
|
import { isBrowser, isNumberString } from "../../internal/is.js";
|
|
import { kbd } from "../../internal/kbd.js";
|
|
import { useId } from "../../internal/use-id.js";
|
|
import { createTimeFormatter } from "../../internal/date-time/formatter.js";
|
|
import { getAnnouncer } from "../../internal/date-time/announcer.js";
|
|
import { EDITABLE_TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
|
|
import { toDate } from "../../internal/date-time/utils.js";
|
|
import { areAllTimeSegmentsFilled, convertTimeValueToTime, createTimeContent, getISOTimeValue, getTimeValueFromSegments, initTimeSegmentStates, isFirstTimeSegment, isTimeBefore, removeTimeDescriptionElement, setTimeDescription, } from "../../internal/date-time/field/time-helpers.js";
|
|
import { getFirstTimeSegment, handleTimeSegmentNavigation, isSegmentNavigationKey, moveToNextTimeSegment, moveToPrevTimeSegment, } from "../../internal/date-time/field/segments.js";
|
|
import { getDefaultHourCycle, isAcceptableSegmentKey, } from "../../internal/date-time/field/helpers.js";
|
|
export const timeFieldAttrs = createBitsAttrs({
|
|
component: "time-field",
|
|
parts: ["input", "label"],
|
|
});
|
|
const TimeFieldRootContext = new Context("TimeField.Root");
|
|
const SEGMENT_CONFIGS = {
|
|
hour: {
|
|
min: (root) => (root.hourCycle === 12 ? 1 : 0),
|
|
max: (root) => {
|
|
if (root.hourCycle === 24)
|
|
return 23;
|
|
if ("dayPeriod" in root.segmentValues && root.segmentValues.dayPeriod !== null)
|
|
return 12;
|
|
return 23;
|
|
},
|
|
cycle: 1,
|
|
canBeZero: true,
|
|
padZero: true,
|
|
},
|
|
minute: {
|
|
min: 0,
|
|
max: 59,
|
|
cycle: 1,
|
|
canBeZero: true,
|
|
padZero: true,
|
|
},
|
|
second: {
|
|
min: 0,
|
|
max: 59,
|
|
cycle: 1,
|
|
canBeZero: true,
|
|
padZero: true,
|
|
},
|
|
};
|
|
export class TimeFieldRootState {
|
|
static create(opts, rangeRoot) {
|
|
return TimeFieldRootContext.set(new TimeFieldRootState(opts, rangeRoot));
|
|
}
|
|
value;
|
|
placeholder;
|
|
validate;
|
|
minValue;
|
|
maxValue;
|
|
disabled;
|
|
readonly;
|
|
granularity;
|
|
readonlySegments;
|
|
hourCycleProp;
|
|
locale;
|
|
hideTimeZone;
|
|
required;
|
|
onInvalid;
|
|
errorMessageId;
|
|
isInvalidProp;
|
|
descriptionId = useId();
|
|
formatter;
|
|
initialSegments;
|
|
segmentValues = $state();
|
|
announcer;
|
|
readonlySegmentsSet = $derived.by(() => new Set(this.readonlySegments.current));
|
|
segmentStates = initTimeSegmentStates();
|
|
#fieldNode = $state(null);
|
|
#labelNode = $state(null);
|
|
descriptionNode = $state(null);
|
|
validationNode = $state(null);
|
|
states = initTimeSegmentStates();
|
|
dayPeriodNode = $state(null);
|
|
name = $state("");
|
|
maxValueTime = $derived.by(() => {
|
|
if (!this.maxValue.current)
|
|
return undefined;
|
|
return convertTimeValueToTime(this.maxValue.current);
|
|
});
|
|
minValueTime = $derived.by(() => {
|
|
if (!this.minValue.current)
|
|
return undefined;
|
|
return convertTimeValueToTime(this.minValue.current);
|
|
});
|
|
valueTime = $derived.by(() => {
|
|
if (!this.value.current)
|
|
return undefined;
|
|
return convertTimeValueToTime(this.value.current);
|
|
});
|
|
hourCycle = $derived.by(() => {
|
|
if (this.hourCycleProp.current)
|
|
return this.hourCycleProp.current;
|
|
return getDefaultHourCycle(this.locale.current);
|
|
});
|
|
rangeRoot = undefined;
|
|
domContext = new DOMContext(() => null);
|
|
constructor(props, rangeRoot) {
|
|
this.rangeRoot = rangeRoot;
|
|
/**
|
|
* Since the `TimeFieldRootState` can be used in two contexts, as a standalone
|
|
* field or as a field within a `TimeRangeField` component, we handle assigning
|
|
* the props based on that context.
|
|
*/
|
|
this.value = props.value;
|
|
this.placeholder = rangeRoot ? rangeRoot.opts.placeholder : props.placeholder;
|
|
this.validate = rangeRoot ? simpleBox(undefined) : props.validate;
|
|
this.minValue = rangeRoot ? rangeRoot.opts.minValue : props.minValue;
|
|
this.maxValue = rangeRoot ? rangeRoot.opts.maxValue : props.maxValue;
|
|
this.disabled = rangeRoot ? rangeRoot.opts.disabled : props.disabled;
|
|
this.readonly = rangeRoot ? rangeRoot.opts.readonly : props.readonly;
|
|
this.granularity = rangeRoot ? rangeRoot.opts.granularity : props.granularity;
|
|
this.readonlySegments = rangeRoot
|
|
? rangeRoot.opts.readonlySegments
|
|
: props.readonlySegments;
|
|
this.hourCycleProp = rangeRoot ? rangeRoot.opts.hourCycle : props.hourCycle;
|
|
this.locale = rangeRoot ? rangeRoot.opts.locale : props.locale;
|
|
this.hideTimeZone = rangeRoot ? rangeRoot.opts.hideTimeZone : props.hideTimeZone;
|
|
this.required = rangeRoot ? rangeRoot.opts.required : props.required;
|
|
this.onInvalid = rangeRoot ? rangeRoot.opts.onInvalid : props.onInvalid;
|
|
this.errorMessageId = rangeRoot ? rangeRoot.opts.errorMessageId : props.errorMessageId;
|
|
this.isInvalidProp = props.isInvalidProp;
|
|
this.formatter = createTimeFormatter(this.locale.current);
|
|
this.initialSegments = this.#initializeTimeSegmentValues();
|
|
this.segmentValues = this.initialSegments;
|
|
this.announcer = getAnnouncer(null);
|
|
this.getFieldNode = this.getFieldNode.bind(this);
|
|
this.updateSegment = this.updateSegment.bind(this);
|
|
this.handleSegmentClick = this.handleSegmentClick.bind(this);
|
|
this.getBaseSegmentAttrs = this.getBaseSegmentAttrs.bind(this);
|
|
$effect(() => {
|
|
untrack(() => {
|
|
this.initialSegments = this.#initializeTimeSegmentValues();
|
|
});
|
|
});
|
|
onMount(() => {
|
|
this.announcer = getAnnouncer(this.domContext.getDocument());
|
|
});
|
|
onDestroyEffect(() => {
|
|
removeTimeDescriptionElement(this.descriptionId, this.domContext.getDocument());
|
|
});
|
|
$effect(() => {
|
|
if (this.formatter.getLocale() === this.locale.current)
|
|
return;
|
|
this.formatter.setLocale(this.locale.current);
|
|
});
|
|
$effect(() => {
|
|
if (this.value.current) {
|
|
const descriptionId = untrack(() => this.descriptionId);
|
|
setTimeDescription({
|
|
id: descriptionId,
|
|
formatter: this.formatter,
|
|
value: this.#toDateValue(this.value.current),
|
|
doc: this.domContext.getDocument(),
|
|
});
|
|
}
|
|
const placeholder = untrack(() => this.placeholder.current);
|
|
if (this.value.current && placeholder !== this.value.current) {
|
|
untrack(() => {
|
|
if (this.value.current) {
|
|
this.placeholder.current = this.value.current;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
if (this.value.current) {
|
|
this.syncSegmentValues(this.value.current);
|
|
}
|
|
$effect(() => {
|
|
this.locale.current;
|
|
if (this.value.current) {
|
|
this.syncSegmentValues(this.value.current);
|
|
}
|
|
this.#clearUpdating();
|
|
});
|
|
$effect(() => {
|
|
if (this.value.current === undefined) {
|
|
this.segmentValues = this.#initializeTimeSegmentValues();
|
|
}
|
|
});
|
|
watch(() => this.validationStatus, () => {
|
|
if (this.validationStatus !== false) {
|
|
this.onInvalid.current?.(this.validationStatus.reason, this.validationStatus.message);
|
|
}
|
|
});
|
|
}
|
|
#initializeTimeSegmentValues() {
|
|
const granularity = this.inferredGranularity;
|
|
const segments = {
|
|
hour: null,
|
|
minute: null,
|
|
second: null,
|
|
dayPeriod: "AM",
|
|
};
|
|
if (granularity === "second") {
|
|
segments.second = null;
|
|
}
|
|
if (this.hourCycle === 24) {
|
|
segments.dayPeriod = null;
|
|
}
|
|
return segments;
|
|
}
|
|
#toDateValue(timeValue) {
|
|
if ("calendar" in timeValue) {
|
|
// CalendarDateTime or ZonedDateTime
|
|
return timeValue;
|
|
}
|
|
else {
|
|
return new CalendarDateTime(2000, 1, 1, timeValue.hour, timeValue.minute, timeValue.second, timeValue.millisecond);
|
|
}
|
|
}
|
|
#clearUpdating() {
|
|
this.states.hour.updating = null;
|
|
this.states.minute.updating = null;
|
|
this.states.second.updating = null;
|
|
this.states.dayPeriod.updating = null;
|
|
}
|
|
setName(name) {
|
|
this.name = name;
|
|
}
|
|
setFieldNode(node) {
|
|
this.#fieldNode = node;
|
|
}
|
|
/**
|
|
* Gets the correct field node for the time field regardless of whether it's being
|
|
* used in a standalone context or within a `TimeRangeField` component.
|
|
*/
|
|
getFieldNode() {
|
|
/** If we're not within a TimeRangeField, we return this field. */
|
|
if (!this.rangeRoot) {
|
|
return this.#fieldNode;
|
|
}
|
|
else {
|
|
/**
|
|
* Otherwise, we return the rangeRoot's field node which
|
|
* contains both start and end fields.
|
|
*/
|
|
return this.rangeRoot.fieldNode;
|
|
}
|
|
}
|
|
setLabelNode(node) {
|
|
this.#labelNode = node;
|
|
}
|
|
getLabelNode() {
|
|
return this.#labelNode;
|
|
}
|
|
setValue(value) {
|
|
this.value.current = value;
|
|
}
|
|
syncSegmentValues(value) {
|
|
const timeValues = EDITABLE_TIME_SEGMENT_PARTS.map((part) => {
|
|
if (part === "dayPeriod") {
|
|
if (this.states.dayPeriod.updating) {
|
|
return [part, this.states.dayPeriod.updating];
|
|
}
|
|
else {
|
|
return [part, this.formatter.dayPeriod(toDate(this.#toDateValue(value)))];
|
|
}
|
|
}
|
|
else if (part === "hour") {
|
|
if (this.states.hour.updating) {
|
|
return [part, this.states.hour.updating];
|
|
}
|
|
if (value[part] !== undefined && value[part] < 10) {
|
|
return [part, `0${value[part]}`];
|
|
}
|
|
if (value[part] === 0 && this.dayPeriodNode) {
|
|
return [part, "12"];
|
|
}
|
|
}
|
|
else if (part === "minute") {
|
|
if (this.states.minute.updating) {
|
|
return [part, this.states.minute.updating];
|
|
}
|
|
if (value[part] !== undefined && value[part] < 10) {
|
|
return [part, `0${value[part]}`];
|
|
}
|
|
}
|
|
else if (part === "second") {
|
|
if (this.states.second.updating) {
|
|
return [part, this.states.second.updating];
|
|
}
|
|
if (value[part] !== undefined && value[part] < 10) {
|
|
return [part, `0${value[part]}`];
|
|
}
|
|
}
|
|
return [part, `${value[part]}`];
|
|
});
|
|
this.segmentValues = Object.fromEntries(timeValues);
|
|
this.#clearUpdating();
|
|
}
|
|
validationStatus = $derived.by(() => {
|
|
const value = this.value.current;
|
|
if (!value)
|
|
return false;
|
|
const msg = this.validate.current?.(value);
|
|
if (msg) {
|
|
return {
|
|
reason: "custom",
|
|
message: msg,
|
|
};
|
|
}
|
|
if (!this.valueTime)
|
|
return false;
|
|
if (this.minValueTime && isTimeBefore(this.valueTime, this.minValueTime)) {
|
|
return {
|
|
reason: "min",
|
|
};
|
|
}
|
|
if (this.maxValueTime && isTimeBefore(this.maxValueTime, this.valueTime)) {
|
|
return {
|
|
reason: "max",
|
|
};
|
|
}
|
|
return false;
|
|
});
|
|
isInvalid = $derived.by(() => {
|
|
if (this.validationStatus === false)
|
|
return false;
|
|
if (this.isInvalidProp.current)
|
|
return true;
|
|
return true;
|
|
});
|
|
inferredGranularity = $derived.by(() => {
|
|
return this.granularity.current ?? "minute";
|
|
});
|
|
timeRef = $derived.by(() => this.value.current ?? this.placeholder.current);
|
|
allSegmentContent = $derived.by(() => createTimeContent({
|
|
segmentValues: this.segmentValues,
|
|
formatter: this.formatter,
|
|
locale: this.locale.current,
|
|
granularity: this.inferredGranularity,
|
|
timeRef: this.timeRef,
|
|
hideTimeZone: this.hideTimeZone.current,
|
|
hourCycle: this.hourCycle,
|
|
}));
|
|
segmentContents = $derived.by(() => this.allSegmentContent.arr);
|
|
sharedSegmentAttrs = {
|
|
role: "spinbutton",
|
|
contenteditable: "true",
|
|
tabindex: 0,
|
|
spellcheck: false,
|
|
inputmode: "numeric",
|
|
autocorrect: "off",
|
|
enterkeyhint: "next",
|
|
style: {
|
|
caretColor: "transparent",
|
|
},
|
|
};
|
|
#getLabelledBy(segmentId) {
|
|
return `${segmentId} ${this.getLabelNode()?.id ?? ""}`;
|
|
}
|
|
updateSegment(part, cb) {
|
|
const disabled = this.disabled.current;
|
|
const readonly = this.readonly.current;
|
|
const readonlySegmentsSet = this.readonlySegmentsSet;
|
|
if (disabled || readonly || readonlySegmentsSet.has(part))
|
|
return;
|
|
const prev = this.segmentValues;
|
|
let newSegmentValues = prev;
|
|
if (part === "dayPeriod") {
|
|
const next = cb(prev[part]);
|
|
this.states.dayPeriod.updating = next;
|
|
const value = this.value.current;
|
|
if (value && "hour" in value) {
|
|
const trueHour = value.hour;
|
|
if (next === "AM") {
|
|
if (trueHour >= 12) {
|
|
prev.hour = `${trueHour - 12}`;
|
|
}
|
|
}
|
|
else if (next === "PM") {
|
|
if (trueHour < 12) {
|
|
prev.hour = `${trueHour + 12}`;
|
|
}
|
|
}
|
|
}
|
|
newSegmentValues = { ...prev, [part]: next };
|
|
}
|
|
else if (part === "hour") {
|
|
const next = cb(prev[part]);
|
|
this.states.hour.updating = next;
|
|
if (next !== null && prev.dayPeriod !== null) {
|
|
const dayPeriod = this.formatter.dayPeriod(toDate(this.#toDateValue(this.timeRef.set({ hour: Number.parseInt(next) }))), this.hourCycle);
|
|
if (dayPeriod === "AM" || dayPeriod === "PM") {
|
|
prev.dayPeriod = dayPeriod;
|
|
}
|
|
}
|
|
newSegmentValues = { ...prev, [part]: next };
|
|
}
|
|
else if (part === "minute") {
|
|
const next = cb(prev[part]);
|
|
this.states.minute.updating = next;
|
|
newSegmentValues = { ...prev, [part]: next };
|
|
}
|
|
else if (part === "second") {
|
|
const next = cb(prev[part]);
|
|
this.states.second.updating = next;
|
|
newSegmentValues = { ...prev, [part]: next };
|
|
}
|
|
this.segmentValues = newSegmentValues;
|
|
if (areAllTimeSegmentsFilled(newSegmentValues, this.#fieldNode)) {
|
|
this.setValue(getTimeValueFromSegments({
|
|
segmentObj: newSegmentValues,
|
|
fieldNode: this.#fieldNode,
|
|
timeRef: this.timeRef,
|
|
}));
|
|
}
|
|
else {
|
|
// this.setValue(undefined);
|
|
// this.segmentValues = newSegmentValues;
|
|
}
|
|
}
|
|
handleSegmentClick(e) {
|
|
if (this.disabled.current) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
getBaseSegmentAttrs(part, segmentId) {
|
|
const inReadonlySegments = this.readonlySegmentsSet.has(part);
|
|
const defaultAttrs = {
|
|
"aria-invalid": boolToStrTrueOrUndef(this.isInvalid),
|
|
"aria-disabled": boolToStr(this.disabled.current),
|
|
"aria-readonly": boolToStr(this.readonly.current || inReadonlySegments),
|
|
"data-invalid": boolToEmptyStrOrUndef(this.isInvalid),
|
|
"data-disabled": boolToEmptyStrOrUndef(this.disabled.current),
|
|
"data-readonly": boolToEmptyStrOrUndef(this.readonly.current || inReadonlySegments),
|
|
"data-segment": `${part}`,
|
|
};
|
|
if (part === "literal")
|
|
return defaultAttrs;
|
|
const descriptionId = this.descriptionNode?.id;
|
|
const hasDescription = isFirstTimeSegment(segmentId, this.#fieldNode) && descriptionId;
|
|
const errorMsgId = this.errorMessageId?.current;
|
|
const describedBy = hasDescription
|
|
? `${descriptionId} ${this.isInvalid && errorMsgId ? errorMsgId : ""}`
|
|
: undefined;
|
|
const contenteditable = !(this.readonly.current ||
|
|
inReadonlySegments ||
|
|
this.disabled.current);
|
|
return {
|
|
...defaultAttrs,
|
|
"aria-labelledby": this.#getLabelledBy(segmentId),
|
|
contenteditable: contenteditable ? "true" : undefined,
|
|
"aria-describedby": describedBy,
|
|
tabindex: this.disabled.current ? undefined : 0,
|
|
};
|
|
}
|
|
}
|
|
export class TimeFieldInputState {
|
|
static create(opts) {
|
|
return new TimeFieldInputState(opts, TimeFieldRootContext.get());
|
|
}
|
|
opts;
|
|
root;
|
|
attachment;
|
|
domContext;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(opts.ref, (v) => this.root.setFieldNode(v));
|
|
this.domContext = new DOMContext(opts.ref);
|
|
this.root.setName(this.opts.name.current);
|
|
$effect(() => {
|
|
this.root.setName(this.opts.name.current);
|
|
});
|
|
}
|
|
#ariaDescribedBy = $derived.by(() => {
|
|
if (!isBrowser)
|
|
return undefined;
|
|
const doesDescriptionExist = this.domContext.getElementById(this.root.descriptionId);
|
|
if (!doesDescriptionExist)
|
|
return undefined;
|
|
return this.root.descriptionId;
|
|
});
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
role: "group",
|
|
"aria-labelledby": this.root.getLabelNode()?.id ?? undefined,
|
|
"aria-describedby": this.#ariaDescribedBy,
|
|
"aria-disabled": boolToStr(this.root.disabled.current),
|
|
"data-invalid": this.root.isInvalid ? "" : undefined,
|
|
"data-disabled": boolToEmptyStrOrUndef(this.root.disabled.current),
|
|
[timeFieldAttrs.input]: "",
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
export class TimeFieldHiddenInputState {
|
|
static create() {
|
|
return new TimeFieldHiddenInputState(TimeFieldRootContext.get());
|
|
}
|
|
root;
|
|
shouldRender = $derived.by(() => this.root.name !== "");
|
|
isoValue = $derived.by(() => this.root.value.current ? getISOTimeValue(this.root.value.current) : undefined);
|
|
constructor(root) {
|
|
this.root = root;
|
|
}
|
|
props = $derived.by(() => ({
|
|
name: this.root.name,
|
|
value: this.isoValue,
|
|
required: this.root.required.current,
|
|
}));
|
|
}
|
|
export class TimeFieldLabelState {
|
|
static create(opts) {
|
|
return new TimeFieldLabelState(opts, TimeFieldRootContext.get());
|
|
}
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(opts.ref, (v) => this.root.setLabelNode(v));
|
|
this.onclick = this.onclick.bind(this);
|
|
}
|
|
onclick(_) {
|
|
if (this.root.disabled.current)
|
|
return;
|
|
const firstSegment = getFirstTimeSegment(this.root.getFieldNode());
|
|
if (!firstSegment)
|
|
return;
|
|
firstSegment.focus();
|
|
}
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
"data-invalid": boolToEmptyStrOrUndef(this.root.isInvalid),
|
|
"data-disabled": boolToEmptyStrOrUndef(this.root.disabled.current),
|
|
[timeFieldAttrs.label]: "",
|
|
onclick: this.onclick,
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
// Base class for time segments - simplified from date-field version
|
|
class BaseTimeSegmentState {
|
|
opts;
|
|
root;
|
|
announcer;
|
|
part;
|
|
config;
|
|
attachment;
|
|
constructor(opts, root, part, config) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.part = part;
|
|
this.config = config;
|
|
this.announcer = root.announcer;
|
|
this.attachment = attachRef(opts.ref);
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
this.onfocusout = this.onfocusout.bind(this);
|
|
}
|
|
#getMax() {
|
|
return typeof this.config.max === "function" ? this.config.max(this.root) : this.config.max;
|
|
}
|
|
#getMin() {
|
|
return typeof this.config.min === "function" ? this.config.min(this.root) : this.config.min;
|
|
}
|
|
#formatValue(value, forDisplay = true) {
|
|
const str = String(value);
|
|
if (forDisplay && this.config.padZero && str.length === 1) {
|
|
return `0${value}`;
|
|
}
|
|
return str;
|
|
}
|
|
onkeydown(e) {
|
|
const placeholder = this.root.value.current ?? this.root.placeholder.current;
|
|
if (e.ctrlKey || e.metaKey || this.root.disabled.current)
|
|
return;
|
|
if (e.key !== kbd.TAB)
|
|
e.preventDefault();
|
|
if (!isAcceptableSegmentKey(e.key))
|
|
return;
|
|
if (isArrowUp(e.key)) {
|
|
this.#handleArrowUp(placeholder);
|
|
return;
|
|
}
|
|
if (isArrowDown(e.key)) {
|
|
this.#handleArrowDown(placeholder);
|
|
return;
|
|
}
|
|
if (isNumberString(e.key)) {
|
|
this.#handleNumberKey(e);
|
|
return;
|
|
}
|
|
if (isBackspace(e.key)) {
|
|
this.#handleBackspace(e);
|
|
return;
|
|
}
|
|
if (isSegmentNavigationKey(e.key)) {
|
|
handleTimeSegmentNavigation(e, this.root.getFieldNode());
|
|
}
|
|
}
|
|
#handleArrowUp(placeholder) {
|
|
const stateKey = this.part;
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].hasLeftFocus = false;
|
|
}
|
|
// @ts-expect-error shhh
|
|
this.root.updateSegment(this.part, (prev) => {
|
|
if (prev === null) {
|
|
const next = placeholder[this.part];
|
|
this.announcer.announce(String(next));
|
|
return this.#formatValue(next);
|
|
}
|
|
const current = placeholder.set({
|
|
[this.part]: Number.parseInt(prev),
|
|
});
|
|
// @ts-expect-error shhh
|
|
const next = current.cycle(this.part, this.config.cycle)[this.part];
|
|
this.announcer.announce(String(next));
|
|
return this.#formatValue(next);
|
|
});
|
|
}
|
|
#handleArrowDown(placeholder) {
|
|
const stateKey = this.part;
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].hasLeftFocus = false;
|
|
}
|
|
// @ts-expect-error - this is a part
|
|
this.root.updateSegment(this.part, (prev) => {
|
|
if (prev === null) {
|
|
const next = placeholder[this.part];
|
|
this.announcer.announce(String(next));
|
|
return this.#formatValue(next);
|
|
}
|
|
const current = placeholder.set({
|
|
[this.part]: Number.parseInt(prev),
|
|
});
|
|
// @ts-expect-error shhh
|
|
const next = current.cycle(this.part, -this.config.cycle)[this.part];
|
|
this.announcer.announce(String(next));
|
|
return this.#formatValue(next);
|
|
});
|
|
}
|
|
#handleNumberKey(e) {
|
|
const num = Number.parseInt(e.key);
|
|
let moveToNext = false;
|
|
const max = this.#getMax();
|
|
const maxStart = Math.floor(max / 10);
|
|
const numIsZero = num === 0;
|
|
const stateKey = this.part;
|
|
// @ts-expect-error this is a part
|
|
this.root.updateSegment(this.part, (prev) => {
|
|
if (stateKey in this.root.states && this.root.states[stateKey].hasLeftFocus) {
|
|
prev = null;
|
|
this.root.states[stateKey].hasLeftFocus = false;
|
|
}
|
|
if (prev === null) {
|
|
if (numIsZero) {
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].lastKeyZero = true;
|
|
}
|
|
this.announcer.announce("0");
|
|
return "0";
|
|
}
|
|
if (stateKey in this.root.states &&
|
|
(this.root.states[stateKey].lastKeyZero || num > maxStart)) {
|
|
moveToNext = true;
|
|
}
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].lastKeyZero = false;
|
|
}
|
|
if (moveToNext && String(num).length === 1) {
|
|
this.announcer.announce(num);
|
|
return `0${num}`;
|
|
}
|
|
return `${num}`;
|
|
}
|
|
if (stateKey in this.root.states && this.root.states[stateKey].lastKeyZero) {
|
|
if (num !== 0) {
|
|
moveToNext = true;
|
|
this.root.states[stateKey].lastKeyZero = false;
|
|
return `0${num}`;
|
|
}
|
|
if (this.part === "hour" && num === 0 && this.root.hourCycle === 24) {
|
|
moveToNext = true;
|
|
this.root.states[stateKey].lastKeyZero = false;
|
|
return `00`;
|
|
}
|
|
if ((this.part === "minute" || this.part === "second") && num === 0) {
|
|
moveToNext = true;
|
|
this.root.states[stateKey].lastKeyZero = false;
|
|
return "00";
|
|
}
|
|
return prev;
|
|
}
|
|
const total = Number.parseInt(prev + num.toString());
|
|
if (total > max) {
|
|
moveToNext = true;
|
|
return `0${num}`;
|
|
}
|
|
moveToNext = true;
|
|
return `${total}`;
|
|
});
|
|
if (moveToNext) {
|
|
moveToNextTimeSegment(e, this.root.getFieldNode());
|
|
}
|
|
}
|
|
#handleBackspace(e) {
|
|
const stateKey = this.part;
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].hasLeftFocus = false;
|
|
}
|
|
let moveToPrev = false;
|
|
// @ts-expect-error this is a part
|
|
this.root.updateSegment(this.part, (prev) => {
|
|
if (prev === null) {
|
|
moveToPrev = true;
|
|
this.announcer.announce(null);
|
|
return null;
|
|
}
|
|
if (prev.length === 2 && prev.startsWith("0")) {
|
|
this.announcer.announce(null);
|
|
return null;
|
|
}
|
|
const str = prev.toString();
|
|
if (str.length === 1) {
|
|
this.announcer.announce(null);
|
|
return null;
|
|
}
|
|
const next = Number.parseInt(str.slice(0, -1));
|
|
this.announcer.announce(String(next));
|
|
return `${next}`;
|
|
});
|
|
if (moveToPrev) {
|
|
moveToPrevTimeSegment(e, this.root.getFieldNode());
|
|
}
|
|
}
|
|
onfocusout(_) {
|
|
const stateKey = this.part;
|
|
if (stateKey in this.root.states) {
|
|
this.root.states[stateKey].hasLeftFocus = true;
|
|
}
|
|
// Pad with zero if needed
|
|
if (this.config.padZero) {
|
|
// @ts-expect-error this is a part
|
|
this.root.updateSegment(this.part, (prev) => {
|
|
if (prev && prev.length === 1) {
|
|
return `0${prev}`;
|
|
}
|
|
return prev;
|
|
});
|
|
}
|
|
}
|
|
getSegmentProps() {
|
|
const segmentValues = this.root.segmentValues;
|
|
const placeholder = this.root.placeholder.current;
|
|
const isEmpty = segmentValues[this.part] === null;
|
|
let value = placeholder;
|
|
if (segmentValues[this.part]) {
|
|
value = placeholder.set({
|
|
[this.part]: Number.parseInt(segmentValues[this.part]),
|
|
});
|
|
}
|
|
const valueNow = value[this.part];
|
|
const valueMin = this.#getMin();
|
|
const valueMax = this.#getMax();
|
|
let valueText = isEmpty ? "Empty" : `${valueNow}`;
|
|
// special handling for hour segment with dayPeriod
|
|
if (this.part === "hour" && "dayPeriod" in segmentValues && segmentValues.dayPeriod) {
|
|
valueText = isEmpty ? "Empty" : `${valueNow} ${segmentValues.dayPeriod}`;
|
|
}
|
|
return {
|
|
"aria-label": `${this.part}, `,
|
|
"aria-valuemin": valueMin,
|
|
"aria-valuemax": valueMax,
|
|
"aria-valuenow": valueNow,
|
|
"aria-valuetext": valueText,
|
|
};
|
|
}
|
|
props = $derived.by(() => {
|
|
return {
|
|
...this.root.sharedSegmentAttrs,
|
|
id: this.opts.id.current,
|
|
...this.getSegmentProps(),
|
|
onkeydown: this.onkeydown,
|
|
onfocusout: this.onfocusout,
|
|
onclick: this.root.handleSegmentClick,
|
|
...this.root.getBaseSegmentAttrs(this.part, this.opts.id.current),
|
|
...this.attachment,
|
|
};
|
|
});
|
|
}
|
|
class TimeFieldHourSegmentState extends BaseTimeSegmentState {
|
|
constructor(opts, root) {
|
|
super(opts, root, "hour", SEGMENT_CONFIGS.hour);
|
|
}
|
|
onkeydown(e) {
|
|
if (isNumberString(e.key)) {
|
|
const oldUpdateSegment = this.root.updateSegment.bind(this.root);
|
|
// oxlint-disable-next-line no-explicit-any
|
|
this.root.updateSegment = (part, cb) => {
|
|
const result = oldUpdateSegment(part, cb);
|
|
// after updating hour, check if we need to display "12" instead of "0"
|
|
if (part === "hour" && "hour" in this.root.segmentValues) {
|
|
const hourValue = this.root.segmentValues.hour;
|
|
if (hourValue === "0" &&
|
|
this.root.dayPeriodNode &&
|
|
this.root.hourCycle !== 24) {
|
|
this.root.segmentValues.hour = "12";
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
}
|
|
super.onkeydown(e);
|
|
this.root.updateSegment = this.root.updateSegment.bind(this.root);
|
|
}
|
|
}
|
|
class TimeFieldMinuteSegmentState extends BaseTimeSegmentState {
|
|
constructor(opts, root) {
|
|
super(opts, root, "minute", SEGMENT_CONFIGS.minute);
|
|
}
|
|
}
|
|
class TimeFieldSecondSegmentState extends BaseTimeSegmentState {
|
|
constructor(opts, root) {
|
|
super(opts, root, "second", SEGMENT_CONFIGS.second);
|
|
}
|
|
}
|
|
class TimeFieldDayPeriodSegmentState {
|
|
opts;
|
|
root;
|
|
attachment;
|
|
#announcer;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.#announcer = this.root.announcer;
|
|
this.attachment = attachRef(opts.ref, (v) => (this.root.dayPeriodNode = v));
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
}
|
|
onkeydown(e) {
|
|
if (e.ctrlKey || e.metaKey || this.root.disabled.current)
|
|
return;
|
|
if (e.key !== kbd.TAB)
|
|
e.preventDefault();
|
|
if (!isAcceptableDayPeriodKey(e.key))
|
|
return;
|
|
if (isArrowUp(e.key) || isArrowDown(e.key)) {
|
|
this.root.updateSegment("dayPeriod", (prev) => {
|
|
if (prev === "AM") {
|
|
const next = "PM";
|
|
this.#announcer.announce(next);
|
|
return next;
|
|
}
|
|
const next = "AM";
|
|
this.#announcer.announce(next);
|
|
return next;
|
|
});
|
|
return;
|
|
}
|
|
if (isBackspace(e.key)) {
|
|
this.root.states.dayPeriod.hasLeftFocus = false;
|
|
this.root.updateSegment("dayPeriod", () => {
|
|
const next = "AM";
|
|
this.#announcer.announce(next);
|
|
return next;
|
|
});
|
|
}
|
|
if (e.key === kbd.A || e.key === kbd.P || e.key === kbd.a || e.key === kbd.p) {
|
|
this.root.updateSegment("dayPeriod", () => {
|
|
const next = e.key === kbd.A || e.key === kbd.a ? "AM" : "PM";
|
|
this.#announcer.announce(next);
|
|
return next;
|
|
});
|
|
}
|
|
if (isSegmentNavigationKey(e.key)) {
|
|
handleTimeSegmentNavigation(e, this.root.getFieldNode());
|
|
}
|
|
}
|
|
props = $derived.by(() => {
|
|
const segmentValues = this.root.segmentValues;
|
|
if (!("dayPeriod" in segmentValues))
|
|
return;
|
|
const valueMin = 0;
|
|
const valueMax = 12;
|
|
const valueNow = segmentValues.dayPeriod === "AM" ? 0 : 12;
|
|
const valueText = segmentValues.dayPeriod === "AM" ? "AM" : "PM";
|
|
return {
|
|
...this.root.sharedSegmentAttrs,
|
|
id: this.opts.id.current,
|
|
inputmode: "text",
|
|
"aria-label": "AM/PM",
|
|
"aria-valuemin": valueMin,
|
|
"aria-valuemax": valueMax,
|
|
"aria-valuenow": valueNow,
|
|
"aria-valuetext": valueText,
|
|
onkeydown: this.onkeydown,
|
|
onclick: this.root.handleSegmentClick,
|
|
...this.root.getBaseSegmentAttrs("dayPeriod", this.opts.id.current),
|
|
...this.attachment,
|
|
};
|
|
});
|
|
}
|
|
class TimeFieldLiteralSegmentState {
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(opts.ref);
|
|
}
|
|
props = $derived.by(() => ({
|
|
id: this.opts.id.current,
|
|
"aria-hidden": boolToStrTrueOrUndef(true),
|
|
...this.root.getBaseSegmentAttrs("literal", this.opts.id.current),
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
class TimeFieldTimeZoneSegmentState {
|
|
opts;
|
|
root;
|
|
attachment;
|
|
constructor(opts, root) {
|
|
this.opts = opts;
|
|
this.root = root;
|
|
this.attachment = attachRef(opts.ref);
|
|
this.onkeydown = this.onkeydown.bind(this);
|
|
}
|
|
onkeydown(e) {
|
|
if (e.key !== kbd.TAB)
|
|
e.preventDefault();
|
|
if (this.root.disabled.current)
|
|
return;
|
|
if (isSegmentNavigationKey(e.key)) {
|
|
handleTimeSegmentNavigation(e, this.root.getFieldNode());
|
|
}
|
|
}
|
|
props = $derived.by(() => ({
|
|
role: "textbox",
|
|
id: this.opts.id.current,
|
|
"aria-label": "timezone, ",
|
|
style: {
|
|
caretColor: "transparent",
|
|
},
|
|
onkeydown: this.onkeydown,
|
|
tabindex: 0,
|
|
...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
|
|
"data-readonly": boolToEmptyStrOrUndef(true),
|
|
...this.attachment,
|
|
}));
|
|
}
|
|
export class DateFieldSegmentState {
|
|
static create(part, opts) {
|
|
const root = TimeFieldRootContext.get();
|
|
switch (part) {
|
|
case "hour":
|
|
return new TimeFieldHourSegmentState(opts, root);
|
|
case "minute":
|
|
return new TimeFieldMinuteSegmentState(opts, root);
|
|
case "second":
|
|
return new TimeFieldSecondSegmentState(opts, root);
|
|
case "dayPeriod":
|
|
return new TimeFieldDayPeriodSegmentState(opts, root);
|
|
case "literal":
|
|
return new TimeFieldLiteralSegmentState(opts, root);
|
|
case "timeZoneName":
|
|
return new TimeFieldTimeZoneSegmentState(opts, root);
|
|
default:
|
|
throw new Error(`Invalid part: ${part}`);
|
|
}
|
|
}
|
|
}
|
|
// Utils/helpers
|
|
function isAcceptableDayPeriodKey(key) {
|
|
return (isAcceptableSegmentKey(key) ||
|
|
key === kbd.A ||
|
|
key === kbd.P ||
|
|
key === kbd.a ||
|
|
key === kbd.p);
|
|
}
|
|
function isArrowUp(key) {
|
|
return key === kbd.ARROW_UP;
|
|
}
|
|
function isArrowDown(key) {
|
|
return key === kbd.ARROW_DOWN;
|
|
}
|
|
function isBackspace(key) {
|
|
return key === kbd.BACKSPACE;
|
|
}
|