- {formError &&
}
- {formInfo &&
}
+ }, [error, isSubmitting, isValid])
+
+ return (
+
+
- )
- }
+
+ )
}
-const formRenderer =
- ({ children, ...rest }) =>
- renderProps => {
- const { className, error, errorTitle, info, infoTitle, disabled, id } = rest
- const { handleSubmit, ...restFormikProps } = renderProps
-
- return (
-
- {children}
-
- )
- }
-
-class Form extends React.PureComponent {
- static propTypes = {
- enableReinitialize: PropTypes.bool,
- formikRef: PropTypes.shape({ current: PropTypes.shape({}) }),
- initialValues: PropTypes.shape({}),
- onReset: PropTypes.func,
- onSubmit: PropTypes.func,
- validateOnMount: PropTypes.bool,
- validateOnBlur: PropTypes.bool,
- validateOnChange: PropTypes.bool,
- validationSchema: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]),
- validationContext: PropTypes.shape({}),
- validateSync: PropTypes.bool,
- }
-
- static defaultProps = {
- enableReinitialize: false,
- formikRef: undefined,
- initialValues: undefined,
- onReset: () => null,
- validateOnBlur: true,
- validateOnMount: false,
- validateOnChange: false,
- validationSchema: undefined,
- validationContext: {},
- validateSync: true,
- onSubmit: () => null,
- }
-
- @bind
- async handleSubmit(...args) {
- const { onSubmit } = this.props
-
- try {
- return await onSubmit(...args)
- } catch (error) {
- // Make sure all unhandled exceptions during submit are ingested.
- ingestError(error, { ingestedBy: 'FormSubmit' })
-
- throw error
- }
- }
-
- @bind
- validate(values) {
- const { validationSchema, validationContext, validateSync } = this.props
-
- if (!validationSchema) {
- return {}
- }
-
- if (validateSync) {
- try {
- validateYupSchema(values, validationSchema, validateSync, validationContext)
-
- return {}
- } catch (error) {
- if (error.name === 'ValidationError') {
- return yupToFormErrors(error)
- }
-
- throw error
- }
- }
-
- return new Promise((resolve, reject) => {
- validateYupSchema(values, validationSchema, validateSync, validationContext).then(
- () => {
- resolve({})
- },
- error => {
- // Resolve yup errors, see https://jaredpalmer.com/formik/docs/migrating-v2#validate.
- if (error.name === 'ValidationError') {
- resolve(yupToFormErrors(error))
- } else {
- // Throw any other errors as it is not related to the validation process.
- reject(error)
- }
- },
- )
- })
- }
-
- render() {
- const {
- onReset,
- initialValues,
- validateOnBlur,
- validateOnChange,
- validationSchema,
- validationContext,
- validateOnMount,
- formikRef,
- enableReinitialize,
- ...rest
- } = this.props
+Form.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ enableReinitialize: PropTypes.bool,
+ error: PropTypes.error,
+ errorTitle: PropTypes.message,
+ formikRef: PropTypes.shape({ current: PropTypes.shape({}) }),
+ id: PropTypes.string,
+ info: PropTypes.message,
+ infoTitle: PropTypes.message,
+ initialValues: PropTypes.shape({}),
+ onReset: PropTypes.func,
+ onSubmit: PropTypes.func,
+ validateOnBlur: PropTypes.bool,
+ validateOnChange: PropTypes.bool,
+ validateOnMount: PropTypes.bool,
+ validateSync: PropTypes.bool,
+ validationContext: PropTypes.shape({}),
+ validationSchema: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]),
+}
- return (
-
- {formRenderer(rest)}
-
- )
- }
+Form.defaultProps = {
+ className: undefined,
+ disabled: false,
+ enableReinitialize: false,
+ error: undefined,
+ errorTitle: m.submitFailed,
+ info: undefined,
+ infoTitle: undefined,
+ formikRef: undefined,
+ id: undefined,
+ initialValues: undefined,
+ onReset: () => null,
+ onSubmit: () => null,
+ validateOnBlur: true,
+ validateOnChange: false,
+ validateOnMount: false,
+ validateSync: true,
+ validationContext: {},
+ validationSchema: undefined,
}
Form.Field = FormField
diff --git a/pkg/webui/components/form/section/index.js b/pkg/webui/components/form/section/index.js
index ba04122be4..879aabe88d 100644
--- a/pkg/webui/components/form/section/index.js
+++ b/pkg/webui/components/form/section/index.js
@@ -16,13 +16,14 @@ import React from 'react'
import classnames from 'classnames'
import { defineMessages, useIntl } from 'react-intl'
-import { useFormContext } from '@ttn-lw/components/form'
import Icon from '@ttn-lw/components/icon'
import Message from '@ttn-lw/lib/components/message'
import PropTypes from '@ttn-lw/lib/prop-types'
+import { useFormContext } from '..'
+
import style from './section.styl'
const m = defineMessages({
diff --git a/pkg/webui/components/form/submit/index.js b/pkg/webui/components/form/submit/index.js
index a7a30db52c..ed8bf55efe 100644
--- a/pkg/webui/components/form/submit/index.js
+++ b/pkg/webui/components/form/submit/index.js
@@ -16,37 +16,34 @@ import React from 'react'
import PropTypes from '@ttn-lw/lib/prop-types'
-import FormContext from '../context'
-
-class FormSubmit extends React.Component {
- static contextType = FormContext
-
- static propTypes = {
- component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
- disabled: PropTypes.bool,
+import { useFormContext } from '..'
+
+const FormSubmit = props => {
+ const { component: Component, disabled, ...rest } = props
+ const formContext = useFormContext()
+
+ const submitProps = {
+ isValid: formContext.isValid,
+ isSubmitting: formContext.isSubmitting,
+ isValidating: formContext.isValidating,
+ submitCount: formContext.submitCount,
+ dirty: formContext.dirty,
+ validateForm: formContext.validateForm,
+ validateField: formContext.validateField,
+ disabled: formContext.disabled || disabled,
}
- static defaultProps = {
- component: 'button',
- disabled: false,
- }
+ return
+}
- render() {
- const { component: Component, disabled, ...rest } = this.props
-
- const submitProps = {
- isValid: this.context.isValid,
- isSubmitting: this.context.isSubmitting,
- isValidating: this.context.isValidating,
- submitCount: this.context.submitCount,
- dirty: this.context.dirty,
- validateForm: this.context.validateForm,
- validateField: this.context.validateField,
- disabled: this.context.disabled || disabled,
- }
-
- return
- }
+FormSubmit.propTypes = {
+ component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ disabled: PropTypes.bool,
+}
+
+FormSubmit.defaultProps = {
+ component: 'button',
+ disabled: false,
}
export default FormSubmit
diff --git a/pkg/webui/console/components/webhook-template-form/index.js b/pkg/webui/console/components/webhook-template-form/index.js
index e594e5a478..bed01ea334 100644
--- a/pkg/webui/console/components/webhook-template-form/index.js
+++ b/pkg/webui/console/components/webhook-template-form/index.js
@@ -130,7 +130,6 @@ export default class WebhookTemplateForm extends Component {
validationSchema={validationSchema}
initialValues={initialValues}
error={error}
- formikRef={this.form}
>