Repository: couds/react-bulma-components (js)

Issue:
InputFile is missing accept props
Expected: `accept` prop is added to input element
Actual: `accept` prop is added to wrapping `.file` element 

https://codesandbox.io/s/mz0j8ljmp9

Additional attributes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Additional_attributes

Pull request:
Fix #180 Add input file attributes to InputFile
Fixes #180 

Patch:
diff --git a/src/components/form/components/input-file.js b/src/components/form/components/input-file.js
index 10f1d4f..be82f46 100644
--- a/src/components/form/components/input-file.js
+++ b/src/components/form/components/input-file.js
@@ -26,6 +26,11 @@ export default class InputFile extends PureComponent {
     name: PropTypes.string,
     label: PropTypes.string,
     icon: PropTypes.element,
+    inputProps: PropTypes.shape({
+      accept: PropTypes.string,
+      capture: PropTypes.string,
+      multiple: PropTypes.bool,
+    }),
   }
 
   static defaultProps = {
@@ -42,6 +47,11 @@ export default class InputFile extends PureComponent {
     name: undefined,
     icon: undefined,
     label: 'Choose a file...',
+    inputProps: {
+      accept: undefined,
+      capture: undefined,
+      multiple: undefined,
+    },
   }
 
   state = {
@@ -72,6 +82,7 @@ export default class InputFile extends PureComponent {
       name,
       label,
       icon,
+      inputProps,
       ...props
     } = this.props;
 
@@ -92,6 +103,7 @@ export default class InputFile extends PureComponent {
       >
         <label className="file-label">
           <input
+            {...inputProps}
             name={name}
             value=""
             type="file"


Test patch:
diff --git a/src/components/form/__test__/__snapshots__/file-input.test.js.snap b/src/components/form/__test__/__snapshots__/file-input.test.js.snap
index 6db6221..c83dd58 100644
--- a/src/components/form/__test__/__snapshots__/file-input.test.js.snap
+++ b/src/components/form/__test__/__snapshots__/file-input.test.js.snap
@@ -27,3 +27,32 @@ exports[`Dropdown component Should render file input tree 1`] = `
   </label>
 </div>
 `;
+
+exports[`Dropdown component should pass file attributes 1`] = `
+<div
+  className="file"
+>
+  <label
+    className="file-label"
+  >
+    <input
+      accept="image/*"
+      capture="source"
+      className="file-input"
+      multiple={true}
+      onChange={[Function]}
+      type="file"
+      value=""
+    />
+    <span
+      className="file-cta"
+    >
+      <span
+        className="file-label"
+      >
+        Choose a file...
+      </span>
+    </span>
+  </label>
+</div>
+`;
diff --git a/src/components/form/__test__/file-input.test.js b/src/components/form/__test__/file-input.test.js
index e97d25d..eaa95c2 100644
--- a/src/components/form/__test__/file-input.test.js
+++ b/src/components/form/__test__/file-input.test.js
@@ -48,4 +48,14 @@ describe('Dropdown component', () => {
     expect(component.state('filename')).toBe(undefined);
     expect(onChange).toBeCalled();
   });
+  it('should pass file attributes', () => {
+    const inputProps = {
+      accept: 'image/*',
+      capture: 'source',
+      multiple: true,
+    };
+    const component = renderer.create(
+      <InputFile inputProps={inputProps} onChange={() => {}} />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });