Merge branch 'kaushik94-create-component-number-box' into dev

app/app.js

@@ -14,6 +14,7 @@ import {ToggleButton} from './sensors/ToggleButton';
 import {DatePicker} from './sensors/DatePicker';
 import {DateRange} from './sensors/DateRange';
 import {NestedList} from './sensors/NestedList';
+import {NumberBox} from './sensors/NumberBox';
 import {ResultList} from './actuators/ResultList';
 import {PaginatedResultList} from './actuators/PaginatedResultList';
 import {PoweredBy} from './sensors/PoweredBy';
@@ -38,6 +39,7 @@ module.exports = {
 	DatePicker: DatePicker,
 	DateRange: DateRange,
 	NestedList: NestedList,
+	NumberBox: NumberBox,
 	ReactiveBase: ReactiveBase,
 	ResultList: ResultList,
 	PaginatedResultList: PaginatedResultList,

app/assets/styles/partials/components/_numberbox.scss

@@ -0,0 +1,64 @@
+.rbc.rbc-numberbox {
+    padding: 0;
+
+    .rbc-numberbox-btn {
+        display: inline-block;
+        width: 2em;
+        height: 2em;
+        font-size: 1em !important;
+        background: #ebebed;
+        line-height: 30px;
+        padding: 0 !important;
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    .rbc-numberbox-btn-icon {
+        line-height: inherit;
+    }
+
+    .rbc-numberbox-btn-active {
+        color: #545456;
+    }
+
+    .rbc-numberbox-btn-inactive {
+        color: #acacaf;
+    }
+
+    .rbc-numberbox-btn-container {
+        width: 9em;
+        padding: 10px;
+    }
+
+    .rbc-numberbox-container {
+        display: flex;
+    }
+
+    .rbc-numberbox-container-top {
+        flex-direction: column;
+    }
+
+    .rbc-numberbox-container-bottom {
+        flex-direction: column-reverse;
+    }
+
+    .rbc-numberbox-container-right {
+        flex-direction: row-reverse;
+    }
+
+    .rbc-numberbox-container-left {
+        flex-direction: row;
+    }
+
+    .rbc-numberbox-number {
+        padding: 1em;
+    }
+
+    .rbc-numberbox-label {
+        display: inline-block;
+        line-height: 50px;
+        text-align: center;
+        vertical-align: middle;
+        width: 8em;
+    }
+}

app/assets/styles/style.scss

@@ -1,7 +1,7 @@
 @import "partials/base/fonts",
 		"partials/settings/variables",
 		"partials/base/base";
-		
+
 @import "partials/theme/default";
 
 @import "partials/components/datasearch",
@@ -15,4 +15,5 @@
 		"partials/components/pagination",
 		"partials/components/nestedlist",
 		"partials/components/datepicker",
-		"partials/components/poweredby";
+		"partials/components/numberbox",
+		"partials/components/poweredby";

app/sensors/NumberBox.js

@@ -0,0 +1,163 @@
+import React, {Component} from 'react';
+import classNames from 'classnames';
+
+import {manager} from '../middleware/ChannelManager.js';
+const helper = require('../middleware/helper.js');
+
+const COMPONENT_QUERY_TYPE = 'term';
+
+const TitleComponent = (props) => (
+	<h4 className="rbc-title col s12 col-xs-12">{props.title}</h4>
+);
+
+const NumberBoxButtonComponent = (props) => {
+	const componentState = props.isActive
+		? 'active'
+		: 'inactive';
+	const {type} = props;
+	const increment = type == 'plus'
+		? 1
+		: -1;
+	return (
+		<button className={`btn rbc-btn rbc-numberbox-btn rbc-numberbox-btn-${componentState}`} onClick={() => props.handleChange(increment)}>
+			<span className={`fa fa-${type} rbc-numberbox-btn-icon`}></span>
+		</button>
+	);
+};
+
+const NumberComponent = (props) => {
+	const {label, max, min, labelPosition, handleChange} = props;
+	const value = props.value
+		? props.value
+		: this.state.currentValue;
+	const isPlusActive = max
+		? value < max
+		: true;
+	const isMinusActive = min
+		? value > min
+		: true;
+	const position = labelPosition
+		? labelPosition
+		: 'left';
+	return (
+		<div className={`rbc rbc-numberbox-container rbc-numberbox-container-${position} col s12 col-xs-12`}>
+			<div className={`rbc-label rbc-numberbox-label`}>{label}</div>
+			<div className={"rbc-numberbox-btn-container"}>
+				<NumberBoxButtonComponent isActive={isMinusActive} handleChange={handleChange} type={'minus'}/>
+				<span className={"rbc-numberbox-number"}>{value}</span>
+				<NumberBoxButtonComponent isActive={isPlusActive} handleChange={handleChange} type={'plus'}/>
+			</div>
+		</div>
+	);
+};
+
+class NumberBox extends Component {
+	constructor(props, context) {
+		super(props);
+		const {defaultSelected, focused} = this.props;
+		this.state = {
+			currentValue: defaultSelected,
+			focused: focused
+		}
+		this.type = COMPONENT_QUERY_TYPE;
+		this.handleChange = this.handleChange.bind(this);
+		this.defaultQuery = this.defaultQuery.bind(this);
+	}
+
+	componentDidMount() {
+		this.setQueryInfo();
+	}
+
+	// build query for this sensor only
+	defaultQuery(value) {
+		return {
+			'term': {
+				[this.props.appbaseField]: value
+			}
+		};
+	}
+
+	setQueryInfo() {
+		const {sensorId, appbaseField} = this.props;
+		const obj = {
+			key: sensorId,
+			value: {
+				queryType: COMPONENT_QUERY_TYPE,
+				inputData: appbaseField,
+				defaultQuery: this.defaultQuery
+			}
+		};
+		helper.selectedSensor.setSensorInfo(obj);
+	}
+
+	// use this only if want to create actuators
+	// Create a channel which passes the depends and receive results whenever depends changes
+	createChannel() {
+		const depends = this.props.depends
+			? this.props.depends
+			: {};
+		const channelObj = manager.create(this.context.appbaseRef, this.context.type, depends);
+	}
+
+	// handle the input change and pass the value inside sensor info
+	handleChange(increment) {
+		const {sensorId, data} = this.props;
+		const {min, max} = data;
+		const {currentValue} = this.state;
+		let inputVal = currentValue;
+		if (increment > 0) {
+			if ((max && currentValue < max) || (!max)) {
+				inputVal += 1;
+			}
+		} else {
+			if ((min && currentValue > min) || (!min)) {
+				inputVal -= 1;
+			}
+		}
+		this.setState({'currentValue': inputVal});
+		const obj = {
+			key: sensorId,
+			value: inputVal
+		};
+		// pass the selected sensor value with sensorId as key,
+		const isExecuteQuery = true;
+		helper.selectedSensor.set(obj, isExecuteQuery);
+	}
+
+	render() {
+		const {title, data, labelPosition, defaultStyle} = this.props;
+		const {currentValue} = this.state;
+		const ComponentTitle = title
+			? <TitleComponent title={title}/>
+			: null;
+		const cx = classNames({
+			'rbc-title-active': title,
+			'rbc-title-inactive': !title
+		});
+		return (
+			<div className={`rbc rbc-numberbox col s12 col-xs-12 card thumbnail ${cx}`} style={defaultStyle}>
+				<div className="row">
+					{ComponentTitle}
+					<NumberComponent handleChange={this.handleChange} value={currentValue} label={data.label} min={data.min} max={data.max} labelPosition={labelPosition}/>
+				</div>
+			</div>
+		);
+	}
+};
+
+NumberBox.propTypes = {
+	sensorId: React.PropTypes.string.isRequired,
+	appbaseField: React.PropTypes.string.isRequired,
+	title: React.PropTypes.string,
+	data: React.PropTypes.any.isRequired,
+	defaultSelected: React.PropTypes.number,
+	labelPosition: React.PropTypes.string,
+};
+
+// context type
+NumberBox.contextTypes = {
+	appbaseRef: React.PropTypes.any.isRequired,
+	type: React.PropTypes.any.isRequired,
+};
+
+export {NumberBox};

app/stories/NumberBox.stories.js

@@ -0,0 +1,101 @@
+import React, {Component} from 'react';
+import {ReactiveBase, NumberBox, ResultList} from '../app.js';
+import {ResponsiveStory} from '../middleware/helper.js';
+require('./list.css');
+
+export default class NumberBoxDefault extends Component {
+	constructor(props) {
+		super(props);
+		this.onData = this.onData.bind(this);
+		this.nameQuery = this.nameQuery.bind(this);
+	}
+
+	componentDidMount() {
+		ResponsiveStory();
+	}
+
+	nameQuery(value) {
+		if (value) {
+			return {
+				match: {
+					'cars.name': value
+				}
+			};
+		} else {
+			return null;
+		}
+	}
+
+	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="#" key={markerData._id}>
+				<div className="text-container full_row" style={{
+					'paddingLeft': '10px'
+				}}>
+					<div className="text-head text-overflow full_row">
+						<span className="text-head-info text-overflow">
+							{marker.name
+								? marker.name
+								: ''}
+							- {marker.brand
+								? marker.brand
+								: ''}
+						</span>
+						<span className="text-head-city">{marker.brand
+								? marker.brand
+								: ''}</span>
+					</div>
+					<div className="text-description text-overflow full_row">
+						<ul className="highlight_tags">
+							{marker.price
+								? `Priced at $${marker.price}`
+								: 'Free Test Drive'}
+						</ul>
+					</div>
+				</div>
+			</a>
+		);
+	}
+
+	render() {
+		return (
+			<ReactiveBase appname="car-store" username="cf7QByt5e" password="d2d60548-82a9-43cc-8b40-93cbbe75c34c">
+				<div className="row">
+					<div className="col s6 col-xs-6">
+						<NumberBox sensorId="CarModelSensor" appbaseField={this.props.mapping.name} title="NumberBox" {...this.props}/>
+					</div>
+
+					<div className="col-xs-6">
+						<ResultList sensorId="SearchResult" appbaseField={this.props.mapping.name} title="Cars" from={0} size={20} onData={this.onData} depends={{
+							CarModelSensor: {
+								"operation": "must",
+								defaultQuery: this.NameQuery
+							}
+						}}/>
+					</div>
+				</div>
+			</ReactiveBase>
+		);
+	}
+}
+
+NumberBoxDefault.defaultProps = {
+	mapping: {
+		name: 'name'
+	}
+};

app/stories/index.js

@@ -59,6 +59,8 @@ import DateRangeReadme from "@appbaseio/reactivebase-manual/docs/v1/components/D
 import NestedListDefault from "./NestedList.stories";
 import NestedListReadme from "@appbaseio/reactivebase-manual/docs/v1/components/NestedList.md";
 
+import NumberBoxDefault from './NumberBox.stories';
+
 require ("../../node_modules/materialize-css/dist/css/materialize.min.css");
 require ("../../dist/css/vendor.min.css");
 require ("../../dist/css/style.min.css");
@@ -534,3 +536,22 @@ storiesOf("PaginatedResultList", module)
 			paginationAt={select("paginationAt", {"bottom": "bottom", "top": "top", "both": "both"}, "bottom")}
 		/>
 	)));
+
+storiesOf("NumberBox", module)
+	.addDecorator(withKnobs)
+	.add("Basic", withReadme(removeFirstLine(TextFieldReadme), () => {
+		const data = {
+			label: 'Car Model',
+		}
+		const labelPosition = 'left';
+		return <NumberBoxDefault defaultSelected={3} data={data} labelPosition={labelPosition}/>;
+	}))
+	.add("Playground", withReadme(removeFirstLine(TextFieldReadme), () => {
+		const data = {
+			label: 'Car Model',
+			min: 2,
+			max: 6,
+		}
+		const labelPosition = 'right';
+		return <NumberBoxDefault defaultSelected={3} data={data} labelPosition={labelPosition}/>;
+	}));