@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

• App
• Form
• FormItem

Classes

• ErrorBoundary

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

• ConfigContext

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

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