-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
279 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import {default as React, Component} from 'react'; | ||
| import { SingleDatePicker } from 'react-dates'; | ||
| import classNames from 'classnames'; | ||
| var moment = require('moment'); | ||
| var momentPropTypes = require('react-moment-proptypes'); | ||
| import { manager } from '../middleware/ChannelManager.js'; | ||
| var helper = require('../middleware/helper.js'); | ||
|
|
||
| export class DatePicker extends Component { | ||
| constructor(props, context) { | ||
| super(props); | ||
| this.state = { | ||
| currentValue: this.props.date, | ||
| focused: this.props.focused | ||
| }; | ||
| this.type = 'range'; | ||
| this.handleChange = this.handleChange.bind(this); | ||
| this.defaultQuery = this.defaultQuery.bind(this); | ||
| } | ||
|
|
||
| // Set query information | ||
| componentDidMount() { | ||
| this.setQueryInfo(); | ||
| } | ||
|
|
||
| // set the query type and input data | ||
| setQueryInfo() { | ||
| let obj = { | ||
| key: this.props.sensorId, | ||
| value: { | ||
| queryType: this.type, | ||
| inputData: this.props.appbaseField, | ||
| defaultQuery: this.defaultQuery | ||
| } | ||
| }; | ||
| helper.selectedSensor.setSensorInfo(obj); | ||
| } | ||
|
|
||
| // build query for this sensor only | ||
| defaultQuery(value) { | ||
| let query = null; | ||
| if(value) { | ||
| query = { | ||
| 'range': { | ||
| [this.props.appbaseField]: { | ||
| gte: value, | ||
| lt: moment(value).add(1, 'days') | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| return query; | ||
| } | ||
|
|
||
| // use this only if want to create actuators | ||
| // Create a channel which passes the depends and receive results whenever depends changes | ||
| createChannel() { | ||
| let depends = this.props.depends ? this.props.depends : {}; | ||
| var channelObj = manager.create(this.context.appbaseRef, this.context.type, depends); | ||
| } | ||
|
|
||
| // handle the input change and pass the value inside sensor info | ||
| handleChange(inputVal) { | ||
| this.setState({ | ||
| 'currentValue': inputVal | ||
| }); | ||
| var obj = { | ||
| key: this.props.sensorId, | ||
| value: inputVal | ||
| }; | ||
| // pass the selected sensor value with sensorId as key, | ||
| let isExecuteQuery = true; | ||
| helper.selectedSensor.set(obj, isExecuteQuery); | ||
| } | ||
|
|
||
| // handle focus | ||
| handleFocus(focus) { | ||
| this.setState({ | ||
| focused: focus | ||
| }); | ||
| } | ||
|
|
||
| // render | ||
| render() { | ||
| let title = null; | ||
| if(this.props.title) { | ||
| title = (<h4 className="rbc-title col s12 col-xs-12">{this.props.title}</h4>); | ||
| } | ||
|
|
||
| let cx = classNames({ | ||
| 'rbc-title-active': this.props.title, | ||
| 'rbc-title-inactive': !this.props.title | ||
| }); | ||
|
|
||
| return ( | ||
| <div className={`rbc rbc-DatePicker col s12 col-xs-12 card thumbnail ${cx}`}> | ||
| {title} | ||
| <div className="rb-datepicker-component col s12 col-xs-12"> | ||
| <SingleDatePicker | ||
| id={this.props.sensorId} | ||
| date={this.state.currentValue} | ||
| placeholder={this.props.placeholder} | ||
| focused={this.state.focused} | ||
| numberOfMonths={this.props.numberOfMonths} | ||
| isOutsideRange={() => false} | ||
| {...this.props.extra} | ||
| onDateChange={(date) => { this.handleChange(date) }} | ||
| onFocusChange={({ focused }) => { this.handleFocus(focused) }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| DatePicker.propTypes = { | ||
| sensorId: React.PropTypes.string.isRequired, | ||
| appbaseField: React.PropTypes.string, | ||
| title: React.PropTypes.string, | ||
| placeholder: React.PropTypes.string, | ||
| date: momentPropTypes.momentObj, | ||
| focused: React.PropTypes.bool, | ||
| numberOfMonths: React.PropTypes.number, | ||
| extra: React.PropTypes.any | ||
| }; | ||
|
|
||
| // Default props value | ||
| DatePicker.defaultProps = { | ||
| placeholder: 'Select Date', | ||
| numberOfMonths: 1, | ||
| focused: true, | ||
| date: null | ||
| }; | ||
|
|
||
| // context type | ||
| DatePicker.contextTypes = { | ||
| appbaseRef: React.PropTypes.any.isRequired, | ||
| type: React.PropTypes.any.isRequired | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import React, { Component } from 'react'; | ||
| var moment = require('moment'); | ||
| import { ReactiveBase, DatePicker, ResultList } from '../app.js'; | ||
| import { Img } from './Img.js'; | ||
|
|
||
| require('./list.css'); | ||
|
|
||
| export default class SingleListDefault extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.onData = this.onData.bind(this); | ||
| this.DEFAULT_IMAGE = 'http://www.avidog.com/wp-content/uploads/2015/01/BellaHead082712_11-50x65.jpg'; | ||
| } | ||
|
|
||
| onData(res) { | ||
| let result, combineData = res.currentData; | ||
| if(res.mode === 'historic') { | ||
| combineData = res.currentData.concat(res.newData); | ||
| } | ||
| if (combineData) { | ||
| result = combineData.map((markerData, index) => { | ||
| let marker = markerData._source; | ||
| return this.itemMarkup(marker, markerData); | ||
| }); | ||
| } | ||
| return result; | ||
| } | ||
|
|
||
| itemMarkup(marker, markerData) { | ||
| return ( | ||
| <a className="full_row single-record single_record_for_clone" | ||
| href={marker.event ? marker.event.event_url : ''} | ||
| target="_blank" | ||
| key={markerData._id}> | ||
| <div className="img-container"> | ||
| <Img key={markerData._id} src={marker.member ? marker.member.photo : this.DEFAULT_IMAGE} /> | ||
| </div> | ||
| <div className="text-container full_row"> | ||
| <div className="text-head text-overflow full_row"> | ||
| <span className="text-head-info text-overflow"> | ||
| {marker.member ? marker.member.member_name : ''} is going to {marker.event ? marker.event.event_name : ''} | ||
| </span> | ||
| <span className="text-head-city"> | ||
| {marker.group ? marker.group.group_city : ''} ({moment(marker.mtime).format('MM-DD')}) | ||
| </span> | ||
| </div> | ||
| <div className="text-description text-overflow full_row"> | ||
| <ul className="highlight_tags"> | ||
| { | ||
| marker.group.group_topics.map(function(tag,i){ | ||
| return (<li key={i}>{tag.topic_name}</li>) | ||
| }) | ||
| } | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <ReactiveBase | ||
| appname="meetup_demo1" | ||
| username="yafYCRWns" | ||
| password="c9c9b34e-185c-42e5-bdfe-b7c32d543f2e" | ||
| type="meetupdata1" | ||
| > | ||
| <div className="row"> | ||
| <div className="col s6 col-xs-6"> | ||
| <DatePicker | ||
| sensorId="DateSensor" | ||
| appbaseField={this.props.mapping.date} | ||
| {...this.props} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="col s6 col-xs-6"> | ||
| <ResultList | ||
| sensorId="SearchResult" | ||
| appbaseField={this.props.mapping.topic} | ||
| title="Meetups" | ||
| from={0} | ||
| size={20} | ||
| onData={this.onData} | ||
| requestOnScroll={true} | ||
| depends={{ | ||
| DateSensor: {"operation": "must"} | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </ReactiveBase> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| SingleListDefault.defaultProps = { | ||
| title: 'DatePicker', | ||
| mapping: { | ||
| date: 'mtime' | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters