Merge pull request #81 from cmanon/feature/73-som-component

Feature/73 som component

src/blocks/activity/edit.js

@@ -1,11 +1,12 @@
 /* global wp, wpStrava */
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedControls from './embed-controls';
+import SOMOverride from '../components/som-override';
 
 const { __ } = wp.i18n;
 const { Component } = wp.element;
 const { InspectorControls } = wp.editor;
-const { PanelBody, ToggleControl, ServerSideRender, Button, ButtonGroup } = wp.components;
+const { PanelBody, ToggleControl, ServerSideRender } = wp.components;
 const { isEmpty } = lodash;
 
 class Edit extends Component {
@@ -106,36 +107,9 @@ class Edit extends Component {
 							checked={ displayMarkers }
 							onChange={ (checked ) => this.toggleDisplayMarkers( checked ) }
 						/>
-						<div className="wp-block-wp-strava-som-control">
-							<p className="wp-block-wp-strava-som-control-row">
-									{ __( 'System of Measure (override from settings)' ) }
-							</p>
-							<div className="wp-block-wp-strava-som-control-row">
-								<ButtonGroup aria-label={ __( 'System of Measure', 'wp-strava' ) }>
-									<Button
-										key={ 'english' }
-										isSmall
-										isPrimary={ som == 'english' }
-										aria-pressed={ som == 'english' }
-										onClick={ () => this.overrideSOM( 'english' ) }
-									>
-										{ __( 'English', 'wp-strava' ) }
-									</Button>
-									<Button
-										key={ 'metric' }
-										isSmall
-										isPrimary={ som == 'metric' }
-										aria-pressed={ som == 'metric' }
-										onClick={ () => this.overrideSOM( 'metric' ) }
-									>
-										{ __( 'Metric', 'wp-strava' ) }
-									</Button>
-								</ButtonGroup>
-								<Button isSmall onClick={ () => this.overrideSOM() }>
-									{ __( 'Reset', 'wp-strava' ) }
-								</Button>
-							</div>
-						</div>
+						<SOMOverride
+							onChange={ this.overrideSOM }
+						/>
 					</PanelBody>
 				</InspectorControls>
 			</>

src/blocks/activity/som-override.js → src/blocks/components/som-override.js

@@ -1,55 +1,69 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	ButtonGroup,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function SOMOverride( {
-	som,
-	onChange,
-} ) {
-
-	function updateSOM( som ) {
-		return () => {
-			onChange( som );
+
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const { Button, ButtonGroup } = wp.components;
+
+class SOMOverride extends Component {
+
+	constructor() {
+		super( ...arguments );
+		this.onChange = this.onChange.bind( this );
+
+		this.state = {
+			som: '',
 		};
 	}
 
-	return (
-		<>
+	onChange( event ) {
+		this.setState( { som: event.target.value } );
+		this.props.onChange( event.target.value );
+	}
+
+	render() {
+		const {
+			som
+		} = this.state;
+
+		return (
 			<div className="wp-block-wp-strava-som-control">
 				<p className="wp-block-wp-strava-som-control-row">
 						{ __( 'System of Measure (override from settings)' ) }
 				</p>
 				<div className="wp-block-wp-strava-som-control-row">
 					<ButtonGroup aria-label={ __( 'System of Measure', 'wp-strava' ) }>
 						<Button
-							key={ 'english' }
 							isSmall
 							isPrimary={ som == 'english' }
 							isPressed={ som == 'english' }
-							onClick={ updateSOM( 'english' ) }
+							value='english'
+							onClick={ this.onChange }
 						>
 							{ __( 'English', 'wp-strava' ) }
 						</Button>
 						<Button
-							key={ 'metric' }
 							isSmall
 							isPrimary={ som == 'metric' }
 							isPressed={ som == 'metric' }
-							onClick={ updateSOM( 'metric' ) }
+							value='metric'
+							onClick={ this.onChange }
 						>
 							{ __( 'Metric', 'wp-strava' ) }
 						</Button>
 					</ButtonGroup>
-					<Button isSmall onClick={ updateSOM() }>
+					<Button
+						isSmall
+						value=''
+						onClick={ this.onChange }
+					>
 						{ __( 'Reset', 'wp-strava' ) }
 					</Button>
 				</div>
 			</div>
-		</>
-	);
+		);
+	}
 }
+
+export default SOMOverride;