CLLLEANED the forms, inputs, buttons, labels and form/button groups

public/objects/input/form/Form.jsx

@@ -22,47 +22,54 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import Styles from './Form.scss';
+
+import FormGroup from './group/FormGroup';
 import Loader, { LoaderBackdrop } from '@objects/loading/Loader';
-import Input, { InputGroup, TextArea } from './../Input';
+import Input, { TextArea } from './../Input';
 
 export default class Form extends React.Component {
   constructor(props) {
     super(props);
 
-    //Prepare our initial state
-    let s = {
-      ajax: props.ajax || false,
-      loader: props.loader || false,
-      loading: false,
-      onSubmit: props.onSubmit,
-      contentType: props.contentType || props.encType || "application/x-www-form-urlencoded",
-      manager: props.manager
-    };
+    let {
+      ajax, loader, onSubmit, contentType, encType, manager, action, method,
+      get, post
+    } = props;
+
+    contentType = contentType || encType ||  "application/x-www-form-urlencoded";
 
     //Determine action and method based off the internals
-    if(props.action) s.action = props.action;
-    if(props.method) s.method = props.method;
-
-    if(props.get) {
-      s.action = props.get;
-      s.method = "GET";
+    if(get) {
+      action = get;
+      method = "GET";
     }
 
-    if(props.post) {
-      s.action = props.post;
-      s.method = "POST";
+    if(post) {
+      action = post;
+      method = "POST";
     }
 
-    //Write our state to the component
-    this.state = s;
+    //Prepare our initial state
+    this.state = {
+      ajax,
+      loader,
+      loading: false,
+      onSubmit,
+      contentType,
+      manager
+    };
   }
 
   componentDidMount() {
-    if(this.props.manager) this.props.manager.addForm(this);
+    let { manager } = this.props;
+    if(manager) manager.addForm(this);
   }
 
   componentWillUnmount() {
-    if(this.props.manager) this.props.manager.removeForm(this);
+    let { manager } = this.props;
+    if(manager) manager.removeForm(this);
   }
 
   submit() {
@@ -70,14 +77,19 @@ export default class Form extends React.Component {
   }
 
   onSubmit(e) {
+    let {
+      ajax, onSubmit, action, submitting, method, mode, contentType
+    } = this.state;
+    let { manager } = this.props;
+
     //Is Ajax?
-    if(!this.state.ajax) {
-      return this.state.onSubmit ? this.state.onSubmit(e) : true;
+    if(!ajax) {
+      return onSubmit ? onSubmit(e) : true;
     }
 
-    if(e) e.preventDefault();
-    if(!this.state.action) return console.warning("This form has no action.");
-    if(this.state.submitting) return false;//Already submitting?
+    if(e && e.preventDefault) e.preventDefault();
+    if(!action) return console.warning("This form has no action.");
+    if(submitting) return false;//Already submitting?
 
     //Start submitting!
     this.setState({
@@ -87,30 +99,26 @@ export default class Form extends React.Component {
 
     //Prepare our data
     let data;
-    if(this.props.manager) {
-      data = this.props.manager.getFormData();
-    }
+    if(manager) data = manager.getFormData();
+    data = data || {};
 
-    if(this.state.contentType == "application/json") {
+    if(contentType == "application/json") {
       let dataJson = {};
-      data.forEach(function(value, key) {
+      data.forEach((value, key) => {
         dataJson[key] = value;
       });
       data = JSON.stringify(dataJson);
     }
 
     //Prepare our request.
-    fetch(this.state.action, {
-      method: this.state.method,
-      mode: this.state.mode,
+    fetch(action, {
+      method: method,
+      mode: mode,
       body: data,
       headers: {
-        "Content-Type": this.state.contentType
+        "Content-Type": contentType
       }
-    })
-      .then(this.onSubmitted.bind(this))
-      .catch(this.onError.bind(this))
-    ;
+    }).then(resp => this.onSubmitted(resp)).catch((e,a,b) => this.onError(e,a,b));
 
     return false;
   }
@@ -124,20 +132,19 @@ export default class Form extends React.Component {
       let is4xx = Math.floor(response.status / 400) === 1;
       if(is4xx) {
         return response[method]()
-          .then(this.onErrorText.bind(this))
-          .catch(this.onError.bind(this))
+          .then((e,a,b) => this.onErrorText(e,a,b))
+          .catch((e,a,b) => this.onError(e,a,b))
         ;
-      } else {
-        throw Error(response.statusText);
       }
+      throw Error(response.statusText);
     }
 
     if(this.props.onData) return this.props.onData(response);
 
     //Handle the old fashioned way (expect json)
     response[method]()
-      .then(this.onData.bind(this))
-      .catch(this.onError.bind(this))
+      .then(resp => this.onData(resp))
+      .catch((e,a,b) => this.onError(e,a,b))
     ;
   }
 
@@ -163,13 +170,16 @@ export default class Form extends React.Component {
   }
 
   render() {
+    let { className, children } = this.props;
+    let { loader, loading } = this.state;
+
     let clazz = "o-form";
-    if(this.props.className) clazz += " " + this.props.className;
+    if(className) clazz += ` ${className}`
 
     //Do I need a loader?
-    let loader;
-    if(this.state.loader && this.state.loading) {
-      loader = (
+    let loaderElement;
+    if(loader && loading) {
+      loaderElement = (
         <LoaderBackdrop className="o-form__loader">
           <Loader className="o-form__loader-spinner" />
         </LoaderBackdrop>
@@ -178,15 +188,14 @@ export default class Form extends React.Component {
 
     return (
       <form
+        {...this.props}
         ref="formDOM"
-        className={clazz}
+        className={ clazz }
         method={ this.state.method }
-        autoComplete={ this.props.autoComplete }
-        target={ this.props.target }
-        onSubmit={ this.onSubmit.bind(this) }
+        onSubmit={ (e) => this.onSubmit(e) }
       >
-        { this.props.children }
-        { loader }
+        { children }
+        { loaderElement }
       </form>
     );
   }
@@ -235,5 +244,6 @@ class FormManager {
 }
 
 export {
-  FormManager
+  FormManager,
+  FormGroup
 };

public/objects/input/form/Form.scss

@@ -0,0 +1,21 @@
+/*
+ *  Form
+ *    Forms
+ *
+ *  Dependencies:
+ *
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/13
+ */
+@import '~@styles/global';
+.o-form {
+  position: relative;
+}
+
+.o-form__group {
+  + .o-btn-group,
+  + .o-form__group {
+    margin-top: 1em;
+  }
+}

public/objects/input/form/group/FormGroup.jsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+export default props => {
+  let clazzes = "o-form__group";
+  if(props.className) clazzes += ` ${props.className}`;
+
+  return (
+    <div {...props} className={clazzes} />
+  );
+}