FileSection.js

import React from 'react'
import { th } from '@pubsweet/ui-toolkit'
import { FilePicker } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { compose, withProps } from 'recompose'

import { Label, ActionLink, Text, Row, Item, FileItem, DragHandle } from './'

const EXTENSIONS = {
  pdf: 'PDF',
  doc: 'Doc',
  docx: 'DocX',
  png: 'PNG',
}

const FileSection = ({
  title,
  isLast,
  isFirst,
  required,
  supportedFormats,
  allowedFileExtensions,
}) => (
  <Root isFirst={isFirst} isLast={isLast}>
    <Row alignItems="center">
      <Item>
        <Label required={required}>{title}</Label>
        <FilePicker
          allowedFileExtensions={allowedFileExtensions}
          onUpload={file => console.log('uploaded ', file)}
        >
          <ActionLink icon="plus" size="small">
            UPLOAD FILE
          </ActionLink>
        </FilePicker>
      </Item>
      {supportedFormats && (
        <Item justify="flex-end">
          <Text fontStyle="italic" secondary>
            Supported file formats: {supportedFormats}
          </Text>
        </Item>
      )}
    </Row>
    <FileItem
      dragHandle={DragHandle}
      file={{
        id: 'file1',
        name: 'myfile.docx',
        size: 51312,
      }}
      mb={1}
    />
    <FileItem
      dragHandle={DragHandle}
      file={{
        id: 'file1',
        name: 'myfile.docx',
        size: 51312,
      }}
      mb={1}
    />
  </Root>
)

export default compose(
  withProps(({ allowedFileExtensions = [] }) => ({
    supportedFormats: allowedFileExtensions
      .map(ext => EXTENSIONS[ext.toLowerCase()])
      .join(', '),
  })),
)(FileSection)

// #region styles
const radiusHelpers = props => {
  const marginTop = props.isFirst
    ? css`
        border-top-left-radius: ${th('borderRadius')};
        border-top-right-radius: ${th('borderRadius')};
      `
    : css``

  const marginBottom = props.isLast
    ? css`
        border-bottom-left-radius: ${th('borderRadius')};
        border-bottom-right-radius: ${th('borderRadius')};
      `
    : css``

  return css`
    border-radius: none;
    ${marginTop};
    ${marginBottom};
  `
}

const Root = styled.div`
  background: ${th('colorBackground')};
  min-height: calc(${th('gridUnit')} * 22);
  padding: 0 ${th('gridUnit')};

  ${radiusHelpers};
  border-bottom: ${props => (!props.isLast ? '1px dashed #dbdbdb' : 'none')};
`
// #endregion