@elementor/editor-variables 0.6.0 → 0.8.0

package/src/components/color-variable-creation.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { BrushIcon } from '@elementor/icons';
+import {
+	bindPopover,
+	Box,
+	Button,
+	CardActions,
+	CloseButton,
+	Divider,
+	FormLabel,
+	Grid,
+	Popover,
+	type PopupState,
+	Stack,
+	TextField,
+	Typography,
+	UnstableColorField,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { createVariable } from '../hooks/use-prop-variables';
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+
+export const ColorVariableCreation = ( { popupState }: { popupState: PopupState } ) => {
+	const { setValue: setVariable } = useBoundProp( colorVariablePropTypeUtil );
+
+	const [ color, setColor ] = useState( '' );
+	const [ label, setLabel ] = useState( '' );
+
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	const resetFields = () => {
+		setColor( '' );
+		setLabel( '' );
+	};
+
+	const closePopover = () => {
+		resetFields();
+		popupState.close();
+	};
+
+	const handleCreate = () => {
+		const key = createVariable( colorVariablePropTypeUtil.key, { label, value: color } );
+		setVariable( key );
+		closePopover();
+	};
+
+	const isInValidForm = () => {
+		return ! color?.trim() || ! label?.trim();
+	};
+
+	return (
+		<Box ref={ anchorRef }>
+			<Popover
+				{ ...bindPopover( popupState ) }
+				anchorEl={ anchorRef.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+			>
+				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
+					<BrushIcon fontSize="tiny" sx={ { mr: 0.5 } } />
+					<Typography variant="subtitle2">{ __( 'Create variable', 'elementor' ) }</Typography>
+					<CloseButton
+						slotProps={ { icon: { fontSize: 'small' } } }
+						sx={ { ml: 'auto' } }
+						onClick={ closePopover }
+					/>
+				</Stack>
+
+				<Divider />
+
+				<Stack p={ 1.5 } gap={ 1.5 }>
+					<Grid container gap={ 0.75 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<FormLabel size="small">{ __( 'Name', 'elementor' ) }</FormLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<TextField
+								size="tiny"
+								fullWidth
+								value={ label }
+								onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => setLabel( e.target.value ) }
+							/>
+						</Grid>
+					</Grid>
+
+					<Grid container gap={ 0.75 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<FormLabel size="small">{ __( 'Value', 'elementor' ) }</FormLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<UnstableColorField
+								size="tiny"
+								fullWidth
+								value={ color }
+								onChange={ setColor }
+								slotProps={ {
+									colorPicker: {
+										anchorEl: anchorRef.current,
+										anchorOrigin: { vertical: 'top', horizontal: 'right' },
+										transformOrigin: { vertical: 'top', horizontal: -10 },
+									},
+								} }
+							/>
+						</Grid>
+					</Grid>
+				</Stack>
+
+				<CardActions>
+					<Button size="small" onClick={ closePopover } color="secondary" variant="text">
+						{ __( 'Cancel', 'elementor' ) }
+					</Button>
+					<Button size="small" variant="contained" disabled={ isInValidForm() } onClick={ handleCreate }>
+						{ __( 'Create', 'elementor' ) }
+					</Button>
+				</CardActions>
+			</Popover>
+		</Box>
+	);
+};

package/src/components/variables-selection-popover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useId } from 'react';
-import { ColorFilterIcon, DetachIcon } from '@elementor/icons';
+import { useId, useRef } from 'react';
+import { ColorFilterIcon, DetachIcon, PlusIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -16,6 +16,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { type Variable } from '../types';
+import { ColorVariableCreation } from './color-variable-creation';
 
 type Props = {
 	selectedVariable: Variable;
@@ -32,13 +33,20 @@ export const VariablesSelectionPopover = ( {
 }: Props ) => {
 	const id = useId();
 	const popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );
+	const creationPopupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-creation-${ id }` } );
 
 	const closePopover = () => popupState.close();
 
+	const handleCreateButtonClick = ( event: React.MouseEvent ) => {
+		closePopover();
+		bindTrigger( creationPopupState ).onClick( event );
+	};
+
+	const anchorRef = useRef< HTMLDivElement >( null );
 	const { label } = selectedVariable;
 
 	return (
-		<Box>
+		<Box ref={ anchorRef }>
 			<Tag
 				fullWidth
 				showActionsOnHover
@@ -57,28 +65,36 @@ export const VariablesSelectionPopover = ( {
 					</Box>
 				}
 				actions={
-					<IconButton size={ 'tiny' } onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
-						<DetachIcon fontSize={ 'tiny' } />
+					<IconButton size="tiny" onClick={ unlinkVariable } aria-label={ __( 'Unlink', 'elementor' ) }>
+						<DetachIcon fontSize="tiny" />
 					</IconButton>
 				}
 			/>
 			<Popover
-				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'center' } }
 				{ ...bindPopover( popupState ) }
+				disableScrollLock
+				anchorEl={ anchorRef.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 			>
 				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<ColorFilterIcon fontSize={ 'tiny' } sx={ { mr: 0.5 } } />
+					<ColorFilterIcon fontSize="tiny" sx={ { mr: 0.5 } } />
 					<Typography variant="subtitle2">{ __( 'Variables', 'elementor' ) }</Typography>
-					<CloseButton
-						slotProps={ { icon: { fontSize: 'tiny' } } }
-						sx={ { ml: 'auto' } }
-						onClick={ closePopover }
-					/>
+					<Stack direction="row" sx={ { ml: 'auto' } }>
+						<IconButton
+							{ ...bindTrigger( creationPopupState ) }
+							size="tiny"
+							onClick={ handleCreateButtonClick }
+						>
+							<PlusIcon fontSize="tiny" />
+						</IconButton>
+						<CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ closePopover } />
+					</Stack>
 				</Stack>
-				{ children( { closePopover } ) }
+				{ children?.( { closePopover } ) }
 			</Popover>
+
+			<ColorVariableCreation popupState={ creationPopupState } />
 		</Box>
 	);
 };

package/src/hooks/use-prop-variables.ts

@@ -1,6 +1,12 @@
 import { useMemo } from 'react';
 
-type Variables = Record< string, { value: string; label: string } >;
+import { type Variable } from '../types';
+
+type VariableData = {
+	value: string;
+	label: string;
+};
+type Variables = Record< string, VariableData >;
 
 type VariablesGroup = Record< string, Variables >;
 
@@ -9,7 +15,7 @@ export const usePropVariables = ( propTypeKey: string ) => {
 };
 
 export const useVariable = ( propTypeKey: string, key: string ) => {
-	if ( ! variables[ propTypeKey ][ key ] ) {
+	if ( ! variables[ propTypeKey ]?.[ key ] ) {
 		return null;
 	}
 
@@ -20,12 +26,32 @@ export const useVariable = ( propTypeKey: string, key: string ) => {
 };
 
 const normalizeVariables = ( propTypeKey: string ) => {
-	return Object.entries( variables[ propTypeKey ] ).map( ( [ key, { label, value } ] ) => ( {
+	return Object.entries( variables[ propTypeKey ] || {} ).map( ( [ key, { label, value } ] ) => ( {
 		key,
 		label,
 		value,
 	} ) );
 };
 
+export const createVariable = ( propTypeKey: string, variable: VariableData ) => {
+	const id = generateId( 'e-gv', Object.keys( variables[ propTypeKey ] ).length );
+
+	const newVariable: Variable = {
+		value: variable.value,
+		label: variable.label,
+		key: propTypeKey,
+	};
+
+	variables[ propTypeKey ][ id ] = newVariable || {};
+
+	return id;
+};
+
 // @ts-expect-error the temporary solution to get the list of variables from the server
-const variables: VariablesGroup = window?.ElementorV4Variables;
+const variables: VariablesGroup = window?.ElementorV4Variables || {};
+
+const generateId = ( prefix: string, variablesCount: number ) => {
+	const randomHex = Math.random().toString( 16 ).slice( 2, 9 );
+
+	return `${ prefix }${ randomHex }${ variablesCount }`;
+};