From ec1cfe9498a2d4f283a8124c2acea21bc63f9ae9 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 16 Jun 2022 12:45:20 +0300
Subject: [PATCH] Lodash: Refactor away from `_.clamp()` (#41735)

* Lodash: Refactor away from _.clamp()

* Remove default arg values
---
 .eslintrc.js                                  |  1 +
 .../src/focal-point-picker/index.native.js    |  2 +-
 .../components/src/range-control/index.js     |  2 +-
 .../components/src/range-control/utils.js     |  5 +---
 packages/components/src/utils/math.js         | 19 +++++++++++----
 packages/components/src/utils/test/math.js    | 23 ++++++++++++++++++-
 6 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c6510b20b2beb..5aa2ac8a3c608 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -79,6 +79,7 @@ module.exports = {
 					{
 						name: 'lodash',
 						importNames: [
+							'clamp',
 							'concat',
 							'defaultTo',
 							'differenceWith',
diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js
index 61f9c48c218f4..cfb01eebf1404 100644
--- a/packages/components/src/focal-point-picker/index.native.js
+++ b/packages/components/src/focal-point-picker/index.native.js
@@ -3,7 +3,6 @@
  */
 import { Animated, PanResponder, View } from 'react-native';
 import Video from 'react-native-video';
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,7 @@ import FocalPoint from './focal-point';
 import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
+import { clamp } from '../utils/math';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
index 8ed2f5666feb8..d0464fd878866 100644
--- a/packages/components/src/range-control/index.js
+++ b/packages/components/src/range-control/index.js
@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,6 +19,7 @@ import Button from '../button';
 import Icon from '../icon';
 import { COLORS } from '../utils';
 import { floatClamp, useControlledRangeValue } from './utils';
+import { clamp } from '../utils/math';
 import InputRange from './input-range';
 import RangeRail from './rail';
 import SimpleTooltip from './tooltip';
diff --git a/packages/components/src/range-control/utils.js b/packages/components/src/range-control/utils.js
index dfbbdd08ab37b..d4bd5cdf0901a 100644
--- a/packages/components/src/range-control/utils.js
+++ b/packages/components/src/range-control/utils.js
@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,6 +9,7 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { useControlledState } from '../utils/hooks';
+import { clamp } from '../utils/math';
 
 const noop = () => {};
 
diff --git a/packages/components/src/utils/math.js b/packages/components/src/utils/math.js
index 76a3d66ed88ec..7ae59df819acc 100644
--- a/packages/components/src/utils/math.js
+++ b/packages/components/src/utils/math.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clamp } from 'lodash';
-
 /**
  * Parses and retrieves a number value.
  *
@@ -61,6 +56,20 @@ function getPrecision( value ) {
 	return split[ 1 ] !== undefined ? split[ 1 ].length : 0;
 }
 
+/**
+ * Clamps a value based on a min/max range.
+ *
+ * @param {number} value The value.
+ * @param {number} min   The minimum range.
+ * @param {number} max   The maximum range.
+ *
+ * @return {number} The clamped value.
+ */
+export function clamp( value, min, max ) {
+	const baseValue = getNumber( value );
+	return Math.max( min, Math.min( baseValue, max ) );
+}
+
 /**
  * Clamps a value based on a min/max range with rounding
  *
diff --git a/packages/components/src/utils/test/math.js b/packages/components/src/utils/test/math.js
index 70007ad5ebedf..6f8467ce7931b 100644
--- a/packages/components/src/utils/test/math.js
+++ b/packages/components/src/utils/test/math.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { add, subtract, roundClamp } from '../math';
+import { add, clamp, subtract, roundClamp } from '../math';
 
 describe( 'add', () => {
 	it( 'should add string and number values', () => {
@@ -37,6 +37,27 @@ describe( 'subtract', () => {
 	} );
 } );
 
+describe( 'clamp', () => {
+	it( 'should clamp a value between min and max', () => {
+		expect( clamp( 10, 1, 10 ) ).toBe( 10 );
+		expect( clamp( 1, 1, 10 ) ).toBe( 1 );
+		expect( clamp( 0, 1, 10 ) ).toBe( 1 );
+
+		expect( clamp( 50, 1, 10 ) ).toBe( 10 );
+		expect( clamp( 50, -10, 10 ) ).toBe( 10 );
+		expect( clamp( -50, -10, 10 ) ).toBe( -10 );
+
+		expect( clamp( Infinity, -10, 10 ) ).toBe( 10 );
+		expect( clamp( -Infinity, -10, 10 ) ).toBe( -10 );
+	} );
+
+	it( 'should clamp number or string values', () => {
+		expect( clamp( '50', 1, 10 ) ).toBe( 10 );
+		expect( clamp( '50', -10, 10 ) ).toBe( 10 );
+		expect( clamp( -50, -10, '10' ) ).toBe( -10 );
+	} );
+} );
+
 describe( 'roundClamp', () => {
 	it( 'should clamp a value between min and max', () => {
 		expect( roundClamp( 10, 1, 10 ) ).toBe( 10 );