Components: Remove Lodash usage from CustomGradientPicker (#41901)

Author: tyxla

packages/components/src/custom-gradient-picker/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,11 +29,8 @@ import {
 } from './styles/custom-gradient-picker-styles';
 
 const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
-	const angle = get(
-		gradientAST,
-		[ 'orientation', 'value' ],
-		DEFAULT_LINEAR_GRADIENT_ANGLE
-	);
+	const angle =
+		gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
 	const onAngleChange = ( newAngle ) => {
 		onChange(
 			serializeGradient( {
@@ -74,9 +66,11 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 
 	const onSetRadialGradient = () => {
+		// eslint-disable-next-line no-unused-vars
+		const { orientation, ...restGradientAST } = gradientAST;
 		onChange(
 			serializeGradient( {
-				...omit( gradientAST, [ 'orientation' ] ),
+				...restGradientAST,
 				type: 'radial-gradient',
 			} )
 		);

packages/components/src/custom-gradient-picker/index.native.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { get, omit } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -37,7 +33,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	}
 
 	function getGradientColor( type ) {
-		const orientation = get( gradientAST, [ 'orientation' ] );
+		const { orientation, ...restGradientAST } = gradientAST;
 
 		if ( orientation ) {
 			setGradientOrientation( orientation );
@@ -55,7 +51,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 						type,
 				  }
 				: {
-						...omit( gradientAST, [ 'orientation' ] ),
+						...restGradientAST,
 						type,
 				  }
 		);
@@ -83,11 +79,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	}
 
 	function getGradientAngle() {
-		return get(
-			gradientAST,
-			[ 'orientation', 'value' ],
-			DEFAULT_LINEAR_GRADIENT_ANGLE
-		);
+		return gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
 	}
 	return (
 		<>

packages/components/src/custom-gradient-picker/serializer.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact, get } from 'lodash';
-
 export function serializeGradientColor( { type, value } ) {
 	if ( type === 'literal' ) {
 		return value;
@@ -40,13 +35,12 @@ export function serializeGradient( { type, orientation, colorStops } ) {
 	const serializedColorStops = colorStops
 		.sort( ( colorStop1, colorStop2 ) => {
 			return (
-				get( colorStop1, [ 'length', 'value' ], 0 ) -
-				get( colorStop2, [ 'length', 'value' ], 0 )
+				( colorStop1?.length?.value ?? 0 ) -
+				( colorStop2?.length?.value ?? 0 )
 			);
 		} )
 		.map( serializeGradientColorStop );
-	return `${ type }(${ compact( [
-		serializedOrientation,
-		...serializedColorStops,
-	] ).join( ',' ) })`;
+	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
+		.filter( Boolean )
+		.join( ',' ) })`;
 }