@elementor/editor-controls 1.2.0 → 1.3.0

package/src/controls/transform-control/functions/move.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { moveTransformPropTypeUtil } from '@elementor/editor-props';
+import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
+import { AxisRow } from './axis-row';
+
+const moveAxisControls: { label: string; bindValue: 'x' | 'y' | 'z'; startIcon: React.ReactNode }[] = [
+	{
+		label: __( 'Move X', 'elementor' ),
+		bindValue: 'x',
+		startIcon: <ArrowRightIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Move Y', 'elementor' ),
+		bindValue: 'y',
+		startIcon: <ArrowDownSmallIcon fontSize={ 'tiny' } />,
+	},
+	{
+		label: __( 'Move Z', 'elementor' ),
+		bindValue: 'z',
+		startIcon: <ArrowDownLeftIcon fontSize={ 'tiny' } />,
+	},
+];
+
+export const Move = () => {
+	const context = useBoundProp( moveTransformPropTypeUtil );
+	const rowRef = useRef< HTMLDivElement >( null );
+
+	return (
+		<Grid container spacing={ 1.5 }>
+			<PropProvider { ...context }>
+				<PropKeyProvider bind={ 'transform-move' }>
+					{ moveAxisControls.map( ( control ) => (
+						<AxisRow key={ control.bindValue } { ...control } anchorRef={ rowRef } />
+					) ) }
+				</PropKeyProvider>
+			</PropProvider>
+		</Grid>
+	);
+};

package/src/controls/transform-control/transform-content.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { PropKey } from '@elementor/editor-props';
+import { Box, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider } from '../../bound-prop-context';
+import { PopoverContent } from '../../components/popover-content';
+import { Move } from './functions/move';
+
+type TransformTabValue = 'transform-move';
+
+export const TransformContent = ( { bind }: { anchorEl?: HTMLElement | null; bind: PropKey } ) => {
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< TransformTabValue >( 'transform-move' );
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<PopoverContent>
+				<Box sx={ { width: '100%' } }>
+					<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
+						<Tabs
+							size="small"
+							variant="fullWidth"
+							{ ...getTabsProps() }
+							aria-label={ __( 'Transform', 'elementor' ) }
+						>
+							<Tab label={ __( 'Move', 'elementor' ) } { ...getTabProps( 'transform-move' ) } />
+						</Tabs>
+					</Box>
+					<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'transform-move' ) }>
+						<Move />
+					</TabPanel>
+				</Box>
+			</PopoverContent>
+		</PropKeyProvider>
+	);
+};

package/src/controls/transform-control/transform-icon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type TransformItemPropValue } from '@elementor/editor-props';
+import { ArrowsMaximizeIcon } from '@elementor/icons';
+
+export const TransformIcon = ( { value }: { value: TransformItemPropValue } ) => {
+	switch ( value.$$type ) {
+		case 'transform-move':
+			return <ArrowsMaximizeIcon fontSize="tiny" />;
+		default:
+			return null;
+	}
+};

package/src/controls/transform-control/transform-label.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { TransformItemPropValue } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const transformMoveValue = ( value: TransformItemPropValue[ 'value' ] ) =>
+	Object.values( value )
+		.map( ( axis ) => `${ axis?.value.size }${ axis?.value.unit }` )
+		.join( ', ' );
+
+export const TransformLabel = ( props: { value: TransformItemPropValue } ) => {
+	const { $$type, value } = props.value;
+	switch ( $$type ) {
+		case 'transform-move':
+			return <Label label={ __( 'Move', 'elementor' ) } value={ transformMoveValue( value ) } />;
+		default:
+			return '';
+	}
+};
+
+const Label = ( { label, value }: { label: string; value: string } ) => {
+	return (
+		<Box component="span">
+			{ label }: { value }
+		</Box>
+	);
+};

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { type TransformItemPropValue, transformPropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropProvider, useBoundProp } from '../../bound-prop-context';
+import { Repeater } from '../../components/repeater';
+import { createControl } from '../../create-control';
+import { TransformContent } from './transform-content';
+import { TransformIcon } from './transform-icon';
+import { TransformLabel } from './transform-label';
+
+const initialTransformValue: TransformItemPropValue = {
+	$$type: 'transform-move',
+	value: {
+		x: { $$type: 'size', value: { size: 0, unit: 'px' } },
+		y: { $$type: 'size', value: { size: 0, unit: 'px' } },
+		z: { $$type: 'size', value: { size: 0, unit: 'px' } },
+	},
+};
+
+export const TransformRepeaterControl = createControl( () => {
+	const { propType, value: transformValues, setValue, disabled } = useBoundProp( transformPropTypeUtil );
+
+	return (
+		<PropProvider propType={ propType } value={ transformValues } setValue={ setValue }>
+			<Repeater
+				openOnAdd
+				disabled={ disabled }
+				values={ transformValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Transform', 'elementor' ) }
+				showDuplicate={ false }
+				itemSettings={ {
+					Icon: TransformIcon,
+					Label: TransformLabel,
+					Content: TransformContent,
+					initialValues: initialTransformValue,
+				} }
+			/>
+		</PropProvider>
+	);
+} );

package/src/hooks/use-repeatable-control-context.ts

@@ -9,7 +9,12 @@ export type ChildControlConfig = {
 	label?: string;
 };
 
-const RepeatableControlContext = createContext< ChildControlConfig | undefined >( undefined );
+type RepeatableControlContextType = ChildControlConfig & {
+	placeholder: string;
+	patternLabel: string;
+};
+
+const RepeatableControlContext = createContext< RepeatableControlContextType | undefined >( undefined );
 
 const useRepeatableControlContext = () => {
 	const context = useContext( RepeatableControlContext );

package/src/index.ts

@@ -23,6 +23,7 @@ export { SwitchControl } from './controls/switch-control';
 export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
+export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
 export { PopoverContent } from './components/popover-content';
 
 // components