DatePicker & FilePicker support

src/DatePicker.js

@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+import {FormConsumer} from "./FormContext";
+import FormItemError from "./FormItemError";
+
+export default class DatePicker extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderDatePicker(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderDatePicker(data)
+    {
+        let props = {...this.props}
+        if (props.children) delete props.children
+        if (props.onChangeValue) delete props.onChangeValue
+        return (
+            <div className="form-group">
+                {this.renderLabel(data)}
+                <input onChange={(e) => this.props.onChangeValue(e.target.value)} {...props} />
+                <p className="text-muted">DatePicker {this.props.type}</p>
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    renderLabel(data)
+    {
+        if (this.props.label) {
+            return (
+                <label htmlFor={this.props.id}>{this.props.label}</label>
+            )
+        }
+    }
+}
+
+DatePicker.defaultProps = {
+    name: 'input',
+    id: 'input',
+    className: 'form-control',
+    type: 'datetime-local',
+    onChangeValue: (text) => {}
+}

src/FilePicker.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import {FormConsumer} from "./FormContext";
+import FormItemError from "./FormItemError";
+
+export default class FilePicker extends Component
+{
+    render()
+    {
+        return (
+          <FormConsumer>
+              {(data) => this.renderFilePicker(data)}
+          </FormConsumer>
+        )
+    }
+
+    renderFilePicker(data)
+    {
+        const value = this.props.value
+        let props = {...this.props}
+        if (props.children) delete props.children
+        if (props.onChangeValue) delete props.onChangeValue
+        if (!(typeof props.value instanceof File)) delete props.value
+        return (
+          <div className="form-group">
+              {this.renderLabel(data)}
+              <input
+                type="file"
+                onChange={(e) => this.props.onChangeValue(e.target.value)} {...props} />
+              {this.renderValue(value)}
+              <FormItemError name={this.props.name} data={data} />
+          </div>
+        )
+    }
+
+    renderValue(value)
+    {
+        if (value instanceof File)
+            return <p className="text-muted">{value.name} {this.renderDeleteButton()}</p>
+
+        if (value !== null)
+            return <p className="text-muted">{value} {this.renderDeleteButton()}</p>
+
+        return null
+    }
+
+    renderDeleteButton()
+    {
+        return (
+          <i className="fa fa-trash" onClick={() => {
+              this.props.onChangeValue(null)
+          }}/>
+        );
+    }
+
+    renderLabel(data)
+    {
+        if (this.props.label) {
+            return (
+              <label htmlFor={this.props.id}>{this.props.label}</label>
+            )
+        }
+    }
+}
+
+FilePicker.defaultProps = {
+    name: 'file-picker',
+    id: 'file-picker',
+    className: 'form-control',
+    onChangeValue: (file) => {}
+}

src/index.js

@@ -8,7 +8,10 @@ import RadioGroup from './RadioGroup'
 import Submit from './Submit'
 import TextArea from './TextArea'
 import FormTranslationContext from './FormTranslationContext'
+import DatePicker from './DatePicker'
+import FilePicker from './FilePicker'
 
 export {
-    CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, Submit, TextArea, FormTranslationContext
-}
+    CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio,
+    DatePicker, FilePicker, Submit, TextArea, FormTranslationContext
+}