-
Notifications
You must be signed in to change notification settings - Fork 17
/
NestedList.stories.js
91 lines (84 loc) · 2.26 KB
/
NestedList.stories.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React, { Component } from "react";
import {
ReactiveBase,
ReactiveMap,
NestedList,
AppbaseSensorHelper as helper
} from "@appbaseio/reactivesearch";
import { Img } from "./Img.js";
const historyPin = require("./placeholder.svg");
export default class NestedListMapDefault extends Component {
constructor(props) {
super(props);
this.onPopoverTrigger = this.onPopoverTrigger.bind(this);
}
componentDidMount() {
helper.ResponsiveStory();
}
onPopoverTrigger(marker) {
return (<div className="popoverComponent row" style={{ margin: "0", maxWidth: "300px" }}>
<span className="imgContainer col s2" style={{ padding: "0" }}>
<Img src={marker._source.member.photo} />
</span>
<div className="infoContainer col s10">
<div className="nameContainer">
<strong>{marker._source.member.member_name}</strong>
</div>
<div className="description">
<p style={{ margin: "5px 0", lineHeight: "18px" }}>is going to
<a href={marker._source.event.event_url} target="_blank">
{marker._source.event.event_name}
</a>
</p>
</div>
</div>
</div>);
}
render() {
return (
<ReactiveBase
app="reactivemap_demo"
credentials="y4pVxY2Ok:c92481e2-c07f-4473-8326-082919282c18"
type="meetupdata1"
>
<div className="row">
<div className="col s6 col-xs-6">
<NestedList
componentId="TopicSensor"
appbaseField={[this.props.mapping.city, this.props.mapping.topic]}
title="NestedList"
{...this.props}
/>
</div>
<div className="col s6 col-xs-6">
<ReactiveMap
appbaseField={this.props.mapping.location}
historicalData
setMarkerCluster={false}
defaultMapStyle="Light Monochrome"
autoCenter
searchAsMoveComponent
MapStylesComponent
title="Reactive Maps"
showPopoverOn="click"
historicPin={historyPin}
onPopoverTrigger={this.onPopoverTrigger}
defaultZoom={13}
defaultCenter={{ lat: 37.74, lon: -122.45 }}
react={{
and: "TopicSensor"
}}
/>
</div>
</div>
</ReactiveBase>
);
}
}
NestedListMapDefault.defaultProps = {
mapping: {
city: "group.group_city.raw",
topic: "group.group_topics.topic_name_raw.raw",
location: "location"
}
};