894df74d7f
Composes Calendar inside a floating dropdown anchored to an input, with Intl locale formatting, controlled/uncontrolled date+open state, createDismiss for outside-click handling, and hidden input for form submission.
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import type { Accessor } from "solid-js";
|
|
import { createContext, useContext } from "solid-js";
|
|
|
|
export interface DatePickerContextValue {
|
|
isOpen: Accessor<boolean>;
|
|
setOpen: (open: boolean) => void;
|
|
toggle: () => void;
|
|
value: Accessor<string | undefined>;
|
|
setValue: (iso: string) => void;
|
|
formatDate: (iso: string) => string;
|
|
placeholder: Accessor<string>;
|
|
disabled: Accessor<boolean>;
|
|
name: Accessor<string | undefined>;
|
|
minDate: Accessor<string | undefined>;
|
|
maxDate: Accessor<string | undefined>;
|
|
locale: Accessor<string>;
|
|
contentId: Accessor<string>;
|
|
triggerRef: Accessor<HTMLElement | null>;
|
|
setTriggerRef: (el: HTMLElement | null) => void;
|
|
contentRef: Accessor<HTMLElement | null>;
|
|
setContentRef: (el: HTMLElement | null) => void;
|
|
floatingStyle: Accessor<import("solid-js").JSX.CSSProperties>;
|
|
}
|
|
|
|
const DatePickerContext = createContext<DatePickerContextValue>();
|
|
|
|
/** Returns the DatePicker context. Throws if used outside a DatePicker root. */
|
|
export function useDatePickerContext(): DatePickerContextValue {
|
|
const ctx = useContext(DatePickerContext);
|
|
if (!ctx) {
|
|
throw new Error(
|
|
"[PettyUI] DatePicker parts must be used inside <DatePicker>. Wrap your DatePicker.Input, DatePicker.Content, etc. inside <DatePicker>.",
|
|
);
|
|
}
|
|
return ctx;
|
|
}
|
|
|
|
export const DatePickerContextProvider = DatePickerContext.Provider;
|