version 1.0

src/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

src/CheckBox.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {FormConsumer} from "./FormContext";
+import FormItemError from "./FormItemError";
+
+export default class CheckBox extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderCheckBox(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderCheckBox(data)
+    {
+        let props = {...this.props}
+        if (props.children) delete props.children
+        if (props.onChangeValue) delete props.onChangeValue
+        return (
+            <div className="form-check">
+                <input
+                    type="checkbox"
+                    checked={this.props.value}
+                    onChange={(e) => this.props.onChangeValue(e.target.checked)}
+                    {...props} />
+                {this.renderLabel(data)}
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    renderLabel(data)
+    {
+        if (this.props.children.length) {
+            return (
+                <label className="form-check-label" htmlFor={this.props.id}>{this.props.children}</label>
+            )
+        }
+    }
+}
+
+CheckBox.defaultProps = {
+    name: 'checkbox',
+    id: 'checkbox',
+    className: 'form-check-input',
+    onChangeValue: (checked) => {}
+}

src/DatePicker.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import moment from 'moment';
+import {FormConsumer} from "./FormContext";
+import FormItemError from "./FormItemError";
+
+export default class DatePicker extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderDatePicker(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderDatePicker(data)
+    {
+        const value = this.props.value
+        let props = {...this.props}
+        if (props.children) delete props.children
+        if (props.value) delete props.value
+        if (props.onChangeValue) delete props.onChangeValue
+        return (
+            <div className="form-group">
+                {this.renderLabel(data)}
+                <input
+                  value={this.parseValue(value)}
+                  onChange={(e) => this.props.onChangeValue(moment(e.target.value))} {...props} />
+                <p className="text-muted">DatePicker {this.props.type}</p>
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    parseValue(value)
+    {
+        if (this.props.type == 'date') return moment(value).format('YYYY-MM-DD')
+        if (this.props.type == 'time') return moment(value).format('HH:mm:ss')
+        return moment(value).format('YYYY-MM-DDTHH:mm')
+    }
+
+    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',
+    value: null,
+    onChangeValue: (text) => {}
+}

src/FilePicker.js

@@ -0,0 +1,71 @@
+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',
+    value: null,
+    onChangeValue: (file) => {}
+}

src/Form.js

@@ -0,0 +1,87 @@
+import React, {Component} from 'react';
+import FormContext from './FormContext';
+import {toast, ToastContainer} from 'react-toastify';
+import FormTranslationContext, {FormTranslationConsumer} from './FormTranslationContext'
+
+class ContextAwareForm extends Component
+{
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: props.data
+        }
+
+        this.displayError = true
+        this.handleError(props)
+    }
+
+    componentWillReceiveProps(props)
+    {
+        this.handleError(props)
+        this.setState({
+            data: props.data
+        })
+    }
+
+    handleError(props)
+    {
+        if (props.data && props.data.error && props.toast && this.displayError == true) {
+            toast.error(this.props.translator.renderText(props.data.error))
+            this.displayError = false
+        }
+    }
+
+    render()
+    {
+        return (
+            <FormContext.Provider value={this.state.data}>
+                <form onSubmit={this._onSubmit}>
+                    {this.renderError()}
+                    {this.props.children}
+                </form>
+                <ToastContainer />
+            </FormContext.Provider>
+        )
+    }
+
+    _onSubmit = (e) => {
+        e.preventDefault()
+        this.props.onSubmit()
+        this.displayError = true
+        return false;
+    }
+
+    renderError()
+    {
+        if (this.state.data && this.state.data.error && !this.props.toast)
+        {
+            return (
+                <p className="alert alert-danger">{this.props.translator.renderText(this.state.data.error)}</p>
+            )
+        }
+
+        return null
+    }
+}
+
+export default class Form extends Component
+{
+    render()
+    {
+        return (
+            <FormTranslationConsumer>
+                {(translator) => (
+                    <ContextAwareForm translator={translator} {...this.props}/>
+                )}
+            </FormTranslationConsumer>
+        )
+    }
+}
+
+Form.defaultProps = {
+    data: null,
+    toast: false,
+    onSubmit: () => {
+        console.log('[Form] submitted')
+    }
+}

src/FormContext.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+const FormContext = React.createContext({ data: null });
+
+export default FormContext
+
+export class FormConsumer extends Component
+{
+    render()
+    {
+        return (
+            <FormContext.Consumer>
+                {(props) => this.props.children(props)}
+            </FormContext.Consumer>
+        )
+    }
+}

src/FormItemError.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {FormTranslationConsumer} from './FormTranslationContext'
+
+export default class FormItemError extends Component
+{
+    render() {
+        const data = this.props.data
+
+        if (!data || !data.errors || !data.errors[this.props.name]) return null
+
+        return (
+        	<FormTranslationConsumer>
+            	{(translator) => this.renderError(data, translator)}
+            </FormTranslationConsumer>
+        )
+    }
+
+    renderError(data, translator)
+    {
+    	return <p className="text-danger">{translator.renderText(data.errors[this.props.name].error)}</p>
+    }
+}

src/FormTranslationContext.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+const FormTranslationContext = React.createContext({
+	renderText: (text) => (text)
+});
+
+export default FormTranslationContext
+
+export class FormTranslationConsumer extends Component
+{
+    render()
+    {
+        return (
+            <FormTranslationContext.Consumer>
+                {(props) => this.props.children(props)}
+            </FormTranslationContext.Consumer>
+        )
+    }
+}

src/Input.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {FormConsumer} from "./FormContext";
+import FormItemError from "./FormItemError";
+
+export default class Input extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderInput(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderInput(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} />
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    renderLabel(data)
+    {
+        if (this.props.label) {
+            return (
+                <label htmlFor={this.props.id}>{this.props.label}</label>
+            )
+        }
+    }
+}
+
+Input.defaultProps = {
+    name: 'input',
+    id: 'input',
+    className: 'form-control',
+    type: 'text',
+    onChangeValue: (text) => {}
+}

src/Option.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {OptionGroupConsumer} from "./OptionGroup";
+
+export default class Option extends Component
+{
+    render()
+    {
+        return (
+            <OptionGroupConsumer>
+                {(data) => this.renderOption(data)}
+            </OptionGroupConsumer>
+        )
+    }
+
+    renderOption(data)
+    {
+        let props = {...this.props}
+
+        return (
+            <option {...props}>{this.props.children}</option>
+        )
+    }
+}
+
+Option.defaultProps = {
+    value: 'option'
+}

src/OptionGroup.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import {FormConsumer} from './FormContext';
+import FormItemError from "./FormItemError";
+
+const OptionGroupContext = React.createContext({});
+
+export class OptionGroupConsumer extends Component
+{
+    render()
+    {
+        return (
+            <OptionGroupContext.Consumer>
+                {(props) => this.props.children(props)}
+            </OptionGroupContext.Consumer>
+        )
+    }
+}
+
+export default class OptionGroup extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderOptionGroup(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderOptionGroup(data)
+    {
+        const props = {...this.props}
+        return (
+            <div className="form-group">
+                {this.renderLabel()}
+                <select {...this.props.data} {...props} onChange={(e) => this._onChange(e)}>
+                    {this.renderChildren()}
+                </select>
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    _onChange = (e) => {
+        if (this.props.multiple) {
+            let value = []
+            const options = e.target.options;
+            for (let i = 0, l = options.length; i < l; i++) {
+                if (options[i].selected) {
+                    value.push(options[i].value);
+                }
+            }
+            this.props.onChangeValue(value)
+        }
+        else {
+            this.props.onChangeValue(e.target.value)
+        }
+    }
+
+    renderLabel()
+    {
+        if (!this.props.label) return null
+
+        return (
+            <label htmlFor={this.props.id}>{this.props.label}</label>
+        )
+    }
+
+    renderChildren()
+    {
+        return (
+            <OptionGroupContext.Provider value={{}}>
+                {this.props.children}
+            </OptionGroupContext.Provider>
+        )
+    }
+}
+
+OptionGroup.defaultProps = {
+    name: 'select',
+    className: 'form-control',
+    onChangeValue: (value) => {}
+}

src/Radio.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import {RadioGroupConsumer} from "./RadioGroup";
+
+export default class Radio extends Component
+{
+    render()
+    {
+        return (
+            <RadioGroupConsumer>
+                {(data) => this.renderRadio(data)}
+            </RadioGroupConsumer>
+        )
+    }
+
+    renderRadio(data)
+    {
+        let props = {...this.props}
+        if (props.children) delete props.children
+
+        return (
+            <div className="form-check">
+                <input
+                    type="radio"
+                    checked={data.value === this.props.value}
+                    onChange={(e) => {
+                        if (e.target.checked)
+                            data.onChangeValue(this.props.value)
+                    }}
+                    {...props} />
+                {this.renderLabel(data)}
+            </div>
+        )
+    }
+
+    renderLabel(data)
+    {
+        if (this.props.children.length) {
+            return (
+                <label className="form-check-label" htmlFor={this.props.id}>{this.props.children}</label>
+            )
+        }
+    }
+}
+
+Radio.defaultProps = {
+    value: 'option',
+    className: 'form-check-input'
+}

src/RadioGroup.js

@@ -0,0 +1,66 @@
+import React, {Component} from 'react';
+import {FormConsumer} from './FormContext';
+import FormItemError from "./FormItemError";
+
+const RadioGroupContext = React.createContext({});
+
+export class RadioGroupConsumer extends Component
+{
+    render()
+    {
+        return (
+            <RadioGroupContext.Consumer>
+                {(props) => this.props.children(props)}
+            </RadioGroupContext.Consumer>
+        )
+    }
+}
+
+export default class RadioGroup extends Component
+{
+    render()
+    {
+        return (
+            <FormConsumer>
+                {(data) => this.renderRadioGroup(data)}
+            </FormConsumer>
+        )
+    }
+
+    renderRadioGroup(data)
+    {
+        return (
+            <div className="form-options mb-3">
+                {this.renderLabel()}
+                {this.renderChildren()}
+                <FormItemError name={this.props.name} data={data} />
+            </div>
+        )
+    }
+
+    renderLabel()
+    {
+        if (!this.props.label) return null
+
+        return (
+            <p className="mb-0 mt-2">{this.props.label}</p>
+        )
+    }
+
+    renderChildren()
+    {
+        return (
+            <RadioGroupContext.Provider value={{
+                onChangeValue: (value) => this.props.onChangeValue(value),
+                value: this.props.value
+            }}>
+                {this.props.children}
+            </RadioGroupContext.Provider>
+        )
+    }
+}
+
+RadioGroup.defaultProps = {
+    name: 'radio',
+    onChangeValue: (value) => {}
+}

src/Submit.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+
+export default class Submit extends Component {
+    render() {
+        return (
+            <button type="submit" {...this.props}>{this.props.children}</button>
+        )
+    }
+}
+
+Submit.defaultProps = {
+    className: 'btn btn-primary'
+}

src/TextArea.js

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

src/index.js

@@ -0,0 +1,14 @@
+import CheckBox from './CheckBox'
+import Form from './Form'
+import Input from './Input'
+import Option from './Option'
+import OptionGroup from './OptionGroup'
+import Radio from './Radio'
+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, DatePicker, FilePicker, Submit, TextArea, FormTranslationContext }