CrossBucket push, frontend

catalog/app/components/Dropzone/DropMessage.js

@@ -0,0 +1,45 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    ...t.typography.body2,
+    alignItems: 'center',
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+    minHeight: t.spacing(4),
+    paddingBottom: t.spacing(1),
+    paddingTop: t.spacing(1),
+    textAlign: 'center',
+  },
+  warning: {
+    color: t.palette.warning.dark,
+  },
+  error: {
+    color: t.palette.error.main,
+  },
+}))
+
+export default function DropMessage({ disabled, error, warning }) {
+  const classes = useStyles()
+
+  const label = React.useMemo(() => {
+    if (error) return error
+    if (warning) return warning
+    if (disabled) return ''
+    return 'Drop files here or click to browse'
+  }, [disabled, error, warning])
+
+  return (
+    <div
+      className={cx(classes.root, {
+        [classes.error]: !!error,
+        [classes.warning]: !!warning,
+      })}
+    >
+      {label}
+    </div>
+  )
+}

catalog/app/components/Dropzone/DropMessage.spec.js

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import DropMessage from './DropMessage'
+
+describe('components/Dropzone/DropMessage', () => {
+  it('should render with default message', () => {
+    const tree = renderer.create(<DropMessage />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should render error', () => {
+    const tree = renderer
+      .create(<DropMessage error="This is errror" warning="This is warning" />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should render warning', () => {
+    const tree = renderer.create(<DropMessage warning="This is warning" />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should be empty when disabled', () => {
+    const tree = renderer
+      .create(<DropMessage disabled error="This is errror" warning="This is warning" />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

catalog/app/components/Dropzone/Dropzone.js

@@ -0,0 +1,100 @@
+import cx from 'classnames'
+import * as React from 'react'
+import { useDropzone } from 'react-dropzone'
+import * as M from '@material-ui/core'
+
+import DropMessage from './DropMessage'
+import FileEntry from './FileEntry'
+import Header from './Header'
+
+const useStyles = M.makeStyles((t) => ({
+  dropzone: {
+    marginTop: t.spacing(2),
+    position: 'relative',
+  },
+  dropArea: {
+    background: t.palette.action.hover,
+    border: `1px solid ${t.palette.action.disabled}`,
+    borderRadius: t.shape.borderRadius,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 140,
+    outline: 'none',
+    overflow: 'hidden',
+  },
+  dragOver: {
+    background: t.palette.action.selected,
+  },
+  warning: {
+    borderColor: t.palette.warning.dark,
+  },
+  error: {
+    borderColor: t.palette.error.main,
+  },
+  files: {
+    borderBottom: `1px solid ${t.palette.action.disabled}`,
+    maxHeight: 200,
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+}))
+
+export default function Dropzone({
+  className,
+  disabled,
+  error,
+  files,
+  onDrop,
+  overlayElement,
+  statsElement,
+  warning,
+}) {
+  const classes = useStyles()
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
+
+  return (
+    <div className={className}>
+      <Header disabled error={error} warning={warning}>
+        {statsElement}
+      </Header>
+
+      <div className={classes.dropzone}>
+        <div
+          {...getRootProps({
+            className: cx(classes.dropArea, {
+              [classes.dragOver]: isDragActive && !disabled,
+              [classes.error]: !!error,
+              [classes.warning]: !!warning,
+            }),
+          })}
+        >
+          <input {...getInputProps()} />
+
+          {!!files.length && (
+            <div
+              className={cx(classes.files, {
+                [classes.error]: !!error,
+                [classes.warning]: !!warning,
+              })}
+            >
+              {files.map((file) => (
+                <FileEntry
+                  iconName={file.iconName}
+                  key={file.key}
+                  path={file.path}
+                  size={file.size}
+                />
+              ))}
+            </div>
+          )}
+
+          <DropMessage disabled={disabled} error={error} warning={warning} />
+        </div>
+
+        {overlayElement}
+      </div>
+    </div>
+  )
+}

catalog/app/components/Dropzone/Dropzone.spec.js

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import Dropzone from './Dropzone'
+
+describe('components/Dropzone/Dropzone', () => {
+  it('should render', () => {
+    const tree = renderer.create(<Dropzone files={[]} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

catalog/app/components/Dropzone/FileEntry.js

@@ -0,0 +1,52 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import { readableBytes } from 'utils/string'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'center',
+    background: t.palette.background.paper,
+    display: 'flex',
+    '&:not(:last-child)': {
+      borderBottomStyle: 'solid',
+      borderBottomWidth: '1px',
+      borderColor: 'inherit',
+    },
+  },
+  noIcon: {
+    paddingLeft: t.spacing(1),
+  },
+  filePath: {
+    ...t.typography.body2,
+    flexGrow: 1,
+    marginRight: t.spacing(1),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  fileSize: {
+    ...t.typography.body2,
+    color: t.palette.text.secondary,
+    marginRight: t.spacing(0.5),
+  },
+}))
+
+export default function FileEntry({ className, iconName, path, size, title, onClick }) {
+  const classes = useStyles()
+
+  return (
+    <div className={cx(classes.root, className, { [classes.noIcon]: !iconName })}>
+      {iconName && (
+        <M.IconButton onClick={onClick} size="small" title={title}>
+          <M.Icon fontSize="inherit">{iconName}</M.Icon>
+        </M.IconButton>
+      )}
+      <div className={classes.filePath} title={path}>
+        {path}
+      </div>
+      <div className={classes.fileSize}>{readableBytes(size)}</div>
+    </div>
+  )
+}

catalog/app/components/Dropzone/FilesStats.js

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import { readableBytes } from 'utils/string'
+
+const useStyles = M.makeStyles(() => ({
+  icon: {
+    marginLeft: 4,
+  },
+}))
+
+export default function FilesStats({ files, warning }) {
+  const classes = useStyles()
+
+  const totalSize = React.useMemo(() => files.reduce((sum, f) => sum + f.size, 0), [
+    files,
+  ])
+
+  if (!files.length) return null
+
+  return (
+    <span>
+      : {files.length} ({readableBytes(totalSize)})
+      {warning && <M.Icon className={classes.icon}>error_outline</M.Icon>}
+    </span>
+  )
+}

catalog/app/components/Dropzone/FilesStats.spec.js

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import FilesStats from './FilesStats'
+
+describe('components/Dropzone/FilesStats', () => {
+  it('should render', () => {
+    const tree = renderer.create(<FilesStats files={[]} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  // FIXME: fix "jest + react-intl"
+  it.skip('should render files total size', () => {
+    const tree = renderer
+      .create(<FilesStats files={[{ size: 100000 }, { size: 200000 }]} />)
+      .toJSON()
+    expect(tree).toMatchInlineSnapshot()
+  })
+})

catalog/app/components/Dropzone/Header.js

@@ -0,0 +1,43 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'center',
+    display: 'flex',
+    height: 24,
+  },
+  title: {
+    ...t.typography.body1,
+    display: 'flex',
+  },
+  warning: {
+    color: t.palette.warning.dark,
+  },
+  error: {
+    color: t.palette.error.main,
+  },
+  disabled: {
+    color: t.palette.text.secondary,
+  },
+}))
+
+export default function Header({ children, disabled, error, warning }) {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <div
+        className={cx(classes.title, {
+          [classes.disabled]: disabled,
+          [classes.error]: !!error,
+          [classes.warning]: !!warning,
+        })}
+      >
+        Files
+        {children}
+      </div>
+    </div>
+  )
+}

catalog/app/components/Dropzone/Header.spec.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import Header from './Header'
+
+describe('components/Dropzone/Header', () => {
+  it('should render', () => {
+    const tree = renderer.create(<Header />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should change color on error', () => {
+    const tree = renderer.create(<Header error />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should change color on warning', () => {
+    const tree = renderer.create(<Header warning />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

catalog/app/components/Dropzone/Overlay.js

@@ -0,0 +1,26 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    alignItems: 'center',
+    background: t.palette.action.disabledBackground,
+    border: `1px solid ${t.palette.action.disabled}`,
+    borderRadius: t.shape.borderRadius,
+    bottom: 0,
+    cursor: 'not-allowed',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))
+
+export default function Overlay({ children, className }) {
+  const classes = useStyles()
+  return <div className={cx(classes.root, className)}>{children}</div>
+}