feat: select component

player/react/src/lib/components/index.ts

@@ -17,6 +17,7 @@ import * as progressIndicator from './ui-progress-indicator';
 import * as row from './ui-row';
 import * as tag from './ui-tag';
 import * as searchinput from './ui-search-input';
+import * as select from './ui-select';
 import * as text from './ui-text';
 import * as textarea from './ui-text-area';
 import * as textinput from './ui-text-input';
@@ -55,6 +56,7 @@ export const allComponents = {
 	progressIndicator,
 	row,
 	searchinput,
+	select,
 	tag,
 	text,
 	textarea,

player/react/src/lib/components/ui-select.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+	Select,
+	SelectItem,
+	SelectItemGroup
+} from '@carbon/react';
+import { CssClasses, SendSignal } from '../types';
+import { commonSlots, slotsDisabled } from '../common-slots';
+
+export interface SelectState {
+	id?: string;
+	type: string;
+	inline?: boolean;
+	invalid?: boolean;
+	disabled?: boolean;
+	warn?: boolean;
+	label: string;
+	invalidText?: string;
+	warnText?: string;
+	size?: string;
+	defaultValue: string;
+	helperText?: string;
+	items: [];
+	cssClasses?: CssClasses[];
+	codeContext?: {
+		name: string;
+		href?: string;
+	};
+}
+
+export const type = 'select';
+
+export const signals = ['click'];
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	label: 'string',
+	defaultValue: 'string'
+};
+
+export const UISelect = ({ state, sendSignal }: {
+	state: SelectState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+
+	if (state.type !== 'select') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	return <Select
+		id={state.id}
+		defaultValue={state.defaultValue}
+		helperText={state.helperText}
+		invalidText={state.invalidText}
+		warn={state.warn}
+		warnText={state.warnText}
+		size={state.size}
+		label={state.label}
+		inline={state.inline}
+		invalid={state.invalid}
+		disabled={state.disabled}>
+		{
+			state.items.map((step: any) =>
+				step.items && step.items.length > 0
+				? <SelectItemGroup
+					key={step.id}
+					label={step.label}
+					disabled={step.disabled}>
+						{
+							step.items.map((child: any) => <SelectItem
+									key={step.id}
+									onClick={() => sendSignal(step.id, 'click')}
+									text={child.text}
+									value={child.value}
+									disabled={child.disabled}
+									hidden={child.hidden}
+								/>)
+						}
+					</SelectItemGroup>
+				: <SelectItem
+					onClick={() => sendSignal(step.id, 'click')}
+					key={step.id}
+					text={step.text}
+					value={step.value}
+					disabled={step.disabled}
+					hidden={step.hidden} />
+			)
+		}
+	</Select>;
+};

player/react/src/lib/utils.tsx

@@ -34,6 +34,7 @@ import { UITextInput } from './components/ui-text-input';
 import { UITile } from './components/ui-tile';
 import { UITileFold } from './components/ui-tile-fold';
 import { UIToggle } from './components/ui-toggle';
+import { UISelect } from './components/ui-select';
 import { kebabCase } from 'lodash';
 import { SendSignal } from './types';
 
@@ -271,6 +272,9 @@ export const renderComponents = (
 		case 'search':
 			return <UISearchInput key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'select':
+			return <UISelect key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'tag':
 			return <UITag key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;