WizardStep.js

import React from 'react'
import { get } from 'lodash'
import styled from 'styled-components'
import { ValidatedField, Button, th } from '@pubsweet/ui'

import AutosaveIndicator from './AutosaveIndicator'

export default ({
  title,
  wizard,
  isFinal,
  isFirst,
  history,
  nextStep,
  subtitle,
  prevStep,
  formValues,
  dispatchFns,
  handleSubmit,
  confirmation,
  isRevisionFlow,
  toggleConfirmation,
  children: stepChildren,
  buttons: { backText, nextText },
  wizard: { confirmationModal: ConfirmationModal },
  ...rest
}) => (
  <Root width="82%">
    <FormContainer onSubmit={handleSubmit}>
      <Title>{title}</Title>
      {subtitle && (
        <Subtitle
          dangerouslySetInnerHTML={{ __html: subtitle }} // eslint-disable-line
        />
      )}
      {stepChildren &&
        stepChildren.map(
          ({
            fieldId,
            validate,
            dependsOn,
            renderComponent: Comp,
            parse,
            ...rest
          }) => {
            if (
              dependsOn &&
              get(formValues, dependsOn.field) !== dependsOn.condition
            ) {
              return null
            }
            return (
              <CustomValidatedField className="custom-field" key={fieldId}>
                <ValidatedField
                  component={input => (
                    <div data-test={fieldId}>
                      <Comp {...rest} {...input} {...dispatchFns} />
                    </div>
                  )}
                  name={fieldId}
                  parse={parse}
                  validate={validate}
                />
              </CustomValidatedField>
            )
          },
        )}
      <ButtonContainer>
        <Button
          data-test="button-prev"
          onClick={isFirst ? () => history.push('/') : prevStep}
        >
          {backText}
        </Button>
        <Button data-test="button-next" primary type="submit">
          {nextText}
        </Button>
      </ButtonContainer>
      {confirmation && (
        <ModalContainer>
          <ConfirmationModal toggleConfirming={toggleConfirmation} />
        </ModalContainer>
      )}
    </FormContainer>
    <AutosaveIndicator />
  </Root>
)
// #region styles

const CustomValidatedField = styled.div`
  div {
    div:last-child {
      margin-top: 0;
    }
  }
`

const Root = styled.div`
  align-items: stretch;
  background-color: ${th('colorTextReverse')};
  border: ${th('borderDefault')};
  border-radius: ${th('borderRadius')};
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: ${({ width }) => width || '800px'};
`

const FormContainer = styled.form`
  display: flex;
  flex-direction: column;
  padding: calc(${th('subGridUnit')} * 3);
`
const Title = styled.h5`
  align-self: center;
  font-size: ${th('fontSizeHeading5')};
  margin-bottom: 10px;
`

const Subtitle = styled.div`
  align-self: center;
  margin-bottom: ${th('gridUnit')};
`

const ButtonContainer = styled.div`
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: space-around;
  margin: calc(${th('gridUnit')}) 0;
  width: ${({ width }) => width || '400px'};
`

const ModalContainer = styled.div`
  align-items: center;
  background: ${th('colorBackground')};
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
`
// #endregion