@faasjs/ant-design 0.0.2-development → 0.0.3-beta.2

package/dist/index.d.ts

@@ -0,0 +1,444 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, LazyExoticComponent, ComponentType } from 'react';
+import { ConfigProviderProps as ConfigProviderProps$1 } from 'antd/es/config-provider';
+import { Dayjs } from 'dayjs';
+import { DescriptionsProps, DrawerProps as DrawerProps$1, FormItemProps as FormItemProps$1, FormInstance, InputProps, InputNumberProps, SwitchProps, DatePickerProps, TimePickerProps, SelectProps, FormProps as FormProps$1, ButtonProps, ModalProps as ModalProps$1, TableColumnProps, TablePaginationConfig, TableProps as TableProps$1 } from 'antd';
+export { Drawer, Modal } from 'antd';
+import { FaasDataWrapperProps } from '@faasjs/react';
+import * as antd_es_form_Form from 'antd/es/form/Form';
+import { RuleObject } from 'rc-field-form/lib/interface';
+import { RouteProps } from 'react-router-dom';
+import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
+
+type BlankProps = {
+    value?: any;
+    text?: string;
+};
+/**
+ * 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;
+
+type ConfigProviderProps = {
+    antd?: ConfigProviderProps$1;
+    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;
+}): JSX.Element;
+declare function useConfigContext(): ConfigProviderProps;
+
+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?: string | number;
+};
+type BaseItemProps = {
+    id: string;
+    title?: string;
+    options?: BaseOption[];
+};
+type FaasItemProps = BaseItemProps & {
+    /**
+     * Support string, string[], number, number[], boolean
+     * @default 'string'
+     */
+    type?: FaasItemType;
+};
+declare function transferOptions(options: BaseOption[]): {
+    label: string;
+    value?: string | number;
+}[];
+declare function transferValue(type: FaasItemType, value: any): any;
+
+type ExtendDescriptionTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any) => ReactNode | JSX.Element;
+};
+type ExtendDescriptionItemProps = BaseItemProps;
+type DescriptionItemProps<T = any> = {
+    children?: JSX.Element;
+    render?: (value: T, values: any) => ReactNode | JSX.Element;
+    if?: (values: Record<string, any>) => boolean;
+} & FaasItemProps & {
+    object?: DescriptionItemProps[];
+};
+type DescriptionProps<T = any, ExtendItemProps = any> = {
+    renderTitle?: ((values: T) => ReactNode | JSX.Element);
+    items: (DescriptionItemProps | ExtendItemProps)[];
+    extendTypes?: {
+        [key: string]: ExtendDescriptionTypeProps;
+    };
+    dataSource?: T;
+    faasData?: FaasDataWrapperProps<T>;
+} & DescriptionsProps;
+declare function Description<T = any>(props: DescriptionProps<T>): JSX.Element;
+
+type DrawerProps = 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: JSX.Element;
+    drawerProps: DrawerProps;
+    setDrawerProps(changes: Partial<DrawerProps>): void;
+};
+
+type StringProps = {
+    type?: 'string';
+    input?: InputProps;
+};
+type StringListProps = {
+    type: 'string[]';
+    input?: InputProps;
+    maxCount?: number;
+};
+type NumberProps = {
+    type: 'number';
+    input?: InputNumberProps;
+};
+type NumberListProps = {
+    type: 'number[]';
+    input?: InputNumberProps;
+    maxCount?: number;
+};
+type BooleanProps = {
+    type: 'boolean';
+    input?: SwitchProps;
+};
+type DateProps = {
+    type: 'date';
+    input?: DatePickerProps;
+};
+type TimeProps = {
+    type: 'time';
+    input?: TimePickerProps;
+};
+type ObjectProps = {
+    type: 'object';
+    object: FormItemProps[];
+};
+type ObjectListProps = {
+    type: 'object[]';
+    object: (FormItemProps & {
+        /** default is 6 */
+        col?: number;
+    })[];
+    maxCount?: number;
+};
+type OptionsProps = {
+    options?: BaseOption[];
+    type?: 'string' | 'string[]' | 'number' | 'number[]';
+    input?: SelectProps<any>;
+};
+type FormItemInputProps = (StringProps | StringListProps | NumberProps | NumberListProps | BooleanProps | OptionsProps | DateProps | TimeProps | ObjectProps | ObjectListProps) & {
+    disabled?: boolean;
+    required?: boolean;
+};
+type ExtendFormTypeProps = {
+    children?: ReactNode;
+};
+type ExtendTypes = {
+    [type: string]: ExtendFormTypeProps;
+};
+type ExtendFormItemProps = BaseItemProps & FormItemProps$1;
+type FormItemProps<T = any> = {
+    children?: ReactNode;
+    render?: (value?: T) => ReactNode | JSX.Element;
+    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;
+} & FormItemInputProps & FaasItemProps & Omit<FormItemProps$1<T>, 'children'>;
+/**
+ * FormItem, can be used without Form.
+ *
+ * ```ts
+ * // use inline type
+ * <FormItem item={{ type: 'string', id: 'name' }} />
+ *
+ * // use custom type
+ * <FormItem item={{ id: 'password' }}>
+ *   <Input.Password />
+ * </>
+ * ```
+ */
+declare function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
+
+type FormProps<Values extends Record<string, any> = any, ExtendItemProps = any> = {
+    items?: (FormItemProps | ExtendItemProps)[];
+    /** Default: { text: 'Submit' }, set false to disable it */
+    submit?: false | {
+        /** 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>;
+        };
+    };
+    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;
+} & Omit<FormProps$1<Values>, 'onFinish' | 'children' | 'initialValues'>;
+/**
+ * Form component with Ant Design & FaasJS
+ *
+ * @ref https://ant.design/components/form/
+ */
+declare function Form<Values = any>(props: FormProps<Values>): JSX.Element;
+declare namespace Form {
+    var useForm: typeof antd_es_form_Form.useForm;
+}
+
+type LinkProps = {
+    href: string;
+    target?: string;
+    text?: string | number;
+    children?: ReactNode;
+    style?: CSSProperties;
+    button?: ButtonProps;
+};
+/**
+ * ```ts
+ * // pure link
+ * <Link href="/">Home</Link>
+ *
+ * // link with button
+ * <Link href="/" button={{type:'primary'}}>Home</Link>
+ * ```
+ */
+declare function Link({ href, target, text, children, style, button, }: LinkProps): JSX.Element;
+
+type ModalProps = 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: JSX.Element;
+    modalProps: ModalProps;
+    setModalProps(changes: Partial<ModalProps>): void;
+};
+
+declare function PageNotFound(): JSX.Element;
+type RoutesProps = {
+    routes: (RouteProps & {
+        page?: LazyExoticComponent<ComponentType<any>>;
+    })[];
+    fallback?: JSX.Element;
+    notFound?: JSX.Element;
+};
+/**
+ * Routes with lazy loading and 404 page.
+ *
+ * ```tsx
+ * import { lazy } from 'react'
+ * 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): JSX.Element;
+
+type TableItemProps<T = any> = {
+    optionsType?: 'auto';
+    /** @deprecated use render */
+    children?: JSX.Element | null;
+    object?: TableItemProps[];
+} & FaasItemProps & Omit<TableColumnProps<T>, 'children'>;
+type ExtendTableTypeProps = {
+    children?: JSX.Element | null;
+    render?: (value: any, values: any, index: number) => JSX.Element | string | number | boolean | null;
+};
+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 = any, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): JSX.Element;
+
+type 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 { BaseItemProps, BaseOption, Blank, BlankProps, ConfigContext, ConfigProvider, ConfigProviderProps, Description, DescriptionItemProps, DescriptionProps, DrawerProps, ExtendDescriptionItemProps, ExtendDescriptionTypeProps, ExtendFormItemProps, ExtendFormTypeProps, ExtendTableItemProps, ExtendTableTypeProps, ExtendTypes, FaasItemProps, FaasItemType, FaasItemTypeValue, Form, FormItem, FormItemProps, FormProps, Link, LinkProps, ModalProps, PageNotFound, Routes, RoutesProps, Table, TableItemProps, TableProps, Title, TitleProps, setDrawerProps, setModalProps, transferOptions, transferValue, useConfigContext, useDrawer, useModal };