@faasjs/ant-design

License: MITopen in new windowNPM Stable Versionopen in new windowNPM Beta Versionopen in new window

UI components based on FaasJSopen in new window, Ant Designopen in new window and React Routeropen in new window.

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 componentopen in new window.

FormItem

Form are based on Ant Design's Form.Item componentopen in new window.

Modules

Namespaces

Classes

Interfaces

Type Aliases

Variables

Functions

Type Aliases

BaseOption

Ƭ BaseOption: string | number | { label: string ; value?: string | number }


ExtendDescriptionItemProps

Ƭ ExtendDescriptionItemProps: BaseItemProps


ExtendFormItemProps

Ƭ ExtendFormItemProps: BaseItemProps & AntdFormItemProps


ExtendFormTypeProps

Ƭ ExtendFormTypeProps<T>: Object

Type parameters

NameType
Tany

Type declaration

NameType
children?UnionFaasItemElement<T>

ExtendTableItemProps

Ƭ ExtendTableItemProps<T>: BaseItemProps & Omit<AntdTableColumnProps<T>, "children">

Type parameters

NameType
Tany

ExtendTableTypeProps

Ƭ ExtendTableTypeProps<T>: Object

Type parameters

NameType
Tany

Type declaration

NameType
children?JSX.Element
render?UnionFaasItemRender<T>

ExtendTypes

Ƭ ExtendTypes: Object

Index signature

▪ [type: string]: ExtendFormTypeProps


FaasDataInjection

Ƭ FaasDataInjection<T>: Partial<OriginFaasDataInjection<T>>

Type parameters

NameType
Tany

FaasItemType

Ƭ FaasItemType: "string" | "string[]" | "number" | "number[]" | "boolean" | "date" | "time" | "object" | "object[]"


FaasItemTypeValue

Ƭ FaasItemTypeValue: Object

FaasItemType's value type

Type declaration

NameType
booleanboolean
dateDayjs
numbernumber
number[]number[]
objectany
object[]any[]
stringstring
string[]string[]
timeDayjs

FormSubmitProps

Ƭ FormSubmitProps: Object

Type declaration

NameTypeDescription
text?stringDefault: 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.actionstring-
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

NameType
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

NameType
Tany
ExtendTypesany

UnionFaasItemElement

Ƭ UnionFaasItemElement<Value, Values>: ReactElement<UnionFaasItemInjection<Value, Values>> | null

Type parameters

NameType
Valueany
Valuesany

UnionFaasItemInjection

Ƭ UnionFaasItemInjection<Value, Values>: Object

Type parameters

NameType
Valueany
Valuesany

Type declaration

NameType
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

NameType
Valueany
Valuesany

Type declaration

▸ (value, values, index, scene): JSX.Element | null

Parameters
NameType
valueValue
valuesValues
indexnumber
sceneUnionScene
Returns

JSX.Element | null


UnionScene

Ƭ UnionScene: "form" | "description" | "table"


setDrawerProps

Ƭ setDrawerProps: (changes: Partial<DrawerProps>) => void

Type declaration

▸ (changes): void

Parameters
NameType
changesPartial<DrawerProps>
Returns

void


setModalProps

Ƭ setModalProps: (changes: Partial<ModalProps>) => void

Type declaration

▸ (changes): void

Parameters
NameType
changesPartial<ModalProps>
Returns

void

Variables

ConfigContext

Const ConfigContext: Context<ConfigProviderProps>

Functions

App

App(props): Element

Parameters

NameType
propsAppProps

Returns

Element


Blank

Blank(options?): JSX.Element

Blank component.

If value is undefined or null, return text, otherwise return value.

Parameters

NameTypeDescription
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

NameType
«destructured»Object
› childrenReactNode
› configConfigProviderProps

Returns

Element


Description

Description<T>(props): Element

Description component.

Type parameters

NameType
Tany

Parameters

NameType
propsDescriptionProps<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

NameType
Tany

Parameters

NameType
propsFaasDataWrapperProps<T>

Returns

JSX.Element


Form

Form<Values>(props): Element

Form component with Ant Design & FaasJS

Ref

https://ant.design/components/form/

Type parameters

NameType
Valuesany

Parameters

NameType
propsFormProps<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

NameType
Tany

Parameters

NameType
propsFormItemProps<T>

Returns

Element


Link(props): Element

Link component with button.

// pure link
<Link href="/">Home</Link>

// link with button
<Link href="/" button={{ type:'primary' }}>Home</Link>

Parameters

NameType
propsLinkProps

Returns

Element


Loading

Loading(props): Element

Loading component based on Spin

<Loading /> // display loading

<Loading loading={ !remoteData }>
 <div>{remoteData}</div>
</Loading>

Parameters

NameType
propsLoadingProps

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

NameType
propsRoutesProps

Returns

Element


Table

Table<T, ExtendTypes>(props): Element

Table component with Ant Design & FaasJS

Ref

https://ant.design/components/table/

Type parameters

NameType
Textends Record<string, any>
ExtendTypesany

Parameters

NameType
propsTableProps<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

NameType
propsTitleProps

Returns

JSX.Element


transferOptions

transferOptions(options): { label: string ; value?: string | number }[]

convert options to { label, value }[]

Parameters

NameType
optionsBaseOption[]

Returns

{ label: string ; value?: string | number }[]


transferValue

transferValue(type, value): any

Parameters

NameType
typeFaasItemType
valueany

Returns

any


useApp

useApp(): useAppProps

Returns

useAppProps


useConfigContext

useConfigContext(): ConfigProviderProps

Returns

ConfigProviderProps


useDrawer

useDrawer(init?): Object

Hook style drawer.

Parameters

NameTypeDescription
init?DrawerPropsinitial props ts function Example() { const { drawer, setDrawerProps } = useDrawer() return <> <Button onClick={ () => setDrawerProps(prev => ({ open: !prev.open})) }> Toggle </Button> {drawer} </> }

Returns

Object

NameType
drawerElement
drawerPropsDrawerProps
setDrawerProps(changes: Partial<DrawerProps>) => void

useModal

useModal(init?): Object

Hook style modal.

Parameters

NameTypeDescription
init?ModalPropsinitial props ts function Example() { const { modal, setModalProps } = useModal() return <> <Button onClick={() => setModalProps({ open: true })}>Open Modal</Button> {modal}</> }

Returns

Object

NameType
modalElement
modalPropsModalProps
setModalProps(changes: Partial<ModalProps>) => void