optgroup support for select elements

1 files changed, 24 insertions, 6 deletions

diff --git a/animism-align/frontend/app/common/form.component.js b/animism-align/frontend/app/common/form.component.js
index d427afe..4b6616e 100644
--- a/animism-align/frontend/app/common/form.component.js
+++ b/animism-align/frontend/app/common/form.component.js
@@ -111,11 +111,12 @@ export class Select extends Component {
       return <label className='select'><div>Loading...</div></label>
     }
     const { focused } = this.state
+    const selectedOption = findOptionInGroups(options, String(selected)) || { label: defaultOption }
     return (
       <label className='selectLabel'>
         {title && <span>{title}</span>}
         <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
-          <div>{(options.find(opt => String(opt.name) === String(selected)) || {label: defaultOption}).label}</div>
+          <div>{selectedOption.label}</div>
           <select
             onFocus={() => this.setState({ focused: true })}
             onBlur={() => this.setState({ focused: false })}
@@ -127,11 +128,9 @@ export class Select extends Component {
           >
             {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
             {options.map((option, i) => (
-              <option
-                key={option.name}
-                value={option.name}
-                disabled={option.disabled}
-              >{option.label}</option>
+              option.options
+                ? <OptionGroup key={'group_' + option.name} {...option} />
+                : <OptionItem key={option.name} {...option} />
             ))}
           </select>
         </div>
@@ -139,6 +138,25 @@ export class Select extends Component {
     )
   }
 }
+const findOptionInGroups = (options, selected) => {
+  if (options.length && options[0].options) {
+    options = options.reduce((a,b) => a.concat(b.options), [])
+  }
+  return options.find(opt => String(opt.name) === String(selected))
+}
+
+export const OptionGroup = ({ name, options }) => (
+  <optgroup label={name}>
+    {options.map(option => (
+      <OptionItem key={option.name} {...option} />
+    ))}
+  </optgroup>
+)
+export const OptionItem = ({ name, label, disabled }) => (
+  <option value={name} disabled={disabled}>
+    {label}
+  </option>
+)
 
 export class FileInputField extends Component {
   state = {