Round by step for drag and keyboard actions with shift key

Also support “any” step through keyboard and drag actions
WordPress · Sep 2, 2021 · e24fa9a · e24fa9a
1 parent 0108e87
commit e24fa9a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 26 deletions.
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
@@ -93,58 +93,47 @@ export function NumberControl(
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			nextValue = roundClamp( nextValue, min, max, incrementalValue );
-
-			state.value = nextValue;
+			state.value = constrainValue( nextValue );
 		}
 
 		/**
 		 * Handles drag to update events
 		 */
 		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-			const { delta, shiftKey } = payload;
-			const [ x, y ] = delta;
-			const modifier = shiftKey
+			const modifier = payload.shiftKey
 				? parseFloat( shiftStep ) * baseStep
 				: baseStep;
 
 			let directionModifier;
-			let directionBaseValue;
+			let delta;
 
 			switch ( dragDirection ) {
 				case 'n':
-					directionBaseValue = y;
+					delta = payload.delta[ 1 ];
 					directionModifier = -1;
 					break;
 
 				case 'e':
-					directionBaseValue = x;
+					delta = payload.delta[ 0 ];
 					directionModifier = isRTL() ? -1 : 1;
 					break;
 
 				case 's':
-					directionBaseValue = y;
+					delta = payload.delta[ 1 ];
 					directionModifier = 1;
 					break;
 
 				case 'w':
-					directionBaseValue = x;
+					delta = payload.delta[ 0 ];
 					directionModifier = isRTL() ? 1 : -1;
 					break;
 			}
 
-			const distance = directionBaseValue * modifier * directionModifier;
-			let nextValue;
-
-			if ( distance !== 0 ) {
-				nextValue = roundClamp(
-					add( currentValue, distance ),
-					min,
-					max,
-					modifier
-				);
+			if ( delta !== 0 ) {
+				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
+				const distance = delta * modifier * directionModifier;
 
-				state.value = nextValue;
+				state.value = constrainValue( add( currentValue, distance ) );
 			}
 		}
 

diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
@@ -177,7 +177,7 @@ describe( 'NumberControl', () => {
 			input.focus();
 			fireKeyDown( { keyCode: UP, shiftKey: true } );
 
-			expect( input.value ).toBe( '20' );
+			expect( input.value ).toBe( '15' );
 		} );
 
 		it( 'should increment by custom shiftStep on key UP + shift press', () => {
@@ -187,7 +187,7 @@ describe( 'NumberControl', () => {
 			input.focus();
 			fireKeyDown( { keyCode: UP, shiftKey: true } );
 
-			expect( input.value ).toBe( '100' );
+			expect( input.value ).toBe( '105' );
 		} );
 
 		it( 'should increment but be limited by max on shiftStep', () => {
@@ -261,7 +261,7 @@ describe( 'NumberControl', () => {
 			input.focus();
 			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
 
-			expect( input.value ).toBe( '0' );
+			expect( input.value ).toBe( '-5' );
 		} );
 
 		it( 'should decrement by custom shiftStep on key DOWN + shift press', () => {
@@ -271,7 +271,7 @@ describe( 'NumberControl', () => {
 			input.focus();
 			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
 
-			expect( input.value ).toBe( '-100' );
+			expect( input.value ).toBe( '-95' );
 		} );
 
 		it( 'should decrement but be limited by min on shiftStep', () => {