import React from 'react' ; import styled from 'styled-components' ; import { Box } from 'design' ; import FileListItem from './../FileListItem' ; import { File } from './../types' ; type FileListProps = { files : File [ ] ; onUpdate : ( partial : Partial < File > ) => void ; onRemove : ( id : number ) => void ; } ; export default function FileList ( { files , onUpdate , onRemove } ) { if ( files . length === 0 ) { return null ; } const $files = files . map ( file => { const key = file . id ; const props = { onUpdate , key , file , onRemove , } ; return < FileListItem { ... props } / > ; } ) ; return ( < Box mt = { 3 } > < ListHeaders > < Box width = "360px" > File < /Box> < Box width = "80px" textAlign = "right" > Status < /Box> < /ListHeaders> < ListItems > { $files } < /ListItems> < /Box>); } const ListHeaders = styled . div `
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: ${ props => props . theme . bold };
` ; const ListItems = styled . div `
  overflow: auto;
  max-height: 300px;
  // scrollbars
  padding-right: 16px;
  margin-right: -16px;
` ;