feat: Add timepicker component

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

@@ -20,6 +20,7 @@ import * as searchinput from './ui-search-input';
 import * as text from './ui-text';
 import * as textarea from './ui-text-area';
 import * as textinput from './ui-text-input';
+import * as timepicker from './ui-time-picker';
 import * as link from './ui-link';
 import * as loading from './ui-loading';
 import * as inlineLoading from './ui-inline-loading';
@@ -59,6 +60,7 @@ export const allComponents = {
 	text,
 	textarea,
 	textinput,
+	timepicker,
 	overflowMenu,
 	// Tiles
 	tile,

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { TimePickerSelect, TimePicker, SelectItem } from '@carbon/react';
+import { commonSlots, slotsDisabled } from '../common-slots';
+import { SendSignal } from '../types';
+
+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;
+	timezones?: [];
+	showTimePeriod?: boolean;
+	timePeriod?: [];
+}
+
+export const type = 'time-picker';
+
+export const signals = ['valueChange', 'click', 'timezoneValueChange', 'timePeriodValueChange'];
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	invalid: 'boolean',
+	isInvalid: (state: TimePickerState) => ({
+		...state,
+		invalid: true
+	}),
+	isValid: (state: TimePickerState) => ({
+		...state,
+		invalid: false
+	}),
+	toggleIsInvalid: (state: TimePickerState) => ({
+		...state,
+		invalid: !state.invalid
+	}),
+	light: 'boolean',
+	isLight: (state: TimePickerState) => ({
+		...state,
+		light: true
+	}),
+	isDark: (state: TimePickerState) => ({
+		...state,
+		light: false
+	}),
+	toggleIsLight: (state: TimePickerState) => ({
+		...state,
+		light: !state.light
+	}),
+	placeholder: 'string',
+	type: 'string',
+	invalidText: 'string',
+	label: 'string',
+	size: 'string',
+	value: 'string'
+};
+
+export const UITimePicker = ({ state, sendSignal }: {
+	state: TimePickerState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'time-picker') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	return <TimePicker
+		id={state.codeContext?.name}
+		light={state.light}
+		disabled={state.disabled}
+		invalid={state.invalid}
+		invalidText={state.invalidText}
+		placeholder={state.placeholder}
+		size={state.size}
+		labelText={state.label}
+		onClick={() => {
+			sendSignal(state.id, 'click');
+		}}
+		onChange={(event: any) => {
+			sendSignal(state.id, 'valueChange', [event.value], { ...state, value: event.value });
+		}}>
+		{state.showTimePeriod &&
+			<TimePickerSelect
+				id={state.codeContext?.name + '-select-1'}
+				onChange={(event: any) => {
+					sendSignal(state.id, 'timePeriodValueChange', [event.value], { ...state, value: event.value });
+				}}>
+				<SelectItem value='AM' text='AM' />
+				<SelectItem value='PM' text='PM' />
+			</TimePickerSelect>
+		}
+		{state.timezones?.length &&
+			<TimePickerSelect
+				id={state.codeContext?.name + '-select-2'}
+				onChange={(event: any) => {
+					sendSignal(state.id, 'timezoneValueChange', [event.value], { ...state, value: event.value });
+				}}>
+				{
+					state.timezones.map((step: any, index: number) => <SelectItem
+						value={step.value}
+						text={step.text}
+						selected={step.selected}
+						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';
 import { SendSignal } from './types';
@@ -283,6 +284,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} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'overflow-menu':
 			return <UIOverflowMenu key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;