feat: add datepicker as a fragment component

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

@@ -9,6 +9,7 @@ import * as column from './ui-column';
 import * as combobox from './ui-combobox';
 import * as contentSwitcher from './ui-content-switcher';
 import * as dropdown from './ui-dropdown';
+import * as datePicker from './ui-date-picker';
 import * as grid from './ui-grid';
 import * as numberinput from './ui-number-input';
 import * as radio from './ui-radio';
@@ -45,6 +46,7 @@ export const allComponents = {
 	contentSwitcher,
 	column,
 	dropdown,
+	datePicker,
 	grid,
 	loading,
 	inlineLoading,

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+	DatePicker,
+	DatePickerInput
+} from '@carbon/react';
+import { commonSlots, slotsDisabled } from '../common-slots';
+import { SendSignal, CssClasses } from '../types';
+import { stringToCssClassName } from '../utils';
+
+export interface DatePickerState {
+	type: string;
+	id: string;
+	placeholder?: string;
+	disabled?: boolean;
+	invalid?: boolean;
+	invalidText?: string;
+	rangeInvalidText?: string;
+	light?: boolean;
+	size?: string;
+	kind?: string;
+	dateFormat?: string;
+	value?: string;
+	rangeStartLabel?: string;
+	rangeEndLabel?: string;
+	rangePlaceholder?: string;
+	cssClasses?: CssClasses[];
+	codeContext: {
+		name: string;
+	};
+	style?: any;
+}
+
+export const type = 'date-picker';
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	dateFormat: 'string',
+	kind: 'string',
+	placeholder: 'string',
+	size: 'string',
+	invalidText: 'string',
+	rangeStartLabel: 'string',
+	rangeEndLabel: 'string',
+	rangePlaceholder: 'string',
+	rangeInvalidText: 'string',
+	value: 'string',
+	invalid: 'boolean',
+	setInvalid: (state: DatePickerState) => ({
+		...state,
+		invalid: true
+	}),
+	setValid: (state: DatePickerState) => ({
+		...state,
+		invalid: false
+	}),
+	toggleValid: (state: DatePickerState) => ({
+		...state,
+		invalid: !state.invalid
+	}),
+	light: 'boolean',
+	setLight: (state: DatePickerState) => ({
+		...state,
+		light: true
+	}),
+	setDark: (state: DatePickerState) => ({
+		...state,
+		light: false
+	}),
+	toggleLight: (state: DatePickerState) => ({
+		...state,
+		light: !state.light
+	})
+};
+
+export const signals = ['valueChange', 'click'];
+
+export const UIDatePicker = ({ state, sendSignal }: {
+	state: DatePickerState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'date-picker') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	let cssClasses = state.cssClasses?.map((cc: any) => cc.id).join(' ') || '';
+
+	if (state.style) {
+		if (cssClasses.length > 0) {
+			cssClasses += ' ';
+		}
+		cssClasses += stringToCssClassName(state.codeContext.name);
+	}
+
+	return <DatePicker
+		className={cssClasses}
+		dateFormat={state.dateFormat}
+		datePickerType={state.kind}
+		value={state.value}
+		light={state.light}
+		onClick={() => sendSignal(state.id, 'click')}
+		onChange={(event: any) => {
+			sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() });
+		}}>
+			<DatePickerInput
+				id={state.id}
+				placeholder={state.placeholder}
+				labelText={state.rangeStartLabel}
+				size={state.size}
+				disabled={state.disabled}
+				invalid={state.invalid}
+				invalidText={state.invalidText}/>
+			{
+				state.kind === 'range'
+				&& <DatePickerInput
+					id={`${state.id}-end`}
+					placeholder={state.placeholder}
+					labelText={state.rangePlaceholder}
+					size={state.size}
+					disabled={state.disabled}
+					invalid={state.invalid}
+					invalidText={state.rangeInvalidText} />
+			}
+		</DatePicker>;
+};

player/react/src/lib/utils.tsx

@@ -10,6 +10,7 @@ import { UICodeSnippet } from './components/ui-code-snippet';
 import { UIColumn } from './components/ui-column';
 import { UIComboBox } from './components/ui-combobox';
 import { UIContentSwitcher } from './components/ui-content-switcher';
+import { UIDatePicker } from './components/ui-date-picker';
 import { UIDropdown } from './components/ui-dropdown';
 import { UIExpandableTile } from './components/ui-expandable-tile';
 import { UIGrid } from './components/ui-grid';
@@ -238,6 +239,9 @@ export const renderComponents = (
 		case 'content-switcher':
 			return <UIContentSwitcher key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'date-picker':
+			return <UIDatePicker key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'dropdown':
 			return <UIDropdown key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 

sdk/react/src/lib/components/settings-context-pane.tsx

@@ -208,7 +208,7 @@
 		if (setExternalSettings) {
 			setExternalSettings(settings);
 		}
 	}, [settings]);
 
 	return (
 		<div className={cx(styleContextPaneStyle, 'context-pane-content')}>
@@ -237,7 +237,7 @@
 					</>
 				}
 				{
-					!selectedComponent && <>
+					!selectedComponent && <div className={cx(styleContextPaneStyle)}>
 						<Checkbox
 							id='setFragmentAsTemplate'
 							checked={fragment.labels && fragment.labels.includes('template')}
@@ -291,7 +291,7 @@
 							className={tooltipStyle}>
 							micro layout
 						</DefinitionTooltip>
-					</>
+					</div>
 				}
 				</div>
 			}