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,110 @@
+import React from 'react';
+import {
+	DatePicker,
+	DatePickerInput
+} from '@carbon/react';
+import { commonSlots, slotsDisabled } from '../common-slots';
+import { SendSignal } from '../types';
+
+export interface DatePickerState {
+	type: string;
+	placeholder: string;
+	disabled?: boolean;
+	id: string;
+	invalid?: boolean;
+	invalidText?: string;
+	rangeInvalidText?: string;
+	light?: boolean;
+	size?: string;
+	datePickerType?: string;
+	dateFormat?: string;
+	value?: string;
+	rangeStartLabel?: string;
+	rangeEndLabel?: string;
+}
+
+export const type = 'date-picker';
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	dateFormat: 'string',
+	datePickerType: 'string',
+	placeholder: 'string',
+	size: 'string',
+	invalidText: 'string',
+	rangeStartLabel: 'string',
+	rangeEndLabel: '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 <></>;
+	}
+	return <DatePicker
+		id={state.id}
+		dateFormat={state.dateFormat}
+		datePickerType={state.datePickerType}
+		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} + '-start'`}
+				placeholder={state.placeholder}
+				labelText={state.rangeStartLabel}
+				size={state.size}
+				disabled={state.disabled}
+				invalid={state.invalid}
+				invalidText={state.invalidText}/>
+			{
+				state.datePickerType === 'range' &&
+					<DatePickerInput
+						id={`${state.id} + '-end'`}
+						placeholder={state.placeholder}
+						labelText={state.rangeEndLabel}
+						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,10 +208,10 @@
 		if (setExternalSettings) {
 			setExternalSettings(settings);
 		}
 	}, [settings]);
 
 	return (
-		<div className={cx(styleContextPaneStyle, 'context-pane-content')}>
+		<div className='context-pane-content'>
 			{
 				selectedComponent &&
 					<SelectedComponentBreadcrumbs
@@ -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>
 			}