@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/search-statement/LiteralValue.tsx

@@ -0,0 +1,616 @@
+import React from 'react';
+import {
+	EntityType,
+	PrimitiveTypes,
+	ProjectState,
+	searchStatementDefs,
+	searchStatementState as searchStatementStateLib,
+} from '@elyx-code/project-logic-tree';
+import {
+	Autocomplete,
+	Box,
+	Button,
+	Checkbox,
+	FormControlLabel,
+	FormGroup,
+	IconButton,
+	TextField,
+} from '@mui/material';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import dayjs from 'dayjs';
+import { useSearchStatementContext } from './search-statement-context';
+import { ExplicitDataTypeIcon } from '../../draggable-entity-card/DataTypeIcon';
+
+const { SearchStatementLiteralValue } =
+	searchStatementStateLib;
+
+const { SearchLiteralValueType } =
+	searchStatementDefs;
+
+type SearchLiteralValueType = searchStatementDefs.SearchLiteralValueType;
+type SearchStatementLiteralValue =
+	searchStatementStateLib.SearchStatementLiteralValue;
+
+export interface ILiteralValueOption {
+	type: 'literal-value-option';
+	valueType: SearchLiteralValueType;
+}
+
+export function fromLiteralValueTypeToHTMLInputType(
+	valueType: SearchLiteralValueType
+): 'text' | 'number' | 'date' {
+	switch (valueType) {
+		case SearchLiteralValueType.String:
+			return 'text';
+		case SearchLiteralValueType.Number:
+			return 'number';
+		case SearchLiteralValueType.Date:
+			return 'date';
+		default:
+			return 'text';
+	}
+}
+
+export function fromLiteralValueTypeToReadableLabel(
+	valueType: SearchLiteralValueType
+): string {
+	switch (valueType) {
+		case SearchLiteralValueType.String:
+			return 'Text';
+		case SearchLiteralValueType.Number:
+			return 'Number';
+		case SearchLiteralValueType.Date:
+			return 'Date';
+		case SearchLiteralValueType.Boolean:
+			return 'Boolean';
+		case SearchLiteralValueType.Null:
+			return 'Null';
+		case SearchLiteralValueType.Array:
+			return 'Array';
+		default:
+			return 'Unknown';
+	}
+}
+
+export const fromLiteralValueTypeToExplicitIconName = (
+	valueType: SearchLiteralValueType
+): PrimitiveTypes | 'list' | EntityType.DefinitionEntity | 'unknown' => {
+	switch (valueType) {
+		case SearchLiteralValueType.String:
+			return PrimitiveTypes.String;
+		case SearchLiteralValueType.Number:
+			return PrimitiveTypes.Number;
+		case SearchLiteralValueType.Date:
+			return PrimitiveTypes.Date;
+		case SearchLiteralValueType.Boolean:
+			return PrimitiveTypes.Boolean;
+		case SearchLiteralValueType.Null:
+			return PrimitiveTypes.Null;
+		case SearchLiteralValueType.Array:
+			return 'list';
+		default:
+			return 'unknown';
+	}
+};
+
+// Maps a SQLDataType (the function registry's `returnType`) to the icon name
+// the ExplicitDataTypeIcon component understands. Used to render a meaningful
+// icon for ColumnRefs whose source is a function call (e.g. the column
+// returned by a table-valued function in FROM, or a SELECT FunctionCall whose
+// alias is referenced from ORDER BY) instead of falling back to the generic
+// `?` "unknown" icon.
+export const fromSQLDataTypeToExplicitIconName = (
+	dataType: searchStatementDefs.SQLDataType | undefined | null
+): PrimitiveTypes | 'list' | EntityType.DefinitionEntity | 'unknown' => {
+	switch (dataType) {
+		case 'string':
+			return PrimitiveTypes.String;
+		case 'number':
+			return PrimitiveTypes.Number;
+		case 'boolean':
+			return PrimitiveTypes.Boolean;
+		case 'date':
+			return PrimitiveTypes.Date;
+		case 'json':
+			// JSON values are object-shaped key/value bags — closest primitive icon.
+			return PrimitiveTypes.KeyValue;
+		case 'array':
+		case 'table':
+			// Array / table-valued functions yield a collection; use the list icon.
+			return 'list';
+		case 'any':
+		default:
+			return 'unknown';
+	}
+};
+
+// Human label counterpart of `fromSQLDataTypeToExplicitIconName`, used in the
+// secondary description line of column-selector options/value displays.
+export const fromSQLDataTypeToReadableLabel = (
+	dataType: searchStatementDefs.SQLDataType | undefined | null
+): string => {
+	switch (dataType) {
+		case 'string':
+			return 'Text';
+		case 'number':
+			return 'Number';
+		case 'boolean':
+			return 'Boolean';
+		case 'date':
+			return 'Date';
+		case 'json':
+			return 'JSON';
+		case 'array':
+			return 'Array';
+		case 'table':
+			return 'Row';
+		case 'any':
+			return 'Any';
+		default:
+			return 'Unknown';
+	}
+};
+
+export const fromLiteralValueTypeToFontColor = (
+	valueType: SearchLiteralValueType
+): string => {
+	switch (valueType) {
+		case SearchLiteralValueType.String:
+			return 'var(--color-string--value)';
+		case SearchLiteralValueType.Number:
+			return 'var(--color-number--value)';
+		case SearchLiteralValueType.Date:
+			return 'var(--color-string--value)';
+		case SearchLiteralValueType.Boolean:
+			return 'var(--color-boolean--value)';
+		case SearchLiteralValueType.Null:
+			return 'var(--color-support-primary)';
+		default:
+			return 'black';
+	}
+};
+
+export const LiteralValueTypeSelectorValue = ({
+	value,
+}: {
+	value: SearchStatementLiteralValue | ILiteralValueOption;
+}) => {
+	return (
+		<span
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<span
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: 8,
+					color: fromLiteralValueTypeToFontColor(value.valueType),
+				}}
+			>
+				<ExplicitDataTypeIcon
+					icon={fromLiteralValueTypeToExplicitIconName(value.valueType)}
+					size='small'
+					id={'literal-value-type-selector-value--' + value.valueType}
+				/>
+				{`${fromLiteralValueTypeToReadableLabel(value.valueType)} value`}
+			</span>
+			<p
+				style={{
+					margin: 0,
+					marginLeft: 20,
+					fontSize: 10,
+					color: 'rgba(0,0,0,0.54)',
+				}}
+			>
+				{value.valueType === SearchLiteralValueType.Null
+					? 'An explicit empty value'
+					: 'A literal inputted value'}
+			</p>
+		</span>
+	);
+};
+
+// Standalone item-list editor for a literal of valueType === Array. Rendered
+// as a sibling BELOW the type-picker row (matching how FunctionCallSelector's
+// argument list renders below the function-name picker), not as a sibling
+// to the right inside the picker row. Each item reuses LiteralValueTypeSelector,
+// so nested arrays/booleans/dates/strings/etc. work recursively.
+export const LiteralArrayBuilder = ({
+	value,
+	onChange,
+	disabled,
+}: {
+	value: SearchStatementLiteralValue;
+	onChange: (value: SearchStatementLiteralValue) => void;
+	disabled?: boolean;
+}) => {
+	const { searchStatementState } = useSearchStatementContext();
+
+	const items = Array.isArray(value.value)
+		? (value.value as SearchStatementLiteralValue[])
+		: [];
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 8,
+				paddingLeft: 16,
+				borderLeft: '2px solid rgba(0,0,0,0.1)',
+				marginTop: 8,
+			}}
+		>
+			{items.map((item, index) => (
+				<div
+					key={index}
+					style={{
+						display: 'flex',
+						alignItems: 'flex-start',
+						gap: 8,
+					}}
+				>
+					<div
+						style={{
+							width: 12,
+							height: 1,
+							marginTop: 20,
+							backgroundColor: 'rgba(0,0,0,0.2)',
+							flexShrink: 0,
+						}}
+					/>
+					<LiteralValueTypeSelector
+						value={item}
+						label={`Item ${index + 1}`}
+						onChange={(newItem) => {
+							const newItems = [...items];
+							newItems[index] = newItem;
+							value.value = newItems;
+							onChange(value);
+						}}
+					/>
+					<IconButton
+						size='small'
+						disabled={disabled}
+						onClick={() => {
+							const newItems = items.filter((_, i) => i !== index);
+							value.value = newItems;
+							onChange(value);
+						}}
+						aria-label={`Remove item ${index + 1}`}
+						style={{ marginTop: 4 }}
+					>
+						<DeleteOutlineIcon fontSize='small' />
+					</IconButton>
+				</div>
+			))}
+			<Button
+				size='small'
+				disabled={disabled}
+				onClick={() => {
+					const newItem = new SearchStatementLiteralValue(searchStatementState);
+					newItem.valueType = SearchLiteralValueType.String;
+					value.value = [...items, newItem];
+					onChange(value);
+				}}
+				style={{ alignSelf: 'flex-start', fontSize: 10, marginLeft: 20 }}
+			>
+				+ Add Item
+			</Button>
+		</div>
+	);
+};
+
+const LiteralValueField = ({
+	value,
+	onChange,
+	disabled,
+}: {
+	value: SearchStatementLiteralValue;
+	onChange: (value: SearchStatementLiteralValue) => void;
+	disabled?: boolean;
+}) => {
+	const [localValue, setLocalValue] = React.useState<number | string | Date>(
+		value?.value as number | string | Date
+	);
+
+	// Array literals render their item list as a BELOW-the-row block via
+	// LiteralArrayBuilder, not as an inline value field next to the type
+	// picker. Returning null here keeps the picker row compact; the parent
+	// component (ValueSelector / LiteralValueTypeSelector) renders
+	// LiteralArrayBuilder directly underneath.
+	if (value.valueType === SearchLiteralValueType.Array) {
+		return null;
+	}
+
+	if (value.valueType === SearchLiteralValueType.Boolean) {
+		return (
+			<FormGroup>
+				<FormControlLabel
+					control={
+						<Checkbox
+							disabled={disabled}
+							style={{
+								height: 28,
+							}}
+							checked={value.value as boolean}
+							onChange={(e) => {
+								value.value = e.target.checked;
+								onChange(value);
+							}}
+						/>
+					}
+					label={value.value ? 'True' : 'False'}
+				/>
+			</FormGroup>
+		);
+	} else if (value.valueType === SearchLiteralValueType.Date) {
+		return (
+			<DateTimePicker
+				defaultValue={value.value ? dayjs(value.value as Date) : undefined}
+				disabled={disabled}
+				slotProps={{
+					field: {
+						// @ts-ignore
+						size: 'small',
+						sx: {
+							width: 200,
+						},
+					},
+				}}
+				onChange={(newValue) => {
+					setLocalValue(newValue.toDate());
+				}}
+				onBlur={() => {
+					value.value = localValue;
+					onChange(value);
+				}}
+			/>
+		);
+	}
+
+	return (
+		<TextField
+			size='small'
+			label='Value'
+			disabled={disabled}
+			type={fromLiteralValueTypeToHTMLInputType(value.valueType)}
+			value={localValue}
+			onChange={(e) => {
+				setLocalValue(e.target.value);
+			}}
+			onBlur={() => {
+				value.value = localValue;
+				onChange(value);
+			}}
+		/>
+	);
+};
+
+export const LiteralValueTypeSelector = ({
+	value,
+	onChange,
+	label,
+	id,
+}: {
+	value: SearchStatementLiteralValue;
+	onChange: (value: SearchStatementLiteralValue) => void;
+	label?: string;
+	id?: string;
+}) => {
+	const { searchStatementState, entity } = useSearchStatementContext();
+
+	const resolveLocalValueFromExternalValue = (
+		value: SearchStatementLiteralValue
+	): ILiteralValueOption => {
+		return {
+			type: 'literal-value-option',
+			valueType: value.valueType,
+		};
+	};
+
+	const [localValue, _] = React.useState<ILiteralValueOption>(
+		resolveLocalValueFromExternalValue(value)
+	);
+
+	const sanitizedOptions: ILiteralValueOption[] = [
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.String,
+		},
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Number,
+		},
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Boolean,
+		},
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Date,
+		},
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Null,
+		},
+		{
+			type: 'literal-value-option',
+			valueType: SearchLiteralValueType.Array,
+		},
+	];
+
+	const ID = id || 'literal-value-type-selector--' + ProjectState.UUID.uuid();
+
+	const showLiteralValueField: boolean =
+		!!localValue &&
+		localValue.type === 'literal-value-option' &&
+		localValue.valueType !== SearchLiteralValueType.Null;
+
+	// Array values get a builder rendered BELOW the picker row, mirroring how
+	// function arguments render below the function-name picker.
+	const showArrayBuilder: boolean =
+		!!value &&
+		value.type === searchStatementDefs.SearchStatementNodeType.LiteralValue &&
+		value.valueType === SearchLiteralValueType.Array;
+
+	return (
+		<span
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 8,
+			}}
+		>
+		<span
+			style={{
+				display: 'flex',
+				gap: 8,
+			}}
+		>
+			<Autocomplete
+				disablePortal
+				disabled={!entity.editable}
+				options={sanitizedOptions}
+				sx={{
+					width: 200,
+				}}
+				value={localValue}
+				getOptionLabel={(option) => {
+					if (option.type === 'literal-value-option') {
+						return `${fromLiteralValueTypeToReadableLabel(
+							option.valueType
+						)} value`;
+					}
+				}}
+				onChange={(e, newValue) => {
+					let resolvedNewValue: SearchStatementLiteralValue;
+
+					if (newValue?.type === 'literal-value-option') {
+						resolvedNewValue = new SearchStatementLiteralValue(
+							searchStatementState
+						);
+						resolvedNewValue.valueType = newValue.valueType;
+
+						// Only the explicit "Null" and "Array" types carry an initial
+						// value on creation — Null gets `null`, Array gets `[]`. For
+						// every other type we leave `value` undefined so the AST can
+						// flag the literal as invalid until the user picks a concrete
+						// value, instead of rendering arbitrary defaults like `false`
+						// for booleans or `new Date()` for dates.
+						if (newValue.valueType === SearchLiteralValueType.Null) {
+							resolvedNewValue.value = null;
+						} else if (newValue.valueType === SearchLiteralValueType.Array) {
+							resolvedNewValue.value = [];
+						}
+					}
+
+					// Send a new literal value as well, but with the value property being empty,
+					// when the component is updated, the local value will be set
+					onChange(resolvedNewValue as SearchStatementLiteralValue);
+				}}
+				renderOption={(props, option) => {
+					const { key, ...optionProps } = props;
+					return (
+						<Box
+							key={key}
+							component='li'
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...optionProps}
+						>
+							<LiteralValueTypeSelectorValue value={option} />
+						</Box>
+					);
+				}}
+				renderInput={(params) => (
+					<span
+						style={{ position: 'relative', display: 'block', height: '100%' }}
+					>
+						<span
+							id={ID + `--input-selected-value`}
+							style={{
+								position: 'absolute',
+								top: 8,
+								left: 0,
+								width: '100%',
+								height: '100%',
+								maxHeight: 30,
+								overflowY: 'hidden',
+								// To match start of text field text
+								paddingLeft: 14,
+								display: 'flex',
+								flexDirection: 'column',
+							}}
+						>
+							<LiteralValueTypeSelectorValue value={value} />
+						</span>
+
+						<TextField
+							{...params}
+							size='small'
+							label={label || `Select value type`}
+							className={`condition-builder__input`}
+							slotProps={{
+								htmlInput: {
+									...params.inputProps,
+									id: ID + `--input`,
+									style: {
+										opacity: 0,
+									},
+								},
+							}}
+							onFocus={(e) => {
+								e.target.style.opacity = '1';
+
+								const selectedValueElement = document.getElementById(
+									ID + `--input-selected-value`
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'hidden';
+								}
+							}}
+							onBlur={(e) => {
+								e.target.style.opacity = '0';
+
+								const selectedValueElement = document.getElementById(
+									ID + `--input-selected-value`
+								);
+
+								if (!!selectedValueElement) {
+									selectedValueElement.style.visibility = 'visible';
+								}
+							}}
+						/>
+					</span>
+				)}
+			/>
+			{showLiteralValueField && (
+				<LiteralValueField
+					disabled={!entity.editable}
+					value={value as SearchStatementLiteralValue}
+					onChange={(newValue) => {
+						onChange(newValue);
+					}}
+				/>
+			)}
+		</span>
+
+		{showArrayBuilder && (
+			<LiteralArrayBuilder
+				disabled={!entity.editable}
+				value={value as SearchStatementLiteralValue}
+				onChange={(newValue) => {
+					onChange(newValue);
+				}}
+			/>
+		)}
+		</span>
+	);
+};
+
+export default LiteralValueField;