[WIP] option groups #59

examples/src/app.js

@@ -5,6 +5,7 @@ import Select from 'react-select';
 
 import CustomRenderField from './components/CustomRenderField';
 import MultiSelectField from './components/MultiSelectField';
+import GroupedOptionsField from './components/GroupedOptionsField';
 import RemoteSelectField from './components/RemoteSelectField';
 import SelectedValuesField from './components/SelectedValuesField';
 import StatesField from './components/StatesField';
@@ -36,6 +37,7 @@ React.render(
 		<SelectedValuesField label="Clickable labels (labels as links)" options={FLAVOURS} hint="Open the console to see click behaviour (data/event)" />
 		<SelectedValuesField label="Disabled option" options={FLAVOURS_WITH_DISABLED_OPTION} hint="You savage! Caramel is the best..." />
 		<DisabledUpsellOptions label="Disable option with an upsell link"/>
+		<GroupedOptionsField label="Option Groups" />
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's not in the list, then hit enter" />
 		<CustomRenderField label="Custom render options/values" />
 		<CustomRenderField label="Custom render options/values (multi)" multi delimiter="," />

examples/src/components/GroupedOptionsField.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Select from 'react-select';
+
+function logChange() {
+	console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments)));
+}
+
+var ops = [{
+	label: 'Black',
+	value: 'black',
+}, {
+	label: 'Primary Colors',
+	options: [{
+		label: 'Yellow',
+		value: 'yellow'
+	}, {
+		label: 'Red',
+		value: 'red'
+	}, {
+		label: 'Blue',
+		value: 'blue'
+	}]
+}, {
+	label: 'Secondary Colors',
+	options: [{
+		label: 'Orange',
+		value: 'orange'
+	}, {
+		label: 'Purple',
+		options: [{
+			label: 'Light Purple',
+			value: 'light_purple'
+		}, {
+			label: 'Medium Purple',
+			value: 'medium_purple'
+		}, {
+			label: 'Dark Purple',
+			value: 'dark_purple'
+		}]
+	}, {
+		label: 'Green',
+		value: 'green'
+	}]
+}, {
+	label: 'White',
+	value: 'white',
+}];
+
+var GroupedOptionsField = React.createClass({
+	displayName: 'GroupedOptionsField',
+	propTypes: {
+		delimiter: React.PropTypes.string,
+		label: React.PropTypes.string,
+		multi: React.PropTypes.bool,
+	},
+
+	render () {
+		return (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					options={ops}
+					placeholder="Select a color"
+					onChange={logChange} />
+			</div>
+		);
+	}
+});
+
+module.exports = GroupedOptionsField;
+

less/menu.less

@@ -57,9 +57,20 @@
 		color: @select-option-disabled-color;
 		cursor: not-allowed;
 	}
+}
 
+.Select-optionGroup-label ~ .Select-option,
+.Select-optionGroup-label ~ .Select-optionGroup {
+	margin-left: @select-padding-horizontal;
 }
 
+.Select-optionGroup-label {
+	box-sizing: border-box;
+	color: @select-option-color;
+	cursor: default;
+	display: block;
+	padding: @select-padding-vertical @select-padding-horizontal;
+}
 
 // no results
 

src/OptionGroup.js

@@ -0,0 +1,45 @@
+var React = require('react');
+var classes = require('classnames');
+
+var Option = React.createClass({
+	propTypes: {
+		children: React.PropTypes.any,
+		className: React.PropTypes.string,
+		optionGroup: React.PropTypes.shape({
+			label: React.PropTypes.string.isRequired,
+			options: React.PropTypes.array.isRequired,
+		}).isRequired,     // object that is base for that option
+		renderFunc: React.PropTypes.func               // method passed to ReactSelect component to render label text
+	},
+
+	blockEvent: function(event) {
+		event.preventDefault();
+		if ((event.target.tagName !== 'A') || !('href' in event.target)) {
+			return;
+		}
+
+		if (event.target.target) {
+			window.open(event.target.href);
+		} else {
+			window.location.href = event.target.href;
+		}
+	},
+
+	render: function() {
+		var obj = this.props.optionGroup;
+		var renderedLabel = this.props.renderFunc(obj);
+		return (
+			<div className={classes(this.props.className, 'Select-optionGroup')}>
+				<div
+					className="Select-optionGroup-label"
+					onMouseDown={this.blockEvent}
+					onClick={this.blockEvent}>
+					<strong>{renderedLabel}</strong>
+				</div>
+				{this.props.children}
+			</div>
+		);
+	}
+});
+
+module.exports = Option;