SettingProvider
Provides unified default settings for components. Wrap once at the outer level to take effect globally.
SchemaForm
For example, you can uniformly configure the default validation messages for SchemaForm.
ModalForm
For example, you can uniformly configure the default layout for modal forms.
Or you can uniformly configure the default width for modal forms.
ProTable
For example, you can uniformly configure pagination options.
| Username | Phone | Nickname | Gender | Created At | Actions | |
|---|---|---|---|---|---|---|
No data | ||||||
Or uniformly configure the search area.
| Username | Phone | Nickname | Gender | Created At | Actions | |
|---|---|---|---|---|---|---|
No data | ||||||
Or uniformly configure the table size.
| Username | Phone | Nickname | Gender | Created At | Actions | |
|---|---|---|---|---|---|---|
No data | ||||||
FormUpload
You can uniformly set properties like action, header, children, responseToFileList here.
API
SettingProvider
| Property | Description | Type | Default |
|---|---|---|---|
| locale | Language package setting, you can find the packages in react-admin-kit/locale | - | zhCN |
| schemaFormSetting | Settings for SchemaForm component | - | |
| modalFormSetting | Settings for ModalForm component | - | |
| proTableSetting | Settings for ProTable component | - | |
| formUploadSetting | Settings for FormUpload component | - |
SchemaFormSettingProps
| Property | Description | Type | Default |
|---|---|---|---|
| name | -- | string | -- |
| initialValues | -- | Store | -- |
| component | -- | string | false | FC<any> | ComponentClass<any, any> | -- |
| fields | -- | FieldData<any>[] | -- |
| validateMessages | -- | ValidateMessages | -- |
| onValuesChange | -- | ((changedValues: any, values: Record<string, any>) => void) | -- |
| onFieldsChange | -- | ((changedFields: FieldData<any>[], allFields: FieldData<any>[]) => void) | -- |
| onFinishFailed | -- | ((errorInfo: ValidateErrorEntity<Record<string, any>>) => void) | -- |
| validateTrigger | -- | string | false | string[] | -- |
| preserve | -- | boolean | -- |
| clearOnDestroy | -- | boolean | -- |
| prefixCls | -- | string | -- |
| colon | -- | boolean | -- |
| layout | -- | FormLayout | -- |
| labelAlign | -- | FormLabelAlign | -- |
| labelWrap | -- | boolean | -- |
| labelCol | -- | ColProps | -- |
| wrapperCol | -- | ColProps | -- |
| feedbackIcons | -- | FeedbackIcons | -- |
| size | -- | SizeType | -- |
| disabled | -- | boolean | -- |
| scrollToFirstError | -- | boolean | ScrollFocusOptions | -- |
| requiredMark | -- | RequiredMark | -- |
| hideRequiredMark | Will warning in future branch. Pls use `requiredMark` instead. | boolean | -- |
| rootClassName | -- | string | -- |
| variant | -- | "outlined" | "borderless" | "filled" | "underlined" | -- |
| submitter | Submit button related configuration. | boolean | SubmitterProps & { style: React.CSSProperties } | false |
| loading | 表单按钮的 loading 状态 | boolean | -- |
| onLoadingChange | 这是一个可选的属性(onLoadingChange)，它接受一个名为loading的参数，类型为boolean，表示加载状态是否改变。 | ((loading: boolean) => void) | -- |
| syncToUrl | 同步结果到 url 中 | boolean | ((values: Record<string, any>, type: "get" | "set") => Record<string, any>) | -- |
| syncToUrlAsImportant | 当 syncToUrl 为 true，在页面回显示时，以url上的参数为主，默认为false | boolean | -- |
| extraUrlParams | 额外的 url 参数 中 | Record<string, any> | -- |
| syncToInitialValues | 同步结果到 initialValues,默认为true如果为false，reset的时将会忽略从url上获取的数据 | boolean | -- |
| omitNil | 如果为 false,会原样保存。 | boolean | true |
| dateFormatter | 格式化 Date 的方式，默认转化为 string | false | "string" | "number" | (string & {}) | ((value: Dayjs, valueType: string) => string | number) | -- |
| onInit | 表单初始化成功，比如布局，label等计算完成 | ((values: Record<string, any>, form: ProFormInstance<any>) => void) | -- |
| params | 发起网络请求的参数 | Record<string, any> | -- |
| request | 发起网络请求的参数,返回值会覆盖给 initialValues | ProRequestData<Record<string, any>, Record<string, any>> | -- |
| isKeyPressSubmit | 是否回车提交 | boolean | -- |
| formKey | 用于控制form 是否相同的key，高阶用法 | string | -- |
| autoFocusFirstInput | -- | boolean | -- |
| readonly | Whether it is readonly mode | boolean | false |
| grid | open grid layout | boolean | false |
| colProps | only works when grid is enabled | ColProps | { xs: 24 } |
| rowProps | only works when grid is enabled | RowProps | { gutter: 8 } |
| embed | Whether it is embed mode | boolean | false |
| valueBaseName | When embed is enabled, handle nested data structure; when collecting data in onFinish, it will be attached under this field. Only applicable in embed mode. | string | false |
| readonlyType | Display type when readonly. Options: form or descriptions | "form" | "descriptions" | form |
| descriptionsProps | Table style configuration in descriptions mode | Omit<DescriptionsProps, 'items' | 'columns'> | -- |
ModalFormSettingProps
| Property | Description | Type | Default |
|---|---|---|---|
| className | -- | string | -- |
| style | -- | CSSProperties | -- |
| title | The modal dialog's title | ReactNode | -- |
| prefixCls | -- | string | -- |
| rootClassName | -- | string | -- |
| loading | 5.18.0 | boolean | -- |
| footer | -- | ReactNode | ((originNode: ReactNode, extra: { OkBtn: FC<{}>; CancelBtn: FC<{}>; }) => ReactNode) | -- |
| width | Width of the modal dialog | string | number | Partial<Record<Breakpoint, string | number>> | -- |
| transitionName | -- | string | -- |
| maskTransitionName | -- | string | -- |
| keyboard | -- | boolean | -- |
| mask | -- | boolean | -- |
| afterClose | -- | (() => void) | -- |
| afterOpenChange | Callback when the animation ends when Modal is turned on and off | ((open: boolean) => void) | -- |
| closable | -- | boolean | ({ closeIcon?: ReactNode; disabled?: boolean; } & AriaAttributes) | undefined | -- |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | -- |
| visible | Please use `open` instead. | boolean | -- |
| destroyOnClose | Please use `destroyOnHidden` instead | boolean | -- |
| mousePosition | -- | MousePosition | -- |
| wrapStyle | -- | Record<string, any> | -- |
| bodyStyle | Please use `styles.body` instead | CSSProperties | -- |
| maskStyle | Please use `styles.mask` instead | CSSProperties | -- |
| wrapClassName | -- | string | -- |
| height | -- | string | number | -- |
| zIndex | -- | number | -- |
| bodyProps | -- | any | -- |
| maskProps | -- | any | -- |
| classNames | -- | ModalClassNames | -- |
| styles | -- | ModalStyles | -- |
| wrapProps | -- | any | -- |
| getContainer | -- | string | false | HTMLElement | getContainerFunc | -- |
| closeIcon | -- | ReactNode | -- |
| modalRender | -- | ((node: ReactNode) => ReactNode) | -- |
| forceRender | Force render Modal | boolean | -- |
| focusTriggerAfterClose | -- | boolean | -- |
| panelRef | -- | Ref<HTMLDivElement> | -- |
| open | Whether the modal dialog is visible or not | boolean | -- |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | -- |
| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | ((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | -- |
| centered | Centered Modal | boolean | -- |
| okText | Text of the OK button | ReactNode | -- |
| okType | Button `type` of the OK button | LegacyButtonType | -- |
| cancelText | Text of the Cancel button | ReactNode | -- |
| okButtonProps | -- | ButtonProps | -- |
| cancelButtonProps | -- | ButtonProps | -- |
| destroyOnHidden | 5.25.0 | boolean | -- |
| onOpen | Callback after opening the modal, you can request data here; | (formType, formRef, formData) => Promise | void | -- |
| formProps | Parameters passed to the form, please refer to the SchemaForm component API | Omit<SchemaFormProps, 'innerRef' | 'formRef' | 'onFinish' | 'columns' | 'form'> | -- |
| confirmOnClose | Close modal confirmation, a confirmation dialog will appear when form items are modified | boolean | { title?: string; content?: string } | { title: '确认关闭', content: '表单项内容未保存, 是否确认关闭?' } |
ProTableSettingProps
| Property | Description | Type | Default |
|---|---|---|---|
| name | Used for table headerTitle display and modal title display; can be used with locale to modify text. | string | -- |
| className | -- | string | -- |
| id | -- | string | -- |
| style | -- | CSSProperties | -- |
| title | -- | PanelRender<any> | -- |
| onChange | -- | ((pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<any> | SorterResult<...>[], extra: TableCurrentDataSource<...>) => void) | -- |
| onReset | 重置表单时触发 | (() => void) | -- |
| onLoad | 数据加载完成后触发 | ((dataSource: any[]) => void) | -- |
| onScroll | -- | UIEventHandler<HTMLDivElement> | -- |
| prefixCls | -- | string | -- |
| size | -- | SizeType | -- |
| rootClassName | -- | string | -- |
| loading | -- | boolean | SpinProps | -- |
| onLoadingChange | loading 被修改时触发，一般是网络请求导致的 | ((loading: boolean | SpinProps) => void) | undefined | -- |
| formRef | 操作自带的 form | MutableRefObject<ProFormInstance> | undefined | -- |
| dateFormatter | 暂时只支持 dayjs - string 会格式化为 YYYY-DD-MM - number 代表时间戳 | false | "string" | "number" | (string & {}) | ((value: Dayjs, valueType: string) => string | number) | -- |
| params | request 的参数，修改之后会触发更新 | any | -- |
| footer | -- | PanelRender<any> | -- |
| onOpen | Callback after opening the modal, you can request data here; | (formType, formRef, formData) => Promise | void | -- |
| rowSelection | 选择项配置 | false | (TableRowSelection<any> & { alwaysShowAlert?: boolean; }) | undefined | -- |
| scroll | -- | ({ x?: string | number | true; y?: string | number | undefined; } & { scrollToFirstRowOnChange?: boolean | undefined; }) | undefined | -- |
| indentSize | -- | number | -- |
| rowKey | -- | string | number | symbol | GetRowKey<any> | -- |
| tableLayout | -- | TableLayout | -- |
| expandable | Config expand rows | ExpandableConfig<any> | -- |
| rowClassName | -- | string | RowClassName<any> | -- |
| summary | -- | ((data: readonly any[]) => ReactNode) | -- |
| caption | -- | ReactNode | -- |
| showHeader | -- | boolean | -- |
| components | -- | TableComponents<any> | -- |
| onRow | -- | GetComponentProps<any> | -- |
| onHeaderRow | -- | GetComponentProps<readonly ColumnType<any>[]> | -- |
| direction | -- | Direction | -- |
| sticky | -- | boolean | TableSticky | -- |
| rowHoverable | -- | boolean | -- |
| dropdownPrefixCls | -- | string | -- |
| dataSource | -- | readonly any[] | -- |
| pagination | -- | false | TablePaginationConfig | -- |
| bordered | -- | boolean | -- |
| locale | -- | TableLocale | -- |
| getPopupContainer | -- | GetPopupContainer | -- |
| sortDirections | -- | SortOrder[] | -- |
| showSorterTooltip | -- | boolean | SorterTooltipProps | -- |
| virtual | -- | boolean | -- |
| tableAlertOptionRender | Custom table alert right area; | false | ((option: { selectedRowKeys: any[]; selectedRows: any[]; onCleanSelected: () => void; }, doms: { delDom?: ReactNode; cancelDom: ReactNode; }) => ReactNode) | -- |
| search | Options for search area; | false | {labelWrap?: boolean} & SearchConfig | -- |
| toolbar | ListToolBar 的属性 | ListToolBarProps | -- |
| ghost | 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。 | boolean | -- |
| columnsStateMap | 列状态配置，可以配置是否浮动和是否展示 | Record<string, ColumnsState> | -- |
| onColumnsStateChange | 列状态配置修改触发事件 | ((map: Record<string, ColumnsState>) => void) | -- |
| columnsState | 列状态的配置，可以用来操作列功能 | ColumnStateType | -- |
| onSizeChange | -- | ((size: DensitySize) => void) | -- |
| cardProps | table 外面卡片的设置 | false | CardProps | -- |
| tableRender | 渲染 table | ((props: ProTableProps<any, any, "text">, defaultDom: Element, domList: { toolbar: Element; alert: Element | undefined; table: Element | undefined; }) => ReactNode) | undefined | -- |
| tableViewRender | 渲染 table 视图，用于定制 ProList，不推荐直接使用 | ((props: TableProps<any>, defaultDom: Element) => Element) | undefined | -- |
| tableExtraRender | table 和搜索表单之间的 dom 渲染 | ((props: ProTableProps<any, any, "text">, dataSource: any[]) => ReactNode) | -- |
| searchFormRender | 渲染搜索表单 | ((props: ProTableProps<any, any, "text">, defaultDom: Element) => ReactNode) | -- |
| postData | 对数据进行一些处理 | any | -- |
| defaultData | 默认的数据 | any[] | -- |
| toolBarRender | 渲染操作栏 | false | ((action: ActionType, rows: { selectedRowKeys?: (string | number)[] | undefined; selectedRows?: any[] | undefined; }) => ReactNode[]) | undefined | -- |
| optionsRender | -- | ((props: ToolBarProps<any>, defaultDom: ReactNode[]) => ReactNode[]) | -- |
| onRequestError | 数据加载失败时触发 | ((e: Error) => void) | -- |
| polling | 是否轮询 ProTable 它不会自动提交表单，如果你想自动提交表单的功能，需要在 onValueChange 中调用 formRef.current?.submit() | number | ((dataSource: any[]) => number) | -- |
| tableClassName | 给封装的 table 的 className | string | -- |
| tableStyle | 给封装的 table 的 style | CSSProperties | -- |
| headerTitle | 左上角的 title | ReactNode | -- |
| tooltip | 标题旁边的 tooltip | LabelTooltipType | -- |
| options | 操作栏配置 | false | OptionConfig | -- |
| beforeSearchSubmit | 格式化搜索表单提交数据 | ((params: Partial<any>) => any) | -- |
| tableAlertRender | 设置或者返回false 即可关闭 | AlertRenderType<any> | -- |
| type | 支持 ProTable 的类型 | ProSchemaComponentTypes | -- |
| columnEmptyText | 空值时显示 | ProFieldEmptyText | -- |
| manualRequest | 是否手动触发请求 | boolean | -- |
| editable | 编辑行相关的配置 | RowEditableConfig<any> | -- |
| onDataSourceChange | 可编辑表格修改数据的改变 | ((dataSource: any[]) => void) | -- |
| cardBordered | 查询表单和 Table 的卡片 border 配置 | Bordered | -- |
| debounceTime | 去抖时间 | number | -- |
| revalidateOnFocus | 只在request 存在的时候生效，可编辑表格也不会生效 | boolean | false |
| defaultSize | 默认的表格大小 | SizeType | -- |
| ErrorBoundary | 错误边界自定义 | false | ComponentClass<any, any> | -- |
| delFunction | The delete function passed in; | ((selectedIds: (string | number)[], record: any) => void | Promise<any>) | -- |
| delPermission | Whether has delete permission; defaults to true if not passed; | (() => boolean) | -- |
| tableAlertOption | Options for multi-select delete functionality; | -- | |
| modalFormProps | Properties passed to the ModalForm component. | Omit<ModalFormProps, 'innerRef' | 'onFinish' | 'onOpen' | 'columns'> | -- |
| noPadding | Remove Card wrapper padding; deprecated; use cardStyle = false instead; | boolean | -- |
| delConfirmType | Type of delete confirmation popup. | "popconfirm" | "modal" | popconfirm |
| delPopconfirmProps | Properties passed to delete confirmation popover. title and description can be functions; | (Omit<PopconfirmProps, "title" | "description"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); description?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delModalConfirmProps | Properties passed to delete confirmation modal. title and content can be functions; | (Omit<ModalFuncProps, "title" | "content"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); content?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delSuccessProps | Message properties after successful deletion (passed to Message component). false to disable message. | false | MessageConfig | {content: "删除成功", type: "success"} |
| optionColumnSpaceProps | Properties passed to the Space component that wraps buttons in the action column. | {size: 'small'} | |
| defaultHideInSearch | Whether columns are hidden in search area by default. | boolean | false |
| rakLocale | Used to modify the suffix text of headerTitle and corresponding text for formType, etc. | LocaleType | zh_CH |
FormUploadSettingProps
| Property | Description | Type | Default |
|---|---|---|---|
| onFinish | Callback after all files are uploaded (all files are not uploading) | ((files: UploadFile<any>[]) => void) | -- |
| children | children | ({ loading: boolean }) => Element | Element | -- |
| action | Uploading URL | string | -- |
| method | -- | "POST" | "PUT" | "PATCH" | "post" | "put" | "patch" | -- |
| name | -- | string | -- |
| className | -- | string | -- |
| id | -- | string | -- |
| style | -- | CSSProperties | -- |
| onDrop | -- | ((event: DragEvent<HTMLDivElement>) => void) | -- |
| prefixCls | -- | string | -- |
| disabled | -- | boolean | -- |
| rootClassName | -- | string | -- |
| data | -- | Record<string, unknown> | ((file: UploadFile<any>) => Record<string, unknown> | Promise<Record<string, unknown>>) | -- |
| locale | -- | UploadLocale | -- |
| type | -- | UploadType | -- |
| hasControlInside | -- | boolean | -- |
| pastable | -- | boolean | -- |
| accept | -- | string | -- |
| multiple | -- | boolean | -- |
| defaultFileList | -- | UploadFile<any>[] | -- |
| directory | -- | boolean | -- |
| headers | -- | HttpRequestHeader | -- |
| showUploadList | -- | boolean | ShowUploadListInterface<any> | -- |
| beforeUpload | -- | ((file: RcFile, fileList: RcFile[]) => BeforeUploadValueType | Promise<BeforeUploadValueType>) | -- |
| listType | -- | UploadListType | -- |
| onPreview | -- | ((file: UploadFile<any>) => void) | -- |
| onDownload | -- | ((file: UploadFile<any>) => void) | -- |
| onRemove | -- | ((file: UploadFile<any>) => boolean | void | Promise<boolean | void>) | -- |
| supportServerRender | -- | boolean | -- |
| customRequest | -- | ((options: UploadRequestOption<any>) => void) | -- |
| withCredentials | -- | boolean | -- |
| openFileDialogOnClick | -- | boolean | -- |
| previewFile | -- | PreviewFileHandler | -- |
| transformFile | Please use `beforeUpload` directly | TransformFileHandler | -- |
| iconRender | -- | ((file: UploadFile<any>, listType?: UploadListType) => ReactNode) | undefined | -- |
| isImageUrl | -- | ((file: UploadFile<any>) => boolean) | -- |
| progress | -- | UploadListProgressProps | -- |
| itemRender | -- | ItemRender<any> | -- |
| maxCount | Config max count of `fileList`. Will replace current one when `maxCount` is 1 | number | -- |
| nameKey | Custom field for file list name | string | name |
| urlKey | Custom field for file list url | string | url |
| responseToFileList | You can merge the data returned by the background into fileList | ((res: any) => Record<string, any>) | -- |
| errorHandle | Error handling function after upload failure | ((res: any) => void) | -- |