From c8a3b390c86cf15f7b8ee963ae9eefe0bb91da83 Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Thu, 1 Feb 2018 12:22:03 +0000
Subject: [PATCH] feat(ui): convert Files to a styled component
---
packages/ui/src/molecules/Files.js | 64 +++++++++++++++----
packages/ui/src/molecules/Files.local.scss | 36 -----------
packages/ui/test/Files.test.js | 30 +++++++++
.../ui/test/__snapshots__/Files.test.js.snap | 60 +++++++++++++++++
4 files changed, 140 insertions(+), 50 deletions(-)
delete mode 100644 packages/ui/src/molecules/Files.local.scss
create mode 100644 packages/ui/test/Files.test.js
create mode 100644 packages/ui/test/__snapshots__/Files.test.js.snap
diff --git a/packages/ui/src/molecules/Files.js b/packages/ui/src/molecules/Files.js
index d5d52d1b4..bf2ed8733 100644
--- a/packages/ui/src/molecules/Files.js
+++ b/packages/ui/src/molecules/Files.js
@@ -1,7 +1,47 @@
import React from 'react'
-import classes from './Files.local.scss'
+import styled from 'styled-components'
import Upload from './Upload'
+const Root = styled.div``
+const Uploader = styled.div``
+
+const FileList = styled.div`
+ display: flex;
+ flex-direction: column;
+ font-size: 0.9em;
+ font-style: italic;
+ line-height: 1.5;
+`
+
+const AttachButton = styled.button.attrs({
+ type: 'button',
+})`
+ background: transparent;
+ border: 1px dashed grey;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ margin-bottom: 2em;
+ padding: 10px;
+`
+
+/* Not used for now
+.button {
+ background: transparent;
+ border: 1px dashed grey;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ margin-bottom: 2em;
+ padding: 10px;
+}
+
+.button:hover {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+*/
+
class Files extends React.Component {
constructor(props) {
super(props)
@@ -49,27 +89,23 @@ class Files extends React.Component {
const { values, uploads } = this.state
return (
- <div className={classes.root}>
- <div className={classes.upload}>
- <button
- className={classes.attach}
- onClick={() => this.fileInput.click()}
- type="button"
- >
+ <Root>
+ <Uploader>
+ <AttachButton onClick={() => this.fileInput.click()}>
{buttonText}
- </button>
+ </AttachButton>
<input
- className={classes.input}
multiple
name={name}
onChange={this.handleChange}
ref={input => (this.fileInput = input)}
+ style={{ display: 'none' }}
type="file"
/>
- </div>
+ </Uploader>
- <div className={classes.files}>
+ <FileList>
{uploads &&
uploads.map(upload => (
<Upload
@@ -82,8 +118,8 @@ class Files extends React.Component {
))}
{values && values.map(uploadedFile)}
- </div>
- </div>
+ </FileList>
+ </Root>
)
}
}
diff --git a/packages/ui/src/molecules/Files.local.scss b/packages/ui/src/molecules/Files.local.scss
deleted file mode 100644
index 1737d0ea2..000000000
--- a/packages/ui/src/molecules/Files.local.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.input {
- display: none;
-}
-
-.button {
- background: transparent;
- border: 1px dashed grey;
- cursor: pointer;
- font-family: inherit;
- font-size: inherit;
- margin-bottom: 2em;
- padding: 10px;
-}
-
-.button:hover {
- border-color: var(--color-primary);
- color: var(--color-primary);
-}
-
-.files {
- display: flex;
- flex-direction: column;
- font-size: 0.9em;
- font-style: italic;
- line-height: 1.5;
-}
-
-.attach {
- background: transparent;
- border: 1px dashed grey;
- cursor: pointer;
- font-family: inherit;
- font-size: inherit;
- margin-bottom: 2em;
- padding: 10px;
-}
diff --git a/packages/ui/test/Files.test.js b/packages/ui/test/Files.test.js
new file mode 100644
index 000000000..a1bd436de
--- /dev/null
+++ b/packages/ui/test/Files.test.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import 'jest-styled-components'
+
+import Files from '../src/molecules/Files'
+
+const value = [
+ {
+ name: 'IMG_4346.JPG',
+ type: 'JPG',
+ size: 4346,
+ },
+]
+
+describe('Files', () => {
+ it('renders correctly', () => {
+ const tree = renderer.create(
+ <Files
+ buttonText="↑ Choose a file to upload"
+ uploadedFile={value => <div key={value.name}>{value.name}</div>}
+ uploadFile={file => new XMLHttpRequest()}
+ uploadingFile={({ file, progress, error }) => (
+ <div style={{ color: 'gray' }}>{file.name}</div>
+ )}
+ value={value}
+ />,
+ )
+ expect(tree).toMatchSnapshot()
+ })
+})
diff --git a/packages/ui/test/__snapshots__/Files.test.js.snap b/packages/ui/test/__snapshots__/Files.test.js.snap
new file mode 100644
index 000000000..e51113233
--- /dev/null
+++ b/packages/ui/test/__snapshots__/Files.test.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Files renders correctly 1`] = `
+.c1 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ font-size: 0.9em;
+ font-style: italic;
+ line-height: 1.5;
+}
+
+.c0 {
+ background: transparent;
+ border: 1px dashed grey;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ margin-bottom: 2em;
+ padding: 10px;
+}
+
+<div
+ className=""
+>
+ <div
+ className=""
+ >
+ <button
+ className="c0"
+ onClick={[Function]}
+ type="button"
+ >
+ ↑ Choose a file to upload
+ </button>
+ <input
+ multiple={true}
+ name={undefined}
+ onChange={[Function]}
+ style={
+ Object {
+ "display": "none",
+ }
+ }
+ type="file"
+ />
+ </div>
+ <div
+ className="c1"
+ >
+ <div>
+ IMG_4346.JPG
+ </div>
+ </div>
+</div>
+`;
--
GitLab