Support customization / props of submit button using ui:submitButtonOptions

CHANGELOG.md

@@ -18,6 +18,27 @@ should change the heading of the (upcoming) version to include a major version b
 
 # v3.2.1 (upcoming)
 
+## Dev / docs / playground
+- Enable ui options in playground, to demonstrate submit button options (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/core
+- Feature for ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/bootstrap-4
+- SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/material-ui
+- SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/semantic-ui
+- SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/antd
+- SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
+## @rjsf/fluent-ui
+- SubmitButton widget to use new ui:submitButtonOptions on the submit button for forms (https://github.com/rjsf-team/react-jsonschema-form/pull/2640)
+
 # v3.2.0
 
 ## @rjsf/core
@@ -45,7 +66,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Take into account implicitly defined types when rendering labels for fields (https://github.com/rjsf-team/react-jsonschema-form/pull/2502)
 
 ## @rjsf/antd
-- Add default Form export to @rjsf/antd (https://github.com/rjsf-team/react-jsonschema-form/pull/2514) 
+- Add default Form export to @rjsf/antd (https://github.com/rjsf-team/react-jsonschema-form/pull/2514)
 
 ## @rjsf/fluent-ui
 - Make material-ui and fluent-ui pull TextWidget from the registry; remove registry prop from <div> in TextWidget (https://github.com/rjsf-team/react-jsonschema-form/pull/2515)

docs/api-reference/uiSchema.md

@@ -13,14 +13,30 @@ In other words, the following uiSchemas are equivalent:
 {
   "ui:title": "Title",
   "ui:description": "Description"
+  "ui:submitButtonOptions": {
+    "props": {
+      "disabled": false,
+      "className": "btn btn-info",
+    },
+      "removed": false,
+      "submitText": "Submit"
+    },
 }
 ```
 
 ```json
 {
   "ui:options": {
     "title": "Title",
-    "description": "Description"
+    "description": "Description",
+    "submitButtonOptions": {
+      props: {
+        "disabled": false,
+        "className": "btn btn-info",
+      },
+      "removed": false,
+      "submitText": "Submit"
+    },
   }
 }
 ```
@@ -218,5 +234,40 @@ const uiSchema = {
   "ui:title": "Your password"
 };
 ```
+
+## submitButtonOptions
+
+Sometimes it's convenient to change the behavior of the submit button for the form. This is the purpose of the `ui:submitButtonOptions` uiSchema directive:
+
+You can pass any other prop to the submit button if you want, by default, this library will set the following options / props mentioned below for all submit buttons:
+
+### `disabled` prop
+
+You can use this option to disable the submit button
+
+### `className` prop
+
+You can use this option to specify a class name for the submit button
+
+### `removed` option
+
+You can use this option to remove the submit button completely from the form. Nice option, if the form is just for viewing purposes
+
+### `submitText` option
+
+You can use this option to change the text of the submit button
+
+```js
+const uiSchema = {
+ "submitButtonOptions": {
+   props: {
+      "disabled": false,
+      "className": "btn btn-info",
+   },
+    "removed": false,
+    "submitText": "Submit"
+  }
+};
+```
 ## Theme Options
 [Semantic UI](themes/semantic-ui/uiSchema.md)

packages/antd/package.json

@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.0.0",
-    "@rjsf/core": "^3.0.0",
+    "@rjsf/core": "^3.2.0",
     "antd": "^4.0.0",
     "antd-dayjs-webpack-plugin": "1.0.0",
     "dayjs": "^1.8.0",

packages/antd/src/index.js

@@ -23,6 +23,7 @@ import TextareaWidget from './widgets/TextareaWidget';
 import TextWidget from './widgets/TextWidget';
 import UpDownWidget from './widgets/UpDownWidget';
 import URLWidget from './widgets/URLWidget';
+import SubmitButton from './widgets/SubmitButton';
 
 import ErrorList from './ErrorList';
 
@@ -53,6 +54,7 @@ export const Widgets = {
   TextWidget,
   UpDownWidget,
   URLWidget,
+  SubmitButton,
 };
 
 export const Theme = {

packages/antd/src/widgets/SubmitButton/SubmitButton.js

@@ -0,0 +1,12 @@
+import { utils } from '@rjsf/core';
+import React from "react";
+import Button from 'antd/lib/button';
+const { getSubmitButtonOptions } = utils;
+export default ({ uiSchema }) => {
+  const { submitText, removed, props: submitButtonProps }= getSubmitButtonOptions(uiSchema);
+  if (removed) {return null;}
+  return (<Button  type="submit" {...submitButtonProps}>
+    {submitText}
+  </Button>);
+};
+