@angelineuniverse/design/lib/index.d.ts

Angeline Design UI Library

import React$1, { DetailedHTMLProps, ButtonHTMLAttributes, Component, ReactNode, RefObject, ChangeEvent } from 'react';

type ButtonTheme = "primary" | "error" | "warning" | "success" | "outline" | "outline-primary" | "outline-error" | "outline-warning" | "outline-success" | "transparent";
type ButtonSize = "extrasmall" | "small" | "medium" | "large";
type ButtonWidth = "block" | "full";
interface ModelButton {
    title: string;
    className?: string;
    theme: ButtonTheme;
    size: ButtonSize;
    width: ButtonWidth;
    isLoading?: boolean;
    isDisable?: boolean;
    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
    props?: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
}

declare class Button extends Component<ModelButton> {
    render(): ReactNode;
}

declare class BreadCrumbs extends Component<any> {
    breadcrumb: () => any;
    render(): ReactNode;
}

type CheckboxType$1 = 'default' | 'button';
interface ModelCheckbox {
    classNameLabel?: string;
    classNameDescription?: string;
    label: string;
    description?: string;
    onChange?: (e: any) => void;
    onValueChange?: (e: boolean) => void;
    checked?: boolean;
    defaultchecked?: boolean;
    type?: CheckboxType$1;
}

declare class Checkbox extends Component<ModelCheckbox> {
    render(): React$1.ReactNode;
}

type IconDirection = 'left' | 'right';
interface ModelCollapse {
    hideIcon?: boolean;
    iconDirection?: IconDirection;
    title: string;
    children?: React.ReactNode;
}

declare class Collapse extends Component<ModelCollapse> {
    state: Readonly<{
        open: boolean;
    }>;
    constructor(props: any);
    render(): React$1.JSX.Element;
}

interface ModelDialog {
    children?: React$1.ReactNode;
    onOpen: boolean | React$1.MouseEventHandler<HTMLDivElement>;
    onClose: React$1.MouseEventHandler<HTMLDivElement>;
    className?: string;
    size?: any;
    useHeading?: boolean;
    hideIconClose?: boolean;
    classHeading?: string;
    classTitle?: string;
    title?: string;
    subtitle?: string;
}

declare class Dialog extends Component<ModelDialog> {
    modal: RefObject<HTMLDivElement>;
    constructor(props: ModelDialog);
    render(): ReactNode;
}

type Direction = "bottom-right" | "bottom-left" | "right" | "left";
interface ModelDropdown {
    trigger: React.ReactNode;
    children: React.ReactNode;
    direction?: Direction;
}

declare class Dropdown extends Component<ModelDropdown> {
    state: Readonly<{
        show: boolean;
    }>;
    constructor(props: ModelDropdown);
    render(): ReactNode;
}

type InputSize$2 = "small" | "medium" | "large";
type InputType = "text" | "password" | 'number' | 'textarea' | 'time' | "upload" | "date" | "datetime-local" | "month" | "currency";
interface ModelInput {
    defaultValue?: any;
    label: string;
    hideLabel?: boolean;
    placeholder?: string;
    size?: InputSize$2;
    type: InputType;
    accept?: string;
    filename?: string;
    preview_action?: string;
    preview?: any;
    readonly?: boolean;
    autosize?: boolean;
    className?: string;
    onValueChange?: any;
    isRequired?: boolean;
    isSuccess?: boolean;
    isError?: boolean;
    description?: string | React$1.ReactNode;
    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
}

declare class Input extends Component<ModelInput> {
    state: Readonly<{
        visiblePassword: boolean;
        files: any;
        filename: any;
        showcurrency: any;
        currency: any;
        refInputFile: RefObject<any>;
    }>;
    constructor(props: ModelInput);
    changeVisiblePassword(visible: boolean): "text" | "password";
    changeFile(event: any): void;
    deleteFile(): void;
    previewFile(event: any): void;
    onChange: (e: ChangeEvent<HTMLInputElement>) => number;
    onCurrency: (value: any) => any;
    render(): React$1.ReactNode;
}

type IconsType = "check" | "copy" | "library" | "document" | "transaction" | "whatsapp" | "sosmed" | "rocket" | "money" | "error" | "report" | "eye" | "hideEye" | "sort" | "download" | "chart" | "arrow_down" | "close" | "arrow_left" | "arrow_left_simple" | "arrow_right_simple" | "arrow_down_simple" | "arrow_prev" | "arrow_next" | "arrow_up_light" | "arrow_down_light" | "phone" | "marker" | "mail" | "home_simple" | "menu" | "role" | "database" | "person" | "arrow_down_button" | "arrow_up_button" | "emoji_happy" | "element" | "logout" | "setting" | "loading";
interface ModelIcon {
    icon: IconsType;
    width: number;
    height: number;
    color?: string;
    className?: string;
    onClick?: React.MouseEventHandler<HTMLOrSVGElement>;
}

declare class Icon extends Component<ModelIcon> {
    render(): ReactNode;
}

type NotificationPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
type NotificationTheme = 'success' | 'error' | 'default' | 'warning' | 'info';
interface ModelNotification {
    key?: string;
    position: NotificationPosition;
    theme: NotificationTheme;
    body: React$1.ReactNode;
    title: string;
    duration?: number;
    onClose?: (e: React$1.MouseEventHandler<HTMLOrSVGElement>) => void;
    remove?: () => void;
}

declare class Notification extends Component<ModelNotification> {
    state: Readonly<{
        tema: any;
    }>;
    constructor(props: ModelNotification);
    componentDidMount(): void;
    render(): ReactNode;
}

declare class NotificationManager {
    private containerRef;
    private position;
    constructor();
    show(model: ModelNotification): void;
    destroy(documentId: string): void;
}
declare const notification: NotificationManager;

interface ModelPagination {
    currentPage: number;
    totalPage: number;
    countItem: number;
    totalItem: number;
    className?: string;
    lastPage?: React.MouseEventHandler<HTMLButtonElement>;
    firstPage?: React.MouseEventHandler<HTMLButtonElement>;
    changePage?: (event: number) => void;
}

declare class Pagination extends Component<ModelPagination> {
    state: Readonly<{
        paginate: Array<any>;
    }>;
    constructor(props: any);
    componentDidMount(): void;
    classpaginatePage(index: number, currentPage: number): "border-gray-300" | "bg-primary text-white border-primary-border";
    render(): ReactNode;
}

type InputSize$1 = "small" | "medium" | "large";
interface ModelSelect {
    keys: any;
    value: any;
    label: string;
    size?: InputSize$1;
    placeholder?: string;
    className?: string;
    classNameOption?: string;
    isRequired?: boolean;
    useClear?: boolean;
    readonly?: boolean;
    description?: string | React$1.ReactNode;
    onChange?: (e: any) => void;
    onClear?: (e: any) => void;
    onSelected?: (value: any) => void;
    keyValue: string;
    keyOption: string;
    options: Array<any>;
}

declare class Select extends Component<ModelSelect> {
    state: Readonly<{
        open: boolean;
        value: any;
    }>;
    constructor(props: ModelSelect);
    handleClickOutside: (e: any) => void;
    componentWillReceiveProps(nextProps: Readonly<ModelSelect>): void;
    componentDidMount(): void;
    render(): ReactNode;
}

type InputSize = "small" | "medium" | "large";
interface ModelSelectSearch {
    label: string;
    size?: InputSize;
    value?: any;
    value_label?: any;
    className?: string;
    placeholder?: string;
    isRequired?: boolean;
    readonly?: boolean;
    openChildren?: boolean;
    children?: React$1.ReactNode;
    search_method: (e: any) => void;
}

declare class SelectSearch extends Component<ModelSelectSearch> {
    state: Readonly<{
        open: boolean;
        placeholder: string;
    }>;
    constructor(props: ModelSelectSearch);
    render(): ReactNode;
}

interface ModelForm {
    className?: string;
    classNameLoading?: string;
    form: Array<FormProps> | undefined;
    lengthLoading?: number;
    preview_file?: any;
    children?: any;
    onSelect?: (e: any, key: string) => void;
    select_option?: any;
    search_method?: (e: any) => void;
}
type FormType = "password" | "number" | "text" | "textarea" | "upload" | "time" | "date" | "datetime-local" | "month" | "select" | "select-search" | "checkbox" | "currency";
type CheckboxType = 'default' | 'button';
interface FormProps {
    key?: string;
    type: FormType;
    label: string;
    isRequired: boolean;
    readonly?: boolean;
    description?: string;
    placeholder?: string;
    autosize: boolean;
    list?: ListProps;
    checkboxType?: CheckboxType;
    children_custom?: any;
    className?: string;
    classNameOption?: string;
    [key: string]: any;
    useClear?: boolean;
}
interface ListProps {
    options: Array<any>;
    keyValue: string;
    keyOption: string;
}

declare class Form extends Component<ModelForm> {
    state: Readonly<{
        list: undefined | Array<any>;
        openList: boolean;
        search_value: undefined | string;
    }>;
    constructor(props: any);
    render(): React$1.ReactNode;
}

type TypeSkeleton = "text" | "image" | "avatar" | 'span' | "random" | "input" | "custom";
interface ModelSkeleton {
    type: TypeSkeleton;
    className?: string;
}

declare class Skeleton extends Component<ModelSkeleton> {
    render(): React$1.ReactNode;
}

interface ModelTable {
    className?: string;
    classNameTable?: string;
    useBack?: boolean;
    useCreate: boolean;
    notUseNumberRow?: boolean;
    useHeadline: boolean;
    createTitle?: string;
    title?: string;
    description?: string;
    skeletonRow?: number;
    create?: React.MouseEventHandler<HTMLButtonElement>;
    onBack?: React.MouseEventHandler<HTMLOrSVGElement>;
    loadingCreate?: boolean;
    column: Array<ResponseColumn>;
    property?: Object;
    data?: Array<any>;
    delete?: (e: any) => void;
    add?: (e: any) => void;
    show?: (e: any) => void;
    edit?: (e: any) => void;
    onSort?: (type: string, key: string) => void;
    onEvent?: (e: any, key: string) => void;
    lastPage?: React.MouseEventHandler<HTMLButtonElement>;
    firstPage?: React.MouseEventHandler<HTMLButtonElement>;
    changePage?: (event: number) => void;
    custom?: any;
    extraHeader?: React.ReactNode;
    isCompact?: boolean;
}
type TypeColumn = "listtag" | "string" | "datetime" | "object" | "array" | "currency" | "action" | "date" | 'status' | "custom" | 'action_status' | "date-prefix" | "file" | "date-prefix-custom";
interface ResponseColumn {
    key: string;
    name?: string;
    type: TypeColumn;
    classNameprefix?: string;
    prefix?: string;
    dateFormat?: string;
    child?: Array<ResponseColumn>;
    ability?: any;
    currency?: string;
    localecurrency?: string;
    minimumFractionDigits?: number;
    className?: string;
    classNameRow?: string;
    useSort?: boolean;
    color?: string;
}

declare class Table extends Component<ModelTable> {
    previewFile(event: any): void;
    render(): ReactNode;
}

type TagType = 'code' | 'text';
type TagVariant = 'default' | 'accent' | 'success' | 'done' | 'error';
type TagSize = 'xs' | 'sm' | 'lg';
interface ModelTag {
    type: TagType;
    variant?: TagVariant;
    value: string;
    size?: TagSize;
    className?: string;
}

declare const Tag: React$1.FC<ModelTag>;

interface ModelTabItem {
    label: string;
    value: string | number;
    children?: any;
    onTabSelected?: (e: any) => void;
}

type TabsDirection = 'horizontal' | 'vertical';
type TabsWidth = 'wrap' | 'full';
interface ModelTabs {
    tabDirection: TabsDirection;
    width?: TabsWidth;
    className?: string;
    classNameTab?: string;
    classNameTabTitle?: string;
    valueSelected: string | number;
    children?: Array<React.ReactElement<ModelTabItem>> | React.ReactElement<ModelTabItem>;
}

declare class Tabs extends Component<ModelTabs> {
    state: Readonly<{
        selected: number;
    }>;
    constructor(props: any);
    componentDidMount(): void;
    componentWillUnmount(): void;
    tabs: React$1.ReactElement<ModelTabItem, string | React$1.JSXElementConstructor<any>>[];
    render(): React$1.ReactNode;
}

declare class TabItem extends Component<ModelTabItem> {
    render(): React$1.ReactNode;
}

export { BreadCrumbs as Breadcrumb, Button, Checkbox, Collapse, Dialog, Dropdown, Form, Icon, Input, Notification, notification as NotificationService, Pagination, Select, SelectSearch, Skeleton, Tabs as Tab, TabItem, Table, Tag };