Merge pull request #160 from KleeGroup/field-fix

Field fix
klee-contrib · Aug 4, 2015 · fda6d51 · fda6d51
2 parents cd119d6 + c446908
commit fda6d51
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 222 deletions.
diff --git a/common/block/example/index.html b/common/block/example/index.html
@@ -9,22 +9,19 @@
 
   <!-- Place favicon.ico in the root directory -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://fb.me/react-0.13.3.js"></script>
-  <!-- Material degign-->
-  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
   <!-- Material degign-->
+  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
 
   <script src="/focus-components/dist/js/focus.js"></script>
   <script src="/focus-components/dist/js/focus-components.js"></script>

diff --git a/common/button/action/example/index.html b/common/button/action/example/index.html
@@ -7,28 +7,25 @@
     <meta name="description" content="Example of the component.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
     <script src="https://fb.me/react-0.13.3.js"></script>
-    <script src="/focus-components/dist/js/focus.js"></script>
-    <script src="/focus-components/dist/js/focus-components.js"></script>
-    <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css"/>
+    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
     <!-- Material degign-->
     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
-    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
-
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-    <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
-    <!-- Material degign-->
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+    <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+    <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
+
+    <script src="/focus-components/dist/js/focus.js"></script>
+    <script src="/focus-components/dist/js/focus-components.js"></script>
+    <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css">
 
 </head>
 <body>

diff --git a/common/field/example/index.html b/common/field/example/index.html
@@ -9,23 +9,19 @@
 
   <!-- Place favicon.ico in the root directory -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
   <script src="https://fb.me/react-0.13.3.js"></script>
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone.js"></script>
 
   <!-- Material degign-->
   <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material-wfont.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/material.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/css/ripples.css">
-
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.eot">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.svg">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.ttf">
-  <link rel="font" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/fonts/Material-Design-Icons.woff">
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/material.js"/>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.2/js/ripples.min.js"></script>
-  <!-- Material degign-->
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
 
   <script src="/focus-components/dist/js/focus.js"></script>
   <script src="/focus-components/dist/js/focus-components.js"></script>
@@ -44,21 +40,23 @@ <h2>Champ 3 type number</h2>
   -->
 
   <div id="form-container" class="container"></div>
-  <script type="text/javascript">
+  <script type="text/jsx">
     Focus.components = FocusComponents;
-  var Field = Focus.components.common.field.component;
+    var Field = Focus.components.common.field.component;
     React.render(
-      React.createElement("form", {className: "form-horizontal"},
-      React.createElement("h2", null, "Champ 1"),
-      React.createElement(Field, {name: "field1", value: "field1value", isEdit: true}),
-      React.createElement("h2", null, "Consultation"),
-      React.createElement(Field, {name: "field Consult", value: "fieldConsultValue", isEdit: false}),
-      React.createElement(Field, {name: "field Consult", value: "fieldConsultValue", isEdit: false,formatter: function(data){return data + " formatter applied";}}),
-      React.createElement("h2", null, "Champ 2 (erreur)"),
-      React.createElement(Field, {name: "field2", value: "field2value", type: "text", error: "error on field2"}),    React.createElement("h2", null, "Champ 3 type number"),
-      React.createElement(Field, {name: "field3", value: 3, type: "number"}),
-      React.createElement(Field, {name: "field4", value: "popop", type: "text", help: "Here to help ..."})
-  ),
+        <form className='form-horizontal'>
+            <h2> Premier champ</h2>
+            <Field  name='field1' value='fieldValue' isEdit={true}/>
+            <h2> Consultation </h2>
+            <Field  name='field Consult' value='fieldConsultValue' isEdit={false}/>
+            <Field  name='field Consult formated' value='fieldConsultValue' isEdit={false} formatter={function(data){return data + " formatter applied";}}/>
+            <h2>Erreur</h2>
+            <Field  name='field2' value='field2Value' error='error in field2' isEdit={true} />
+            <h2>Type number</h2>
+            <Field  name='field3' value={3} type='number'/>
+            <Field  name='field4' value='popop' isEdit={true} help='Here to help'/>
+        </form>
+    ,
     document.querySelector("#form-container")
   );
   </script>

diff --git a/common/field/index.js b/common/field/index.js
@@ -12,13 +12,15 @@ let validationBehaviour = require('./mixin/validation-behaviour');
 
 let builtInComponents = require('./mixin/built-in-components');
 
-
+/**
+ * Mixin for the field helper.
+ * @type {Object}
+ */
 let FieldMixin = {
+    /** @inheriteDoc */
     mixins: [valueBehaviour, validationBehaviour, builtInComponents],
-    /**
-    * Get field default properties.
-    */
-    getDefaultProps: function getFieldDefaultProps() {
+    /** @inheriteDoc */
+   getDefaultProps() {
         return {
 
             /**
@@ -50,27 +52,29 @@ let FieldMixin = {
         name: type('string'),
         value: type(['string', 'number'])
     },
-
     /** @inheritdoc */
     componentWillReceiveProps: function fieldWillReceiveProps(newProps){
         this.setState({value: newProps.value, values: newProps.values});
     },
     /**
     * Get the css class of the field component.
     */
-    _className: function() {
-        let stateClass = this.state.error ? "has-feedback has-error" : "";
+    _className(){
+        let stateClass = this.state.error ? 'has-feedback has-error' : '';
         return `form-group ${stateClass} ${this.props.style.className}`;
     },
-
-    render: function renderField() {
+    /** @inheritdoc */
+    render() {
+        let {domain, isRequired, isEdit, values} = this.props;
+        let {input, label, select, display, help, error, _className} = this;
         return (
-            <div className={this._className()} data-focus='field' data-domain={this.props.domain} data-required={this.props.isRequired} data-mode={this.props.isEdit ? 'edit' : 'consult'}>
-                {this.label()}
-                {this.props.isEdit ? (this.props.values ? this.select() : this.input()) : this.display()}
-                {this.help()}
-                {this.error()}
-            </div>);
-        }
-    };
-    module.exports = builder(FieldMixin);
+            <div className={_className()} data-domain={domain} data-focus='field' data-mode={isEdit ? 'edit' : 'consult'} data-required={isRequired}>
+                {label()}
+                {isEdit ? (values ? select() : input()) : display()}
+                {help()}
+                {error()}
+            </div>
+        );
+    }
+};
+module.exports = builder(FieldMixin);