DatePicker & FilePicker support

dist/index.es.js

@@ -2,6 +2,12 @@ import React, { Component } from 'react';
 import require$$1 from 'prop-types';
 import reactDom from 'react-dom';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
 var classCallCheck = function (instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -3342,5 +3348,171 @@ TextArea.defaultProps = {
     onChangeValue: function onChangeValue(text) {}
 };
 
-export { CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, Submit, TextArea, FormTranslationContext };
+var DatePicker = function (_Component) {
+    inherits(DatePicker, _Component);
+
+    function DatePicker() {
+        classCallCheck(this, DatePicker);
+        return possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));
+    }
+
+    createClass(DatePicker, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return React.createElement(
+                FormConsumer,
+                null,
+                function (data) {
+                    return _this2.renderDatePicker(data);
+                }
+            );
+        }
+    }, {
+        key: "renderDatePicker",
+        value: function renderDatePicker(data) {
+            var _this3 = this;
+
+            var props = _extends({}, this.props);
+            if (props.children) delete props.children;
+            if (props.onChangeValue) delete props.onChangeValue;
+            return React.createElement(
+                "div",
+                { className: "form-group" },
+                this.renderLabel(data),
+                React.createElement("input", _extends({ onChange: function onChange(e) {
+                        return _this3.props.onChangeValue(e.target.value);
+                    } }, props)),
+                React.createElement(
+                    "p",
+                    { className: "text-muted" },
+                    "DatePicker ",
+                    this.props.type
+                ),
+                React.createElement(FormItemError, { name: this.props.name, data: data })
+            );
+        }
+    }, {
+        key: "renderLabel",
+        value: function renderLabel(data) {
+            if (this.props.label) {
+                return React.createElement(
+                    "label",
+                    { htmlFor: this.props.id },
+                    this.props.label
+                );
+            }
+        }
+    }]);
+    return DatePicker;
+}(Component);
+
+
+DatePicker.defaultProps = {
+    name: 'input',
+    id: 'input',
+    className: 'form-control',
+    type: 'datetime-local',
+    onChangeValue: function onChangeValue(text) {}
+};
+
+var FilePicker = function (_Component) {
+    inherits(FilePicker, _Component);
+
+    function FilePicker() {
+        classCallCheck(this, FilePicker);
+        return possibleConstructorReturn(this, (FilePicker.__proto__ || Object.getPrototypeOf(FilePicker)).apply(this, arguments));
+    }
+
+    createClass(FilePicker, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return React.createElement(
+                FormConsumer,
+                null,
+                function (data) {
+                    return _this2.renderFilePicker(data);
+                }
+            );
+        }
+    }, {
+        key: "renderFilePicker",
+        value: function renderFilePicker(data) {
+            var _this3 = this;
+
+            var value = this.props.value;
+            var props = _extends({}, this.props);
+            if (props.children) delete props.children;
+            if (props.onChangeValue) delete props.onChangeValue;
+            if (!(_typeof(props.value) instanceof File)) delete props.value;
+            return React.createElement(
+                "div",
+                { className: "form-group" },
+                this.renderLabel(data),
+                React.createElement("input", _extends({
+                    type: "file",
+                    onChange: function onChange(e) {
+                        return _this3.props.onChangeValue(e.target.value);
+                    } }, props)),
+                this.renderValue(value),
+                React.createElement(FormItemError, { name: this.props.name, data: data })
+            );
+        }
+    }, {
+        key: "renderValue",
+        value: function renderValue(value) {
+            if (value instanceof File) return React.createElement(
+                "p",
+                { className: "text-muted" },
+                value.name,
+                " ",
+                this.renderDeleteButton()
+            );
+
+            if (value !== null) return React.createElement(
+                "p",
+                { className: "text-muted" },
+                value,
+                " ",
+                this.renderDeleteButton()
+            );
+
+            return null;
+        }
+    }, {
+        key: "renderDeleteButton",
+        value: function renderDeleteButton() {
+            var _this4 = this;
+
+            return React.createElement("i", { className: "fa fa-trash", onClick: function onClick() {
+                    _this4.props.onChangeValue(null);
+                } });
+        }
+    }, {
+        key: "renderLabel",
+        value: function renderLabel(data) {
+            if (this.props.label) {
+                return React.createElement(
+                    "label",
+                    { htmlFor: this.props.id },
+                    this.props.label
+                );
+            }
+        }
+    }]);
+    return FilePicker;
+}(Component);
+
+
+FilePicker.defaultProps = {
+    name: 'file-picker',
+    id: 'file-picker',
+    className: 'form-control',
+    onChangeValue: function onChangeValue(file) {}
+};
+
+export { CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, DatePicker, FilePicker, Submit, TextArea, FormTranslationContext };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -9,6 +9,12 @@ var React__default = _interopDefault(React);
 var require$$1 = _interopDefault(require('prop-types'));
 var reactDom = _interopDefault(require('react-dom'));
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
 var classCallCheck = function (instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
@@ -3349,6 +3355,172 @@ TextArea.defaultProps = {
     onChangeValue: function onChangeValue(text) {}
 };
 
+var DatePicker = function (_Component) {
+    inherits(DatePicker, _Component);
+
+    function DatePicker() {
+        classCallCheck(this, DatePicker);
+        return possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));
+    }
+
+    createClass(DatePicker, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return React__default.createElement(
+                FormConsumer,
+                null,
+                function (data) {
+                    return _this2.renderDatePicker(data);
+                }
+            );
+        }
+    }, {
+        key: "renderDatePicker",
+        value: function renderDatePicker(data) {
+            var _this3 = this;
+
+            var props = _extends({}, this.props);
+            if (props.children) delete props.children;
+            if (props.onChangeValue) delete props.onChangeValue;
+            return React__default.createElement(
+                "div",
+                { className: "form-group" },
+                this.renderLabel(data),
+                React__default.createElement("input", _extends({ onChange: function onChange(e) {
+                        return _this3.props.onChangeValue(e.target.value);
+                    } }, props)),
+                React__default.createElement(
+                    "p",
+                    { className: "text-muted" },
+                    "DatePicker ",
+                    this.props.type
+                ),
+                React__default.createElement(FormItemError, { name: this.props.name, data: data })
+            );
+        }
+    }, {
+        key: "renderLabel",
+        value: function renderLabel(data) {
+            if (this.props.label) {
+                return React__default.createElement(
+                    "label",
+                    { htmlFor: this.props.id },
+                    this.props.label
+                );
+            }
+        }
+    }]);
+    return DatePicker;
+}(React.Component);
+
+
+DatePicker.defaultProps = {
+    name: 'input',
+    id: 'input',
+    className: 'form-control',
+    type: 'datetime-local',
+    onChangeValue: function onChangeValue(text) {}
+};
+
+var FilePicker = function (_Component) {
+    inherits(FilePicker, _Component);
+
+    function FilePicker() {
+        classCallCheck(this, FilePicker);
+        return possibleConstructorReturn(this, (FilePicker.__proto__ || Object.getPrototypeOf(FilePicker)).apply(this, arguments));
+    }
+
+    createClass(FilePicker, [{
+        key: "render",
+        value: function render() {
+            var _this2 = this;
+
+            return React__default.createElement(
+                FormConsumer,
+                null,
+                function (data) {
+                    return _this2.renderFilePicker(data);
+                }
+            );
+        }
+    }, {
+        key: "renderFilePicker",
+        value: function renderFilePicker(data) {
+            var _this3 = this;
+
+            var value = this.props.value;
+            var props = _extends({}, this.props);
+            if (props.children) delete props.children;
+            if (props.onChangeValue) delete props.onChangeValue;
+            if (!(_typeof(props.value) instanceof File)) delete props.value;
+            return React__default.createElement(
+                "div",
+                { className: "form-group" },
+                this.renderLabel(data),
+                React__default.createElement("input", _extends({
+                    type: "file",
+                    onChange: function onChange(e) {
+                        return _this3.props.onChangeValue(e.target.value);
+                    } }, props)),
+                this.renderValue(value),
+                React__default.createElement(FormItemError, { name: this.props.name, data: data })
+            );
+        }
+    }, {
+        key: "renderValue",
+        value: function renderValue(value) {
+            if (value instanceof File) return React__default.createElement(
+                "p",
+                { className: "text-muted" },
+                value.name,
+                " ",
+                this.renderDeleteButton()
+            );
+
+            if (value !== null) return React__default.createElement(
+                "p",
+                { className: "text-muted" },
+                value,
+                " ",
+                this.renderDeleteButton()
+            );
+
+            return null;
+        }
+    }, {
+        key: "renderDeleteButton",
+        value: function renderDeleteButton() {
+            var _this4 = this;
+
+            return React__default.createElement("i", { className: "fa fa-trash", onClick: function onClick() {
+                    _this4.props.onChangeValue(null);
+                } });
+        }
+    }, {
+        key: "renderLabel",
+        value: function renderLabel(data) {
+            if (this.props.label) {
+                return React__default.createElement(
+                    "label",
+                    { htmlFor: this.props.id },
+                    this.props.label
+                );
+            }
+        }
+    }]);
+    return FilePicker;
+}(React.Component);
+
+
+FilePicker.defaultProps = {
+    name: 'file-picker',
+    id: 'file-picker',
+    className: 'form-control',
+    onChangeValue: function onChangeValue(file) {}
+};
+
 exports.CheckBox = CheckBox;
 exports.Form = Form;
 exports.Input = Input;
@@ -3356,6 +3528,8 @@ exports.Option = Option;
 exports.OptionGroup = OptionGroup;
 exports.RadioGroup = RadioGroup;
 exports.Radio = Radio;
+exports.DatePicker = DatePicker;
+exports.FilePicker = FilePicker;
 exports.Submit = Submit;
 exports.TextArea = TextArea;
 exports.FormTranslationContext = FormTranslationContext;

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
+}