SettingProvider - 组件默认设置
为组件提供统一的默认设置，在外围包裹一次即可全局生效。
SchemaForm
比如可以统一配置 SchemaForm 默认的验证提示语。
ModalForm
比如可以统一配置弹窗表单的默认布局。
或者可以统一配置弹窗表单的默认宽度。
ProTable
比如可以统一配置分页选项。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
或者统一配置搜索区域。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
或者统一配置表格大小。
| 用户名 | 电话 | 昵称 | 性别 | 创建日期 | 操作 | |
|---|---|---|---|---|---|---|
暂无数据 | ||||||
FormUpload
可以在这里统一设置 action, header, children, responseToFileList 等属性。
API
SettingProvider
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| locale | 语言包配置 | - | zhCN |
| schemaFormSetting | SchemaForm组件的设置项 | - | |
| modalFormSetting | ModalForm 组件的设置项 | - | |
| proTableSetting | ProTable组件的设置项 | - | |
| formUploadSetting | FormUpload组件的设置项 | - |
SchemaFormSettingProps
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| name | -- | string | -- |
| initialValues | -- | Store | -- |
| component | -- | string | false | FC<any> | ComponentClass<any, any> | -- |
| fields | -- | FieldData<any>[] | -- |
| validateMessages | -- | ValidateMessages | -- |
| onValuesChange | -- | ((changedValues: Partial<Record<string, 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 | -- |
| classNames | -- | FormClassNamesType | -- |
| styles | -- | FormStylesType | -- |
| 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 | -- |
| rootClassName | -- | string | -- |
| variant | -- | "outlined" | "borderless" | "filled" | "underlined" | -- |
| submitter | 提交按钮相关配置. | 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 | 是否为只读模式 | 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 | 是否为内嵌模式 | boolean | false |
| valueBaseName | 开启embed后处理套嵌数据结构; 在onFinish收集数据时, 会挂在该字段下. 仅适用于embed模式 | string | false |
| readonlyType | 只读时的展示形式。可选 form 或 descriptions | "form" | "descriptions" | form |
| descriptionsProps | 描述模式下的表格样式配置 | Omit<DescriptionsProps, 'items' | 'columns'> | -- |
ModalFormSettingProps
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| className | -- | string | -- |
| style | -- | CSSProperties | -- |
| title | The modal dialog's title | ReactNode | -- |
| classNames | -- | ModalClassNamesType | -- |
| styles | -- | ModalStylesType | -- |
| 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 | -- |
| mask | -- | MaskType | -- |
| focusTriggerAfterClose | Please use `focusable.focusTriggerAfterClose` instead | boolean | -- |
| keyboard | -- | boolean | -- |
| rootStyle | -- | CSSProperties | -- |
| afterClose | -- | (() => void) | -- |
| afterOpenChange | Callback when the animation ends when Modal is turned on and off | ((open: boolean) => void) | -- |
| closable | -- | boolean | (ClosableType & AriaAttributes & { onClose?: (() => void); afterClose?: (() => void) | undefined; }) | undefined | -- |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | -- |
| visible | -- | boolean | -- |
| destroyOnHidden | 5.25.0 | 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 | -- |
| wrapProps | -- | any | -- |
| getContainer | -- | string | false | HTMLElement | getContainerFunc | -- |
| closeIcon | -- | ReactNode | -- |
| modalRender | -- | ((node: ReactNode) => ReactNode) | -- |
| forceRender | Force render Modal | 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 | -- |
| destroyOnClose | Please use `destroyOnHidden` instead | boolean | -- |
| focusable | -- | FocusableConfig | -- |
| onOpen | 打开弹框后的回调, 可以在这里请求数据; | (formType, formRef, formData) => Promise | void | -- |
| formProps | 传递给表单的参数, 请参考SchemaForm组件的api | Omit<SchemaFormProps, 'innerRef' | 'formRef' | 'onFinish' | 'columns' | 'form'> | -- |
| confirmOnClose | 关闭弹窗提醒, 当表单项发生改动时会弹出确认框 | boolean | { title?: string; content?: string } | { title: '确认关闭', content: '表单项内容未保存, 是否确认关闭?' } |
ProTableSettingProps
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| name | 用于 table 的 headerTitle 的显示, 还有弹出框的 title 显示; 可以配合 locale 修改文案。 | 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> | -- |
| classNames | -- | TableClassNamesType<any> | -- |
| styles | -- | TableStylesType<any> | -- |
| 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 | 打开弹框后的回调, 可以在这里请求数据; | (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 | -- |
| measureRowRender | Internal usage, may remove by refactor. | ((measureRow: ReactNode) => ReactNode) | -- |
| dropdownPrefixCls | -- | string | -- |
| dataSource | -- | readonly any[] | -- |
| pagination | -- | false | TablePaginationConfig | -- |
| bordered | -- | boolean | -- |
| locale | -- | TableLocale | -- |
| getPopupContainer | -- | GetPopupContainer | -- |
| sortDirections | -- | SortOrder[] | -- |
| showSorterTooltip | -- | boolean | SorterTooltipProps | -- |
| virtual | -- | boolean | -- |
| tableAlertOptionRender | 自定义 table alert 右侧区域; | false | ((option: { selectedRowKeys: any[]; selectedRows: any[]; onCleanSelected: () => void; }, doms: { delDom?: ReactNode; cancelDom: ReactNode; }) => ReactNode) | -- |
| search | 搜索区域的选项; | 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 | 传入的删除函数; | ((selectedIds: (string | number)[], record: any) => void | Promise<any>) | -- |
| delPermission | 是否有删除权限; 不传默认为有; | (() => boolean) | -- |
| tableAlertOption | 多选删除功能的选项; | -- | |
| modalFormProps | 传递给 ModalForm 组件的属性。 | Omit<ModalFormProps, 'innerRef' | 'onFinish' | 'onOpen' | 'columns'> | -- |
| noPadding | 移除 Card 包裹的 padding; 已废弃; 用 cardStyle = false 替代; | boolean | -- |
| delConfirmType | 删除的确认弹框类型。 | "popconfirm" | "modal" | popconfirm |
| delPopconfirmProps | 传给删除确认框的属性。title 和 description 可以是函数; | (Omit<PopconfirmProps, "title" | "description"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); description?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delModalConfirmProps | 传给删除确认框的属性。title 和 content 可以是函数; | (Omit<ModalFuncProps, "title" | "content"> & { title?: ReactNode | ((record: any, index: any) => ReactNode); content?: ReactNode | ((record: any, index: any) => ReactNode); }) | -- |
| delSuccessProps | 删除成功后的提示属性（传递给 Message 的属性）。false 关闭提示。 | false | MessageConfig | {content: "删除成功", type: "success"} |
| optionColumnSpaceProps | 传给操作列中包裹各按钮的 Space 组件的属性。 | {size: 'small'} | |
| defaultHideInSearch | columns 中的列是否默认在搜索区域里隐藏。 | boolean | false |
| rakLocale | 用于修改 headerTitle 的后缀文案和 formType 等对应的文案。 | LocaleType | zh_CH |
FormUploadSettingProps
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| onFinish | 文件全部上传完成后的回调(所有文件的状态都是非uploading) | ((files: UploadFile<any>[]) => void) | -- |
| children | children | ({ loading: boolean }) => Element | Element | -- |
| action | 文件上传接口 | string | -- |
| method | -- | "POST" | "PUT" | "PATCH" | "post" | "put" | "patch" | -- |
| name | -- | string | -- |
| className | -- | string | -- |
| id | -- | string | -- |
| style | -- | CSSProperties | -- |
| onDrop | -- | ((event: DragEvent<HTMLDivElement>) => void) | -- |
| classNames | -- | UploadClassNamesType<any> | -- |
| styles | -- | UploadStylesType<any> | -- |
| 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 | AcceptConfig | -- |
| 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>, info: { defaultRequest: (option: UploadRequestOption<any>) => void; }) => void) | -- |
| withCredentials | -- | boolean | -- |
| openFileDialogOnClick | -- | boolean | -- |
| previewFile | -- | PreviewFileHandler | -- |
| 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 | 自定义文件列表中name的取值字段 | string | name |
| urlKey | 自定义文件列表中url的取值字段 | string | url |
| responseToFileList | 可以将后台返回的数据合并进 fileList | ((res: any) => Record<string, any>) | -- |
| errorHandle | 上传失败后的处理函数 | ((res: any) => void) | -- |