Merge pull request #25 from KenCoder/master

Add support for optgroup

Author: rkit

examples/src/components/Tags.js

@@ -158,6 +158,30 @@ export default class Tags extends Component {
     );
   }
 
+  renderOptGroups() {
+    return (
+      <div>
+        Option Groups<br/>
+        <Select2
+          multiple
+          defaultValue={[1, 4]}
+          data={[
+            { text: 'Development', 
+              children: [
+              { text: 'bug', id: 1 },
+              { text: 'feature', id: 2 }]},
+            { text: 'documents', id: 3 },
+            { text: 'discussion', id: 4 },
+          ]}
+          options={{
+            placeholder: 'search by tags',
+          }}
+        />
+      </div>
+    );
+  }
+
+
   render() {
     return (
       <div>
@@ -172,7 +196,9 @@ export default class Tags extends Component {
         {/* example 5 */}
         {this.renderDefaultMultipleValue()}<br/>
         {/* example 6 */}
-        {this.renderDynamicUpdateData()}
+        {this.renderDynamicUpdateData()}<br/>
+        {/* example 7 */}
+        {this.renderOptGroups()}
       </div>
     );
   }

src/components/Select2.js

@@ -112,18 +112,28 @@ export default class Select2 extends Component {
     const type = typeof value;
     return type === 'function' || (value && type === 'object') || false;
   }
+  makeOption(item, k) {
+    if (this.isObject(item)) {
+      const { id, text, ...itemParams } = item;
+      return (<option key={`option-${k}`} value={id} {...itemParams}>{text}</option>);
+    }
+
+    return (<option key={`option-${k}`} value={item}>{item}</option>);
+  }
+
 
   render() {
     const { data, value, ...params } = this.props;
     return (
       <select {...params}>
         {data.map((item, k) => {
-          if (this.isObject(item)) {
-            const { id, text, ...itemParams } = item;
-            return (<option key={`option-${k}`} value={id} {...itemParams}>{text}</option>);
+          if (this.isObject(item) && this.isObject(item.children)) {
+            const { children, text, ...itemParams } = item;
+            return (<optgroup key={`optgroup-${k}`} label={text} {...itemParams}>
+              {children.map((child, k2) => this.makeOption(child, `${k}-${k2}`))}
+              </optgroup>);
           }
-
-          return (<option key={`option-${k}`} value={item}>{item}</option>);
+          return this.makeOption(item, k);
         })}
       </select>
     );