digitinary-ui/dist/types/interfaces.d.ts

Digitinary UI Library

import { ElementType, ComponentPropsWithRef } from 'react';
import { AlertColorType, AlertVariantType, ButtonColorType, ButtonType, ButtonVariantType, InputType, PlacementType, SizeType, SwitchColorType, PositionType, ChipColorType, ChipVariantType, RadioColorType, RadioOption, HelperTextColorType } from './types';
interface BaseProps {
    id?: string;
    className?: string;
    dataId?: string;
}
interface FormProps<T> extends BaseProps {
    label?: JSX.Element | string;
    placeholder?: string;
    errorMsg?: string;
    helperText?: string;
    disabled?: boolean;
    size?: SizeType;
    required?: boolean;
    clearable?: boolean;
    fullWidth?: boolean;
    value: T;
    onChange: (value: T) => void;
}
export interface InputProps extends FormProps<string | number> {
    type?: InputType;
    startAdornment?: JSX.Element;
    endAdornment?: JSX.Element;
    blurText?: boolean;
    ref?: React.Ref<HTMLInputElement>;
    direction?: 'ltr' | 'rtl';
    autoComplete?: string;
    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
    onWheel?: React.WheelEventHandler<HTMLInputElement>;
    onClear?: () => void;
    onSearchDebounce?: (value: string) => void;
    restrictedCharactersRegex?: RegExp | string | null;
    onlyArabic?: boolean;
    defaultValue?: string;
    maxLength?: number;
}
export interface SelectProps<T> extends FormProps<T | null> {
    options: Group[];
    isMultiple?: boolean;
    clearable?: boolean;
    withSearch?: boolean;
    itemsLabel?: string;
    isLoading?: boolean;
    onSelfInput?: (value: string) => string;
    selfInputText?: string;
    selfInputAddActionText?: string;
    renderSelfInputBtnText?: (value: string) => JSX.Element;
    startAdornment?: JSX.Element;
    onSearch?: (value: string | undefined) => void;
    handleScrollEnd?: (value: string | undefined) => void;
}
export interface DateRangeProps extends FormProps<string> {
    success?: boolean;
    hideMoreDateOptions?: boolean;
    showTimePicker?: boolean;
    acceptSameDay?: boolean;
    maxStartDate?: string;
    minStartDate?: string;
    maxEndDate?: string;
    minEndDate?: string;
    labels?: {
        month: string;
        day: string;
        Apply: string;
        week: string;
        Select: string;
        Last: string;
        Start_Date: string;
        End_Date: string;
        Selected_Date: string;
    };
}
export interface TextAreaProps extends FormProps<string> {
    name?: string;
    minRows: number;
    maxRows: number;
    maxLength?: number;
    startDecorator?: JSX.Element;
    endDecorator?: JSX.Element;
    direction?: 'rtl' | 'ltr';
    type?: string;
    enableCopy?: boolean;
    onlyArabic?: boolean;
}
export interface PaginationProps {
    page: number;
    setPage: React.Dispatch<React.SetStateAction<number>>;
    count: number;
    totalElement: number;
    disabledExportExcelBtn?: boolean;
    disabledExportPdfBtn?: boolean;
    excelExport?: () => void;
    pdfExport?: () => void;
    showPageCount?: boolean;
    showExportButtons?: boolean;
    disabledNextButton?: boolean;
    removeFirstLastButtons?: boolean;
    pageSize?: number;
    isExcelExportLoading?: boolean;
    showItemPerPage?: boolean;
    pageSizeOptions?: number[];
    onPageSizeChange?: (size: number) => void;
    className?: string;
}
export interface TablePaginationProps extends PaginationProps {
    show: boolean;
}
export interface TableProps {
    headCells: HeadCellProps[];
    data: Record<string, any>[];
    sort: string;
    setSort: (prev: string) => void;
    currentHeadCell: string;
    setCurrentHeadCell: (prev: string) => void;
    fallback?: JSX.Element;
    footer?: JSX.Element;
    onRowClick?: (rowId: string | number) => void;
    selectableRow?: boolean;
    selectedRowId?: string;
    rowDataId?: string;
    paginationOptions?: TablePaginationProps;
    heightOffset?: number;
    id?: string;
}
export interface SwitchProps {
    checked: boolean;
    onClick: () => void;
    label?: string;
    disabled?: boolean;
    labelPlacement?: PlacementType;
    color?: SwitchColorType;
}
export interface AlertProps {
    severity?: AlertColorType;
    color?: AlertColorType;
    variant?: AlertVariantType;
    onClose?: (() => void) | boolean;
    action?: JSX.Element;
    icon?: JSX.Element | boolean;
    customStyle?: Record<string, string | number>;
    children?: JSX.Element | string;
    className?: string;
}
export interface AccordionProps {
    defaultExpanded?: boolean;
    expanded?: boolean;
    disabled?: boolean;
    onChange?: () => void;
    summary: JSX.Element | string;
    children: JSX.Element | JSX.Element[] | string;
    className?: string;
}
export interface ButtonPropsType {
    children: JSX.Element | string | number;
    type?: ButtonType;
    variant?: ButtonVariantType;
    color?: ButtonColorType;
    size?: SizeType;
    fullWidth?: boolean;
    disabled?: boolean;
    loading?: boolean;
    startIcon?: JSX.Element;
    endIcon?: JSX.Element;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    active?: boolean;
    dataId?: string;
    className?: string;
    id?: string;
}
export interface CardPropsType {
    header?: JSX.Element;
    children?: JSX.Element | string;
    footer?: JSX.Element;
    rounded?: boolean;
    className?: string;
}
export interface CheckboxPropsType {
    label: string;
    labelPlacement?: PositionType;
    handleCheckboxChange: () => void;
    checked?: boolean;
    size?: SizeType;
    disabled?: boolean;
    className?: string;
}
export interface ChipPropsType {
    color?: ChipColorType;
    children?: JSX.Element | string;
    size?: SizeType;
    variant?: ChipVariantType;
    clickable?: boolean;
    onClick?: () => void;
    onDelete?: (arg: string) => void;
    id?: string;
    className?: string;
    type?: 'default' | 'orange' | 'red' | 'dark-blue' | 'blue' | 'grey' | 'light-grey' | 'green' | 'light-orange' | 'black';
}
export interface DialogPropsType {
    open: boolean;
    onClose?: () => void;
    header?: JSX.Element | string;
    content?: JSX.Element | string;
    footer?: JSX.Element | string;
    position: string;
    size?: string;
    disableOverlay?: boolean;
    disableBackdropClick?: boolean;
    fullWidth?: boolean;
    scroll?: string;
    className?: string;
    dataId?: string;
}
export interface HelperTextPropsType extends BaseProps {
    type?: HelperTextColorType;
    text: string;
}
export interface TooltipProps extends BaseProps {
    children: JSX.Element | string;
    content: JSX.Element | string;
}
export interface LabelPropsType extends BaseProps {
    required?: boolean;
    label: string | JSX.Element;
}
export interface LoaderProps {
    className?: string;
    width?: number;
    height?: number;
    color?: string;
    shape?: 'quarter' | 'half' | 'three-quarters';
}
export interface OverlayPropsType {
    children?: JSX.Element;
    open?: boolean;
    className?: string;
}
export interface RadioPropsType {
    name?: string;
    size?: SizeType;
    checked: boolean;
    onChange: () => void;
    disabled?: boolean;
    label?: string;
    labelPosition?: PositionType;
    color?: RadioColorType;
    className?: string;
}
export interface RadioGroupProps extends BaseProps {
    name: string;
    options: RadioOption[];
    defaultValue?: string;
    onChange: (value: string) => void;
    size?: SizeType;
    labelPosition?: PositionType;
    color?: RadioColorType;
    label?: string;
    checked?: any;
    direction?: 'horizontal' | 'vertical';
    gap?: string;
    value?: string;
}
export interface SideDrawerPropsType extends BaseProps {
    open: boolean;
    setOpen: (open: boolean) => void;
    children: JSX.Element | string;
    onClickOutSide?: () => void;
    width?: string;
    anchor?: 'left' | 'right';
}
export interface Option {
    value: string;
    label: string | JSX.Element;
    [key: string]: any;
}
export interface Group {
    groupName?: string;
    list: Option[];
}
export interface HeadCellProps {
    id: string;
    label: string | JSX.Element;
    classes?: string;
    sortable?: boolean;
    tooltip?: boolean;
    width?: string;
    minWidth?: string;
}
export type ElementProps<T extends ElementType> = ComponentPropsWithRef<T>;
export type timeUnit = 'monthly' | 'daily' | 'yearly';
export interface DateProps extends FormProps<string | null> {
    disabledDay?: string;
    selectedEndDate?: string;
    success?: boolean;
    disablePastDays?: boolean;
    timePicker?: boolean;
    isEndDay?: boolean;
    defaultFormat?: string;
    acceptSameDay?: boolean;
    setCheckDateOpened?: (value: boolean) => void;
    maxDate?: string | moment.Moment;
    minDate?: string | moment.Moment;
    timeUnit?: timeUnit;
    allowSameDay?: boolean;
    dateFormat?: string;
    dateFormatCalendar?: string;
    disabled?: boolean;
    disabledKeyboardNavigation?: boolean;
    dropdownMode?: 'scroll';
    preventOpenOnFocus?: boolean;
    monthsShown?: number;
    readOnly?: boolean;
    withPortal?: boolean;
    onClear?: () => void;
    selectsDisabledDaysInRange?: boolean;
    shouldCloseOnSelect?: boolean;
    showTimeSelect?: boolean;
    showTimeInput?: boolean;
    showPreviousMonths?: boolean;
    showMonthYearPicker?: boolean;
    showFullMonthYearPicker?: boolean;
    showTwoColumnMonthYearPicker?: boolean;
    showFourColumnMonthYearPicker?: boolean;
    showYearPicker?: boolean;
    showQuarterYearPicker?: boolean;
    showWeekPicker?: boolean;
    strictParsing?: boolean;
    swapRange?: boolean;
    timeIntervals?: number;
    timeCaption?: string;
    previousMonthAriaLabel?: string;
    previousMonthButtonLabel?: string;
    nextMonthAriaLabel?: string;
    nextMonthButtonLabel?: string;
    previousYearAriaLabel?: string;
    previousYearButtonLabel?: string;
    nextYearAriaLabel?: string;
    nextYearButtonLabel?: string;
    timeInputLabel?: string;
    enableTabLoop?: boolean;
    yearItemNumber?: number;
    focusSelectedMonth?: boolean;
    showPopperArrow?: boolean;
    excludeScrollbar?: boolean;
    customTimeInput?: null;
    calendarStartDay?: undefined;
    toggleCalendarOnIconClick?: boolean;
    usePointerEvent?: boolean;
    isRange?: boolean;
}
export {};