web-ui-pack
Version:
Web package with UI elements
230 lines (229 loc) • 10.6 kB
TypeScript
import WUPBaseControl, { SetValueReasons } from "./baseControl";
import { AttributeMap } from "../baseElement";
declare const tagName = "wup-calendar";
export declare const enum PickersEnum {
Day = 0,
Month = 1,
Year = 2
}
declare global {
namespace WUP.Calendar {
interface IItemElement extends HTMLElement {
_value: number;
}
interface IPickerResult {
renderItems: (ol: HTMLElement, v: Date) => IItemElement[];
getIndex: (v: Date, firstValue: number) => number;
next: (v: Date, n: number) => Date;
onItemClick: (e: MouseEvent & {
target: HTMLElement;
}, targetValue: number) => void;
}
/** UTC-normalized params for disabled dates */
interface INormalized {
months: number[];
years: number[];
scrollFrom?: number;
scrollTo?: number;
min: Date | undefined;
max: Date | undefined;
exclude: Date[] | undefined | null;
}
interface IMonthInfo {
/** Total days in month */
total: number;
/** Previous days-range for placeholders */
prev?: {
from: number;
to: number;
};
/** Count of next days */
nextTo: number;
/** ValueOf first Date of result in UTC */
first: number;
}
interface EventMap extends WUP.BaseControl.EventMap {
}
interface ValidityMap extends WUP.BaseControl.ValidityMap {
}
interface NewOptions {
/** First day of week in calendar where 1-Monday, 7-Sunday;
* @defaultValue localeInfo.firstWeekDay */
firstWeekDay: number | null;
/** Provide local or UTC date; min/max/exclude $initValue/$value must be provided according to this
* @defaultValue true */
utc: boolean;
/** User can't select date less than min; point new Date(Date.UTC(2022,1,25)) for `utc:true`, or new Date(2022,1,25) */
min: Date | null;
/** User can't select date more than max; point new Date(Date.UTC(2022,1,25)) for `utc:true`, or new Date(2022,1,25) */
max: Date | null;
/** Picker that must be rendered at first; if undefined & isEmpty - year, otherwise - day;
* @tutorial
* * point "2012" to start from year2012
* * point "2012-05" to start from month5 year2012
* * point "2012-05-02" to start from day2 month5 year2012
* * shows picker according to pointed but range according to $value ($value has higher priority then pointed date here) */
startWith: PickersEnum | string | null;
/** Dates that user can't choose (disabled dates) */
exclude: Date[] | null;
}
interface Options<T = Date, VM = ValidityMap> extends WUP.BaseControl.Options<T, VM>, NewOptions {
}
interface JSXProps<C = WUPCalendarControl> extends WUP.BaseControl.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
/** Default value in strict format yyyy-MM-dd hh:mm:ss.fff */
"w-initValue"?: string;
"w-firstWeekDay"?: number;
"w-utc"?: boolean | "";
/** Picker that must be rendered at first; if undefined & isEmpty - year, otherwise - day;
* @tutorial
* * point "2012" to start from year2012
* * point "2012-05" to start from month5 year2012
* * point "2012-05-02" to start from day2 month5 year2012
* * shows picker according to pointed but range according to $value ($value has higher priority then pointed date here) */
"w-startWith"?: "year" | "month" | "day" | string;
/** User can't select date less than min; format yyyy-MM-dd */
"w-min"?: string;
/** User can't select date more than max; format yyyy-MM-dd */
"w-max"?: string;
/** Dates that user can't choose
/** Global reference to object with array
* @example
* ```js
* window.exclude = [...];
* <wup-calendar w-exclude="window.exclude"></wup-calendar>
* ``` */
"w-exclude"?: string;
}
}
interface HTMLElementTagNameMap {
[tagName]: WUPCalendarControl;
}
}
declare module "react" {
namespace JSX {
interface IntrinsicElements {
/** Form-control represented by date picker
* @see {@link WUPCalendarControl} */
[tagName]: WUP.Base.ReactHTML<WUPCalendarControl> & WUP.Calendar.JSXProps;
}
}
}
declare module "preact/jsx-runtime" {
namespace JSX {
interface HTMLAttributes<RefType> {
}
interface IntrinsicElements {
/** Form-control represented by date picker
* @see {@link WUPCalendarControl} */
[tagName]: HTMLAttributes<WUPCalendarControl> & WUP.Calendar.JSXProps;
}
}
}
/** Form-control represented by date picker
* @see demo {@link https://yegorich555.github.io/web-ui-pack/control/calendar}
* @example
const el = document.createElement("wup-calendar");
el.$options.name = "dateOfBirthday";
el.$initValue = "1990-10-24";
el.$options.validations = { required: true };
const form = document.body.appendChild(document.createElement("wup-form"));
form.appendChild(el);
// or HTML
<wup-form>
<wup-calendar w-name="dateOfBirthday" w-utc w-initvalue="1990-10-24" w-min="1930-01-01" w-max="2010-01-01"/>
</wup-form>;
*/
export default class WUPCalendarControl<ValueType extends Date = Date, TOptions extends WUP.Calendar.Options = WUP.Calendar.Options, EventMap extends WUP.Calendar.EventMap = WUP.Calendar.EventMap> extends WUPBaseControl<ValueType, TOptions, EventMap> {
#private;
static get $styleRoot(): string;
static get $style(): string;
/** Returns days of pointed number-of-month with placeholders of prev, next months
* @param year 2022 etc.
* @param month index of month (0-11)
* @param firstWeekDay where 1-Monday, 7-Sunday
*/
static $daysOfMonth(year: number, month: number, firstWeekDay?: number): WUP.Calendar.IMonthInfo;
/** Converts/shifts localDate to UTCdate @returns new Date */
static $dateToUTC(localDate: Date): Date;
/** Parse string to Date
* @example
* "2022-10-25" asUTC >> returns new Date(Date.UTC(yyyy, MM, dd))
* "2022-10-25 02:40" asUTC >> returns new Date(Date.UTC(yyyy, MM, dd, hh, mm))
* "2022-10-25" >> returns new Date(yyyy, MM, dd)
* "2022-10-25 02:40" >> returns new Date(yyyy, MM, dd, hh, mm)
* "2022-10-25T02:40:00.000Z" >> returns UTC Date (argument `asUTC:false` is ignored)
*/
static $parse(yyyyMMdd: string, asUTC: boolean): Date;
static get mappedAttributes(): Record<string, AttributeMap>;
/** Default options - applied to every element. Change it to configure default behavior */
static $defaults: WUP.Calendar.Options;
constructor();
/** Call when need to re-rended picker (min/max changed etc.) */
$refreshPicker(): void;
/** Converts date-string into Date according (to $options.utc)
* @see {@link WUPCalendarControl.$parse} */
parse(text: string): ValueType | undefined;
/** Reference to calendar-container */
$refCalendar: HTMLDivElement;
/** Reference to header-button */
$refCalendarTitle: HTMLButtonElement;
/** Reference to container with items */
$refCalendarItems: HTMLOListElement & {
_items?: WUP.Calendar.IItemElement[];
};
/** Called once when need to render label + input */
renderInput(): {
menuId: string;
};
protected renderControl(): void;
valueToStorage(v: ValueType): string;
/** Appends calendar item to parent or replace previous */
protected appendItem(prevEl: WUP.Calendar.IItemElement | undefined | null, text: string, v: number): WUP.Calendar.IItemElement;
_pickerValue: Date;
_picker: PickersEnum;
/** Call it to manually show next/prev picker-section;
* @returns promise resolved by scroll-animation-end */
showNext(isNext: boolean): Promise<void>;
/** Called when need set/change day/month/year picker */
protected changePicker(utcVal: Date, pickerNext: PickersEnum): Promise<void>;
protected getDayPicker(): WUP.Calendar.IPickerResult;
/** Returns result to render month picker */
protected getMonthPicker(dateToRound: Date): WUP.Calendar.IPickerResult;
/** Returns result to render year picker */
protected getYearPicker(dateToRound: Date): WUP.Calendar.IPickerResult;
/** Set [disabled] for items according to $options.exclude & min & max */
protected disableItems(items: WUP.Calendar.IItemElement[], getIndex: WUP.Calendar.IPickerResult["getIndex"]): void;
/** Returns utc-normalized object based on options;
* where monthValue: y*12 + m, yearValue: y */
calcDisabled(): WUP.Calendar.INormalized;
/** Focus/clear of item (via aria-activedescendant) */
focusItem(el: HTMLElement | null): void;
/** Focus sibling item OR show next/prev and focus (via focusItem) */
protected focusSibling(n: number): HTMLElement | null;
/** Select item (set aria-selected and focus) */
protected selectItem(el: HTMLElement | undefined): void;
setValue(v: ValueType | undefined, reason: SetValueReasons): boolean | null;
/** Called when need to update/announce value for input */
setInputValue(v: ValueType | undefined | null): void;
clearValue(): void;
/** Shift pointed date to UTC if $options.utc is false and user pointed localDate; @returns new object-date */
private normalizeToUTC;
protected gotReady(): void;
protected gotChanges(propsChanged: Array<keyof WUP.Calendar.Options> | null): void;
gotChangesSharable(): void;
gotFormChanges(propsChanged: Array<keyof WUP.Form.Options> | null): void;
protected gotRemoved(): void;
protected gotFocusLost(): void;
gotFocus(ev: FocusEvent): Array<() => void>;
/** Called when user clicks on calendar */
protected gotClick(e: MouseEvent): void;
/** Called when browsers fills the field via autocomplete */
protected gotInput(e: WUP.Text.GotInputEvent): void;
gotKeyDown(e: KeyboardEvent): void;
}
export {};
/**
* UTC -5 EST >>> DST
* Mar 13...14 >>> + 1h
* Nov 6...7 >>> -1h
*/