@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 and Ant Designopen in new window.

Install

npm install @faasjs/ant-design

Usage

In @faasjs/ant-design, we use FaasItemProps to provide data structures for components.

type FaasItemType =
  'string' | 'string[]' |
  'number' | 'number[]' |
  'boolean'

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

Type aliases

Variables

Functions

Type aliases

BaseItemProps

Ƭ BaseItemProps: Object

Type declaration

NameType
idstring
options?BaseOption[]
title?string

BaseOption

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


BlankProps

Ƭ BlankProps: Object

Type declaration

NameType
text?string
value?any

CalendarProps

Ƭ CalendarProps: AntdProps<Dayjs>


DatePickerProps

Ƭ DatePickerProps: PickerDateProps<Dayjs>


DescriptionItemProps

Ƭ DescriptionItemProps<T>: { children?: JSX.Element ; render?: (value: T, values: any) => string | number | boolean | Element } & FaasItemProps

Type parameters

NameType
Tany

DescriptionProps

Ƭ DescriptionProps<T, ExtendItemProps>: { dataSource?: T ; extendTypes?: { [key: string]: ExtendDescriptionTypeProps; } ; faasData?: FaasDataWrapperProps<T> ; items: (DescriptionItemProps | ExtendItemProps)[] } & DescriptionsProps

Type parameters

NameType
Tany
ExtendItemPropsany

DrawerProps

Ƭ DrawerProps: AntdDrawerProps & { children?: JSX.Element | JSX.Element[] }


ExtendDescriptionItemProps

Ƭ ExtendDescriptionItemProps: BaseItemProps


ExtendDescriptionTypeProps

Ƭ ExtendDescriptionTypeProps: Object

Type declaration

NameType
children?JSX.Element | null
render?(value: any, values: any) => string | number | boolean | Element

ExtendFormItemProps

Ƭ ExtendFormItemProps: BaseItemProps & AntdFormItemProps


ExtendFormTypeProps

Ƭ ExtendFormTypeProps: Object

Type declaration

NameType
children?JSX.Element | null

ExtendTableItemProps

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

Type parameters

NameType
Tany

ExtendTableTypeProps

Ƭ ExtendTableTypeProps: Object

Type declaration

NameType
children?JSX.Element | null
render?(value: any, values: any, index: number) => string | number | boolean | Element

FaasItemProps

Ƭ FaasItemProps: BaseItemProps & { type?: FaasItemType }


FaasItemType

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


FaasItemTypeValue

Ƭ FaasItemTypeValue: Object

Type declaration

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

FaasState

Ƭ FaasState: Object

Type declaration

NameType
Blank{ text: string }
Blank.textstring
Form{ submit: { text: string } }
Form.submit{ text: string }
Form.submit.textstring
Title{ separator: string ; suffix: string }
Title.separatorstring
Title.suffixstring
common{ add: string ; all: string ; blank: string ; delete: string ; pageNotFound: string ; required: string ; submit: string }
common.addstring
common.allstring
common.blankstring
common.deletestring
common.pageNotFoundstring
common.requiredstring
common.submitstring
langstring

FormItemProps

Ƭ FormItemProps<T>: { children?: JSX.Element | null ; extendTypes?: { [type: string]: ExtendFormTypeProps; } ; label?: string | false ; rules?: RuleObject[] ; render?: () => Element } & FormItemInputProps & FaasItemProps & Omit<AntdFormItemProps<T>, "children">

Type parameters

NameType
Tany

FormProps

Ƭ FormProps<Values, ExtendItemProps>: { beforeItems?: JSX.Element | JSX.Element[] ; children?: ReactNode ; extendTypes?: { [type: string]: ExtendFormTypeProps; } ; footer?: JSX.Element | JSX.Element[] ; items?: (FormItemProps | ExtendItemProps)[] ; submit?: false | { text?: string ; to?: { action: string ; params?: Record<string, any> } } ; onFinish?: (values: Values, submit?: (values: any) => Promise<any>) => Promise<any> } & Omit<AntdFormProps<Values>, "onFinish" | "children">

Type parameters

NameType
Valuesany
ExtendItemPropsany

ModalProps

Ƭ ModalProps: AntdModalProps & { children?: JSX.Element | JSX.Element[] | string }


RoutesProps

Ƭ RoutesProps: Object

Type declaration

NameType
fallback?JSX.Element
notFound?JSX.Element
routesRouteProps & { page?: LazyExoticComponent<ComponentType<any>> }[]

TableItemProps

Ƭ TableItemProps<T>: { children?: JSX.Element | null } & FaasItemProps & Omit<AntdTableColumnProps<T>, "children">

Type parameters

NameType
Tany

TableProps

Ƭ TableProps<T, ExtendTypes>: { extendTypes?: { [key: string]: ExtendTableTypeProps; } ; faasData?: FaasDataWrapperProps<T> ; items: (TableItemProps | ExtendTypes & ExtendTableItemProps)[] ; onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue>, 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

TimePickerProps

Ƭ TimePickerProps: Omit<PickerTimeProps<Dayjs>, "picker">


TitleProps

Ƭ TitleProps: Object

Type declaration

NameTypeDescription
children?JSX.Elementreturn children
h1?boolean | { className?: string ; style?: React.CSSProperties }return a h1 element
separator?string- as default
suffix?string-
titlestring | string[]-

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<FaasState>


DatePicker

Const DatePicker: PickerComponentClass<Omit<PickerBaseProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {} & {} & Omit<PickerDateProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {} & {} & Omit<PickerTimeProps<Dayjs>, "locale" | "generateConfig" | "hideHeader" | "components"> & {} & {}, unknown> & {}


TimePicker

Const TimePicker: ForwardRefExoticComponent<TimePickerProps & RefAttributes<any>>

Functions

Blank

Blank(options?): any

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

Parameters

NameType
options?BlankProps

Returns

any

<Blank value={undefined} text="Empty" />

Calendar

Calendar(props): Element

Parameters

NameType
propsCalendarProps<Dayjs>

Returns

Element


ConfigProvider

ConfigProvider(props): Element

Config for @faasjs/ant-design components.

Parameters

NameType
propsObject
props.childrenReactNode
props.configPartial<FaasState>

Returns

Element

<ConfigProvider config={{
 common: {
  blank: '空',
 },
}}>
 <Blank />
</ConfigProvider>

Description

Description<T>(props): Element

Type parameters

NameType
Tany

Parameters

NameType
propsDescriptionProps<T, any>

Returns

Element


Form

Form<Values>(props): Element

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 item={{ type: 'string', id: 'name' }} />

// use custom type
<FormItem item={{ id: 'password' }}>
  <Input.Password />
</>

Type parameters

NameType
Tany

Parameters

NameType
propsFormItemProps<T>

Returns

Element


Routes

Routes(props): Element

Parameters

NameType
propsRoutesProps

Returns

Element


Table

Table<T, ExtendTypes>(props): Element

Type parameters

NameType
Tany
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 }[]

Parameters

NameType
optionsBaseOption[]

Returns

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


useConfigContext

useConfigContext(): FaasState

Returns

FaasState


useDrawer

useDrawer(init?): Object

Hook style drawer.

Parameters

NameTypeDescription
init?DrawerPropsinitial props ts function Example() { const { drawer, setDrawerProps } = useDrawer() return <> <Button onClick={ () => setDrawerProps(prev => ({ visible: !prev.visible})) }> 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({ visible: true })}>Open Modal</Button> {modal}</> }

Returns

Object

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