Merge pull request #2841 from bryceosterhaus/2840

feat(select): add optgroups for select
liferay · Jan 15, 2020 · c48c697 · c48c697
2 parents fb9bb2f + 5ee50b2
commit c48c697
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 5 deletions.
diff --git a/packages/clay-form/src/Select.tsx b/packages/clay-form/src/Select.tsx
@@ -7,20 +7,28 @@
 import classNames from 'classnames';
 import React from 'react';
 
+const OptGroup: React.FunctionComponent<
+	React.OptgroupHTMLAttributes<HTMLOptGroupElement>
+> = ({children, ...otherProps}) => (
+	<optgroup {...otherProps}>{children}</optgroup>
+);
+
 const Option: React.FunctionComponent<
 	React.OptionHTMLAttributes<HTMLOptionElement>
 > = ({label, ...otherProps}) => <option {...otherProps}>{label}</option>;
 
 const ClaySelect: React.FunctionComponent<
 	React.SelectHTMLAttributes<HTMLSelectElement>
 > & {
+	OptGroup: typeof OptGroup;
 	Option: typeof Option;
 } = ({children, className, ...otherProps}) => (
 	<select {...otherProps} className={classNames('form-control', className)}>
 		{children}
 	</select>
 );
 
+ClaySelect.OptGroup = OptGroup;
 ClaySelect.Option = Option;
 
 export default ClaySelect;
diff --git a/packages/clay-form/src/SelectWithOption.tsx b/packages/clay-form/src/SelectWithOption.tsx
@@ -12,17 +12,35 @@ interface IProps extends React.ComponentProps<typeof Select> {
 	/**
 	 * Options of the select.
 	 */
-	options: Array<React.ComponentProps<typeof Select.Option>>;
+	options: Array<
+		(
+			| React.ComponentProps<typeof Select.Option>
+			| React.ComponentProps<typeof Select.OptGroup>) & {
+			options?: Array<React.ComponentProps<typeof Select.Option>>;
+			type?: 'group';
+		}
+	>;
 }
 
 const ClaySelectWithOption: React.FunctionComponent<IProps> = ({
 	options = [],
 	...otherProps
 }: IProps) => (
 	<Select {...otherProps}>
-		{options.map((option, index) => (
-			<Select.Option {...option} key={index} />
-		))}
+		{options.map((option, index) => {
+			if (option.type === 'group') {
+				return (
+					<Select.OptGroup label={option.label}>
+						{option.options &&
+							option.options.map((item, j) => (
+								<Select.Option {...item} key={j} />
+							))}
+					</Select.OptGroup>
+				);
+			}
+
+			return <Select.Option {...option} key={index} />;
+		})}
 	</Select>
 );
 

diff --git a/packages/clay-form/stories/index.tsx b/packages/clay-form/stories/index.tsx
@@ -234,7 +234,7 @@ storiesOf('Components|ClaySelect', module)
 			</div>
 		</div>
 	))
-	.add('with high-level', () => (
+	.add('high-level', () => (
 		<div className="sheet">
 			<div className="form-group">
 				<label htmlFor="mySelectId">{'Select Label'}</label>
@@ -247,4 +247,44 @@ storiesOf('Components|ClaySelect', module)
 				/>
 			</div>
 		</div>
+	))
+	.add('high-level with groups', () => (
+		<div className="sheet">
+			<div className="form-group">
+				<label htmlFor="mySelectId">{'Dinosaurs'}</label>
+				<ClaySelectWithOption
+					id="mySelectId"
+					options={[
+						{
+							label: 'Theropods',
+							options: [
+								{
+									label: 'Tyrannosaurus',
+									value: 'Tyrannosaurus',
+								},
+								{
+									label: 'Velociraptor',
+									value: 'Velociraptor',
+								},
+							],
+							type: 'group',
+						},
+						{
+							label: 'Sauropods',
+							options: [
+								{
+									label: 'Diplodocus',
+									value: 'Diplodocus',
+								},
+								{
+									label: 'Saltasaurus',
+									value: 'Saltasaurus',
+								},
+							],
+							type: 'group',
+						},
+					]}
+				/>
+			</div>
+		</div>
 	));