@rivtn/noseur 1.0.0

package/dist/esm/compose/form/DateTimePicker.d.ts

@@ -0,0 +1,341 @@
+import "../Composed.css";
+import React from 'react';
+import { Scheme } from "../../constants/Scheme";
+import { ButtonProps } from "../../form/Button";
+import { DialogManageRef, DialogProps } from "../../overlay/Dialog";
+import { PopoverManageRef, PopoverProps } from "../../overlay/Popover";
+import { FormatedDate, Month, Time, Weekday } from "../../utils/DateHelper";
+import { NoseurDivElement, NoseurElement, NoseurLabel, NoseurObject } from "../../constants/Types";
+import { ComponentBaseProps, ComponentElementBasicAttributes, ComponentRenderType } from "../../core/ComponentBaseProps";
+export declare enum DateTimePickerMode {
+    YEAR = 0,
+    MONTH = 1,
+    DATETIME = 2
+}
+export declare enum DateTimePickerSelectionMode {
+    RANGE = 0,
+    SINGLE = 1,
+    MULTIPLE = 2
+}
+export declare const DateTimePickerWeekdayIndex: Weekday[];
+export declare const MonthIndex: Month[];
+export declare enum DateTimePickerLayoutElement {
+    DashElement = "[d]",
+    SpaceElement = "[s]",
+    RowDividerElement = "[-]",
+    NowElement = "NowElement",
+    OpenRowGroupElement = "{",
+    DayElement = "DayElement",
+    CloseRowGroupElement = "}",
+    YearElement = "YearElement",
+    TimeElement = "TimeElement",
+    DateElement = "DateElement",
+    NextElement = "NextElement",
+    HourElement = "HourElement",
+    PanelSeparatorElement = "|",
+    ColumnDividerElement = "[|]",
+    SpaceLeftRightElement = "<>",
+    OpenColumnGroupElement = "<",
+    CloseColumnGroupElement = ">",
+    DaysElements = "DaysElements",
+    MonthElement = "MonthElement",
+    TodayElement = "TodayElement",
+    ClearElement = "ClearElement",
+    SelectElement = "SelectElement",
+    YearsElements = "YearsElements",
+    HeaderElement = "HeaderElement",
+    FooterElement = "FooterElement",
+    TimeSeparator = "TimeSeparator",
+    YearToElement = "YearToElement",
+    WeekDayElement = "WeekDayElement",
+    MonthsElements = "MonthsElements",
+    MinutesElement = "MinutesElement",
+    SecondsElement = "SecondsElement",
+    YearFromElement = "YearFromElement",
+    TopPanelElement = "TopPanelElement",
+    MeridianElement = "MeridianElement",
+    ThisYearElement = "ThisYearElement",
+    LastYearElement = "LastYearElement",
+    PreviousElement = "PreviousElement",
+    SelectionElement = "SelectionElement",
+    WeekdaysElements = "WeekdaysElements",
+    ThisMonthElement = "ThisMonthElement",
+    LastMonthElement = "LastMonthElement",
+    NextMonthElement = "NextMonthElement",
+    IncrementElement = "IncrementElement",
+    DecrementElement = "DecrementElement",
+    YesterdayElement = "YesterdayElement",
+    LeftPanelElement = "LeftPanelElement",
+    TodayDateElement = "TodayDateElement",
+    MainLayoutElement = "MainLayoutElement",
+    RightPanelElement = "RightPanelElement",
+    TodaysDateElement = "TodaysDateElement",
+    BottomPanelElement = "BottomPanelElement",
+    DateRangesElements = "DateRangesElements",
+    CustomHeaderElement = "CustomHeaderElement",
+    CustomFooterElement = "CustomFooterElement",
+    SelectedDateElement = "SelectedDateElement",
+    PreviousMonthElement = "PreviousMonthElement",
+    LastSevenDaysElement = "LastSevenDaysElement",
+    LastThirtyDaysElement = "LastThirtyDaysElement",
+    SelectedDatesElements = "SelectedDatesElements",
+    YearModeHeaderElement = "YearModeHeaderElement",
+    YearModeFooterElement = "YearModeFooterElement",
+    MonthModeHeaderElement = "MonthModeHeaderElement",
+    MonthModeFooterElement = "MonthModeFooterElement"
+}
+export declare enum DateTimePickerLayout {
+    DEFAULT_SELECTION_LAYOUT = "SelectedDatesElements",
+    DEFAULT_FOOTER_LAYOUT = "TodayDateElement <> ClearElement SelectElement",
+    DEFAULT_MONTH_MODE_HEADER_LAYOUT = "PreviousElement <> YearElement <> NextElement",
+    DEFAULT_YEAR_MODE_LAYOUT = "YearModeHeaderElement YearsElements YearModeFooterElement",
+    DEFAULT_MONTH_MODE_LAYOUT = "MonthModeHeaderElement MonthsElements MonthModeFooterElement",
+    DEFAULT_HEADER_LAYOUT = "PreviousElement <> MonthElement YearElement <> NextElement",
+    DEFAULT_YEAR_MODE_HEADER_LAYOUT = "PreviousElement <> YearFromElement [s] [d] [s] YearToElement <> NextElement",
+    DEFAULT_LAYOUT = "TopPanelElement [-] LeftPanelElement [|] HeaderElement WeekdaysElements DaysElements TimeElement FooterElement [|] RightPanelElement [-] BottomPanelElement",
+    DEFAULT_TIME_LAYOUT = "< IncrementElement HourElement DecrementElement > TimeSeparator < IncrementElement MinutesElement DecrementElement > TimeSeparator < IncrementElement MeridianElement DecrementElement >",
+    FINE_LEFT_LAYOUT = "TodayElement YesterdayElement LastSevenDaysElement LastThirtyDaysElement ThisMonthElement LastMonthElement ThisYearElement LastYearElement",
+    TIME_LAYOUT_WITHOUT_MERIDIAN = "< IncrementElement HourElement DecrementElement > TimeSeparator < IncrementElement MinutesElement DecrementElement >",
+    TIME_LAYOUT_WITH_SECONDS_WITHOUT_MERIDIAN = "< IncrementElement HourElement DecrementElement > TimeSeparator < IncrementElement MinutesElement DecrementElement > TimeSeparator < IncrementElement SecondsElement DecrementElement >",
+    TIME_LAYOUT_WITH_SECONDS = "< IncrementElement HourElement DecrementElement > TimeSeparator < IncrementElement MinutesElement DecrementElement > TimeSeparator < IncrementElement SecondsElement DecrementElement > TimeSeparator < IncrementElement MeridianElement DecrementElement >"
+}
+export interface TimePickerLayoutElementBuilderOptions {
+    scheme?: Scheme;
+    text: NoseurLabel;
+    key?: string | number;
+    layoutElement: string;
+    action?: (e: any) => void;
+    formattedDate: FormatedDate;
+    basicAttrs?: ComponentElementBasicAttributes;
+    control?: Partial<ButtonProps> | NoseurElement;
+}
+export interface DateTimePickerElementOptions {
+    props: DateTimePickerProps;
+    formattedDate: FormatedDate;
+    labelsMap: NoseurObject<string>;
+    layoutElement: DateTimePickerLayoutElement;
+    options: TimePickerLayoutElementBuilderOptions;
+    controlActionMap: NoseurObject<(e: any) => void>;
+    elementBuilder: (options: TimePickerLayoutElementBuilderOptions) => NoseurElement;
+}
+export interface DateTimePickerEvent {
+    toDate?: Date;
+    fromDate?: Date;
+    selectedDate?: Date;
+    selectedDates: Date[];
+    formatDate: (date: Date) => string;
+}
+export type DateTimePickerDateClearEventHandler = () => void;
+export type DateTimePickerDateMaxDateEventHandler = () => void;
+export type DateTimePickerDateEventHandler = (options: DateTimePickerEvent) => void;
+export type DateTimePickerDateElementTemplateHandler = (options: FormatedDate) => NoseurElement;
+export type DateTimePickerElementTemplateHandler = (options: DateTimePickerElementOptions) => NoseurElement;
+export type MonthElementTemplateHandler = (month: Month, options: DateTimePickerElementOptions) => NoseurElement;
+export type DateTimePickerDateValueChangeControlEventHandler = (leftNeigbhor?: string, rightNeigbhor?: string) => void;
+export type DateTimePickerYearElementTemplateHandler = (date: number, options: DateTimePickerElementOptions) => NoseurElement;
+export type DateTimePickerIncreaseDecreaseEventHandler = (activeDate: Date, layoutElement: DateTimePickerLayoutElement) => void;
+export type DateTimePickerSelectedDatelementTemplateHandler = (date: Date, options: DateTimePickerElementOptions) => NoseurElement;
+export type DateTimePickerWeekdayElementTemplateHandler = (weekday: Weekday, options: DateTimePickerElementOptions) => NoseurElement;
+export type DateTimePickerSelectionElementTemplateHandler = (selectedDates: Date[], options: DateTimePickerElementOptions) => NoseurElement;
+export type DateTimePickerDayElementTemplateHandler = (date: number, options: DateTimePickerElementOptions, selected: boolean, dateObj?: Date, overlap?: boolean) => NoseurElement;
+export type DateTimePickerAttributesRelays = {
+    dialog?: Partial<DialogProps>;
+    popover?: Partial<PopoverProps>;
+    rowGroup?: ComponentElementBasicAttributes;
+    columnGroup?: ComponentElementBasicAttributes;
+    selectedDate?: ComponentElementBasicAttributes;
+    weekdays?: {
+        className?: string;
+        weekday?: ComponentElementBasicAttributes;
+    };
+    days?: {
+        className?: string;
+        underline?: {
+            className?: string;
+        };
+    };
+    date?: {
+        className?: string;
+        hover?: ComponentElementBasicAttributes;
+        inRange?: ComponentElementBasicAttributes;
+        enabled?: ComponentElementBasicAttributes;
+        disabled?: ComponentElementBasicAttributes;
+        selected?: ComponentElementBasicAttributes;
+        todayHighlight?: ComponentElementBasicAttributes;
+    };
+    years?: {
+        className?: string;
+        year?: {
+            className?: string;
+        };
+        selected?: {
+            className?: string;
+        };
+    };
+    months?: {
+        className?: string;
+        month?: {
+            className?: string;
+        };
+        selected?: {
+            className?: string;
+        };
+    };
+    [key: string]: ComponentElementBasicAttributes | undefined;
+};
+export interface DateTimePickerManageRef {
+    clear: () => void;
+    activeDate: () => Date;
+    selectedDates: () => Date[];
+    formattedValue: () => string;
+    dialogManageRef: () => DialogManageRef | null;
+    popoverManageRef: () => PopoverManageRef | null;
+    toggle: (event: Event, target?: HTMLElement) => void;
+    next: (leftNeigbhor?: string, rightNeigbhor?: string) => void;
+    prev: (leftNeigbhor?: string, rightNeigbhor?: string) => void;
+}
+export interface DateTimePickerProps<T1 = NoseurDivElement, T2 = DateTimePickerManageRef, T3 = DateTimePickerAttributesRelays> extends ComponentBaseProps<T1, T2, T3> {
+    date: Date;
+    minDate: Date;
+    maxDate: Date;
+    locale: string;
+    layout: string;
+    sticky: boolean;
+    topLayout: string;
+    required: boolean;
+    showTime: boolean;
+    timeOnly: boolean;
+    timeLayout: string;
+    idleScheme: Scheme;
+    autoFocus: boolean;
+    leftLayout: string;
+    weekdays: Weekday[];
+    rightLayout: string;
+    disableToDate: Date;
+    staticMode: boolean;
+    bottomLayout: string;
+    headerLayout: string;
+    footerLayout: string;
+    enabledDates: Date[];
+    disabledDates: Date[];
+    selectedDates: Date[];
+    numberOfMonth: number;
+    disableFromDate: Date;
+    modalVisible: boolean;
+    enabledYears: number[];
+    showGridLines: boolean;
+    yearModeLayout: string;
+    enabledMonths: Month[];
+    disabledMonths: Month[];
+    monthModeLayout: string;
+    selectionLayout: string;
+    highlightToday: boolean;
+    showDateRanges: boolean;
+    disabledYears: number[];
+    hourFormat: "12" | "24";
+    type: ComponentRenderType;
+    mode: DateTimePickerMode;
+    dontOverlapDate: boolean;
+    enabledWeekdays: Weekday[];
+    disabledWeekdays: Weekday[];
+    showDatesSeparator: boolean;
+    modeDifferenceCount: number;
+    yearModeHeaderLayout: string;
+    yearModeFooterLayout: string;
+    monthModeHeaderLayout: string;
+    monthModeFooterLayout: string;
+    monthsSeparatorLayout: string;
+    makeOverlapSelectable: boolean;
+    highlightDatesInRange: boolean;
+    dontUnselectOnSameDate: boolean;
+    labelsMap: NoseurObject<string>;
+    reportOnSelectClickOnly: boolean;
+    maxMultipleModeDateSelection: number;
+    dateFormat: Intl.DateTimeFormatOptions;
+    selectionMode: DateTimePickerSelectionMode;
+    dayControl: Partial<ButtonProps> | NoseurElement;
+    nextControl: Partial<ButtonProps> | NoseurElement;
+    prevControl: Partial<ButtonProps> | NoseurElement;
+    incrementControl: Partial<ButtonProps> | NoseurElement;
+    decrementControl: Partial<ButtonProps> | NoseurElement;
+    monthTemplate: MonthElementTemplateHandler;
+    onSelectDate: DateTimePickerDateEventHandler;
+    onClear: DateTimePickerDateClearEventHandler;
+    timeTemplate: DateTimePickerElementTemplateHandler;
+    layoutTemplate: DateTimePickerElementTemplateHandler;
+    headerTemplate: DateTimePickerElementTemplateHandler;
+    footerTemplate: DateTimePickerElementTemplateHandler;
+    dayTemplate: DateTimePickerDayElementTemplateHandler;
+    elementTemplate: DateTimePickerElementTemplateHandler;
+    onIncrease: DateTimePickerIncreaseDecreaseEventHandler;
+    onDecrease: DateTimePickerIncreaseDecreaseEventHandler;
+    yearTemplate: DateTimePickerYearElementTemplateHandler;
+    dateTemplate: DateTimePickerDateElementTemplateHandler;
+    topPanelTemplate: DateTimePickerElementTemplateHandler;
+    leftPanelTemplate: DateTimePickerElementTemplateHandler;
+    onNext: DateTimePickerDateValueChangeControlEventHandler;
+    rightPanelTemplate: DateTimePickerElementTemplateHandler;
+    bottomPanelTemplate: DateTimePickerElementTemplateHandler;
+    customElementTemplate: DateTimePickerElementTemplateHandler;
+    yearModeHeaderTemplate: DateTimePickerElementTemplateHandler;
+    yearModeFooterTemplate: DateTimePickerElementTemplateHandler;
+    weekdayTemplate: DateTimePickerWeekdayElementTemplateHandler;
+    onPrevious: DateTimePickerDateValueChangeControlEventHandler;
+    monthModeHeaderTemplate: DateTimePickerElementTemplateHandler;
+    monthModeFooterTemplate: DateTimePickerElementTemplateHandler;
+    onIncrement: DateTimePickerDateValueChangeControlEventHandler;
+    onDecrement: DateTimePickerDateValueChangeControlEventHandler;
+    selectionTemplate: DateTimePickerSelectionElementTemplateHandler;
+    onMaxMultipleDateSelected: DateTimePickerDateMaxDateEventHandler;
+    selectedDateTemplate: DateTimePickerSelectedDatelementTemplateHandler;
+}
+interface DateTimePickerState {
+    time: Time;
+    activeDate: Date;
+    mouseOverDate?: Date;
+    modalVisible: boolean;
+    selectedDates: Date[];
+    activeMode: DateTimePickerMode;
+}
+export declare const DateTimePickerDefaultProps: Partial<DateTimePickerProps>;
+export declare class DateTimePickerComponent extends React.Component<DateTimePickerProps, DateTimePickerState> {
+    static defaultProps: Partial<DateTimePickerProps>;
+    state: DateTimePickerState;
+    labelsMap: NoseurObject<string>;
+    dialogManageRef: DialogManageRef | null;
+    popoverManageRef: PopoverManageRef | null;
+    constructor(props: DateTimePickerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    toggle(event: Event, target?: HTMLElement): void;
+    next(leftNeigbhor?: string, rightNeigbhor?: string): void;
+    prev(leftNeigbhor?: string, rightNeigbhor?: string): void;
+    increment(leftNeigbhor?: string, rightNeigbhor?: string): void;
+    decrement(leftNeigbhor?: string, rightNeigbhor?: string): void;
+    reportOnSelectDate(newSelectedDates?: Date[]): void;
+    clearDateSelection(): void;
+    onMouseEnterDate(date: Date): void;
+    onMouseLeaveDate(): void;
+    selectDatesInRange(date: Date, toDate?: Date): void;
+    switchMode(element: DateTimePickerLayoutElement): void;
+    performDateControlAction(element: DateTimePickerLayoutElement): void;
+    selectNowDate(): void;
+    onSelectDate(date: Date, reset?: boolean): void;
+    onSelectYear(event: Event, year: number): void;
+    onSelectMonth(event: Event, month: number, year: number): void;
+    dateShouldBeDisabled(date: Date): boolean;
+    selectDateControlScheme(layoutElement: DateTimePickerLayoutElement): Scheme | undefined;
+    buildLayoutElement(options: TimePickerLayoutElementBuilderOptions, formattedDate: FormatedDate, layoutElements: NoseurObject<NoseurElement>, layoutElement: DateTimePickerLayoutElement, layout: string, className: string, template: DateTimePickerElementTemplateHandler | null, controlActionMap: NoseurObject<(e: any) => void>, key?: string | number): NoseurElement;
+    buildDateElement(_date: Date | string, dayControl: Partial<ButtonProps> | NoseurElement, controlActionMap: NoseurObject<(e: any) => void>): any;
+    buildLayoutElements(formattedDate: FormatedDate, controlActionMap: NoseurObject<(e?: any) => void>): NoseurObject<NoseurElement>;
+    buildLayout(formattedDate: FormatedDate, layoutElements: NoseurObject<NoseurElement>, controlActionMap: NoseurObject<(e?: any) => void>): (React.JSX.Element | null)[];
+    render(): React.JSX.Element;
+}
+export declare const DateTimePicker: ({ ref, ...props }: Partial<DateTimePickerProps>) => React.JSX.Element;
+export declare const YearPicker: ({ ref, ...props }: Partial<DateTimePickerProps>) => React.JSX.Element;
+export declare const MonthPicker: ({ ref, ...props }: Partial<DateTimePickerProps>) => React.JSX.Element;
+export declare const DatePicker: ({ ref, ...props }: Partial<DateTimePickerProps>) => React.JSX.Element;
+export declare const TimePicker: ({ ref, ...props }: Partial<DateTimePickerProps>) => React.JSX.Element;
+export declare const DateTimePickerLayoutElementsValues: DateTimePickerLayoutElement[];
+export declare function dateTimePickerBuildLayoutElement(options: TimePickerLayoutElementBuilderOptions): any;
+export {};