react-hook-form#FormProvider JavaScript Examples

ConnectionFormProvider = ({children, defaultValues}) => {
  const methods = useForm()
  const {reset} = methods

  // 解决表单不能根据默认值重新填充的问题
  // https://github.com/react-hook-form/react-hook-form/discussions/2282#discussioncomment-39308
  useEffect(() => {
    reset(defaultValues)
  }, [defaultValues.id])

  return (
    <FormProvider {...methods}>
      {children}
    </FormProvider>
  )
}

function App(props) {
  const methods = useForm({
    resolver: yupResolver(validationSchema),
  });
  const { handleSubmit, errors } = methods;

  const onSubmit = (data) => {
    console.log(data);
  };

  const numberData = [
    {
      id: "10",
      label: "Ten",
    },
    {
      id: "20",
      label: "Twenty",
    },
    {
      id: "30",
      label: "Thirty",
    },
  ];

  const radioGroupOptions = [
    {
      value: "female",
      label: "Female",
    },
    {
      value: "male",
      label: "Male",
    },
    {
      value: "other",
      label: "Other",
    },
  ];

  return (
    <div style={{ padding: "10px" }}>
      <Button
        variant="contained"
        color="primary"
        onClick={handleSubmit(onSubmit)}
      >
        SUBMIT
      </Button>

      <div style={{ padding: "10px" }}>
        <FormProvider {...methods}>
          <form>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <FormInput name="name" label="Name" />
              </Grid>
              <Grid item xs={6}>
                <FormInput
                  name="nameV"
                  label="Name with Validation"
                  required={true}
                  errorobj={errors}
                />
              </Grid>
              <Grid item xs={6}>
                <FormSelect name="sel" label="Numbers" options={numberData} />
              </Grid>
              <Grid item xs={6}>
                <FormSelect
                  name="selV"
                  label="Numbers with Validation"
                  options={numberData}
                  required={true}
                  errorobj={errors}
                />
              </Grid>
              <Grid item xs={6}>
                <FormSelectAutoComplete
                  name="selAuto"
                  label="Auto Select Numbers"
                  options={numberData}
                  isMulti
                />
              </Grid>
              <Grid item xs={6}>
                <FormSelectAutoComplete
                  name="selAutoV"
                  label="Auto Select Numbers with Validation"
                  options={numberData}
                  isMulti
                  required={true}
                  errorobj={errors}
                />
              </Grid>
              <Grid item xs={6}>
                <FormDatePicker name="txtDate" label="Mui Date" />
              </Grid>
              <Grid item xs={6}>
                <FormDatePicker
                  name="txtDateV"
                  label="Mui Date Validation"
                  required={true}
                  errorobj={errors}
                />
              </Grid>
              <Grid item xs={6}>
                <FormCheckbox name="chk" label="Mui Checkbox" />
              </Grid>
              <Grid item xs={6}>
                <FormRadio
                  name="gender"
                  label="Gender"
                  options={radioGroupOptions}
                />
              </Grid>
            </Grid>
          </form>
        </FormProvider>
      </div>
    </div>
  );
}

ProposalCreationForm = () => {
  const { t } = useTranslation()
  const { refetch: refetchAllProposals } = useAllProposals()

  const { userCanCreateProposal } = useUserCanCreateProposal()
  const formMethods = useForm({
    mode: 'onSubmit',
    defaultValues: {
      title: '',
      description: '',
      actions: [EMPTY_ACTION]
    }
  })

  const [showSummary, setShowSummary] = useState(false)
  const [validFormData, setValidFormData] = useState()
  const [showModal, setShowModal] = useState(false)

  const chainId = useGovernanceChainId()
  const governanceAddress = CONTRACT_ADDRESSES[chainId]?.GovernorAlpha
  const [txId, setTxId] = useState(0)
  const sendTx = useSendTransaction(t, poolToast)
  const tx = useTransaction(txId)

  const onCancelled = () => setShowModal(false)

  const onSuccess = () => {
    refetchAllProposals()
  }

  const submitTransaction = async () => {
    const params = getProposeParamsFromForm(validFormData, t)
    if (!params) return

    const txId = await sendTx({
      name: t('propose'),
      contractAbi: GovernorAlphaABI,
      contractAddress: governanceAddress,
      method: 'propose',
      params,
      callbacks: {
        onCancelled,
        onSuccess
      }
    })
    setTxId(txId)
    setShowModal(true)
  }

  const onSubmit = async (data) => {
    window?.scrollTo(0, 0)
    setShowSummary(true)
    setValidFormData(data)
  }
  const onError = (data) => {
    const parsedErrorMessages = []

    if (data?.title?.message) parsedErrorMessages.push(data.title.message)
    if (data?.description?.message) parsedErrorMessages.push(data.description.message)

    if (data?.actions) {
      data?.actions.forEach((action) => {
        if (action?.contract?.address?.message) {
          parsedErrorMessages.push(action.contract.address.message)
        }

        if (action?.contract?.message) {
          parsedErrorMessages.push(action.contract.message)
        }

        if (action?.contract?.fn?.message) {
          parsedErrorMessages.push(action.contract.fn.message)
        }

        if (action?.contract?.fn?.payableAmount?.message) {
          parsedErrorMessages.push(action.contract.fn.payableAmount.message)
        }

        if (action?.contract?.fn?.values) {
          Object.keys(action.contract.fn.values).forEach((fnName) => {
            if (action.contract.fn.values[fnName]?.message) {
              parsedErrorMessages.push(action.contract.fn.values[fnName].message)
            }
          })
        }
      })
    }

    poolToast.error(parsedErrorMessages.join('. '))
  }

  const closeModal = () => {
    setShowModal(false)
    setShowSummary(false)
  }

  return (
    <>
      <ProposalTransactionModal
        tx={tx}
        isOpen={showModal}
        closeModal={closeModal}
        resetForm={formMethods.reset}
      />
      <FormProvider {...formMethods}>
        <form onSubmit={formMethods.handleSubmit(onSubmit, onError)}>
          <div className={classnames('flex flex-col', { hidden: showSummary })}>
            <ActionsCard />
            <TitleCard />
            <DescriptionCard />
            {!userCanCreateProposal && <ProposalCreationWarning />}
            <Button className='mb-16 w-full' disabled={!userCanCreateProposal} type='submit'>
              {t('previewProposal')}
            </Button>
          </div>

          {showSummary && (
            <ProposalSummary
              submitTransaction={submitTransaction}
              showForm={() => {
                setShowSummary(false)
                window.scrollTo(0, 0)
              }}
              getValues={formMethods.getValues}
              handleSubmit={formMethods.handleSubmit}
            />
          )}
        </form>
      </FormProvider>
    </>
  )
}