feat: horizontal and vertical layouts for TabDataList

appbaseio · Jul 20, 2022 · 744682f · 744682f
1 parent db766df
commit 744682f
Showing 1 changed file with 71 additions and 22 deletions.
diff --git a/stories/reactivesearch/TabDataList.stories.js b/stories/reactivesearch/TabDataList.stories.js
@@ -3,27 +3,63 @@ import { ReactiveBase, ReactiveList, SelectedFilters, TabDataList } from "@appba
 
 import { meetupList as MeetupList } from "./resultViews";
 
-export default class TabDataListDefault extends Component {
-	render() {
-		return (
-			<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
-						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' },
-						]}
-						{...this.props}
-					/>
+const HorizontalLayout = (props) =>(
+<div className="container">
+	<SelectedFilters />
+	<TabDataList
+		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' },
+		]}
+		{...props}
+	/>
+	<ReactiveList
+		componentId="SearchResult"
+		dataField="group.group_topics.topic_name_raw.keyword"
+		title="Results"
+		sortBy="asc"
+		className="result-list-container"
+		from={0}
+		size={5}
+		pagination
+		react={{
+			and: ["CitySensor"]
+		}}
+		{...props}
+	>
+		{({ data }) => (
+			<ReactiveList.ResultListWrapper>
+				{
+					data.map(item => <MeetupList {...item} />)
+				}
+			</ReactiveList.ResultListWrapper>
+		)}
+	</ReactiveList>
+</div>
+)
+
+const VerticalLayout = (props)=>(
+		<>
+			<SelectedFilters />
+			<div className="row">
+				<div className="col">
+							<TabDataList
+								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' },
+								]}
+								{...props}
+							/>
+				</div>
+				<div className="col">
 					<ReactiveList
 						componentId="SearchResult"
 						dataField="group.group_topics.topic_name_raw.keyword"
@@ -36,7 +72,7 @@ export default class TabDataListDefault extends Component {
 						react={{
 							and: ["CitySensor"]
 						}}
-						{...this.props}
+						{...props}
 					>
 						{({ data }) => (
 							<ReactiveList.ResultListWrapper>
@@ -47,6 +83,19 @@ export default class TabDataListDefault extends Component {
 						)}
 					</ReactiveList>
 				</div>
+			</div>
+	</>
+)
+
+export default class TabDataListDefault extends Component {
+	render() {
+		return (
+			<ReactiveBase
+				app="meetup_app"
+				url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
+				enableAppbase
+			>
+				{this.props.displayAsVertical ? <VerticalLayout {...this.props}/>: <HorizontalLayout {...this.props}/>}
 			</ReactiveBase>
 		);
 	}