diff --git a/web/components/stepper.css b/web/components/stepper.css new file mode 100644 --- /dev/null +++ b/web/components/stepper.css @@ -0,0 +1,41 @@ +.stepperContainer { + display: flex; + flex-direction: column; + flex-shrink: 0; +} + +.stepperItem { + overflow-y: auto; + height: 100%; +} + +.stepperFooter { + display: flex; + justify-content: flex-end; + gap: 12px; +} + +.button { + position: relative; +} + +.buttonContainer { + display: flex; + flex-direction: column; + align-items: center; +} + +.hide { + visibility: hidden; + height: 0; +} + +.errorMessage { + color: var(--error); + font-style: italic; + height: 32px; + + display: flex; + align-items: center; + justify-content: flex-start; +} diff --git a/web/components/stepper.react.js b/web/components/stepper.react.js new file mode 100644 --- /dev/null +++ b/web/components/stepper.react.js @@ -0,0 +1,112 @@ +// @flow + +import * as React from 'react'; + +import LoadingIndicator from '../loading-indicator.react'; +import Button from './button.react'; +import css from './stepper.css'; + +export type ButtonProps = { + +content: React.Node, + +disabled?: boolean, + +loading?: boolean, + +onClick: () => void, +}; + +type ButtonType = 'prev' | 'next'; + +type ActionButtonProps = { + buttonProps: ButtonProps, + type: ButtonType, +}; + +function ActionButton(props: ActionButtonProps) { + const { buttonProps, type } = props; + const { content, loading, disabled, onClick } = buttonProps; + + const buttonContent = loading ? ( + <> +
{content}
+ + + ) : ( + content + ); + + return ( + + ); +} + +type ItemProps = { + +content: React.Node, + +errorMessage?: string, + +prevProps?: ButtonProps, + +nextProps?: ButtonProps, +}; + +function StepperItem(props: ItemProps): React.Node { + const { content, errorMessage, prevProps, nextProps } = props; + + const prevButton = React.useMemo( + () => + prevProps ? : null, + [prevProps], + ); + + const nextButton = React.useMemo( + () => + nextProps ? : null, + [nextProps], + ); + + return ( + <> +
{content}
+
{errorMessage}
+
+ {prevButton} + {nextButton} +
+ + ); +} + +type ContainerProps = { + +activeStep: string, + +className?: string, + +children: React.ChildrenArray>, +}; + +function StepperContainer(props: ContainerProps): React.Node { + const { children, activeStep, className = '' } = props; + + const index = new Map( + React.Children.toArray(children).map((child, i) => [ + child.key?.toString().substring(2), + i, + ]), + ); + + const activeComponent = children[index.get(activeStep) ?? 0]; + + return ( +
+ {activeComponent} +
+ ); +} + +const Stepper = { + Container: StepperContainer, + Item: StepperItem, +}; + +export default Stepper;