@ipr/nexus-form-state v1.0.0

@ipr/nexus-form-state

Nexus Form API between Nexus Bridge and React components with state container

Development

yarn
yarn build

Installation

yarn add @ipr/nexus-form-state

Usage

1. Create an initial state for the form applet:

import { ControlState, FormState } from '@ipr/nexus-form-state'

const controlState: ControlState = {
  label: '',
  value: '',
  readonly: false,
  required: false,
  displayFormat: ''
}

const initialState: FormState = {
  Id: controlState,
  Description: controlState
}

2. Add an integration within React component:

import * as React from 'react'
import { useFormState } from '@ipr/nexus-form-state'
import { InputField } from '@ipr/nexus-react-components'

interface FormProps {
  appletName: string
  initialState: FormState
}

const FormApplet: React.FunctionComponent<FormProps> = ({
  appletName,
  initialState
}) => {
  const [formApi, formState, initialValues, isLoading] = useFormState(
    appletName,
    initialState
  )

  const { saveRecord, setControlValue } = formApi

  return React.useMemo(
    () =>
      !isLoading && (
        <Formik initialValues={initialValues} onSubmit={saveRecord}>
          {({ values, errors, touched, handleChange, handleBlur }) => (
            <Form>
              <InputField
                name="Description"
                label="Description"
                value={values['Description'] as string}
                required={formState['Description'].required}
                readonly={formState['Description'].readonly}
                isTouched={touched && touched['Description']}
                errorMessage={errors && errors['Description']}
                handleChange={handleChange}
                handleBlur={handleBlur}
                setFieldValue={setControlValue}
              />
            </Form>
          )}
        </Formik>
      ),
    [formState, initialValues, isLoading, saveRecord, setControlValue]
  )
}

References

• @ipr/nexus-form-state