appbaseio · bietkul · Aug 10, 2022 · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/packages/playground b/packages/playground
diff --git a/packages/reactivecore b/packages/reactivecore
diff --git a/packages/web/examples/TreeList/.babelrc b/packages/web/examples/TreeList/.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/TreeList/.gitignore b/packages/web/examples/TreeList/.gitignore
@@ -0,0 +1,8 @@
+# Build
+dist
+
+# Packages
+node_modules
+
+# Directory
+.directory
diff --git a/packages/web/examples/TreeList/index.html b/packages/web/examples/TreeList/index.html
@@ -0,0 +1,14 @@
+<!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>TreeList Example</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/TreeList/package.json b/packages/web/examples/TreeList/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "treelist",
+	"version": "1.0.0",
+	"description": "TreeList example for ReactiveSearch",
+	"main": "index.js",
+	"license": "Apache-2.0",
+	"dependencies": {
+		"@appbaseio/reactivesearch": "3.37.2",
+		"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/TreeList/src/index.css b/packages/web/examples/TreeList/src/index.css
@@ -0,0 +1,148 @@
+/* layout */
+
+body {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding-top: 15px;
+}
+
+.row {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+}
+
+.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/TreeList/src/index.js b/packages/web/examples/TreeList/src/index.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import { ReactiveBase, TreeList, ReactiveList, SelectedFilters } from '@appbaseio/reactivesearch';
+
+import './index.css';
+
+class Main extends Component {
+	render() {
+		return (
+			<ReactiveBase
+				app="best-buy-dataset"
+				url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
+				enableAppbase
+			>
+				<div className="row">
+					<div className="col">
+						<TreeList
+							componentId="BookSensor"
+							showCount
+							title="TreeList UI"
+							showCheckbox
+							mode="multiple"
+							URLParams
+							dataField={['class.keyword', 'subclass.keyword']}
+						/>
+					</div>
+
+					<div className="col">
+						<SelectedFilters />
+						<ReactiveList
+							componentId="SearchResult"
+							dataField="original_title"
+							className="result-list-container"
+							from={0}
+							size={5}
+							renderItem={this.reactiveList}
+							react={{
+								and: ['BookSensor'],
+							}}
+							defaultQuery={() => ({
+								track_total_hits: true,
+							})}
+							includeFields={['class', 'subclass', 'name', 'image', 'salePrice']}
+						/>
+					</div>
+				</div>
+			</ReactiveBase>
+		);
+	}
+
+	reactiveList(data) {
+		return (
+			<div className="flex book-content" key={data._id}>
+				<img src={data.image} alt="Book Cover" className="book-image" />
+				<div className="flex column justify-center" style={{ marginLeft: 20 }}>
+					<div className="book-header">{data.name}</div>
+					<div className="flex column justify-space-between">
+						<div>
+							<div>
+								<span className="authors-list">
+									{data.class} > {data.subclass}
+								</span>
+							</div>
+							<div className="ratings-list flex align-center">
+								Sale Price 💰 <b>{data.salePrice}</b>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(<Main />, document.getElementById('root'));
diff --git a/packages/web/examples/TreeList/webpack.config.js b/packages/web/examples/TreeList/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
@@ -50,6 +50,7 @@ import DynamicRangeSlider from '../range/DynamicRangeSlider';
 import RatingsFilter from '../range/RatingsFilter';
 import RangeInput from '../range/RangeInput';
 import ReactiveChart from '../chart/ReactiveChart';
+import TreeList from '../list/TreeList';
 
 class ReactiveComponent extends Component {
 	constructor(props) {
@@ -421,6 +422,8 @@ const ForwardRefComponent = React.forwardRef((props, ref) => (
 	<PreferencesConsumer userProps={props}>
 		{(preferenceProps) => {
 			switch (preferenceProps.componentType) {
+				case componentTypes.treeList:
+					return <TreeList {...preferenceProps} />;
 				case componentTypes.reactiveList:
 					return <ReactiveList {...preferenceProps} />;
 				case componentTypes.dataSearch:

diff --git a/packages/web/src/components/list/TreeList.d.ts b/packages/web/src/components/list/TreeList.d.ts
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { CommonProps } from '../..';
+import * as types from '../../types';
+
+export interface TreeListProps extends CommonProps {
+	componentId: string;
+	className?: string;
+	style?: types.style;
+	showRadio?: boolean;
+	showCheckbox?: boolean;
+	mode: 'single' | 'multiple';
+	showCount?: boolean;
+	showSearch?: boolean;
+	showIcon?: boolean;
+	icon: types.children;
+	showLeafIcon?: boolean;
+	leafIcon: types.children;
+	showLine?: boolean;
+	switcherIcon: (expanded: boolean) => types.children;
+	render?: (data: any) => any;
+	renderItem: (item: any, count?: number, isSelected?: boolean) => any;
+	dataField: types.stringArray;
+	showFilter?: boolean;
+	index?: string;
+	onValueChange?: (...args: any[]) => any;
+	onChange?: (...args: any[]) => any;
+	onError?: (...args: any[]) => any;
+	defaultValue?: types.stringArray;
+	value?: types.stringArray;
+	beforeValueChange?: (...args: any[]) => any;
+	customQuery?: (...args: any[]) => any;
+	defaultQuery?: (...args: any[]) => any;
+}
+
+declare const TreeList: React.ComponentClass<TreeListProps>;
+
+export default TreeList;
+143 −0		stories/index.js
+77 −0		stories/reactivesearch/TreeList.stories.js
+153 −0		stories/reactivesearch/TreeListCustomRenderer.stories.js
+1 −0		src/actions/value.js
+1 −0		src/utils/analytics.js
+1 −0		src/utils/constants.js
+154 −0		src/utils/helper.js
+1 −0		src/utils/transform.js
+0 −5,128		yarn.lock