@faasjs/ant-design 0.0.3-development → 0.0.4-beta.1

package/dist/index.d.ts

@@ -0,0 +1,545 @@
+import { FaasDataInjection as FaasDataInjection$1, FaasDataWrapperProps as FaasDataWrapperProps$1, ErrorBoundaryProps } from '@faasjs/react';
+export { ErrorBoundaryProps, faas, useFaas } from '@faasjs/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ConfigProviderProps as ConfigProviderProps$1 } from 'antd/es/config-provider';
+import { StyleProviderProps } from '@ant-design/cssinjs/lib/StyleContext';
+import { MessageInstance } from 'antd/es/message/interface';
+import { NotificationInstance } from 'antd/es/notification/interface';
+import { ModalProps as ModalProps$1, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, InputProps, InputNumberProps, SwitchProps, SelectProps, DatePickerProps, TimePickerProps, FormInstance, DescriptionsProps, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1, FormProps as FormProps$1, ButtonProps, TabsProps as TabsProps$1 } from 'antd';
+export { Drawer, Modal } from 'antd';
+import { BrowserRouterProps, RouteProps } from 'react-router-dom';
+import * as react from 'react';
+import { CSSProperties, ReactNode, ReactElement, LazyExoticComponent, ComponentType } from 'react';
+export { lazy } from 'react';
+import { Dayjs } from 'dayjs';
+import { RuleObject } from 'rc-field-form/lib/interface';
+import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
+import * as antd_es_form_context from 'antd/es/form/context';
+import * as antd_es_form from 'antd/es/form';
+import * as rc_field_form_es_useWatch from 'rc-field-form/es/useWatch';
+import * as antd_es_form_hooks_useFormInstance from 'antd/es/form/hooks/useFormInstance';
+import * as antd_es_form_Form from 'antd/es/form/Form';
+import { Tab } from 'rc-tabs/es/interface';
+
+interface ModalProps extends ModalProps$1 {
+    children?: JSX.Element | JSX.Element[] | string;
+}
+type setModalProps = (changes: Partial<ModalProps>) => void;
+/**
+ * Hook style modal.
+ * @param init initial props
+ *
+ * ```ts
+ * function Example() {
+ *   const { modal, setModalProps } = useModal()
+ *
+ *   return <>
+ *     <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button>
+ *     {modal}</>
+ * }
+ * ```
+ */
+declare function useModal(init?: ModalProps): {
+    modal: react_jsx_runtime.JSX.Element;
+    modalProps: ModalProps;
+    setModalProps(changes: Partial<ModalProps>): void;
+};
+
+interface DrawerProps extends DrawerProps$1 {
+    children?: JSX.Element | JSX.Element[];
+}
+type setDrawerProps = (changes: Partial<DrawerProps>) => void;
+/**
+ * Hook style drawer.
+ *
+ * @param init initial props
+ *
+ * ```ts
+ * function Example() {
+ *   const { drawer, setDrawerProps } = useDrawer()
+ *
+ *   return <>
+ *     <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }>
+ *       Toggle
+ *     </Button>
+ *     {drawer}
+ *   </>
+ * }
+ * ```
+ */
+declare function useDrawer(init?: DrawerProps): {
+    drawer: react_jsx_runtime.JSX.Element;
+    drawerProps: DrawerProps;
+    setDrawerProps(changes: Partial<DrawerProps>): void;
+};
+
+interface AppProps {
+    children: React.ReactNode;
+    styleProviderProps?: StyleProviderProps;
+    configProviderProps?: ConfigProviderProps$1;
+    browserRouterProps?: BrowserRouterProps;
+}
+interface useAppProps {
+    message: MessageInstance;
+    notification: NotificationInstance;
+    setModalProps: (changes: Partial<ModalProps>) => void;
+    setDrawerProps: (changes: Partial<DrawerProps>) => void;
+}
+declare function App(props: AppProps): react_jsx_runtime.JSX.Element;
+declare namespace App {
+    var useApp: typeof useApp;
+}
+declare function useApp(): useAppProps;
+
+interface BlankProps {
+    value?: any;
+    text?: string;
+}
+/**
+ * Blank component.
+ *
+ * If value is undefined or null, return text, otherwise return value.
+ *
+ * @param options {object}
+ * @param options.value {any}
+ * @param options.text {string} Default is 'Empty'
+ * @returns {JSX.Element}
+ *
+ * ```ts
+ * <Blank value={undefined} text="Empty" />
+ * ```
+ */
+declare function Blank(options?: BlankProps): JSX.Element;
+
+interface ConfigProviderProps {
+    lang?: string;
+    common?: {
+        blank?: string;
+        all?: string;
+        submit?: string;
+        pageNotFound?: string;
+        add?: string;
+        delete?: string;
+        required?: string;
+        search?: string;
+        reset?: string;
+    };
+    Blank?: {
+        text?: string;
+    };
+    Form?: {
+        submit?: {
+            text?: string;
+        };
+    };
+    Title?: {
+        /** ' - ' as default */
+        separator?: string;
+        suffix?: string;
+    };
+    Link?: {
+        /** '_blank' as default */
+        target?: string;
+        style?: CSSProperties;
+    };
+}
+declare const ConfigContext: react.Context<ConfigProviderProps>;
+/**
+ * Config for @faasjs/ant-design components.
+ *
+ * ```ts
+ * <ConfigProvider config={{
+ *   common: {
+ *     blank: 'Empty',
+ *   },
+ * }}>
+ *   <Blank />
+ * </ConfigProvider>
+ * ```
+ */
+declare function ConfigProvider({ config, children, }: {
+    config: ConfigProviderProps;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useConfigContext(): ConfigProviderProps;
+
+type ExtendFormTypeProps<T = any> = {
+    children?: UnionFaasItemElement<T>;
+};
+type ExtendTypes = {
+    [type: string]: ExtendFormTypeProps;
+};
+type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
+interface FormItemProps<T = any> extends FaasItemProps, Omit<FormItemProps$1<T>, 'id' | 'children' | 'render'> {
+    input?: InputProps | InputNumberProps | SwitchProps | SelectProps<T> | DatePickerProps | TimePickerProps;
+    maxCount?: number;
+    object?: FormItemProps[];
+    disabled?: boolean;
+    required?: boolean;
+    col?: number;
+    children?: UnionFaasItemElement<T>;
+    formChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    formRender?: UnionFaasItemRender<T>;
+    rules?: RuleObject[];
+    label?: string | false;
+    extendTypes?: ExtendTypes;
+    /** trigger when current item's value changed */
+    onValueChange?: (value: T, values: any, form: FormInstance) => void;
+    /** trigger when any item's value changed */
+    if?: (values: Record<string, any>) => boolean;
+}
+/**
+ * FormItem, can be used without Form.
+ *
+ * ```ts
+ * // use inline type
+ * <FormItem type='string' id='name' />
+ *
+ * // use custom type
+ * <FormItem id='password'>
+ *   <Input.Password />
+ * </>
+ * ```
+ */
+declare function FormItem<T = any>(props: FormItemProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace FormItem {
+    var useStatus: () => {
+        status?: "" | "success" | "error" | "warning" | "validating";
+        errors: react.ReactNode[];
+        warnings: react.ReactNode[];
+    };
+}
+
+type LoadingProps = {
+    style?: React.CSSProperties;
+    size?: 'small' | 'default' | 'large';
+    loading?: boolean;
+    children?: React.ReactNode;
+};
+/**
+ * Loading component based on Spin
+ *
+ * ```tsx
+ * <Loading /> // display loading
+ *
+ * <Loading loading={ !remoteData }>
+ *  <div>{remoteData}</div>
+ * </Loading>
+ * ```
+ */
+declare function Loading(props: LoadingProps): react_jsx_runtime.JSX.Element;
+
+type FaasDataInjection<T = any> = Partial<FaasDataInjection$1<T>>;
+interface FaasDataWrapperProps<T = any> extends FaasDataWrapperProps$1<T> {
+    loadingProps?: LoadingProps;
+    loading?: JSX.Element;
+}
+/**
+ * FaasDataWrapper component with Loading
+ *
+ * ```tsx
+ * function MyComponent (props: FaasDataInjection) {
+ *   return <div>{ props.data }</div>
+ * }
+ *
+ * function MyPage () {
+ *   return <FaasDataWrapper action="test" params={{ a: 1 }}>
+ *     <MyComponent />
+ *   </FaasDataWrapper>
+ * }
+ * ```
+ */
+declare function FaasDataWrapper<T = any>(props: FaasDataWrapperProps<T>): JSX.Element;
+
+interface ExtendDescriptionTypeProps<T = any> {
+    children?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+}
+type ExtendDescriptionItemProps = BaseItemProps;
+interface DescriptionItemProps<T = any> extends FaasItemProps {
+    children?: UnionFaasItemElement<T>;
+    descriptionChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    descriptionRender?: UnionFaasItemRender<T>;
+    if?: (values: Record<string, any>) => boolean;
+    object?: DescriptionItemProps<T>[];
+}
+interface DescriptionProps<T = any, ExtendItemProps = any> extends Omit<DescriptionsProps, 'items'> {
+    renderTitle?(values: T): ReactNode;
+    items: (DescriptionItemProps | ExtendItemProps)[];
+    extendTypes?: {
+        [key: string]: ExtendDescriptionTypeProps;
+    };
+    dataSource?: T;
+    faasData?: FaasDataWrapperProps<T>;
+}
+interface DescriptionItemContentProps<T = any> {
+    item: DescriptionItemProps;
+    value: T;
+    values?: any;
+    extendTypes?: {
+        [key: string]: ExtendDescriptionTypeProps;
+    };
+}
+/**
+ * Description component.
+ */
+declare function Description<T = any>(props: DescriptionProps<T>): react_jsx_runtime.JSX.Element;
+
+interface TableItemProps<T = any> extends FaasItemProps, Omit<TableColumnProps<T>, 'title' | 'children' | 'render'> {
+    optionsType?: 'auto';
+    children?: UnionFaasItemElement<T>;
+    tableChildren?: UnionFaasItemElement<T>;
+    render?: UnionFaasItemRender<T>;
+    tableRender?: UnionFaasItemRender<T>;
+    object?: TableItemProps<T>[];
+}
+type ExtendTableTypeProps<T = any> = {
+    children?: JSX.Element;
+    render?: UnionFaasItemRender<T>;
+};
+type ExtendTableItemProps<T = any> = BaseItemProps & Omit<TableColumnProps<T>, 'children'>;
+type TableProps<T = any, ExtendTypes = any> = {
+    items: (TableItemProps | (ExtendTypes & ExtendTableItemProps))[];
+    extendTypes?: {
+        [key: string]: ExtendTableTypeProps;
+    };
+    faasData?: FaasDataWrapperProps<T>;
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T> | SorterResult<T>[], extra: TableCurrentDataSource<T>) => {
+        pagination: TablePaginationConfig;
+        filters: Record<string, FilterValue | null>;
+        sorter: SorterResult<T> | SorterResult<T>[];
+        extra: TableCurrentDataSource<T>;
+    };
+} & TableProps$1<T>;
+/**
+ * Table component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/table/
+ */
+declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): react_jsx_runtime.JSX.Element;
+
+type FaasItemType = 'string' | 'string[]' | 'number' | 'number[]' | 'boolean' | 'date' | 'time' | 'object' | 'object[]';
+/** FaasItemType's value type */
+type FaasItemTypeValue = {
+    string: string;
+    'string[]': string[];
+    number: number;
+    'number[]': number[];
+    boolean: boolean;
+    date: Dayjs;
+    time: Dayjs;
+    object: any;
+    'object[]': any[];
+};
+type BaseOption = string | number | {
+    label: string;
+    value?: any;
+};
+interface BaseItemProps {
+    id: string;
+    title?: string;
+    options?: BaseOption[];
+}
+interface FaasItemProps extends BaseItemProps {
+    /**
+     * Support string, string[], number, number[], boolean, date, time, object, object[]
+     * @default 'string'
+     */
+    type?: FaasItemType;
+}
+/**
+ * convert options to { label, value }[]
+ */
+declare function transferOptions(options: BaseOption[]): {
+    label: string;
+    value?: string | number;
+}[];
+declare function transferValue(type: FaasItemType, value: any): any;
+type UnionScene = 'form' | 'description' | 'table';
+type UnionFaasItemInjection<Value = any, Values = any> = {
+    scene?: UnionScene;
+    value?: Value;
+    values?: Values;
+    index?: number;
+};
+type UnionFaasItemRender<Value = any, Values = any> = (value: Value, values: Values, index: number, scene: UnionScene) => React.ReactNode;
+type UnionFaasItemElement<Value = any, Values = any> = ReactElement<UnionFaasItemInjection<Value, Values>> | null;
+interface UnionFaasItemProps<Value = any, Values = any> extends FormItemProps, DescriptionItemProps, TableItemProps {
+    children?: UnionFaasItemElement<UnionFaasItemProps<Value, Values>> | null;
+    render?: UnionFaasItemRender;
+    object?: UnionFaasItemProps<Value, Values>[];
+}
+
+declare function ErrorBoundary(props: ErrorBoundaryProps): react_jsx_runtime.JSX.Element;
+
+type FormSubmitProps = {
+    /** Default: Submit */
+    text?: string;
+    /**
+     * Submit to FaasJS server.
+     *
+     * If use onFinish, you should call submit manually.
+     * ```ts
+     * {
+     *   submit: {
+     *     to: {
+     *       action: 'action_name'
+     *     }
+     *   },
+     *   onFinish: (values, submit) => {
+     *     // do something before submit
+     *
+     *     // submit
+     *     await submit({
+     *      ...values,
+     *      extraProps: 'some extra props'
+     *     })
+     *
+     *     // do something after submit
+     *   }
+     * }
+     * ```
+     */
+    to?: {
+        action: string;
+        /** params will overwrite form values before submit */
+        params?: Record<string, any>;
+        then?: (result: any) => void;
+        catch?: (error: any) => void;
+        finally?: () => void;
+    };
+};
+interface FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> extends Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'> {
+    items?: (FormItemProps | ExtendItemProps | JSX.Element)[];
+    /** Default: { text: 'Submit' }, set false to disable it */
+    submit?: false | FormSubmitProps;
+    onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any>;
+    beforeItems?: JSX.Element | JSX.Element[];
+    footer?: JSX.Element | JSX.Element[];
+    extendTypes?: ExtendTypes;
+    children?: ReactNode;
+    initialValues?: Values;
+}
+/**
+ * Form component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/form/
+ */
+declare function Form<Values = any>(props: FormProps<Values>): react_jsx_runtime.JSX.Element;
+declare namespace Form {
+    var useForm: typeof antd_es_form_Form.useForm;
+    var useFormInstance: typeof antd_es_form_hooks_useFormInstance.default;
+    var useWatch: typeof rc_field_form_es_useWatch.default;
+    var Item: typeof FormItem;
+    var List: react.FC<antd_es_form.FormListProps>;
+    var ErrorList: react.FC<antd_es_form.ErrorListProps>;
+    var Provider: react.FC<antd_es_form_context.FormProviderProps>;
+}
+
+interface LinkProps {
+    href: string;
+    target?: '_blank';
+    text?: string | number;
+    children?: ReactNode;
+    style?: CSSProperties;
+    button?: ButtonProps;
+    block?: boolean;
+    /** only use for text without button */
+    copyable?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+/**
+ * Link component with button.
+ *
+ * ```ts
+ * // pure link
+ * <Link href="/">Home</Link>
+ *
+ * // link with button
+ * <Link href="/" button={{ type:'primary' }}>Home</Link>
+ * ```
+ */
+declare function Link(props: LinkProps): react_jsx_runtime.JSX.Element;
+
+declare function PageNotFound(): react_jsx_runtime.JSX.Element;
+interface RoutesProps {
+    routes: (RouteProps & {
+        page?: LazyExoticComponent<ComponentType<any>>;
+    })[];
+    fallback?: JSX.Element;
+    notFound?: JSX.Element;
+}
+/**
+ * Routes with lazy loading and 404 page.
+ *
+ * ```tsx
+ * import { Routes, lazy } from '@faasjs/ant-design'
+ * import { BrowserRouter } from 'react-router-dom'
+ *
+ * export function App () {
+ *   return <BrowserRouter>
+ *     <Routes routes={[
+ *       {
+ *         path: '/',
+ *         page: lazy(() => import('./pages/home'))
+ *       }
+ *     ]} />
+ *   </BrowserRouter>
+ * }
+ * ```
+ */
+declare function Routes(props: RoutesProps): react_jsx_runtime.JSX.Element;
+
+interface TabProps extends Partial<Tab> {
+    id: string;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+interface TabsProps extends Omit<TabsProps$1, 'items'> {
+    /** auto skip null tab */
+    items: (TabProps | null)[];
+}
+/**
+ * Tabs component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/tabs/
+ */
+declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TitleProps {
+    title: string | string[];
+    /** ` - ` as default */
+    separator?: string;
+    suffix?: string;
+    /** return a h1 element */
+    h1?: boolean | {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    /** return a pure text element */
+    plain?: boolean;
+    /** return children */
+    children?: JSX.Element;
+}
+/**
+ * Title is used to change the title of the page.
+ * Return null by default.
+ *
+ * ```ts
+ * // return null
+ * <Title title='hi' /> // => change the document.title to 'hi'
+ * <Title title={['a', 'b']} /> // => change the document.title to 'a - b'
+ *
+ * // return h1
+ * <Title title='hi' h1 /> // => <h1>hi</h1>
+ * <Title title={['a', 'b']} h1 /> // => <h1>a</h1>
+ *
+ * // return children
+ * <Title title='hi'><CustomTitle /></Title> // => <CustomTitle />
+ * ```
+ */
+declare function Title(props: TitleProps): JSX.Element;
+
+export { App, AppProps, BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemContentProps, DescriptionItemProps, DescriptionProps, DrawerProps, ErrorBoundary, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, FormSubmitProps, Link, LinkProps, Loading, LoadingProps, ModalProps, PageNotFound, Routes, RoutesProps, TabProps, Table, TableItemProps, TableProps, Tabs, TabsProps, Title, TitleProps, UnionFaasItemElement, UnionFaasItemInjection, UnionFaasItemProps, UnionFaasItemRender, UnionScene, setDrawerProps, setModalProps, transferOptions, transferValue, useApp, useAppProps, useConfigContext, useDrawer, useModal };