fix(file-input): introduce FileList to solve spacing issues

dhis2 · Nov 25, 2019 · 5faae50 · 5faae50
1 parent c6b79d5
commit 5faae50
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 47 deletions.
diff --git a/src/FileInput.js b/src/FileInput.js
@@ -9,7 +9,8 @@ import { Help } from './Help.js'
 import { spacers, colors } from './theme.js'
 import { Upload } from './icons/Upload.js'
 import { StatusIconNoDefault } from './icons/Status.js'
-import { SelectedFile } from './FileInput/SelectedFile.js'
+import { FileList } from './FileInput/FileList.js'
+import { FileListItem } from './FileInput/FileListItem.js'
 import { Placeholder } from './FileInput/Placeholder.js'
 
 class FileInput extends PureComponent {
@@ -21,6 +22,9 @@ class FileInput extends PureComponent {
 
     onChange = () => {
         this.props.onChange(this.ref.current.files)
+        // reset the file input so it won't prevent on-change
+        // if the same file was added in a second attempt
+        this.ref.current.value = ''
     }
 
     render() {
@@ -71,7 +75,7 @@ class FileInput extends PureComponent {
                     />
                 </div>
 
-                {children}
+                <div>{children}</div>
 
                 <style jsx>{`
                     input {
@@ -108,10 +112,7 @@ class FileInput extends PureComponent {
 }
 
 const childPropType = propTypes.oneOfType([
-    propTypes.oneOfType([
-        instanceOfComponent(SelectedFile),
-        propTypes.arrayOf(instanceOfComponent(SelectedFile)),
-    ]),
+    instanceOfComponent(FileList),
     instanceOfComponent(Placeholder),
     instanceOfComponent(Help),
 ])
@@ -146,7 +147,8 @@ FileInput.defaultProps = {
     accept: '*',
 }
 
-FileInput.SelectedFile = SelectedFile
+FileInput.FileList = FileList
+FileInput.FileListItem = FileListItem
 FileInput.Placeholder = Placeholder
 
 export { FileInput }
diff --git a/src/FileInput/FileList.js b/src/FileInput/FileList.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import propTypes from 'prop-types'
+import { instanceOfComponent } from '@dhis2/prop-types'
+
+import { FileListItem } from './FileListItem'
+
+const FileList = ({ children, className }) => (
+    <div className={className}>
+        {children}
+        <style jsx>{`
+            div {
+                padding-top: 4px;
+            }
+            div:first-child {
+                padding-top: 0;
+            }
+        `}</style>
+    </div>
+)
+
+FileList.propTypes = {
+    children: propTypes.oneOfType([
+        instanceOfComponent(FileListItem),
+        propTypes.arrayOf(instanceOfComponent(FileListItem)),
+    ]),
+    className: propTypes.string,
+}
+
+export { FileList }
diff --git a/src/FileInput/SelectedFile.js → src/FileInput/FileListItem.js b/src/FileInput/SelectedFile.js → src/FileInput/FileListItem.js
@@ -6,7 +6,7 @@ import { colors, spacers } from '../theme.js'
 import { AttachFile } from '../icons/AttachFile.js'
 import { Loading } from '../icons/Status.js'
 
-const SelectedFile = ({
+const FileListItem = ({
     className,
     label,
     onRemove,
@@ -75,7 +75,7 @@ const SelectedFile = ({
     </p>
 )
 
-SelectedFile.propTypes = {
+FileListItem.propTypes = {
     className: propTypes.string,
     label: propTypes.string.isRequired,
     onRemove: propTypes.func.isRequired,
@@ -85,4 +85,4 @@ SelectedFile.propTypes = {
     cancelText: propTypes.string,
 }
 
-export { SelectedFile }
+export { FileListItem }
diff --git a/stories/FileInput.stories.js b/stories/FileInput.stories.js
@@ -127,28 +127,30 @@ storiesOf('FileInput', module)
                 label="Upload something"
                 buttonLabel="Upload file"
             >
-                <FileInput.SelectedFile
-                    label="picture1.jpg"
-                    onRemove={onRemove}
-                    onCancel={onCancel}
-                    cancelText="Cancel"
-                    removeText="Remove"
-                />
-                <FileInput.SelectedFile
-                    label="image_that_is_uploading.jpg"
-                    onRemove={onRemove}
-                    onCancel={onCancel}
-                    cancelText="Cancel"
-                    removeText="Remove"
-                    loading
-                />
-                <FileInput.SelectedFile
-                    label="image_file_name_is_to_long_to_display_on_one_line.jpg"
-                    onRemove={onRemove}
-                    onCancel={onCancel}
-                    cancelText="Cancel"
-                    removeText="Remove"
-                />
+                <FileInput.FileList>
+                    <FileInput.FileListItem
+                        label="picture1.jpg"
+                        onRemove={onRemove}
+                        onCancel={onCancel}
+                        cancelText="Cancel"
+                        removeText="Remove"
+                    />
+                    <FileInput.FileListItem
+                        label="image_that_is_uploading.jpg"
+                        onRemove={onRemove}
+                        onCancel={onCancel}
+                        cancelText="Cancel"
+                        removeText="Remove"
+                        loading
+                    />
+                    <FileInput.FileListItem
+                        label="image_file_name_is_to_long_to_display_on_one_line.jpg"
+                        onRemove={onRemove}
+                        onCancel={onCancel}
+                        cancelText="Cancel"
+                        removeText="Remove"
+                    />
+                </FileInput.FileList>
             </FileInput>
             <br />
             <p style={{ color: 'grey' }}>
@@ -190,20 +192,22 @@ storiesOf('FileInput', module)
                 Something went wrong (error second)
             </Help>
 
-            <FileInput.SelectedFile
-                label="picture1.jpg"
-                onRemove={onRemove}
-                onCancel={onCancel}
-                cancelText="Cancel"
-                removeText="Remove"
-            />
-            <FileInput.SelectedFile
-                label="picture2.jpg"
-                onRemove={onRemove}
-                onCancel={onCancel}
-                cancelText="Cancel"
-                removeText="Remove"
-                loading
-            />
+            <FileInput.FileList>
+                <FileInput.FileListItem
+                    label="picture1.jpg"
+                    onRemove={onRemove}
+                    onCancel={onCancel}
+                    cancelText="Cancel"
+                    removeText="Remove"
+                />
+                <FileInput.FileListItem
+                    label="picture2.jpg"
+                    onRemove={onRemove}
+                    onCancel={onCancel}
+                    cancelText="Cancel"
+                    removeText="Remove"
+                    loading
+                />
+            </FileInput.FileList>
         </FileInput>
     ))