@activecollab/components
Version:
ActiveCollab Components
104 lines • 3.84 kB
TypeScript
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