UNPKG

@activecollab/components

Version:

ActiveCollab Components

104 lines 3.84 kB
import { ElementType, FC, CSSProperties } from "react"; import { Placement } from "@popperjs/core"; import { Moment } from "moment"; import { DaysToModify } from "./types"; import { ChangeMode, TimestampDateRange } from "../DatePicker/DatePicker"; type TriggerStringType = "text" | "icon" | "inline"; type TriggerFunctionType = (text: string) => JSX.Element; export interface ISelectDate { /** Change mode - can be atomic and instant */ changeMode?: "atomic" | "instant"; /** Trigger - can be text, icon, inline, or custom render function */ trigger?: TriggerStringType | TriggerFunctionType; /** Save button text */ saveButtonText?: string; /** Cancel button text */ cancelButtonText?: string; /** Clear button text */ clearButtonText?: string; /** Modal header text */ modalHeaderText?: string; /** Modal cancel button text */ modalCancelBtnText?: string; /** Modal discard button text */ modalDiscardBtnText?: string; /** Modal discard message text */ modalDiscardMessage?: string; /** Tooltip text */ tooltipText?: string; /** Called when day is clicked */ onDayClick?: (day: Moment, modifiers: string[]) => void; /** Save changes callback */ onSave?: (dates?: TimestampDateRange) => void; /** Changing dates callback */ onChange?: (dates?: TimestampDateRange) => void; /** On cancel closes datepicker or opens discard modal in atomic mode */ onCancel?: () => void; /** Clear dates when they are not required */ onClear?: () => void; /** Use this callback to get is picker visible */ onToggleDatePicker?: (value: boolean) => void; /** Force close */ forceClose?: boolean; /** Set selected day or days */ selectedDays?: TimestampDateRange; /** Set month */ defaultMonth?: Moment; /** Set selection range */ selectionMode?: ChangeMode; /** Set is date required */ required?: boolean; /** Set default show on date picker (only for text and icon mode) */ defaultShowDatePicker?: boolean; /** Long date format (Always show year) */ longDateFormat?: boolean; /** Set first day of week */ firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6; /** One of icon types */ icon?: ElementType; /** Default Label text */ defaultLabelText?: string; /** Date format */ dateFormat?: string; /** Menu classes */ menuClassName?: string; /** Target element classes */ targetClassName?: string; /** Target element text classes */ targetTextClassName?: string; /** Target element icon classes */ targetIconClassName?: string; /** Background style for clickable element after the menu is open (opacity, color, etc...) */ backgroundElementClass?: string; /** Days to modify */ daysToModify?: DaysToModify[]; /** Array of weekend days */ weekends?: number[]; /** Weekend label */ weekendLabel?: string; /** Array of nonworking week days */ nonWorkingDaysOfWeek?: number[]; /** Nonworking week days label */ nonWorkingDaysOfWeekLabel?: string; /** Allows weekends to be selected */ weekendIsSelectable?: boolean; /** Popper Tooltip style */ popperTooltipStyle?: CSSProperties; /** Popper Tooltip class name*/ popperTooltipClassName?: string; /** Popper class name*/ popperClassName?: string; /** Position of selectDate menu */ position?: Placement; /** Disable days before specified date */ disableDaysBefore?: Moment; /** Disable days after specified date */ disabledDaysAfter?: Moment; /** Enable year selector */ enableYearPicker?: boolean; /** Disable aniamtions */ disableAnimations?: boolean; } export declare const SelectDate: FC<ISelectDate>; export {}; //# sourceMappingURL=SelectDate.d.ts.map