@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

ErrorBoundary

Interfaces

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

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

useAppProps

useConfigContext

▸ useConfigContext(): ConfigProviderProps

Returns

ConfigProviderProps

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`