Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lodash: Refactor away from _.clamp() #41735

Merged
merged 2 commits into from
Jun 16, 2022
Merged

Lodash: Refactor away from _.clamp() #41735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d35b9d9
Lodash: Refactor away from _.clamp()
tyxla Jun 15, 2022
6c766b4
Remove default arg values
tyxla Jun 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ module.exports = {
{
name: 'lodash',
importNames: [
'clamp',
'concat',
'defaultTo',
'differenceWith',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/focal-point-picker/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import { Animated, PanResponder, View } from 'react-native';
import Video from 'react-native-video';
import { clamp } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/range-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* External dependencies
*/
import classnames from 'classnames';
import { clamp } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -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';
Expand Down
5 changes: 1 addition & 4 deletions packages/components/src/range-control/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
import { clamp } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -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 = () => {};

Expand Down
19 changes: 14 additions & 5 deletions packages/components/src/utils/math.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { clamp } from 'lodash';

/**
* Parses and retrieves a number value.
*
Expand Down Expand Up @@ -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.
Comment on lines +62 to +64
Copy link
Contributor

@ciampo ciampo Jun 15, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 3 parameters are marked as non-optional, but they are assigned a default value in the function's signature — wouldn't this kind-of make them optional?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point 👍 I've actually gone and removed the default values. They actually make the function pretty meaningless if you ask me. If we want to clamp something, we better provide the right boundaries.

*
* @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
*
Expand Down
23 changes: 22 additions & 1 deletion packages/components/src/utils/test/math.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -37,6 +37,27 @@ describe( 'subtract', () => {
} );
} );

describe( 'clamp', () => {
it( 'should clamp a value between min and max', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since all tree arguments are optional/have default fallback values, should we add tests for when some/all arguments are not provided?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, but that's no longer necessary since I removed the default values as I mentioned above.

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 );
Expand Down