aio-input/index.d.ts

generate all input types in react j

import React, { type FC, type ReactNode } from 'react';
import { type I_dateObject } from 'aio-date';
import { type I_Range } from 'aio-range';
import './index.css';
declare const AIOInput: (p: I_AIOInput) => import("react/jsx-runtime").JSX.Element;
export default AIOInput;
export type I_AIOInput = AI_isRange & AI_isTree & AI_isDate & {
    after?: ReactNode;
    before?: ReactNode;
    attrs?: any;
    className?: string;
    style?: any;
    disabled?: boolean;
    rtl?: boolean;
    imageAttrs?: any;
    justify?: boolean;
    value?: any;
    onChange?: (newValue: any, p?: any) => Promise<any> | any;
    deSelect?: boolean;
    onSubmit?: (newValue: any, p?: any) => Promise<any> | any;
    placeholder?: ReactNode;
    text?: ReactNode;
    subtext?: ReactNode;
    type: AI_type;
    validations?: (any[]) | ((v: any) => string | undefined);
    checkIcon?: ReactNode[];
    listOptions?: {
        decay?: number;
        stop?: number;
        count?: number;
        move?: any;
        editable?: boolean;
    };
    onClick?: (e: Event) => void;
    showPassword?: boolean;
    preview?: boolean;
    tagSearch?: string;
    hideTags?: boolean;
    isSuggestion?: boolean;
    fetchSuggestions?: (search: string) => Promise<any[]>;
    maskPattern?: {
        type: 'text' | 'number' | 'select';
        length?: number;
        options?: 'fa-plate' | string[];
        html?: ReactNode;
        flex?: number;
        def?: string;
        after?: ReactNode;
        placeholder?: string;
        disabled?: boolean;
        attrs?: any;
        style?: any;
        className?: string;
    }[];
    optionsPlaceholder?: ReactNode;
    switchOptions?: {
        textOn?: ReactNode;
        textOff?: ReactNode;
        textButton?: ReactNode;
        size?: number;
        groove?: boolean;
        width?: number;
        attrs?: any;
        buttonAttrs?: any;
    };
    caret?: boolean | ReactNode;
    popover?: {
        portal?: boolean;
        body?: ReactNode;
        fitHorizontal?: boolean;
        backdropAttrs?: any;
        modalAttrs?: any;
        headerAttrs?: any;
        bodyAttrs?: any;
        footerAttrs?: any;
        footer?: any;
        position?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'fullscreen';
        limitTo?: string;
        header?: {
            html?: ((p: {
                removeModal: () => void;
                state: any;
                setState: any;
            }) => ReactNode);
            title?: string;
            subtitle?: string;
            before?: ReactNode;
            after?: ReactNode;
            onClose?: boolean | ((p: {
                state: any;
                setState: (state: any) => void;
            }) => void);
        };
    };
    open?: boolean;
    blurChange?: boolean;
    filter?: string[];
    inputAttrs?: any;
    swip?: number;
    spin?: boolean;
    autoHighlight?: boolean;
    delay?: number;
    voice?: 'en' | 'fa';
    multiple?: boolean;
    maxLength?: number;
    onSwap?: true | ((newOptions: any[], fromIndex: number, toIndex: number) => void);
    optionsAttrs?: any;
    option?: AI_optionProp;
    options?: any[];
    search?: string;
    debugKey?: string;
};
export type AI_props<T extends keyof I_AIOInput> = NonNullable<I_AIOInput[T]>;
export type AI_optionProp = {
    [key in keyof AI_optionDetail]?: (optionOrg: any, optionDetail: AI_optionDetail) => any;
};
export type AI_optionDetails = {
    list: AI_optionDetail[];
    dic: {
        [key: string]: AI_optionDetail;
    };
};
export type AI_type = 'text' | 'number' | 'textarea' | 'password' | 'select' | 'tree' | 'spinner' | 'slider' | 'toggleButton' | 'textlist' | 'button' | 'date' | 'color' | 'radio' | 'tabs' | 'list' | 'image' | 'file' | 'checkbox' | 'time' | 'buttons' | 'panels' | 'mask' | 'custom';
export type AI_date_trans = 'Today' | 'Clear' | 'Today' | 'This Month' | 'Select Year';
type AI_types = {
    isMultiple: boolean;
    isInput: boolean;
    hasOption: boolean;
    ai_height: boolean;
    hasTags: boolean;
    hasKeyboard: boolean;
};
export type AI_Popover_props = {
    getRootProps: () => I_AIOInput;
    id: string;
    toggle: (popover: any) => void;
    types: AI_types;
};
type AI_isDate = Omit<I_Calendar, 'type' | 'onChange' | 'value'>;
type AI_isRange = Omit<I_Range, 'type' | 'onChange'>;
type AI_isTree = Omit<AI_Tree, 'onChange' | 'type' | 'value'>;
export type AI<AI_type, T> = Omit<I_AIOInput, 'onChange' | 'type'> & {
    onChange?: AI_onChange<AI_type, T>;
};
type AI_onChange<AI_type, T> = AI_type extends 'toggleButton' ? (v: any) => void : AI_type extends 'textlist' ? (v: string[]) => void : AI_type extends 'text' ? (v: string, option?: any) => void : AI_type extends 'number' ? (v: number | undefined) => void : AI_type extends 'textarea' ? (v: string) => void : AI_type extends 'mask' ? (value: string[]) => void : AI_type extends 'password' ? (v: string) => void : AI_type extends 'color' ? (v: string) => void : AI_type extends 'select' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'radio' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'tabs' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'buttons' ? (v: T, optionDetail: AI_optionDetail) => void : AI_type extends 'tags' ? (v: T[]) => void : AI_type extends 'tree' ? (v: T[]) => void : AI_type extends 'image' ? (url: any, file: any) => void : AI_type extends 'file' ? (newFile: File | undefined) => void : AI_type extends 'checkbox' ? (v: boolean) => void : AI_type extends 'date' ? (newDate: T, dateDetail: AI_dateDetail) => void : AI_type extends 'time' ? (time: T, dateDetail: AI_dateDetail) => void : AI_type extends 'slider' ? (newValue: number) => void : AI_type extends 'spinner' ? (newValue: number) => void : AI_type extends 'panels' ? (newValue: T) => void : AI_type extends 'list' ? (v: T, optionDetail: AI_optionDetail) => void : never;
export declare const AIMask: FC<AI<'mask', any>>;
export declare const AITextList: FC<AI<'textlist', any>>;
export declare const AIText: FC<AI<'text', any>>;
export declare const AINumber: FC<AI<'number', any>>;
export declare const AITextarea: FC<AI<'textarea', any>>;
export declare const AIPassword: FC<AI<'password', any>>;
export declare const AIColor: FC<AI<'color', any>>;
export declare const AIToggleButton: FC<AI<'toggleButton', any>>;
export declare const AISelect: FC<AI<'select', any>>;
export declare const AIRadio: FC<AI<'radio', any>>;
export declare const AITabs: FC<AI<'tabs', any>>;
export declare const AIButtons: FC<AI<'buttons', any>>;
export declare const AITree: FC<AI<'tree', any>>;
export declare const AIImage: FC<AI<'image', any>>;
export declare const AIFile: FC<AI<'file', any>>;
export declare const AICheckbox: FC<AI<'checkbox', boolean>>;
export declare const AIDate: FC<AI<'date', any>>;
export declare const AITime: FC<AI<'time', any>>;
export declare const AIPanels: FC<AI<'panels', any>>;
export declare const AIList: FC<AI<'list', any>>;
export declare const AISlider: FC<AI<'slider', number>>;
export declare const AISpinner: FC<AI<'spinner', number>>;
export declare const CheckIcon: FC<{
    checkIcon?: ReactNode[];
    checked?: boolean;
    round?: boolean;
}>;
export type I_formInput = I_AIOInput & {
    field: string;
    customType?: string;
    tag?: string;
    required?: boolean;
    validation?: string[];
    label?: string;
    labelType?: 'inline' | 'online';
    labelAttrs?: any;
};
export type I_formInputs = {
    [key: string]: I_formInput;
};
type I_wizardStep<T> = {
    id: string;
    show?: (data: T) => boolean;
    next?: () => Promise<boolean>;
    prev?: () => Promise<boolean>;
    nextText?: string;
    prevText?: string;
    disabled?: boolean;
};
export type I_useFormProps<T> = {
    inputs: I_formInputs;
    customTypes?: {
        [key: string]: (input: I_formInput & {
            value: any;
            onChange: (v: any) => void;
        }) => ReactNode;
    };
    data: T;
    fa?: boolean;
    debug?: boolean;
    showErrors?: boolean;
    rtl?: boolean;
    fetchError?: {
        [field: string]: (value: any) => Promise<string | void>;
    };
    wizard?: {
        steps: I_wizardStep<T>[];
    };
    onChange: (data: T, p: {
        field: string;
        value: any;
    }) => void;
    onSubmit?: () => Promise<boolean | undefined | void>;
    submitText?: ((data: T) => ReactNode) | ReactNode;
    onClose?: () => void;
    closeText?: ((data: T) => ReactNode) | ReactNode;
    option?: {
        [key in keyof I_formInput]?: (p: {
            inputName: string;
            data: T;
            input: I_formInput;
        }) => any;
    };
    validations?: {
        [name: string]: (p: {
            data: T;
            inputName: string;
            value: any;
        }) => string | void;
    };
};
type I_formTag = 'fieldset' | 'section' | 'div' | 'p' | 'form';
export type I_formNode<T> = {
    debugId?: string;
    wizardId?: string;
    footer?: ReactNode;
    header?: ReactNode;
    panel?: ReactNode;
    panelAttrs?: any;
    name?: string;
    v?: I_formNode<T>[];
    h?: I_formNode<T>[];
    html?: ReactNode;
    input?: string;
    extendInput?: Partial<I_formInput>;
    attrs?: any;
    className?: string;
    style?: any;
    show?: boolean;
    customType?: string;
    deps?: string;
    flex?: number;
    scroll?: boolean;
    tag?: I_formTag;
    legend?: ReactNode;
    id?: string;
    isStatic?: boolean;
    align?: 'v' | 'h' | 'vh' | 'hv';
    hide_xs?: boolean;
    hide_sm?: boolean;
    hide_md?: boolean;
    hide_lg?: boolean;
    show_xs?: boolean;
    show_sm?: boolean;
    show_md?: boolean;
    show_lg?: boolean;
};
export declare const useForm: <T extends Record<string, any>>(p: I_useFormProps<T>) => {
    render: {
        input: (inputName: string, p?: {
            attrs?: any;
            nodeName?: string;
        }) => import("react/jsx-runtime").JSX.Element;
        footer: () => import("react/jsx-runtime").JSX.Element;
        submitButton: () => import("react/jsx-runtime").JSX.Element;
        wizardStepButtons: () => import("react/jsx-runtime").JSX.Element;
        layout: (node: I_formNode<T>) => import("react/jsx-runtime").JSX.Element;
        tags: (node: I_formNode<T>, disabled?: boolean) => import("react/jsx-runtime").JSX.Element;
        disabled: boolean;
    };
    errorsDic: I_formErrorsDic;
    errorsList: string[];
    getChanges: () => any[];
    data: T;
    disabled: boolean;
};
type I_formError = {
    text: string;
    wizardId: string;
};
type I_formErrorsDic = {
    [inputName: string]: I_formError | undefined;
};
export declare const AIInputNode: FC<{
    input: I_formInput;
    attrs?: any;
    wizardId: string;
    show: boolean;
    inputName: string;
    debugId?: string;
}>;
export declare const AIFormInput: FC<{
    label?: string;
    labelType?: 'inline' | 'online';
    labelAttrs?: any;
    showErrors?: boolean;
    attrs?: any;
    id?: string;
    className?: string;
    style?: any;
    before?: ReactNode;
    after?: ReactNode;
    footer?: ReactNode;
    subtext?: string;
    error?: string;
    validation?: string[];
    required?: boolean;
    input: ReactNode;
    value?: any;
    fa?: boolean;
    debugId?: string;
}>;
export declare const Panels: FC;
type I_joystick = {
    angleDir?: 'clock' | 'clockwise';
    scale?: number;
    size: number;
    buttonSize: number;
    angleStep?: number;
    step?: number;
    arrow?: {
        count: number;
        color: string;
    };
    onChange: (v: {
        percent: number;
        angle: number;
        x: number;
        y: number;
    }) => void;
    onEnd?: () => void;
    centerOriented?: boolean;
    value: {
        x?: number;
        y?: number;
        percent?: number;
        angle?: number;
    };
};
export declare const JoyStick: FC<I_joystick>;
type I_ScannerButton = {
    fa?: boolean;
    reset?: boolean;
    close?: boolean;
    fps?: number;
    onScan: (v: any) => Promise<boolean | string>;
    value?: any;
    attrs?: any;
    text?: ReactNode;
};
export declare const ScannerButton: FC<I_ScannerButton>;
type I_treeRowDetails = {
    level: number;
    index: number;
    isLastChild: boolean;
    isFirstChild: boolean;
    parentDetails?: I_treeRowDetails;
    value: any;
    row: any;
    option: AI_optionDetail;
};
export type AI_Tree = {
    value: any[];
    indent?: number;
    onToggle?: (openDic: {
        [id: string]: boolean;
    }) => void;
    setChilds?: (rowDetails: I_treeRowDetails, childs: undefined | any[]) => void;
    onChange?: (v: any) => void;
    option?: AI_optionProp;
    attrs?: any;
    className?: string;
    autoHeight?: boolean;
    rtl?: boolean;
    style?: any;
};
export type AI_Image = {
    placeholder?: ReactNode;
    deSelect?: boolean;
    disabled?: boolean;
    rtl?: boolean;
    value?: any;
    multiple?: boolean;
    preview?: boolean;
    inputAttrs?: any;
    imageAttrs?: any;
    attrs?: any;
    style?: any;
    className?: string;
    onChange?: (urls: any, files: any) => void;
};
type AI_dateDetail = {
    dateObject: I_dateObject;
    dateString: string;
    dateString2Digit: string;
    dateArray: number[];
    dateNumber: number;
    isoDate: string;
    dateStrings: string[];
    monthString: string;
    weekDay: string;
    weekDayIndex: number;
    months: string[];
    weekDays: string[];
    value: any;
};
export type I_Calendar = {
    onChange?: (value: any, dateDetails: any) => void;
    onSubmit?: (value: any, dateDetails: any) => void;
    multiple?: boolean;
    value: any;
    type: 'date' | 'time';
    jalali?: boolean;
    maxLength?: number;
    calendarClose?: boolean;
    onClose?: () => void;
    calendarMode?: boolean;
    dateUnit?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'milisecond';
    disabled?: boolean;
    size?: number;
    theme?: string[];
    translate?: (test: string) => string;
    text?: ReactNode;
    pattern?: string;
    dateType?: 'dateNumber' | 'dateString' | 'dateArray' | 'isoDate' | 'dateString2Digit' | 'dateObject';
    dateAttrs?: (p: {
        dateArray: number[];
        isToday: boolean;
        isActive: boolean;
        isFuture: boolean;
        weekDay: number;
    }) => any;
    deSelect?: boolean;
    now?: boolean;
    timeUnit?: I_timeUnit;
    timeStep?: I_timeStep;
};
export type I_timeUnit = {
    [key in ('year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'milisecond')]?: boolean;
};
type I_timeStep = {
    year?: number;
    month?: number;
    day?: number;
    hour?: number;
    minute?: number;
    second?: number;
    milisecond?: number;
};
export type I_MonthCalendar = {
    date: number[];
    onClick?: (date: number[]) => void;
    dateAttrs?: (date: number[]) => any;
};
export declare const MonthCalendar: FC<I_MonthCalendar>;
export type I_list_temp = {
    dom: any;
    activeIndex: number;
    interval: any;
    moved: boolean;
    lastY: number;
    deltaY: number;
    so: {
        y: number;
        top: number;
        newTop?: number;
        limit: {
            top: number;
            bottom: number;
        };
    };
};
export type AI_optionDetail = {
    value: any;
    optionOrg: any;
    rootProps: I_AIOInput;
    index: number;
    isFirstChild: boolean;
    isLastChild: boolean;
    show: any;
    checked?: boolean;
    checkIcon: ReactNode[];
    text: ReactNode;
    subtext: ReactNode;
    after: ReactNode;
    before: ReactNode;
    justify: boolean;
    disabled: boolean;
    attrs: any;
    className: string;
    style: any;
    toggleIcon: false | {
        close?: ReactNode;
        open?: ReactNode;
        leaf?: ReactNode;
    };
    isOpen: () => boolean;
    toggle: () => void;
    change: (newRow: any) => void;
    level: number;
    tagAttrs: any;
    tagBefore: any;
    tagAfter: any;
    tagText: any;
    tagSubtext: any;
    onClick?: (optionOrg: any, optionDetail: AI_optionDetail) => void;
    close?: boolean;
    active: boolean;
    childs?: any[];
    body: ReactNode;
    parentOptions: AI_optionDetail[];
};
export declare const Signature: React.FC<{
    attrs?: React.HTMLAttributes<HTMLCanvasElement>;
    size?: number;
    fa?: boolean;
    onSubmit?: (p: {
        file: any;
        base64: string | ArrayBuffer | null;
    }) => void;
}>;
export declare const Pattern: FC<{
    size?: number;
    count?: number;
    onSubmit: (v: string) => void;
    pointColor?: string;
    lineColor?: string;
    backgroundColor?: string;
}>;
type I_CardsLayout_option<T> = {
    before?: (item: T, index: number) => ReactNode;
    after?: (item: T, index: number) => ReactNode;
    subtext?: (item: T, index: number) => ReactNode;
    text?: (item: T, index: number) => ReactNode;
    onClick?: (item: T, index: number) => void;
    actions?: (item: T, index: number) => {
        text: ReactNode;
        before?: ReactNode;
        onClick?: () => void;
    }[];
    html?: (item: T, index: number) => ReactNode;
};
type I_CardsLayout<T> = {
    attrs?: any;
    header?: ReactNode;
    headerAttrs?: any;
    bodyAttrs?: any;
    footer?: ReactNode;
    footerAttrs?: any;
    items: T[];
    option: I_CardsLayout_option<T>;
};
export declare const Cards: <T>({ header, items, footer, headerAttrs, footerAttrs, bodyAttrs, attrs, option }: I_CardsLayout<T>) => import("react/jsx-runtime").JSX.Element;
export declare const Card: <T>({ option, item, index }: {
    option: I_CardsLayout_option<T>;
    item: any;
    index: number;
}) => any;
export declare const TextList: FC;
export declare const Scanner: FC<{
    onScan: (text: string) => Promise<boolean | string>;
    onClose?: () => void;
    fps?: number;
    style?: any;
}>;
export declare const Timeline: FC<{
    date: number[];
    onChange: (newDate: number[]) => void;
}>;
export declare const IRPlate: FC<{
    value: string[];
    attrs?: any;
}>;