@faasjs/ant-design
UI components based on FaasJS, Ant Design and React Router.
Install
npm install @faasjs/ant-design antd react react-dom @faasjs/react react-router-dom
Usage
In @faasjs/ant-design
, we use FaasItemProps
to provide data structures for components.
type FaasItemType =
'string' | 'string[]' |
'number' | 'number[]' |
'boolean' |
'date' | 'time' |
'object' | 'object[]'
type FaasItemProps = {
type: FaasItemTypes
id: string
title?: string
}
Form
Form are based on Ant Design's Form component.
FormItem
Form are based on Ant Design's Form.Item component.
Modules
Namespaces
Classes
Interfaces
- AppProps
- BaseItemProps
- BlankProps
- ConfigProviderProps
- DescriptionItemContentProps
- DescriptionItemProps
- DescriptionProps
- DrawerProps
- ErrorBoundaryProps
- ExtendDescriptionTypeProps
- FaasDataWrapperProps
- FaasItemProps
- FormItemProps
- FormProps
- LinkProps
- ModalProps
- RoutesProps
- TableItemProps
- TitleProps
- UnionFaasItemProps
- useAppProps
Type Aliases
- BaseOption
- ExtendDescriptionItemProps
- ExtendFormItemProps
- ExtendFormTypeProps
- ExtendTableItemProps
- ExtendTableTypeProps
- ExtendTypes
- FaasDataInjection
- FaasItemType
- FaasItemTypeValue
- FormSubmitProps
- LoadingProps
- TableProps
- UnionFaasItemElement
- UnionFaasItemInjection
- UnionFaasItemRender
- UnionScene
- setDrawerProps
- setModalProps
Variables
Functions
- App
- Blank
- ConfigProvider
- Description
- FaasDataWrapper
- Form
- FormItem
- Link
- Loading
- PageNotFound
- Routes
- Table
- Title
- transferOptions
- transferValue
- useApp
- useConfigContext
- useDrawer
- useModal
Type Aliases
BaseOption
Ƭ BaseOption: string
| number
| { label
: string
; value?
: string
| number
}
ExtendDescriptionItemProps
Ƭ ExtendDescriptionItemProps: BaseItemProps
ExtendFormItemProps
Ƭ ExtendFormItemProps: BaseItemProps
& AntdFormItemProps
ExtendFormTypeProps
Ƭ ExtendFormTypeProps<T
>: Object
Type parameters
Name | Type |
---|---|
T | any |
Type declaration
Name | Type |
---|---|
children? | UnionFaasItemElement <T > |
ExtendTableItemProps
Ƭ ExtendTableItemProps<T
>: BaseItemProps
& Omit
<AntdTableColumnProps
<T
>, "children"
>
Type parameters
Name | Type |
---|---|
T | any |
ExtendTableTypeProps
Ƭ ExtendTableTypeProps<T
>: Object
Type parameters
Name | Type |
---|---|
T | any |
Type declaration
Name | Type |
---|---|
children? | JSX.Element |
render? | UnionFaasItemRender <T > |
ExtendTypes
Ƭ ExtendTypes: Object
Index signature
▪ [type: string
]: ExtendFormTypeProps
FaasDataInjection
Ƭ FaasDataInjection<T
>: Partial
<OriginFaasDataInjection
<T
>>
Type parameters
Name | Type |
---|---|
T | any |
FaasItemType
Ƭ FaasItemType: "string"
| "string[]"
| "number"
| "number[]"
| "boolean"
| "date"
| "time"
| "object"
| "object[]"
FaasItemTypeValue
Ƭ FaasItemTypeValue: Object
FaasItemType's value type
Type declaration
Name | Type |
---|---|
boolean | boolean |
date | Dayjs |
number | number |
number[] | number [] |
object | any |
object[] | any [] |
string | string |
string[] | string [] |
time | Dayjs |
FormSubmitProps
Ƭ FormSubmitProps: Object
Type declaration
Name | Type | Description |
---|---|---|
text? | string | Default: Submit |
to? | { action : string ; catch? : (error : any ) => void ; finally? : () => void ; params? : Record <string , any > ; then? : (result : any ) => void } | 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 | - |
to.catch? | (error : any ) => void | - |
to.finally? | () => void | - |
to.params? | Record <string , any > | params will overwrite form values before submit |
to.then? | (result : any ) => void | - |
LoadingProps
Ƭ LoadingProps: Object
Type declaration
Name | Type |
---|---|
children? | React.ReactNode |
loading? | boolean |
size? | "small" | "default" | "large" |
style? | React.CSSProperties |
TableProps
Ƭ TableProps<T
, ExtendTypes
>: { extendTypes?
: { [key: string]
: ExtendTableTypeProps
; } ; faasData?
: FaasDataWrapperProps
<T
> ; items
: (TableItemProps
| ExtendTypes
& ExtendTableItemProps
)[] ; onChange?
: (pagination
: TablePaginationConfig
, filters
: Record
<string
, FilterValue
| null
>, sorter
: SorterResult
<T
> | SorterResult
<T
>[], extra
: TableCurrentDataSource
<T
>) => { extra
: TableCurrentDataSource
<T
> ; filters
: Record
<string
, FilterValue
| null
> ; pagination
: TablePaginationConfig
; sorter
: SorterResult
<T
> | SorterResult
<T
>[] } } & AntdTableProps
<T
>
Type parameters
Name | Type |
---|---|
T | any |
ExtendTypes | any |
UnionFaasItemElement
Ƭ UnionFaasItemElement<Value
, Values
>: ReactElement
<UnionFaasItemInjection
<Value
, Values
>> | null
Type parameters
Name | Type |
---|---|
Value | any |
Values | any |
UnionFaasItemInjection
Ƭ UnionFaasItemInjection<Value
, Values
>: Object
Type parameters
Name | Type |
---|---|
Value | any |
Values | any |
Type declaration
Name | Type |
---|---|
index? | number |
scene? | UnionScene |
value? | Value |
values? | Values |
UnionFaasItemRender
Ƭ UnionFaasItemRender<Value
, Values
>: (value
: Value
, values
: Values
, index
: number
, scene
: UnionScene
) => JSX.Element
| null
Type parameters
Name | Type |
---|---|
Value | any |
Values | any |
Type declaration
▸ (value
, values
, index
, scene
): JSX.Element
| null
Parameters
Name | Type |
---|---|
value | Value |
values | Values |
index | number |
scene | UnionScene |
Returns
JSX.Element
| null
UnionScene
Ƭ UnionScene: "form"
| "description"
| "table"
setDrawerProps
Ƭ setDrawerProps: (changes
: Partial
<DrawerProps
>) => void
Type declaration
▸ (changes
): void
Parameters
Name | Type |
---|---|
changes | Partial <DrawerProps > |
Returns
void
setModalProps
Ƭ setModalProps: (changes
: Partial
<ModalProps
>) => void
Type declaration
▸ (changes
): void
Parameters
Name | Type |
---|---|
changes | Partial <ModalProps > |
Returns
void
Variables
ConfigContext
• Const
ConfigContext: Context
<ConfigProviderProps
>
Functions
App
▸ App(props
): Element
Parameters
Name | Type |
---|---|
props | AppProps |
Returns
Element
Blank
▸ Blank(options?
): JSX.Element
Blank component.
If value is undefined or null, return text, otherwise return value.
Parameters
Name | Type | Description |
---|---|---|
options? | BlankProps | {object} |
Returns
JSX.Element
<Blank value={undefined} text="Empty" />
ConfigProvider
▸ ConfigProvider(«destructured»
): Element
Config for @faasjs/ant-design components.
<ConfigProvider config={{
common: {
blank: 'Empty',
},
}}>
<Blank />
</ConfigProvider>
Parameters
Name | Type |
---|---|
«destructured» | Object |
› children | ReactNode |
› config | ConfigProviderProps |
Returns
Element
Description
▸ Description<T
>(props
): Element
Description component.
Type parameters
Name | Type |
---|---|
T | any |
Parameters
Name | Type |
---|---|
props | DescriptionProps <T , any > |
Returns
Element
FaasDataWrapper
▸ FaasDataWrapper<T
>(props
): JSX.Element
FaasDataWrapper component with Loading
function MyComponent (props: FaasDataInjection) {
return <div>{ props.data }</div>
}
function MyPage () {
return <FaasDataWrapper action="test" params={{ a: 1 }}>
<MyComponent />
</FaasDataWrapper>
}
Type parameters
Name | Type |
---|---|
T | any |
Parameters
Name | Type |
---|---|
props | FaasDataWrapperProps <T > |
Returns
JSX.Element
Form
▸ Form<Values
>(props
): Element
Form component with Ant Design & FaasJS
Ref
https://ant.design/components/form/
Type parameters
Name | Type |
---|---|
Values | any |
Parameters
Name | Type |
---|---|
props | FormProps <Values , any > |
Returns
Element
FormItem
▸ FormItem<T
>(props
): Element
FormItem, can be used without Form.
// use inline type
<FormItem type='string' id='name' />
// use custom type
<FormItem id='password'>
<Input.Password />
</>
Type parameters
Name | Type |
---|---|
T | any |
Parameters
Name | Type |
---|---|
props | FormItemProps <T > |
Returns
Element
Link
▸ Link(props
): Element
Link component with button.
// pure link
<Link href="/">Home</Link>
// link with button
<Link href="/" button={{ type:'primary' }}>Home</Link>
Parameters
Name | Type |
---|---|
props | LinkProps |
Returns
Element
Loading
▸ Loading(props
): Element
Loading component based on Spin
<Loading /> // display loading
<Loading loading={ !remoteData }>
<div>{remoteData}</div>
</Loading>
Parameters
Name | Type |
---|---|
props | LoadingProps |
Returns
Element
PageNotFound
▸ PageNotFound(): Element
Returns
Element
Routes
▸ Routes(props
): Element
Routes with lazy loading and 404 page.
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>
}
Parameters
Name | Type |
---|---|
props | RoutesProps |
Returns
Element
Table
▸ Table<T
, ExtendTypes
>(props
): Element
Table component with Ant Design & FaasJS
Ref
https://ant.design/components/table/
Type parameters
Name | Type |
---|---|
T | extends Record <string , any > |
ExtendTypes | any |
Parameters
Name | Type |
---|---|
props | TableProps <T , ExtendTypes > |
Returns
Element
Title
▸ Title(props
): JSX.Element
Title is used to change the title of the page. Return null by default.
// 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 />
Parameters
Name | Type |
---|---|
props | TitleProps |
Returns
JSX.Element
transferOptions
▸ transferOptions(options
): { label
: string
; value?
: string
| number
}[]
convert options to { label, value }[]
Parameters
Name | Type |
---|---|
options | BaseOption [] |
Returns
{ label
: string
; value?
: string
| number
}[]
transferValue
▸ transferValue(type
, value
): any
Parameters
Name | Type |
---|---|
type | FaasItemType |
value | any |
Returns
any
useApp
▸ useApp(): useAppProps
Returns
useConfigContext
▸ useConfigContext(): ConfigProviderProps
Returns
useDrawer
▸ useDrawer(init?
): Object
Hook style drawer.
Parameters
Name | Type | Description |
---|---|---|
init? | DrawerProps | initial props ts function Example() { const { drawer, setDrawerProps } = useDrawer() return <> <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }> Toggle </Button> {drawer} </> } |
Returns
Object
Name | Type |
---|---|
drawer | Element |
drawerProps | DrawerProps |
setDrawerProps | (changes : Partial <DrawerProps >) => void |
useModal
▸ useModal(init?
): Object
Hook style modal.
Parameters
Name | Type | Description |
---|---|---|
init? | ModalProps | initial props ts function Example() { const { modal, setModalProps } = useModal() return <> <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button> {modal}</> } |
Returns
Object
Name | Type |
---|---|
modal | Element |
modalProps | ModalProps |
setModalProps | (changes : Partial <ModalProps >) => void |