feat(web & vue): icons added for recent & popular searches

packages/vue/src/components/search/DataSearch.jsx

@@ -25,6 +25,7 @@ import SuggestionItem from './addons/SuggestionItem.jsx';
 import SearchSvg from '../shared/SearchSvg';
 import CancelSvg from '../shared/CancelSvg';
 import Mic from './addons/Mic.jsx';
+import CustomSvg from '../shared/CustomSvg'
 
 const {
 	updateQuery,
@@ -121,7 +122,7 @@ const DataSearch = {
 				: [];
 		},
 		normalizedRecentSearches() {
-			return this.recentSearches || [];
+			return (this.recentSearches || []).map(search => ({...search, _recent_search: true}));
 		},
 		normalizedPopularSuggestions() {
 			return getTopSuggestions(
@@ -206,6 +207,8 @@ const DataSearch = {
 		strictSelection: VueTypes.bool.def(false),
 		nestedField: types.string,
 		enablePredictiveSuggestions: VueTypes.bool.def(false),
+		recentSearchesIcon: VueTypes.any,
+		popularSearchesIcon: VueTypes.any,
 		//	mic props
 		showVoiceSearch: types.bool.def(false),
 		getMicInstance: types.func,
@@ -705,6 +708,7 @@ const DataSearch = {
 	},
 	render() {
 		const { theme, size } = this.$props;
+		const { recentSearchesIcon, popularSearchesIcon } = this.$scopedSlots;
 		const hasSuggestions
 		= this.currentValue
 			? this.suggestionsList.length || this.topSuggestions.length : this.defaultSearchSuggestions.length;
@@ -841,8 +845,13 @@ const DataSearch = {
 																	highlightedIndex,
 																	this.suggestionsList.length + index,
 																),
+																justifyContent: 'flex-start',
 															}}
 														>
+															<div style={{ padding: '0 10px 0 0' }}>
+																{sugg.source && sugg.source._recent_search && <CustomSvg className={getClassName(this.$props.innerClass, 'recent-search-icon') || null} icon={recentSearchesIcon} type="recent-search-icon" />}
+																{sugg.source && sugg.source._popular_suggestion && <CustomSvg className={getClassName(this.$props.innerClass, 'popular-search-icon') || null} icon={popularSearchesIcon} type="popular-search-icon" />}
+															</div>
 															<SuggestionItem
 																currentValue={this.currentValue}
 																suggestion={sugg}
@@ -1115,7 +1124,7 @@ const mapStateToProps = (state, props) => ({
 	total: state.hits[props.componentId] && state.hits[props.componentId].total,
 	hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	querySuggestions: state.querySuggestions[props.componentId],
-	defaultPopularSuggestions: state.defaultPopularSuggestions[props.componentId],
+	defaultPopularSuggestions: (state.defaultPopularSuggestions[props.componentId] || []).map(suggestion => ({...suggestion, _popular_suggestion: true})),
 	componentProps: state.props[props.componentId],
 	lastUsedQuery: state.queryToHits[props.componentId],
 	recentSearches: state.recentSearches.data,

packages/vue/src/components/shared/CustomSvg.js

@@ -0,0 +1,51 @@
+const CustomSvg = {
+    name: 'CustomSvg',
+    props: ['className', 'icon', 'type'],
+    data() {
+        return {
+            customIcon: this.$props.icon && typeof (this.$props.icon) === 'function' ? this.$props.icon() : null,
+        }
+        },
+    render() {
+        if (this.customIcon) {
+            return (
+                <div class={this.$props.className}>
+                    {this.customIcon}
+                </div>
+                );
+        }
+        if (this.$props.type === 'popular-search-icon') {
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    alt="Popular Searches"
+                    height="20"
+                    width="20"
+                    viewBox="0 0 24 24"
+                    style={{fill: '#707070'}}
+                    class={this.$props.className}
+                >
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/>
+                </svg>
+            )
+        } else {
+            return (
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    alt="Recent Searches"
+                    height="20"
+                    width="20"
+                    viewBox="0 0 24 24"
+                    style={{fill: '#707070'}}
+                    class={this.$props.className}
+                >
+                <path d="M0 0h24v24H0z" fill="none" />
+                <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
+            </svg>
+            )
+        }
+    },
+};
+
+export default CustomSvg;

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

@@ -43,6 +43,7 @@ import SearchSvg from '../shared/SearchSvg';
 import InputIcon from '../../styles/InputIcon';
 import Container from '../../styles/Container';
 import Mic from './addons/Mic';
+import CustomSvg from '../shared/CustomSvg';
 import {
 	connect,
 	isFunction,
@@ -1021,7 +1022,7 @@ class CategorySearch extends Component {
 		const {
 			recentSearches,
 		} = this.props;
-		return recentSearches || [];
+		return (recentSearches || []).map(search => ({ ...search, _recent_search: true }));
 	}
 
 	get normalizedPopularSuggestions() {
@@ -1082,7 +1083,9 @@ class CategorySearch extends Component {
 
 	render() {
 		const { currentValue } = this.state;
-		const { theme, themePreset, size } = this.props;
+		const {
+			theme, themePreset, size, recentSearchesIcon, popularSearchesIcon,
+		} = this.props;
 		const finalSuggestionsList = this.parsedSuggestions;
 		const hasSuggestions = currentValue
 			? finalSuggestionsList.length || this.topSuggestions.length : this.defaultSuggestions.length;
@@ -1187,8 +1190,27 @@ class CategorySearch extends Component {
 																highlightedIndex,
 																index,
 															),
+															justifyContent: 'flex-start',
 														}}
 													>
+														<div style={{ padding: '0 10px 0 0' }}>
+															{sugg.source
+																&& sugg.source._recent_search
+																&& <CustomSvg
+																	iconId={`${sugg.id}-icon`}
+																	className={getClassName(this.props.innerClass, 'recent-search-icon') || null}
+																	icon={recentSearchesIcon}
+																	type="recent-search-icon"
+																/>}
+															{sugg.source
+																&& sugg.source._popular_suggestion
+																&& <CustomSvg
+																	iconId={`${sugg.id}-icon`}
+																	className={getClassName(this.props.innerClass, 'popular-search-icon') || null}
+																	icon={popularSearchesIcon}
+																	type="popular-search-icon"
+																/>}
+														</div>
 														<SuggestionItem
 															currentValue={currentValue}
 															suggestion={sugg}
@@ -1359,6 +1381,9 @@ CategorySearch.propTypes = {
 	URLParams: types.bool,
 	strictSelection: types.bool,
 	searchOperators: types.bool,
+	/* eslint-disable react/forbid-prop-types */
+	recentSearchesIcon: types.any,
+	popularSearchesIcon: types.any,
 	// Mic props
 	getMicInstance: types.func,
 	renderMic: types.func,
@@ -1422,7 +1447,10 @@ const mapStateToProps = (state, props) => ({
 	time: (state.hits[props.componentId] && state.hits[props.componentId].time),
 	total: state.hits[props.componentId] && state.hits[props.componentId].total,
 	hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
-	defaultPopularSuggestions: state.defaultPopularSuggestions[props.componentId],
+	defaultPopularSuggestions: (state.defaultPopularSuggestions[props.componentId] || [])
+		.map(suggestion => (
+			{ ...suggestion, _popular_suggestion: true }
+		)),
 	popularSuggestions: state.querySuggestions[props.componentId],
 	recentSearches: state.recentSearches.data,
 });

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

@@ -42,6 +42,7 @@ import SearchSvg from '../shared/SearchSvg';
 import CancelSvg from '../shared/CancelSvg';
 import InputIcon from '../../styles/InputIcon';
 import Container from '../../styles/Container';
+import CustomSvg from '../shared/CustomSvg';
 import {
 	connect,
 	isFunction,
@@ -896,7 +897,7 @@ class DataSearch extends Component {
 		const {
 			recentSearches,
 		} = this.props;
-		return recentSearches || [];
+		return (recentSearches || []).map(search => ({ ...search, _recent_search: true }));
 	}
 
 	get normalizedPopularSuggestions() {
@@ -929,6 +930,7 @@ class DataSearch extends Component {
 		const defaultSuggestions = isPopularSuggestionsEnabled
 			? [...this.normalizedRecentSearches, ...defaultPopularSuggestions]
 			: this.normalizedRecentSearches;
+
 		return getTopSuggestions(
 			// use default popular suggestions if value is empty
 			defaultSuggestions,
@@ -958,7 +960,9 @@ class DataSearch extends Component {
 	render() {
 		const { currentValue } = this.state;
 		const suggestionsList = this.parsedSuggestions;
-		const { theme, themePreset, size } = this.props;
+		const {
+			theme, themePreset, size, recentSearchesIcon, popularSearchesIcon,
+		} = this.props;
 		const hasSuggestions = currentValue
 			? suggestionsList.length || this.topSuggestions.length : this.defaultSuggestions.length;
 		return (
@@ -1065,8 +1069,27 @@ class DataSearch extends Component {
 															highlightedIndex,
 															index,
 														),
+														justifyContent: 'flex-start',
 													}}
 												>
+													<div style={{ padding: '0 10px 0 0' }}>
+														{sugg.source
+															&& sugg.source._recent_search
+															&& <CustomSvg
+																iconId={`${sugg.id}-icon`}
+																className={getClassName(this.props.innerClass, 'recent-search-icon') || null}
+																icon={recentSearchesIcon}
+																type="recent-search-icon"
+															/>}
+														{sugg.source
+															&& sugg.source._popular_suggestion
+															&& <CustomSvg
+																iconId={`${sugg.id}-icon`}
+																className={getClassName(this.props.innerClass, 'popular-search-icon') || null}
+																icon={popularSearchesIcon}
+																type="popular-search-icon"
+															/>}
+													</div>
 													<SuggestionItem
 														currentValue={currentValue}
 														suggestion={sugg}
@@ -1234,6 +1257,9 @@ DataSearch.propTypes = {
 	strictSelection: types.bool,
 	searchOperators: types.bool,
 	enablePredictiveSuggestions: types.bool,
+	/* eslint-disable react/forbid-prop-types */
+	recentSearchesIcon: types.any,
+	popularSearchesIcon: types.any,
 	// Mic props
 	getMicInstance: types.func,
 	renderMic: types.func,
@@ -1288,7 +1314,10 @@ const mapStateToProps = (state, props) => ({
 	total: state.hits[props.componentId] && state.hits[props.componentId].total,
 	hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	popularSuggestions: state.querySuggestions[props.componentId],
-	defaultPopularSuggestions: state.defaultPopularSuggestions[props.componentId],
+	defaultPopularSuggestions: (state.defaultPopularSuggestions[props.componentId] || [])
+		.map(suggestion => (
+			{ ...suggestion, _popular_suggestion: true }
+		)),
 	recentSearches: state.recentSearches.data,
 	lastUsedQuery: state.queryToHits[props.componentId],
 });

packages/web/src/components/shared/CustomSvg.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import types from '@appbaseio/reactivecore/lib/utils/types';
+
+const CustomSvg = ({
+	iconId, className, icon, type,
+}) => {
+	if (icon) {
+		return React.createElement('div', { className }, [
+			React.cloneElement(icon, { key: iconId }),
+		]);
+	}
+	if (type === 'recent-search-icon') {
+		return (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				alt="Recent Search"
+				height="20"
+				width="20"
+				viewBox="0 0 24 24"
+				style={{ fill: '#707070' }}
+				className={className}
+			>
+				<path d="M0 0h24v24H0z" fill="none" />
+				<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
+			</svg>
+		);
+	}
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			alt="Popular Search"
+			height="20"
+			width="20"
+			viewBox="0 0 24 24"
+			style={{ fill: '#707070' }}
+			className={className}
+		>
+			<path d="M0 0h24v24H0z" fill="none" />
+			<path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" />
+		</svg>
+	);
+};
+
+CustomSvg.propTypes = {
+	iconId: types.string,
+	className: types.string,
+	icon: types.children,
+	type: types.string,
+};
+
+CustomSvg.defaultProps = {
+	iconId: undefined,
+	className: null,
+	icon: undefined,
+	type: 'recent-search-icon',
+};
+
+export default CustomSvg;