react-ui-mat/dist/types.d.ts

- ANIMATE - BADGES ( success, danger, info, light, primary, green ) - BEHAVIOR - BUTTONS - CHECKBOX - COLLAPSE - CONTEXT PANEL - DATE PICKER - DATEPICKER - DATEUTIL - DIVIDER - DRAGABLE MODAL - INCORRECT_ENTRY - INPUT - INPUT_FIELDS - MULTISELECT - MUPLAY

import * as React from "react";
import { PhoneType } from "./Phone";
import { BadgeBaseProps, ButtonInputBaseProps, InputBaseProps, HTMLDiv, MPickerBaseProps, NumeralInputBaseProps, ProgressBaseProps, TextareaBaseProps } from "./types.base";
import { IMTMovePoint, IMTMoveValue, IMTPoint, SortingDirections } from "./typesout";
export interface BadgeProps extends BadgeBaseProps {
    id?: string;
    scope?: "fl" | "sp";
    outline?: boolean;
    className?: string;
    desc?: number | string;
    children?: JSX.Element | React.ReactNode;
}
export interface ButtonInputProps extends ButtonInputBaseProps {
    id?: string;
    btnType: "primary" | "secondary" | "success" | "warning" | "danger" | "light" | "navy";
    outline?: boolean;
    type?: "button" | "submit";
    style?: any;
    disabled?: boolean;
    loading?: boolean;
    className?: string;
    onClick?: (e: any) => any;
    children: JSX.Element | React.ReactNode;
}
export interface FlashingAnimateRender {
    preValue?: any;
    active: boolean;
    className: string;
}
export interface FlashingAnimateProps {
    className?: string;
    animationClassName?: string;
    value: any;
    duration: number;
    render: (res: FlashingAnimateRender, value: any) => JSX.Element | React.ReactNode;
}
export interface CardSectionProps {
    children: JSX.Element | React.ReactNode;
    className?: string;
}
export interface CardSectionTitleProps {
    children: JSX.Element | React.ReactNode;
    className?: string;
}
export interface CardSectionContentProps {
    children: JSX.Element | React.ReactNode;
    className?: string;
}
export interface CardSectionRowProps {
    children: JSX.Element | React.ReactNode;
    className?: string;
}
export interface CheckboxProps {
    id?: string;
    name?: string;
    label?: string | JSX.Element | React.ReactNode;
    className?: string;
    labelClassName?: string;
    labelStyle?: any;
    checkboxClassName?: string;
    checkboxStyle?: any;
    checked?: boolean;
    disabled?: boolean;
    size?: "d" | "sm";
    nofull?: boolean;
    value: any;
    children?: string | JSX.Element | React.ReactNode;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onChangeState?: (value: any | "") => void;
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface MCircularData {
    key: string | number;
    label: string;
    data?: any;
}
export interface MCircularProps {
    direction: "X" | "Y";
    divider?: boolean;
    disabled?: boolean;
    value?: string | number;
    data: MCircularData[];
    render: (data: MCircularData, selected: boolean) => JSX.Element | React.ReactNode;
    onChange?: (value?: string | number, data?: any) => void;
    onBlur?: () => void;
}
export interface MCircularMultiProps {
    direction: "X" | "Y";
    divider?: boolean;
    disabled?: boolean;
    value?: Array<string | number> | string[] | number[];
    data: MCircularData[];
    render: (data: MCircularData, selected: boolean) => JSX.Element | React.ReactNode;
    onChange?: (value: Array<string | number> | string[] | number[], data: any[]) => void;
    onBlur?: () => void;
}
export interface ContextMenuProps {
    id?: string;
    direction?: "ltr" | "rtl";
    event?: "click" | "hover";
    disabled?: boolean;
    data?: any;
    close?: "any" | "outside" | "leave" | "manuel";
    children: JSX.Element | React.ReactNode;
    context: (data: any | null, onClose: () => void) => JSX.Element | React.ReactNode;
    onChangeStatus?: (isOpen: boolean) => void;
}
export interface ContextItemProps extends HTMLDiv {
    id?: string;
    className?: string;
    style?: React.CSSProperties;
    children: JSX.Element | React.ReactNode;
    onClick: () => void;
}
export interface ContextPanelProps {
    id?: string;
    data?: any;
    open: boolean;
    position: "top" | "bottom";
    event?: "open_hover" | "open_click";
    className?: string;
    children: JSX.Element | React.ReactNode;
    context: (data: any | null, onClose: () => void) => JSX.Element | React.ReactNode;
    onChange?: (status: boolean) => void;
    onClick?: (params: {
        data: any | null;
        open: boolean;
        onClose: () => void;
        onOpen: () => void;
        onSwitch: () => void;
    }) => void;
    onMouseEnter?: (params: {
        data: any | null;
        open: boolean;
        onClose: () => void;
        onOpen: () => void;
        onSwitch: () => void;
    }) => void;
    onMouseLeave?: (params: {
        data: any | null;
        open: boolean;
        onClose: () => void;
        onOpen: () => void;
        onSwitch: () => void;
    }) => void;
    onClickOutSide?: (params: {
        data: any | null;
        open: boolean;
        onClose: () => void;
        onOpen: () => void;
        onSwitch: () => void;
    }) => void;
}
export interface DatePickerProps extends InputBaseProps {
    id?: string;
    className?: string;
    defaultValue?: string | number | ReadonlyArray<string>;
    autoFocus?: boolean;
    disabled?: boolean;
    name?: string;
    min?: number | string;
    max?: number | string;
    step?: number;
    pattern?: string | any;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    style?: React.CSSProperties;
    type?: "date" | "datetime-local" | "month" | "time";
    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
    value?: string | ReadonlyArray<string> | number;
    width?: number | string;
    onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface DividerProps {
    id?: string;
    label: string;
    children: JSX.Element | React.ReactNode;
}
export interface DragableModalProps {
    isOpen: boolean;
    header?: JSX.Element | React.ReactNode;
    children?: JSX.Element | React.ReactNode;
    onClose: () => void;
}
export type MFilterPanelPosition = {
    left?: number;
    top?: number;
    right?: number;
    bottom?: number;
    scrollOverSize?: boolean;
};
export type MFilterPanelProps = {
    single?: string;
    zIndex?: number;
    scrollOverSize?: boolean;
};
export interface IncorrectEntryProps {
    id?: string;
    children?: JSX.Element | React.ReactNode;
}
export interface InputProps extends InputBaseProps {
    id?: string;
    className?: string;
    defaultChecked?: boolean;
    defaultValue?: string | number | ReadonlyArray<string>;
    autoFocus?: boolean;
    checked?: boolean;
    disabled?: boolean;
    height?: number | string;
    max?: number | string;
    maxLength?: number;
    min?: number | string;
    minLength?: number;
    name?: string;
    pattern?: string;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    size?: number;
    src?: string;
    accept?: string;
    step?: number | string;
    style?: React.CSSProperties;
    type?: React.HTMLInputTypeAttribute;
    value?: string | ReadonlyArray<string> | number | null;
    width?: number | string;
    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
    onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface SearchInputProps extends Omit<InputProps, "onChange"> {
    sizeOfSearchIcon?: number;
    colorOfSearchIcon?: string;
    idle?: 250 | 500 | 1000 | 1250 | 2500 | 3000 | 5000;
    onChange?: (value: string) => void;
}
export type MFile = File;
export interface FileInputProps extends Omit<InputProps, "onChange"> {
    className?: string;
    accept?: string;
    multiple?: boolean;
    onChange?: (files: MFile[]) => void;
    onBlur?: () => void;
}
export interface InputFieldProps {
    id?: string;
    className?: string;
    childrenClassName?: string;
    label?: string;
    infoIcon?: JSX.Element | React.ReactNode;
    children: JSX.Element | React.ReactNode;
}
export interface MultiselectProps {
    code?: string;
    sorting?: "asc" | "desc" | "none";
    size?: "sm";
    searchholder?: string;
    selectall?: string;
    emptydata?: string;
    id?: string;
    value: any[];
    name?: string;
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    search?: "startwith" | "anywhere";
    noclean?: boolean;
    accessorValue: string;
    accessorLabel: string;
    data: any[];
    onChange: (value: any[], all: boolean) => void;
    onBlur?: () => void;
}
export interface MUPlayerProps {
    track?: "point" | "time";
    trackSize?: -1 | 5 | 10 | 15 | 25 | 50 | 100;
    points: IMTPoint[];
    stationary?: number;
    onMove?: (params: IMTMoveValue) => void;
    onStartReplay: (points: IMTMovePoint[]) => void;
    panel?: (params: IMTMoveValue) => JSX.Element;
    children: JSX.Element | React.ReactNode;
}
export interface NoteProps {
    className?: string;
    type: "warning" | "success" | "info" | "danger";
    children: JSX.Element | React.ReactNode;
}
export interface INumeralOptions {
    fraction?: number;
    thousandSeperator?: boolean;
}
export interface NumeralValidity {
    gte?: number;
    gt?: number;
    lte?: number;
    lt?: number;
}
export interface NumeralUtil {
    currency: (value: number, code?: string | null, thousandSeperator?: boolean | null, direction?: "ltr" | "rtl") => string;
    format: (value: number, code?: string | null, thousandSeperator?: boolean | null, fraction?: number) => string;
    parseRaw: (value: string, code?: string | null, fraction?: number) => string;
    toNumber: (value: string | number, fraction?: number) => number;
    toFloat: (value: string | number, fraction?: number) => number;
}
export interface ICurrencySlotProps {
    direction?: "ltr" | "ltr";
    value: number;
    code?: string;
    thousandSeperator?: boolean | null;
    fraction?: number;
}
export interface NumeralSlotProps {
    value: number;
    code?: string;
    thousandSeperator?: boolean | null;
    fraction?: number;
}
export interface NumeralInputProps extends NumeralInputBaseProps {
    id?: string;
    className?: string;
    autoFocus?: boolean;
    disabled?: boolean;
    name?: string;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    style?: React.CSSProperties;
    value?: string | ReadonlyArray<string> | number;
    code?: string;
    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
    numeralType?: "natural" | "decimal";
    fraction?: number;
    validity?: NumeralValidity;
    thousandSeperator?: boolean | null;
    showExampleOnfocus?: boolean;
    onChange: (value: string) => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface PageEvent {
    page: number;
    perpage: number;
}
export interface PaginatorProps {
    total?: number;
    page?: number;
    perpage?: number;
    onChange: (state: PageEvent) => void;
}
export interface PasswordInputProps extends InputProps {
    sm?: boolean;
}
export interface PasswordInputProps extends InputProps {
    sm?: boolean;
    dc?: string;
}
export interface PhoneRaw {
    aa2: string;
    code: number;
    nn: string;
    example?: string;
}
export interface PhoneUtil {
    parseRaw: (phone: string, phoneType?: PhoneType) => PhoneRaw | null;
    parseRawByCountryCode: (code: string, phone: string, phoneType?: PhoneType) => PhoneRaw | null;
    pretty: (phone: string, phoneType?: PhoneType) => string;
}
export interface RegionUtil {
    regisons: () => Array<string>;
    regionToBase: (region: string) => string | null;
    baseToRegion: (base: string) => string | null;
    flag: (code: string) => string | null;
    lang: (code: string | string) => {
        region: () => string | null;
        base: () => string | null;
    };
}
export interface PhoneInputProps {
    id?: string;
    cacheKey?: string;
    name?: string;
    placeholder?: string;
    className?: string;
    checked?: boolean;
    disabled?: boolean;
    noPlusPrefix?: boolean;
    regions?: string[];
    phoneType?: PhoneType;
    soft?: boolean;
    size?: "sm";
    value: any;
    onChange: (value: string) => void;
    onClick?: () => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface MPickerProps extends MPickerBaseProps {
    name?: string;
    disabled?: boolean;
    seperator?: string;
    type: "month" | "date" | "datetime" | "time";
    size?: "sm";
    min?: string;
    max?: string;
    value?: string;
    className?: string;
    onChange: (value: string) => void;
    onClick?: () => void;
    onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface ProgressProps extends ProgressBaseProps {
    backgroundColor?: string;
    color: string;
    className?: string;
}
export interface CollapseProps {
    msize: "xs" | "sm" | "md" | "lg" | "xl";
    default?: boolean;
    open?: boolean;
    disableWhenOutside?: boolean;
    disabled?: boolean;
    label?: string | JSX.Element | React.ReactNode;
    style?: React.CSSProperties;
    children?: JSX.Element | React.ReactNode;
    onClick?: () => void;
}
export interface RadioInputProps {
    id?: string;
    name?: string;
    label?: string | JSX.Element | React.ReactNode;
    className?: string;
    classNameLabel?: string;
    checked?: boolean;
    disabled?: boolean;
    size?: "d" | "sm" | "xs";
    nofull?: boolean;
    value: any;
    children?: string | JSX.Element | React.ReactNode;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onClick?: () => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface RateInputProps {
    id?: string;
    range?: number;
    value?: number;
    onClick?: () => void;
    onChange?: (value: number) => void;
    onBlur?: () => void;
}
export interface ReceiptCaptureProps {
    dm?: {
        width?: number;
        height?: number;
    };
    inprogress?: boolean;
    position?: "back" | "front";
    onCapture: (image: any, imageFile: any) => void;
    onCancel: () => void;
}
export interface SelectInputProps {
    code?: string;
    sorting?: "asc" | "desc" | "none";
    size?: "sm";
    searchholder?: string;
    emptydata?: string;
    id?: string;
    value: any;
    circular?: boolean;
    name?: string;
    divider?: boolean;
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    search?: "startwith" | "anywhere";
    noclean?: boolean;
    accessorValue: string;
    accessorLabel: string;
    data: any[];
    render?: (item: any) => React.ReactNode;
    onChange: (value: any) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
}
export interface SortDirectionProps {
    id?: string;
    name: string;
    activeName?: string;
    direction?: "asc" | "desc" | SortingDirections;
    disabled?: boolean;
    className?: string;
    directionClassName?: string;
    children: React.ReactNode;
    onChange?: (event: {
        name: string;
        value: "asc" | "desc" | SortingDirections | any;
    }) => void;
}
export interface SpinnerProps {
    className: string;
}
export interface SwitchInputProps {
    id?: string;
    name?: string;
    disabled?: boolean;
    value?: boolean;
    size?: "d" | "sm" | "xs";
    onChange?: (value: boolean) => void;
    onBlur?: () => void;
}
export interface TextareaInputProps extends TextareaBaseProps {
    id?: string;
    className?: string;
    autoFocus?: boolean;
    disabled?: boolean;
    height?: number | string;
    maxLength?: number;
    minLength?: number;
    name?: string;
    pattern?: string;
    placeholder?: string;
    readOnly?: boolean;
    required?: boolean;
    rows?: number;
    style?: React.CSSProperties;
    value?: string | ReadonlyArray<string> | number;
    onChange?: (value: any) => void;
    onFocus?: () => void;
    onBlur?: () => void;
}
export interface AppipProps {
    iconUrl?: string;
    appName: string;
    description: string;
    descriptionIos: string;
    dontShowAgain: string;
    labelOk: string;
    labelCancel: string;
}
export interface OvViewProps {
    active?: boolean | any;
    size?: number;
    empty?: JSX.Element | React.ReactNode;
    children: JSX.Element | React.ReactNode;
}
export interface MatComponentProps {
    cb: <Props>(props: Props) => JSX.Element;
}
export type GeomertyLatLng = {
    latitude: number;
    longitude: number;
};
export type ValidationMessage = 'passwordMustBeAtLeast8CharactersLong' | 'passwordMustContainAtLeastOneNumber' | 'passwordMustContainAtLeastOneUppercaseLetter' | 'passwordMustContainAtLeastOneLowercaseLetter' | 'passwordMustContainAtLeastOneSpecialCharacter' | 'passwordMustNotContainSpaces' | 'passwordMustNotContainSequentialNumbers' | 'passwordMustNotContainSequentialLetters' | 'passwordMustNotContainCombinationsOfTextNumbersAndSpecialCharacters' | 'passwordMustNotContainPredictableYearLikeValues' | 'passwordMustNotContainDateOrYearPatterns' | "0";
export interface MModalButton {
    className?: string;
    label: string;
    onClick: () => void;
}
export interface MModalProps {
    withoutContainer?: boolean;
    overlayClassName?: string;
    closeOnClickOutside?: boolean;
    closeOnEscape?: boolean;
    single?: string;
    zIndex?: number;
    title?: string;
    description?: string;
    message?: string;
    buttons?: MModalButton[];
    customUI?: (params: {
        onClose: () => void;
    }) => JSX.Element | React.ReactNode;
    onDismissed?: () => void;
}
export interface MAlertButton {
    className?: string;
    label: string;
    onClick: () => void;
}
export interface MAlertProps {
    position?: "top" | "bottom";
    withoutContainer?: boolean;
    single?: string;
    zIndex?: number;
    title?: string;
    description?: string;
    message?: string;
    buttons?: MAlertButton[];
    customUI?: (params: {
        onClose: () => void;
    }) => JSX.Element | React.ReactNode;
    onDismissed?: () => void;
}
export interface MTooltipProps {
    direction: "top" | "right" | "bottom" | "left";
    norw?: boolean;
    noStrMaxWidth?: boolean;
    containerClassName?: string;
    className?: string;
    single?: string;
    title?: string;
    description?: string;
    message?: string | JSX.Element | React.ReactNode;
    children?: JSX.Element | React.ReactNode;
    onActive?: () => void;
    onDeactive?: () => void;
}