Merge pull request #2339 from WordPress/update/range-control-numeric

Blocks: Treat RangeControl value as numeric
WordPress · Aug 11, 2017 · a08dae6 · a08dae6
2 parents 732d68b + 961c98d
commit a08dae6
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 8 deletions.
diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
@@ -11,10 +11,17 @@ import './style.scss';
 
 function RangeControl( { label, value, instanceId, onChange, ...props } ) {
 	const id = 'inspector-range-control-' + instanceId;
+	const onChangeValue = ( event ) => onChange( Number( event.target.value ) );
 
 	return (
 		<BaseControl label={ label } id={ id } className="blocks-range-control">
-			<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
+			<input
+				className="blocks-range-control__input"
+				id={ id }
+				type="range"
+				value={ value }
+				onChange={ onChangeValue }
+				{ ...props } />
 			<span className="blocks-range-control__hint">{ value }</span>
 		</BaseControl>
 	);

diff --git a/blocks/inspector-controls/range-control/test/index.js b/blocks/inspector-controls/range-control/test/index.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import RangeControl from '../';
+
+describe( 'RangeControl', () => {
+	describe( '#render()', () => {
+		it( 'triggers change callback with numeric value', () => {
+			// Mount: With shallow, cannot find input child of BaseControl
+			const onChange = jest.fn();
+			const wrapper = mount( <RangeControl onChange={ onChange } /> );
+
+			wrapper.find( 'input' ).simulate( 'change', { target: { value: '5' } } );
+
+			expect( onChange ).toHaveBeenCalledWith( 5 );
+		} );
+	} );
+} );
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
@@ -100,7 +100,7 @@ registerBlockType( 'core/gallery', {
 	edit( { attributes, setAttributes, focus, className } ) {
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
 		const setLinkTo = ( value ) => setAttributes( { linkTo: value } );
-		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
+		const setColumnsNumber = ( value ) => setAttributes( { columns: value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
@@ -159,7 +159,7 @@ registerBlockType( 'core/gallery', {
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ setColumnsNumber }
-						min="1"
+						min={ 1 }
 						max={ Math.min( MAX_COLUMNS, images.length ) }
 					/>
 					<ToggleControl

diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
@@ -180,8 +180,8 @@ registerBlockType( 'core/latest-posts', {
 							<RangeControl
 								label={ __( 'Columns' ) }
 								value={ columns }
-								onChange={ ( event ) => setAttributes( { columns: event.target.value } ) }
-								min="2"
+								onChange={ ( value ) => setAttributes( { columns: value } ) }
+								min={ 2 }
 								max={ Math.min( MAX_POSTS_COLUMNS, latestPosts.length ) }
 							/>
 						}

diff --git a/blocks/library/text-columns/index.js b/blocks/library/text-columns/index.js
@@ -73,9 +73,9 @@ registerBlockType( 'core/text-columns', {
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
-						onChange={ ( event ) => setAttributes( { columns: event.target.value } ) }
-						min="2"
-						max="4"
+						onChange={ ( value ) => setAttributes( { columns: value } ) }
+						min={ 2 }
+						max={ 4 }
 					/>
 				</InspectorControls>
 			),