ResponseToReviewer.js

import React from 'react'
import { isEmpty } from 'lodash'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { FilePicker, ValidatedField } from '@pubsweet/ui'

import {
  Row,
  Item,
  Textarea,
  ActionLink,
} from 'pubsweet-component-faraday-ui/src'

import {
  Label,
  FileItem,
  ContextualBox,
  ItemOverrideAlert,
  withFilePreview,
  withFileDownload,
} from '../'

const ResponseToReviewer = ({
  file,
  onDelete,
  onUpload,
  previewFile,
  downloadFile,
}) => (
  <ContextualBox
    label="Response to Reviewer Comments"
    mt={1}
    startExpanded
    transparent
  >
    <Root>
      <Row alignItems="center" justify="space-between">
        <Item>
          <Label required>Your Reply</Label>
          <FilePicker
            allowedFileExtensions={['pdf', 'doc', 'docx', 'txt', 'rdf', 'odt']}
            disabled={!isEmpty(file)}
            onUpload={onUpload}
          >
            <ActionLink disabled={!isEmpty(file)} icon="plus">
              UPLOAD FILE
            </ActionLink>
          </FilePicker>
        </Item>
      </Row>

      <Row>
        <ItemOverrideAlert vertical>
          <ValidatedField
            component={Textarea}
            name="responseToReviewers.content"
          />
        </ItemOverrideAlert>
      </Row>

      {!isEmpty(file) && (
        <Row justify="flex-start" mt={1}>
          <FileItem
            item={file}
            onDelete={onDelete}
            onDownload={f => downloadFile(f)}
            onPreview={f => previewFile(f)}
          />
        </Row>
      )}
    </Root>
  </ContextualBox>
)

const Root = styled.div`
  border-left: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
  padding-left: calc(${th('gridUnit')} * 1);
`

export default withFileDownload(withFilePreview(ResponseToReviewer))