initial commit

packages/woocommerce-blocks/assets/js/editor-components/view-switcher/editor.scss

@@ -0,0 +1,14 @@
+.wc-block-view-switch-control {
+	text-align: left;
+	background: #f0f2f3;
+	box-shadow: 0 0 0 13px #f0f2f3;
+	margin: 0 0 27px;
+	visibility: hidden;
+	color: $gray-700;
+}
+.has-child-selected,
+.is-selected {
+	.wc-block-view-switch-control {
+		visibility: visible;
+	}
+}

packages/woocommerce-blocks/assets/js/editor-components/view-switcher/index.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { ButtonGroup, Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { withInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const ViewSwitcher = ( {
+	className,
+	label = __( 'View', 'woocommerce' ),
+	views,
+	defaultView,
+	instanceId,
+	render,
+} ) => {
+	const [ currentView, setCurrentView ] = useState( defaultView );
+	const classes = classnames( className, 'wc-block-view-switch-control' );
+	const htmlId = 'wc-block-view-switch-control-' + instanceId;
+
+	return (
+		<>
+			<div className={ classes }>
+				<label
+					htmlFor={ htmlId }
+					className="wc-block-view-switch-control__label"
+				>
+					{ label + ': ' }
+				</label>
+				<ButtonGroup id={ htmlId }>
+					{ views.map( ( view ) => (
+						<Button
+							key={ view.value }
+							isPrimary={ currentView === view.value }
+							aria-pressed={ currentView === view.value }
+							onMouseDown={ () => {
+								if ( currentView !== view.value ) {
+									setCurrentView( view.value );
+								}
+							} }
+							onClick={ () => {
+								if ( currentView !== view.value ) {
+									setCurrentView( view.value );
+								}
+							} }
+						>
+							{ view.name }
+						</Button>
+					) ) }
+				</ButtonGroup>
+			</div>
+			{ render( currentView ) }
+		</>
+	);
+};
+
+ViewSwitcher.propTypes = {
+	/**
+	 * Custom class name to add to component.
+	 */
+	className: PropTypes.string,
+	/**
+	 * List of views.
+	 */
+	views: PropTypes.arrayOf(
+		PropTypes.shape( {
+			name: PropTypes.string.isRequired,
+			value: PropTypes.string.isRequired,
+		} )
+	).isRequired,
+	/**
+	 * The default selected view.
+	 */
+	defaultView: PropTypes.string.isRequired,
+	/**
+	 * Render prop for selected views.
+	 */
+	render: PropTypes.func.isRequired,
+	// from withInstanceId
+	instanceId: PropTypes.number.isRequired,
+};
+
+export default withInstanceId( ViewSwitcher );