export default function VerifyCodeInput()

in packages-fetcher/console-fetcher-risk-prompt/src/rc/verify-code-input/index.tsx [106:175]
63 lines of code
4 McCabe index (conditional complexity)

export default function VerifyCodeInput({
  inputWidth,
  dialogSubmitType,
  verifyCodeInputType,
  generateCodeButtonProps,
  keyOfAuthErrorMessageObject,
  handleInputChange,
  ...inputProps
}: IVerifyCodeInputProps): JSX.Element {
  const {
    codeType,
    accountId,
    setRiskCanceledErrorProps,
    reRequestWithVerifyResult
  } = useModelProps();
  const contentContext = useDialog<IRiskPromptResolveData, IDialogData>();
  const {
    updateData,
    data: {
      dialogBlocked,
      mainAccountRiskInfo,
      errorMessageObject,
      primaryButtonDisabledObject
    }
  } = contentContext;

  const [stateVerifyCode, setStateVerifyCode] = useState<string>('');
  const [stateInputFocused, setStateInputFocused] = useState<boolean>(false);
  const [stateErrorMessage, setStateErrorMessage] = useState<string>(intl('message:vmfa_input_empty_tip'));
  const [stateNoWindVaneHandler, setStateNoWindVaneHandler] = useState<boolean>(false);

  const updateErrorMessage = useCallback((errorMessage: string) => {
    if (keyOfAuthErrorMessageObject) {
      updateData({
        errorMessageObject: {
          ...errorMessageObject,
          [keyOfAuthErrorMessageObject]: errorMessage
        }
      });
    }
  }, [errorMessageObject, keyOfAuthErrorMessageObject, updateData]);

  const onChange = useCallback((verifyCode: string) => {
    const inputErrorMessage = getInputError(verifyCode);

    setStateErrorMessage(inputErrorMessage);
    setStateVerifyCode(verifyCode);

    if (keyOfAuthErrorMessageObject) {
      updateData({
        primaryButtonDisabledObject: {
          ...primaryButtonDisabledObject,
          [keyOfAuthErrorMessageObject]: Boolean(inputErrorMessage)
        }
      });
    }

    if (handleInputChange) {
      handleInputChange({
        verifyCode
      });
    }
  }, [keyOfAuthErrorMessageObject, primaryButtonDisabledObject, handleInputChange, updateData]);

  const innerRight = useMemo(() => {
    return <XIcon onClick={() => {
      setStateVerifyCode('');
      updateErrorMessage('');
    }} />;
  }, [updateErrorMessage]);