feat(web): voice search integration in search components

packages/web/src/components/search/CategorySearch.d.ts

@@ -17,6 +17,8 @@ export interface CategorySearchProps extends CommonProps {
 	customHighlight?: (...args: any[]) => any;
 	customQuery?: (...args: any[]) => any;
 	defaultQuery?: (...args: any[]) => any;
+	getMicInstance?: (...args: any[]) => any;
+	renderMic?: (...args: any[]) => any;
 	dataField?: types.dataFieldArray;
 	debounce?: number;
 	defaultValue?: categorySearchValue;

packages/web/src/components/search/CategorySearch.js

@@ -697,7 +697,14 @@ class CategorySearch extends Component {
 				</InputIcon>
 			)}
 			{this.props.showVoiceSearch
-				&& <Mic iconPosition={this.props.iconPosition} onResult={this.handleVoiceResults} />}
+				&& (
+					<Mic
+						getInstance={this.props.getMicInstance}
+						render={this.props.renderMic}
+						iconPosition={this.props.iconPosition}
+						onResult={this.handleVoiceResults}
+						className={getClassName(this.props.innerClass, 'mic') || null}
+					/>)}
 			<InputIcon onClick={this.handleSearchIconClick} iconPosition={this.props.iconPosition}>
 				{this.renderIcon()}
 			</InputIcon>
@@ -1089,6 +1096,9 @@ CategorySearch.propTypes = {
 	URLParams: types.bool,
 	strictSelection: types.bool,
 	searchOperators: types.bool,
+	// Mic props
+	getMicInstance: types.func,
+	renderMic: types.func,
 };
 
 CategorySearch.defaultProps = {

packages/web/src/components/search/DataSearch.d.ts

@@ -11,6 +11,8 @@ export interface DataSearchProps extends CommonProps {
 	customHighlight?: (...args: any[]) => any;
 	customQuery?: (...args: any[]) => any;
 	defaultQuery?: (...args: any[]) => any;
+	getMicInstance?: (...args: any[]) => any;
+	renderMic?: (...args: any[]) => any;
 	dataField?: types.dataFieldArray;
 	debounce?: number;
 	defaultValue?: string;

packages/web/src/components/search/DataSearch.js

@@ -604,7 +604,14 @@ class DataSearch extends Component {
 				</InputIcon>
 			)}
 			{this.props.showVoiceSearch
-				&& <Mic iconPosition={this.props.iconPosition} onResult={this.handleVoiceResults} />}
+				&& (
+					<Mic
+						getInstance={this.props.getMicInstance}
+						render={this.props.renderMic}
+						iconPosition={this.props.iconPosition}
+						onResult={this.handleVoiceResults}
+						className={getClassName(this.props.innerClass, 'mic') || null}
+					/>)}
 			<InputIcon onClick={this.handleSearchIconClick} iconPosition={this.props.iconPosition}>
 				{this.renderIcon()}
 			</InputIcon>
@@ -941,6 +948,9 @@ DataSearch.propTypes = {
 	URLParams: types.bool,
 	strictSelection: types.bool,
 	searchOperators: types.bool,
+	// Mic props
+	getMicInstance: types.func,
+	renderMic: types.func,
 };
 
 DataSearch.defaultProps = {

packages/web/src/components/search/addons/Mic.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as types from '../../../types';
+
+export interface MicProps {
+	render?: (data: any) => any;
+	children?: (data: any) => any;
+	className?: string;
+	getInstance?: (...args: any[]) => any;
+	lang?: string;
+	iconPosition?: string;
+	onResult?: (...args: any[]) => any;
+	onNoMatch?: (...args: any[]) => any;
+	onError?: (...args: any[]) => any;
+}
+
+declare const Mic: React.ComponentClass<MicProps>;
+
+export default Mic;

packages/web/src/components/search/addons/Mic.js

@@ -1,19 +1,23 @@
 import React from 'react';
 import types from '@appbaseio/reactivecore/lib/utils/types';
-import MicImage from '../../../styles/MicImage';
+import MicIcon from '../../../styles/MicIcon';
+import { getComponent, hasCustomRenderer } from '../../../utils';
+import MicSvg from '../../shared/MicSvg';
+import MuteSvg from '../../shared/MuteSvg';
+import ListenSvg from '../../shared/ListenSvg';
 
 const STATUS = {
-	initial: 'INITIAL',
-	started: 'STARTED',
-	allowed: 'ALLOWED',
-	deined: 'DENIED',
+	inactive: 'INACTIVE',
+	stopped: 'STOPPED',
+	active: 'ACTIVE',
+	denied: 'DENIED',
 };
 
 class Mic extends React.Component {
 	constructor() {
 		super();
 		this.state = {
-			status: STATUS.initial,
+			status: STATUS.inactive,
 		};
 		window.SpeechRecognition
 			= window.webkitSpeechRecognition || window.SpeechRecognition || null;
@@ -24,9 +28,9 @@ class Mic extends React.Component {
 		this.results = [];
 		if (window.SpeechRecognition) {
 			const { status } = this.state;
-			if (status === STATUS.initial) {
+			if (status === STATUS.active) {
 				this.setState({
-					status: STATUS.started,
+					status: STATUS.inactive,
 				});
 			}
 			const {
@@ -36,7 +40,7 @@ class Mic extends React.Component {
 			if (this.instance) {
 				this.setState(
 					{
-						status: STATUS.initial,
+						status: STATUS.inactive,
 					},
 					() => {
 						this.instance.stop();
@@ -55,12 +59,12 @@ class Mic extends React.Component {
 			this.instance.start();
 			this.instance.onstart = () => {
 				this.setState({
-					status: STATUS.allowed,
+					status: STATUS.active,
 				});
 			};
 			this.instance.onresult = ({ results, timeStamp }) => {
 				this.setState({
-					status: STATUS.initial,
+					status: STATUS.inactive,
 				});
 				if (onResult) {
 					onResult({ results, timeStamp });
@@ -71,11 +75,11 @@ class Mic extends React.Component {
 			this.instance.onerror = (e) => {
 				if (e.error === 'no-speech' || e.error === 'audio-capture') {
 					this.setState({
-						status: STATUS.initial,
+						status: STATUS.inactive,
 					});
 				} else if (e.error === 'not-allowed') {
 					this.setState({
-						status: STATUS.deined,
+						status: STATUS.denied,
 					});
 				}
 				console.error(e);
@@ -87,41 +91,51 @@ class Mic extends React.Component {
 			/* Below Two methods run when Continuous is False */
 			this.instance.onspeechend = () => {
 				this.setState({
-					status: STATUS.initial,
+					status: STATUS.inactive,
 				});
 			};
 
 			this.instance.onaudioend = () => {
 				this.setState({
-					status: STATUS.initial,
+					status: STATUS.inactive,
 				});
 			};
 		}
 	};
 
-	get Image() {
+	get Icon() {
 		const { status } = this.state;
+		const { className } = this.props;
 		switch (status) {
-			case STATUS.allowed:
-				return 'https://raw.githubusercontent.com/googlearchive/webplatform-samples/master/webspeechdemo/mic-animate.gif';
-			case STATUS.started:
-			case STATUS.deined:
-				return 'https://raw.githubusercontent.com/googlearchive/webplatform-samples/master/webspeechdemo/mic-slash.gif';
+			case STATUS.active:
+				return <ListenSvg className={className} onClick={this.handleClick} />;
+			case STATUS.stopped:
+			case STATUS.denied:
+				return <MuteSvg className={className} onClick={this.handleClick} />;
 			default:
-				return 'https://raw.githubusercontent.com/googlearchive/webplatform-samples/master/webspeechdemo/mic.gif';
+				return <MicSvg className={className} onClick={this.handleClick} />;
 		}
 	}
 
+	getComponent() {
+		const { status } = this.state;
+		const data = {
+			handleClick: this.handleClick,
+			status,
+		};
+		return getComponent(data, this.props);
+	}
+
+	get hasCustomRenderer() {
+		return hasCustomRenderer(this.props);
+	}
+
 	render() {
 		const { iconPosition } = this.props;
-		return (
-			<MicImage
-				iconPosition={iconPosition}
-				onClick={this.handleClick}
-				alt="voice search"
-				src={this.Image}
-			/>
-		);
+		if (this.hasCustomRenderer) {
+			return this.getComponent();
+		}
+		return <MicIcon iconPosition={iconPosition}>{this.Icon}</MicIcon>;
 	}
 }
 
@@ -138,6 +152,8 @@ Mic.propTypes = {
 	onNoMatch: types.func,
 	onError: types.func,
 	getInstance: types.func,
+	render: types.func,
+	className: types.string,
 };
 
 export default Mic;