react-hook-form#useController JavaScript Examples

InputTextAuto = ({
	className = '',
	isError = false,
	suggestionList = [],
	defaultValue,
	control,
	name,
	...rest
}) => {
	const inputBaseStyle = `${className} input-text flex items-center relative w-full px-3 py-2 rounded-lg`
	const inputBgStyle =
		'bg-white bg-opacity-10 focus:bg-white focus:bg-opacity-20 focus:border-transparent'
	const inputBorderStyle = 'outline-none'
	const inputTextStyle = 'text-white text-opacity-90 text-body text-base '

	const inputStyle = `${inputBaseStyle} ${inputBgStyle} ${inputBorderStyle} ${inputTextStyle} ${
		isError ? 'input-text--error' : ''
	}`

	const {
		field: { ref, onChange, value },
		// eslint-disable-next-line no-unused-vars
		meta: { invalid, isTouched, isDirty },
	} = useController({
		name,
		control,
		rules: { required: true },
		defaultValue,
	})

	const [showSuggestion, setShowSuggestion] = useState(false)

	const filteredSuggestion =
		value?.length > 0
			? suggestionList.filter((s) => value && s.toLowerCase().includes(value.toLowerCase()))
			: suggestionList

	const _onChange = async (val) => {
		setShowSuggestion(true)
		onChange(val)
	}

	return (
		<div className="relative w-full">
			<input
				ref={ref}
				className={inputStyle}
				onBlur={() => setShowSuggestion(false)}
				onChange={(e) => _onChange(e.target.value)}
				value={value}
				autoComplete="off"
				{...rest}
			/>
			<div
				className={`w-full z-30 ${
					showSuggestion && filteredSuggestion.length > 0 ? 'block' : 'hidden'
				}`}
			>
				<div className="absolute z-30 inline-block text-sm font-thin w-full bg-gray-600 rounded-md overflow-hidden mt-1 shadow-xl">
					<Scrollbars autoHeight autoHeightMin={0} autoHeightMax={120}>
						{filteredSuggestion.map((s, index) => {
							return (
								<div
									key={index}
									onMouseDown={(e) => {
										e.preventDefault()
										onChange(s)
										setShowSuggestion(false)
									}}
									className="cursor-pointer hover:bg-gray-500"
								>
									<p className="p-2 text-opacity-70 text-xs">{s}</p>
								</div>
							)
						})}
					</Scrollbars>
				</div>
			</div>
		</div>
	)
}

Action = (props) => {
  const { deleteAction, actionPath, index, hideRemoveButton } = props
  const { t } = useTranslation()

  const { control } = useFormContext()

  const actionIndex = index + 1

  const validateContract = (contract) => {
    return (
      (Boolean(contract.abi) && Boolean(contract.address)) ||
      t('contractRequiredForAction', { number: actionIndex })
    )
  }

  const validateFn = (fn) => {
    return Boolean(fn.name) || t('functionRequiredForAction', { number: actionIndex })
  }

  const {
    field: { value: contract, onChange: contractOnChange }
  } = useController({
    name: `${actionPath}.contract`,
    control,
    rules: { validate: validateContract },
    defaultValue: EMPTY_CONTRACT
  })

  const {
    field: { value: fn, onChange: fnOnChange }
  } = useController({
    name: `${actionPath}.contract.fn`,
    control,
    rules: { required: t('blankIsRequired', { blank: t('function') }), validate: validateFn },
    defaultValue: EMPTY_FN
  })

  const setContract = (contract) => {
    contractOnChange({
      ...contract
    })
  }

  useEffect(() => {
    fnOnChange(EMPTY_FN)
  }, [contract])

  const setFunction = (fn) => {
    fnOnChange(fn)
  }

  return (
    <div className='mt-4 mx-auto p-4 sm:py-8 sm:px-10 rounded-xl bg-light-purple-10'>
      <div className='flex flex-row justify-between'>
        <h6 className='mb-4'>{t('actionNumber', { number: actionIndex })}</h6>
        {!hideRemoveButton && (
          <button
            className='trans hover:opacity-50'
            onClick={(e) => {
              e.preventDefault()
              deleteAction()
            }}
          >
            <FeatherIcon icon='x' className='stroke-2 w-4 h-4 trans stroke-current text-inverse' />
          </button>
        )}
      </div>

      <div className='flex flex-col'>
        <ContractSelect
          setContract={setContract}
          currentContract={contract}
          contractPath={`${actionPath}.contract`}
        />
        <div className='flex flex-col xs:pl-8 mt-2'>
          <FunctionSelect
            contract={contract}
            setFunction={setFunction}
            fn={fn}
            fnPath={`${actionPath}.contract.fn`}
          />
        </div>
      </div>
    </div>
  )
}