diff --git a/renderer/components/UI/Wizard.js b/renderer/components/UI/Wizard.js index 1cb602c83fd..57f7322891a 100644 --- a/renderer/components/UI/Wizard.js +++ b/renderer/components/UI/Wizard.js @@ -1,9 +1,10 @@ /* eslint-disable react/no-multi-comp */ -import React, { createContext } from 'react' +import React, { createContext, useRef, useCallback } from 'react' import PropTypes from 'prop-types' import { Transition, config } from 'react-spring/renderprops.cjs' import { Box, Flex } from 'rebass/styled-components' +import { useOnKeydown } from 'hooks' import ArrowLeft from 'components/Icon/ArrowLeft' import ArrowRight from 'components/Icon/ArrowRight' import Button from './Button' @@ -75,49 +76,55 @@ SkipButton.propTypes = { children: PropTypes.node, } -class NextButton extends React.Component { - static propTypes = { - children: PropTypes.node, - navigateTo: PropTypes.number, - } - - static defaultProps = { - children: 'Next', - navigateTo: null, - } +const NextButton = props => { + const { children, navigateTo } = props + const formApiRef = useRef(null) + const onEnter = useCallback(() => { + const { current: formApi } = formApiRef + if (formApi) { + formApi.submitForm() + } + }, [formApiRef]) + useOnKeydown('Enter', onEnter, true) + return ( + + {({ wizardApi, wizardState, formApi }) => { + const { formState } = wizardState + formApiRef.current = formApi + return ( + + ) + }} + + ) +} - render() { - const { children, navigateTo } = this.props +NextButton.propTypes = { + children: PropTypes.node, + navigateTo: PropTypes.number, +} - return ( - - {({ wizardApi, wizardState }) => { - const { formState } = wizardState - return ( - - ) - }} - - ) - } +NextButton.defaultProps = { + children: 'Next', + navigateTo: null, } class BackButton extends React.Component {