@elementor/editor-controls 0.2.0 → 0.3.0

package/src/controls/gap-control.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { gapPropTypeUtil, type PropValue } from '@elementor/editor-props';
+import { DetachIcon, LinkIcon } from '@elementor/icons';
+import { Grid, Stack, ToggleButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import { createControl } from '../create-control';
+import { SizeControl } from './size-control';
+
+export type Gap = 'row' | 'column';
+
+export const GapControl = createControl( ( { label }: { label: string } ) => {
+	const { value, setValue } = useBoundProp( gapPropTypeUtil );
+	const { column, row, isLinked = true } = value || {};
+
+	const setLinkedValue = ( gap: Gap, newValue: PropValue ) => {
+		const updatedValue = {
+			isLinked,
+			column: isLinked ? newValue : column,
+			row: isLinked ? newValue : row,
+			[ gap ]: newValue,
+		};
+
+		setValue( updatedValue );
+	};
+
+	const toggleLinked = () => {
+		const updatedValue = {
+			isLinked: ! isLinked,
+			column,
+			row: ! isLinked ? column : row,
+		};
+
+		setValue( updatedValue );
+	};
+
+	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+
+	return (
+		<>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<ControlLabel>{ label }</ControlLabel>
+				<ToggleButton
+					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					size={ 'tiny' }
+					value={ 'check' }
+					selected={ isLinked }
+					sx={ { marginLeft: 'auto' } }
+					onChange={ toggleLinked }
+				>
+					<LinkedIcon fontSize={ 'tiny' } />
+				</ToggleButton>
+			</Stack>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<BoundPropProvider
+							setValue={ ( newValue ) => setLinkedValue( 'column', newValue ) }
+							value={ column }
+							bind="column"
+						>
+							<SizeControl />
+						</BoundPropProvider>
+					</Grid>
+				</Grid>
+				<Grid container gap={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<BoundPropProvider
+							setValue={ ( newValue ) => setLinkedValue( 'row', newValue ) }
+							value={ row }
+							bind="row"
+						>
+							<SizeControl />
+						</BoundPropProvider>
+					</Grid>
+				</Grid>
+			</Stack>
+		</>
+	);
+} );

package/src/index.ts

@@ -15,6 +15,7 @@ export { LinkedDimensionsControl } from './controls/linked-dimensions-control';
 export { FontFamilyControl } from './controls/font-family-control';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
+export { GapControl } from './controls/gap-control';
 
 // components
 export { ControlLabel } from './components/control-label';