Render enums as radio boxes instead of select boxes

coolcrowd · Feb 7, 2016 · 451728c · 451728c
1 parent 9e825ab
commit 451728c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/js/components/base/Wizard.js b/src/js/components/base/Wizard.js
@@ -339,28 +339,25 @@ class Wizard extends React.Component {
                           value={value}/>
             );
         } else if (input.type === "enum") {
-            formElement = input.values.map((item) => {
+            formElement = input.values.map((item, i) => {
                 return (
-                    <option value={item.value}>
-                        {item.text}
-                    </option>
+                    <label className="radio-option">
+                        <input key={name} name={name} type="radio" value={item.value}
+                               checked={i === 0 && !value || value === item.value}
+                               onChange={this._onFormChange.bind(this)}/>
+                        <span>{item.text}</span>
+                    </label>
                 );
             });
-
-            formElement = (
-                <select key={name} name={name} value={value} onChange={this._onFormChange.bind(this)}
-                        size="1">
-                    {formElement}
-                </select>
-            );
         } else if (input.type === "hidden") {
             return (
                 <input type="hidden" name={name} value={input.value}/>
             );
         } else if (input.type === "boolean") {
             formElement = (
                 <label>
-                    <input type="checkbox" name={name} checked={value} onChange={this._onFormChange.bind(this)} value="1"/>
+                    <input type="checkbox" name={name} checked={value} onChange={this._onFormChange.bind(this)}
+                           value="1"/>
                     {value ? (input.active || "active") : (input.inactive || "inactive")}
                 </label>
             );

diff --git a/src/sass/_wizard.scss b/src/sass/_wizard.scss
@@ -103,4 +103,19 @@
 .restriction label {
   display: inline-block;
   margin: 8px;
+}
+
+.radio-option {
+  padding: 4px;
+  display: block;
+}
+
+.radio-option input[type="radio"] {
+  margin: 4px 8px;
+  float: left;
+}
+
+.radio-option > span {
+  padding-left: 30px;
+  display: block;
 }