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

Digitinary UI Library

import { ElementType, ComponentPropsWithRef, CSSProperties } from 'react';
import { AlertColorType, AlertVariantType, ButtonColorType, ButtonType, ButtonVariantType, InputType, PlacementType, SizeType, SwitchColorType, PositionType, ChipColorType, ChipVariantType, RadioColorType, RadioOption, HelperTextColorType, periodType } from './types';
import type { Moment } from 'moment';
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;
    searchPlaceholder?: string;
}
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;
    hideExportPDFButton?: boolean;
    hideExportEXCELButton?: boolean;
}
export interface TablePaginationProps extends PaginationProps {
    show: boolean;
}
export type TableRow<T = any> = {
    id: string | number;
    originalData?: T;
};
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;
    bulkSelection?: boolean;
    selectedRows?: TableRow[];
    onRowSelect?: (row: TableRow) => void;
    onSelectAll?: () => void;
    selectAllChecked?: boolean;
    selectAllIndeterminate?: boolean;
}
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;
    required?: boolean;
}
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;
    minDate?: string | 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 interface ChipsProps {
    chips?: string[] | any[];
    onDelete?: (option: string) => void;
    className?: string;
    height?: number;
    visibleChipsCount?: number;
}
export interface SpacingProps {
    p?: string | number;
    pt?: string | number;
    pb?: string | number;
    px?: string | number;
    py?: string | number;
    m?: string | number;
    mt?: string | number;
    mb?: string | number;
    mx?: string | number;
    my?: string | number;
}
export interface ContainerProps extends SpacingProps {
    children: React.ReactNode;
    style?: CSSProperties;
    columnGap?: string | number;
    rowGap?: string | number;
}
export interface ColProps extends SpacingProps {
    children: React.ReactNode;
    style?: CSSProperties;
    xs?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
    xxl?: number;
}
export interface CounterComponentProps {
    label?: string;
    value?: number;
    size?: SizeType;
    onChange?: (value?: number) => void;
    errorMsg?: string;
    required?: boolean;
    disabled?: boolean;
    className?: string;
    minNumber?: number;
    maxNumber?: number;
}
export interface DoubleBarChartProps {
    data: {
        name: string;
        value: number;
        volume: number;
    }[];
    className?: string;
    barSize: number;
    width: number;
    height: number;
    selectedFirstItem: string;
    selectedSeconedItem: string;
    color: {
        first: string;
        seconed: string;
    };
}
export interface KebabMenuProps {
    actions: React.ReactNode[];
    className?: string;
    menuButton?: React.ReactNode;
}
export interface TextWithTooltipProps {
    text: string;
    limit: number;
}
export interface FieldArrayProps {
    initialFields: any[];
    fieldsSettings: any[];
    value: any[];
    setValue: (value: any) => void;
    handleDataChanged?: () => void;
}
type FileOrUrl = File | string;
export interface FileUploaderProps {
    multiple?: boolean;
    disabled?: boolean;
    accept?: string;
    value: FileOrUrl[] | [];
    onChange: (value: FileOrUrl[]) => void;
    size?: 'small' | 'medium' | 'large';
    label?: JSX.Element | string | number;
    placeholder?: string | number;
    required?: boolean;
    key?: any;
    handleDownload?: (value: FileOrUrl) => void;
    maxSize?: number;
}
export interface InputRangeProps {
    value: number;
    onChange: (value: number) => void;
    disabled?: boolean;
    min?: number;
    max?: number;
    label?: JSX.Element | string | number;
    required?: boolean;
    isPercentage?: boolean;
}
export interface JsonFieldProps {
    json: string;
    setJson: React.Dispatch<React.SetStateAction<string>>;
    title: JSX.Element | string;
    disabled?: boolean;
    className?: string;
}
interface GroupSelect {
    groupName?: string;
    list: Option[];
}
export interface MultiSelectGroupProps {
    label?: string;
    required?: boolean;
    placeholder?: string;
    options: GroupSelect[];
    value: Option[];
    setValue: (value: Option | Option[] | null) => void;
    isMultiple?: boolean;
    disabled?: boolean;
    className?: string;
    helperText?: string;
    withSearch?: boolean;
    itemsLabel?: string;
    size?: string;
    searchPlaceholder?: string;
}
export interface NoDataFallbackProps {
    icon: React.ReactNode;
    message?: string;
    className?: string;
}
export type PieChartProps = {
    data: {
        name: string;
        value: number;
        fill: string;
    }[];
    height?: number;
    width?: number;
    outerRadius?: number;
    noDataState?: boolean;
    className?: string;
    activeIndex?: number;
    onClick?: (data: {
        payload: {
            key: string;
        };
    }, index: number) => void;
};
export type SectionHeadProps = {
    text: string | JSX.Element;
    closeFunction?: () => void;
    children?: JSX.Element;
    className?: string;
};
export interface DropdownButtonProps {
    options?: React.ReactNode[];
    customContainer?: HTMLElement;
    menuIcon?: React.ReactNode;
}
export interface DateRangePickerProps {
    value: string | null;
    onChange: (dateRange: string) => void;
    label?: string | JSX.Element;
    placeholder?: string;
    showTimeInput?: boolean;
    className?: string;
    disabled?: boolean;
    size?: string;
    id?: string;
    clearable?: boolean;
    endDatePlaceholder: string;
    startDatePlaceholder: string;
    disableStartDate: boolean;
    showMonthYearPicker: boolean;
    disableEndDate: boolean;
    maxStartDate?: string;
    minStartDate?: string;
    maxEndDate?: string;
    minEndDate?: string;
    required?: boolean;
    labels?: {
        month: string;
        day: string;
        Apply: string;
        week: string;
        Select: string;
        Last: string;
        Start_Date: string;
        End_Date: string;
        Selected_Date: string;
    };
}
export interface DateRangePropsTypes {
    id?: string;
    label?: JSX.Element | string;
    helperText?: string;
    errorMsg?: string;
    success?: boolean;
    disabled?: boolean;
    maxRangeSpan?: periodType;
    value?: {
        value: string;
        type: {
            key: string;
            value: string;
        };
    };
    onChange: (newValue?: {
        value: string;
        type: {
            key: string;
            value: string;
        };
    }) => void;
    size?: SizeType;
    clearable?: boolean;
    hideMoreDateOptions?: boolean;
    showTimePicker?: boolean;
    acceptSameDay?: boolean;
    maxStartDate?: string;
    minStartDate?: string;
    maxEndDate?: string;
    minEndDate?: string;
    disableStartDate?: boolean;
    disableEndDate?: boolean;
    labels?: {
        month: string;
        day: string;
        Apply: string;
        week: string;
        Select: string;
        Last: string;
        Start_Date: string;
        End_Date: string;
        Selected_Date: string;
    };
    className?: string;
    dataId?: string;
    required?: boolean;
}
export {};