feat(web): add TabDataList component

* feat: add an example for new component * feat: add a component to render * feat: style component * feat: use getComponent insted * fix: layout the tabs * feat: can display a vertical list * feat: showCount prop should show no. of aggs * feat: update types for tabs * fix: should render border on left when vertical * feat: showCount from data property * fix: don't break text for list items * fix: show scrollbar only on overflow * feat: renderItem method * feat: custom renderer * feat(web): add tabdatalist in reactivecomponent * test(web): add snapshot tests * fix: add mock data for snapshot tests * feat: pass params as per renderItem of SingleDataList * Update packages/web/examples/TabDataList/src/index.js Co-authored-by: Kuldeep Saxena <kuldepsaxena155@gmail.com>
appbaseio · Jul 22, 2022 · 8358b16 · 8358b16
1 parent e898f26
commit 8358b16
Show file tree

Hide file tree

Showing 17 changed files with 890 additions and 2 deletions.
diff --git a/packages/playground b/packages/playground
diff --git a/packages/reactivecore b/packages/reactivecore
diff --git a/packages/web/examples/TabDataList/.babelrc b/packages/web/examples/TabDataList/.babelrc
@@ -0,0 +1,14 @@
+{
+    "presets": [
+        [
+            "env", {
+                "targets": {
+                    "browsers": ["last 2 versions", "safari >= 7"]
+                },
+                "modules": false,
+                "loose": true
+            }
+        ],
+        "react"
+    ]
+}
diff --git a/packages/web/examples/TabDataList/.gitignore b/packages/web/examples/TabDataList/.gitignore
@@ -0,0 +1,8 @@
+# Build
+dist
+
+# Packages
+node_modules
+
+# Directory
+.directory
diff --git a/packages/web/examples/TabDataList/index.html b/packages/web/examples/TabDataList/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>SingleDataList</title>
+	<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
+</head>
+
+<body>
+	<div id="root">
+	</div>
+	<script src="dist/index.js">
+	</script>
+</body>
+
+</html>
diff --git a/packages/web/examples/TabDataList/package.json b/packages/web/examples/TabDataList/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "tabdatalist",
+	"version": "1.0.0",
+	"description": "TabDataList example for ReactiveSearch",
+	"main": "index.js",
+	"license": "Apache-2.0",
+	"dependencies": {
+		"@appbaseio/reactivesearch": "3.34.3",
+		"react": "^16.7.0-alpha.2",
+		"react-dom": "^16.7.0-alpha.2"
+	},
+	"devDependencies": {
+		"babel-cli": "^6.26.0",
+		"babel-core": "^6.26.0",
+		"babel-loader": "^7.1.2",
+		"babel-preset-env": "^1.6.1",
+		"babel-preset-react": "^6.24.1",
+		"css-loader": "^0.28.7",
+		"style-loader": "^0.20.3",
+		"webpack": "^4.28.3",
+		"webpack-cli": "^3.2.0",
+		"webpack-dev-server": "^3.1.14"
+	},
+	"scripts": {
+		"build": "webpack -p --progress",
+		"start": "webpack-dev-server --hot --inline --progress --colors --port 8001"
+	}
+}
diff --git a/packages/web/examples/TabDataList/src/index.css b/packages/web/examples/TabDataList/src/index.css
@@ -0,0 +1,150 @@
+/* layout */
+
+body {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 15px;
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+}
+.container{
+	padding: 1.5rem;
+}
+.col {
+    flex: 1;
+	padding: 15px;
+}
+
+.row > .col:first-child {
+	border-right: 1px solid #ccc;
+	max-width: 400px;
+}
+
+.row > .col:last-child {
+	background: #fafafa;
+}
+
+.flex {
+	display: flex;
+}
+
+.wrap {
+	flex-wrap: wrap;
+}
+
+.column {
+	flex-direction: column;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-space-between {
+	justify-content: space-between;
+}
+
+.text-center {
+	text-align: center;
+}
+
+@media all and (max-width: 767px) {
+    .row {
+        flex-direction: column;
+    }
+
+    .row > .col:first-child {
+        border-right: none;
+        max-width: none;
+    }
+}
+
+/* apps */
+
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+}
+
+.ratings-list {
+	padding: 10px 0;
+}
+
+.avg-rating {
+	color: #6b6b6b;
+	margin-left: 5px;
+}
+
+.stars {
+	color: gold;
+}
+
+.location {
+	color: salmon;
+	margin-right: 5px;
+}
+
+.meetup-location {
+	margin: 4px 0;
+}
+
+.book-title {
+	white-space: normal;
+	margin-top: 4px;
+}
+
+.book-title-card {
+	white-space: normal;
+	margin-top: 4px;
+	max-height: 45px;
+}
+
+.book-image {
+	height: 150px;
+	width: 110px;
+	background-size: cover;
+}
+
+.book-header {
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.book-content {
+	background: white;
+	margin: 10px 0;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.meetup-title {
+	white-space: normal;
+}
+
+.meetup-topics {
+	height: 35px;
+	overflow: hidden;
+}
+
+.meetup-topic {
+	background-color: #dedede;
+    color: #555;
+	padding: 5px 10px;
+	margin: 5px;
+	border-radius: 4px;
+}
+
+.meetup-topic:first-child {
+	margin-left: 0;
+}
+
+.col .meetup-list-image {
+	background-size: cover;
+}
diff --git a/packages/web/examples/TabDataList/src/index.js b/packages/web/examples/TabDataList/src/index.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {
+	ReactiveBase,
+	ResultList,
+	SelectedFilters,
+	ReactiveList,
+	TabDataList,
+} from '@appbaseio/reactivesearch';
+
+import './index.css';
+
+const Main = () => (
+	<ReactiveBase
+		app="meetup_app"
+		url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
+		enableAppbase
+	>
+		<div className="container">
+			<SelectedFilters />
+			<TabDataList
+				title="Filter by Topics"
+				componentId="CitySensor"
+				dataField="group.group_topics.topic_name_raw.keyword"
+				data={[
+					{ label: 'Open Source', value: 'Open Source' },
+					{ label: 'Social', value: 'Social' },
+					{ label: 'Adventure', value: 'Adventure' },
+					{ label: 'Music', value: 'Music' },
+				]}
+			/>
+			<ReactiveList
+				componentId="SearchResult"
+				dataField="group.group_topics.topic_name_raw.keyword"
+				title="Results"
+				sortBy="asc"
+				className="result-list-container"
+				from={0}
+				size={5}
+				innerClass={{
+					image: 'meetup-list-image',
+				}}
+				pagination
+				react={{
+					and: ['CitySensor'],
+				}}
+				render={({ data }) => (
+					<ReactiveList.ResultListWrapper>
+						{data.map(item => (
+							<ResultList href={item.event.event_url} key={item._id}>
+								<ResultList.Image small src={item.member.photo} />
+								<ResultList.Content>
+									<ResultList.Title>
+										<div className="meetup-title">
+											{item.member ? item.member.member_name : ''} is
+											going to ${item.event ? item.event.event_name : ''}
+										</div>
+									</ResultList.Title>
+									<ResultList.Description>
+										<div className="flex column">
+											<div className="meetup-location">
+												<span className="location">
+													<i className="fas fa-map-marker-alt" />
+												</span>
+												{item.group ? item.group.group_city : ''}
+											</div>
+											<div className="flex wrap meetup-topics">
+												{item.group.group_topics
+													.slice(0, 4)
+													.map(tag => (
+														<div
+															className="meetup-topic"
+															key={tag.topic_name}
+														>
+															{tag.topic_name}
+														</div>
+													))}
+											</div>
+										</div>
+									</ResultList.Description>
+								</ResultList.Content>
+							</ResultList>
+						))}
+					</ReactiveList.ResultListWrapper>
+				)}
+			/>
+		</div>
+	</ReactiveBase>
+);
+
+ReactDOM.render(<Main />, document.getElementById('root'));
diff --git a/packages/web/examples/TabDataList/webpack.config.js b/packages/web/examples/TabDataList/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+
+module.exports = {
+	mode: 'development',
+	devServer: { 		compress: true, 		disableHostCheck: true 	},
+	context: path.resolve(__dirname, 'src'),
+	entry: {
+		main: './index.js',
+	},
+	output: {
+		path: path.resolve(__dirname, 'dist'),
+		filename: 'index.js',
+		publicPath: 'dist/',
+	},
+	module: {
+		rules: [
+			{
+				test: /.jsx?$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/,
+			},
+			{
+				test: /.css?$/,
+				loader: ['style-loader', 'css-loader'],
+				exclude: /node_modules/,
+			},
+		],
+	},
+};
diff --git a/packages/web/src/components/basic/ReactiveComponent.js b/packages/web/src/components/basic/ReactiveComponent.js
@@ -32,6 +32,7 @@ import CategorySearch from '../search/CategorySearch';
 import SearchBox from '../search/SearchBox';
 import MultiList from '../list/MultiList';
 import SingleDataList from '../list/SingleDataList';
+import TabDataList from '../list/TabDataList';
 import MultiDataList from '../list/MultiDataList';
 import SingleDropdownList from '../list/SingleDropdownList';
 import MultiDropdownList from '../list/MultiDropdownList';
@@ -432,6 +433,8 @@ const ForwardRefComponent = React.forwardRef((props, ref) => (
 					return <MultiList {...preferenceProps} />;
 				case componentTypes.singleDataList:
 					return <SingleDataList {...preferenceProps} />;
+				case componentTypes.tabDataList:
+					return <TabDataList {...preferenceProps} />;
 				case componentTypes.multiDataList:
 					return <MultiDataList {...preferenceProps} />;
 				case componentTypes.singleDropdownList:

diff --git a/packages/web/src/components/list/TabDataList.d.ts b/packages/web/src/components/list/TabDataList.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CommonProps } from '../..';
+import * as types from '../../types';
+
+export interface TabDataList extends CommonProps {
+	displayAsVertical: boolean;
+	dataField: string;
+	defaultValue?: string;
+	value?: string;
+	placeholder?: string;
+	react?: types.react;
+	title?: types.title;
+	showCount?: boolean;
+	render?: (...args: any[]) => any;
+	renderItem?: (...args: any[]) => any;
+	children?: (...args: any[]) => any;
+	onChange?: (...args: any[]) => any;
+	renderNoResults?: (...args: any[]) => any;
+}
+
+declare const TabDataList: React.ComponentClass<TabDataList>;
+
+export default TabDataList;