MultiAction.js

import React, { Fragment } from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { H2, Button, Spinner } from '@pubsweet/ui'
import { compose, setDisplayName, withHandlers } from 'recompose'

import Text from '../Text'
import IconButton from '../IconButton'

const MultiAction = ({
  title,
  content,
  onClose,
  subtitle,
  onConfirm,
  modalError,
  isFetching,
  confirmText = 'OK',
  cancelText = 'Cancel',
}) => (
  <Root>
    <IconButton icon="x" onClick={onClose} right={5} secondary top={5} />
    <H2>{title}</H2>
    {subtitle && <Text secondary>{subtitle}</Text>}
    <Text dangerouslySetInnerHTML={{ __html: content }} />
    <Buttons isFetching={isFetching}>
      {isFetching ? (
        <Spinner size={3} />
      ) : (
        <Fragment>
          <Button onClick={onClose}>{cancelText}</Button>
          <Button onClick={onConfirm} primary>
            {confirmText}
          </Button>
        </Fragment>
      )}
    </Buttons>
  </Root>
)

export default compose(
  withHandlers({
    onClose: ({ onCancel, hideModal }) => () => {
      if (onCancel && typeof onCancel === 'function') {
        onCancel()
      } else {
        hideModal()
      }
    },
  }),
  setDisplayName('MultiActionModal'),
)(MultiAction)

// #region styles
const Root = styled.div`
  align-items: center;
  border: ${th('borderWidth')} ${th('borderStyle')} transparent;
  border-radius: ${th('borderRadius')};
  box-shadow: ${th('boxShadow')};
  display: flex;
  flex-direction: column;
  position: relative;
  padding: calc(${th('gridUnit')} * 5);
  width: calc(${th('gridUnit')} * 60);

  ${H2} {
    margin: 0 0 ${th('gridUnit')} 0;
  }

  ${Text} {
    margin-bottom: ${th('gridUnit')};
  }
`

const Buttons = styled.div`
  display: flex;
  justify-content: ${props => (props.isFetching ? 'center' : 'space-between')};
  margin-top: calc(${th('gridUnit')} * 3);
  width: 60%;
`
// #endregion