feat: Add timepicker component

player/react/src/lib/components/ui-time-picker.tsx

@@ -0,0 +1,55 @@
+import { TimePickerSelect } from '@carbon/react';
+import { SelectItem } from '@carbon/react';
+import { TimePicker } from '@carbon/react';
+import React from 'react';
+
+export interface TimePickerState {
+	id: string | number;
+	codeContext?: {
+		name: string;
+	};
+	type: string;
+	placeholder: string;
+	disabled?: boolean;
+	invalid?: boolean;
+	invalidText?: string;
+	light?: boolean;
+	size?: string;
+	value?: string;
+	label?: string;
+	items: [];
+}
+
+export const UITimePicker = ({ state }: {
+	state: TimePickerState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+}) => {
+	if (state.type !== 'time-picker') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+	return <TimePicker
+		id="time-picker"
+		light={state.light}
+		disabled={state.disabled}
+		invalid={state.invalid}
+		invalidText={state.invalidText}
+		placeholder={state.placeholder}
+		size={state.size}
+		labelText={state.label}>
+		<TimePickerSelect labelText="time-picker-1" id="time-picker-select-1">
+			<SelectItem value="AM" text="AM" />
+			<SelectItem value="PM" text="PM" />
+		</TimePickerSelect>
+		<TimePickerSelect labelText="time-picker-2" id="time-picker-select-2" >
+			{
+				state.items.map((step: any, index: number) => <SelectItem
+					value={step.value}
+					text={step.text}
+					key={index}
+				/>)
+			}
+		</TimePickerSelect>
+	</TimePicker>;
+};

player/react/src/lib/utils.tsx

@@ -33,6 +33,7 @@ import { UITextAreaInput } from './components/ui-text-area';
 import { UITextInput } from './components/ui-text-input';
 import { UITile } from './components/ui-tile';
 import { UITileFold } from './components/ui-tile-fold';
+import { UITimePicker } from './components/ui-time-picker';
 import { UIToggle } from './components/ui-toggle';
 import { kebabCase } from 'lodash';
 
@@ -282,6 +283,9 @@ export const renderComponents = (
 		case 'text-input':
 			return <UITextInput key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'time-picker':
+			return <UITimePicker key={state.id} state={state} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'overflow-menu':
 			return <UIOverflowMenu key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;