touchstack - npm Package Compare versions

Comparing version 0.3.7 to 0.3.8

build/components/Application.js

@@ -30,3 +30,5 @@ 'use strict';
 var application = {
-	viewManager: null
+	viewsManager: null,
+	tabBar: null,
+	navigationBar: null
 };
@@ -33,0 +35,0 @@

build/components/Button.js

@@ -1,16 +0,55 @@
-/*
-Copyright 2016 HubStack
+'use strict';
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+var _react = require('react');
 
-http://www.apache.org/licenses/LICENSE-2.0
+var _react2 = _interopRequireDefault(_react);
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-"use strict";
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Link = require('./Link');
+
+var _Link2 = _interopRequireDefault(_Link);
+
+var _Icon = require('./Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _Label = require('./Label');
+
+var _Label2 = _interopRequireDefault(_Label);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _react2.default.createClass({
+  displayName: 'Button',
+  propTypes: {
+    className: _react2.default.PropTypes.string,
+    to: _react2.default.PropTypes.string,
+    transition: _react2.default.PropTypes.string,
+    onClick: _react2.default.PropTypes.func
+  },
+  render: function render() {
+    var className = (0, _classnames2.default)('Button', this.props.className);
+    return _react2.default.createElement(
+      'div',
+      { className: className },
+      _react2.default.createElement(_Link2.default, { to: this.props.to, transition: this.props.transition, onClick: this.props.onClick })
+    );
+  }
+}); /*
+    Copyright 2016 HubStack
+    
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    
+    http://www.apache.org/licenses/LICENSE-2.0
+    
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+    */

build/components/Label.js

@@ -32,3 +32,3 @@ 'use strict';
 	propTypes: {
-		children: _react2.default.PropTypes.node,
+		children: _react2.default.PropTypes.node.isRequired,
 		className: _react2.default.PropTypes.string
@@ -35,0 +35,0 @@ },

build/components/Link.js

@@ -35,3 +35,4 @@ 'use strict';
     to: _react2.default.PropTypes.string,
-    transition: _react2.default.PropTypes.string
+    transition: _react2.default.PropTypes.string,
+    onClick: _react2.default.PropTypes.func
   },
@@ -48,3 +49,3 @@ getDefaultProps: function getDefaultProps() {
   onClick: function onClick() {
-    this.context.application.viewManager.transitionTo(this.props.to, this.props.transition);
+    if (this.props.onClick) this.props.onClick();else this.context.application.viewsManager.transitionTo(this.props.to, this.props.transition);
   },
@@ -51,0 +52,0 @@ render: function render() {

build/components/NavigationBar.js

@@ -11,2 +11,18 @@ 'use strict';
 
+var _Panel = require('./Panel');
+
+var _Panel2 = _interopRequireDefault(_Panel);
+
+var _Label = require('./Label');
+
+var _Label2 = _interopRequireDefault(_Label);
+
+var _Icon = require('./Icon');
+
+var _Icon2 = _interopRequireDefault(_Icon);
+
+var _Link = require('./Link');
+
+var _Link2 = _interopRequireDefault(_Link);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,19 +47,68 @@
 module.exports = _react2.default.createClass({
-	displayName: 'NavigationBar',
-	propTypes: {
-		className: _react2.default.PropTypes.string,
-		title: _react2.default.PropTypes.string
-	},
-	render: function render() {
-		var className = (0, _classnames2.default)('NavigationBar', this.props.className);
-		return _react2.default.createElement(
-			'div',
-			{ className: className },
-			_react2.default.createElement(
-				'p',
-				{ className: 'title' },
-				this.props.title
-			)
-		);
-	}
+  displayName: 'NavigationBar',
+  propTypes: {
+    className: _react2.default.PropTypes.string,
+    title: _react2.default.PropTypes.string,
+    onLeftButtonClick: _react2.default.PropTypes.func,
+    onRightButtonClick: _react2.default.PropTypes.func,
+    leftButtonIcon: _react2.default.PropTypes.string,
+    rightButtonIcon: _react2.default.PropTypes.string
+  },
+  contextTypes: {
+    application: _react2.default.PropTypes.object
+  },
+  getDefaultProps: function getDefaultProps() {
+    return {
+      leftButtonIcon: 'ion-ios-arrow-back'
+    };
+  },
+  getInitialState: function getInitialState() {
+    return {
+      title: this.props.title || ''
+    };
+  },
+  componentDidMount: function componentDidMount() {
+    this.context.application.navigationBar = this;
+  },
+  onLeftButtonClick: function onLeftButtonClick() {
+    this.props.onLeftButtonClick();
+  },
+  onRightButtonClick: function onRightButtonClick() {
+    this.props.onRightButtonClick();
+  },
+  setTitle: function setTitle(title) {
+    this.setState({
+      title: title
+    });
+  },
+  render: function render() {
+    var className = (0, _classnames2.default)('NavigationBar', this.props.className);
+    var leftButton = null;
+    var rightButton = null;
+    if (this.props.onLeftButtonClick) {
+      leftButton = _react2.default.createElement(
+        _Link2.default,
+        { onClick: this.onLeftButtonClick, className: 'left' },
+        _react2.default.createElement(_Icon2.default, { className: this.props.leftButtonIcon })
+      );
+    }
+    if (this.props.onRightButtonClick) {
+      rightButton = _react2.default.createElement(
+        _Link2.default,
+        { onClick: this.onRightButtonClick, className: 'right' },
+        _react2.default.createElement(_Icon2.default, { className: this.props.rightButtonIcon })
+      );
+    }
+    return _react2.default.createElement(
+      _Panel2.default,
+      { className: className, type: 'row' },
+      leftButton,
+      _react2.default.createElement(
+        _Label2.default,
+        { className: 'title col-auto' },
+        this.state.title
+      ),
+      rightButton
+    );
+  }
 });

build/components/SearchBar.js

@@ -22,7 +22,7 @@ 'use strict';
     onCancel: _react2.default.PropTypes.func,
-    onChange: _react2.default.PropTypes.func.required,
+    onChange: _react2.default.PropTypes.func.isRequired,
     onFocus: _react2.default.PropTypes.func,
     onBlur: _react2.default.PropTypes.func,
     onSubmit: _react2.default.PropTypes.func,
-    value: _react2.default.PropTypes.string.required,
+    value: _react2.default.PropTypes.string.isRequired,
     placeholder: _react2.default.PropTypes.string,
@@ -29,0 +29,0 @@ icon: _react2.default.PropTypes.string,

build/components/TabBar.js

@@ -0,1 +1,21 @@
+'use strict';
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Panel = require('./Panel');
+
+var _Panel2 = _interopRequireDefault(_Panel);
+
+var _TabBarItem = require('./TabBarItem');
+
+var _TabBarItem2 = _interopRequireDefault(_TabBarItem);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
@@ -16,2 +36,46 @@ Copyright 2016 HubStack
 */
-"use strict";
+
+module.exports = _react2.default.createClass({
+  displayName: 'TabBar',
+  propTypes: {
+    children: _react2.default.PropTypes.node,
+    className: _react2.default.PropTypes.string,
+    defaultTab: _react2.default.PropTypes.string
+  },
+  contextTypes: {
+    application: _react2.default.PropTypes.object
+  },
+  getInitialState: function getInitialState() {
+    return {
+      activeTab: this.props.defaultTab || ''
+    };
+  },
+  setActiveTab: function setActiveTab(tab) {
+    this.setState({
+      activeTab: tab
+    });
+  },
+  getActiveTab: function getActiveTab() {
+    return this.state.activeTab;
+  },
+  componentDidMount: function componentDidMount() {
+    this.context.application.tabBar = this;
+  },
+  render: function render() {
+    var self = this;
+    var className = (0, _classnames2.default)('TabBar', this.props.className);
+
+    var elements = [];
+    _react2.default.Children.forEach(this.props.children, function (child) {
+      var status = false;
+      if (self.state.activeTab == child.props.name) status = true;
+      elements.push(_react2.default.createElement(_TabBarItem2.default, { name: child.props.name, key: child.props.name, title: child.props.title, icon: child.props.icon, iconActive: child.props.iconActive, onClick: child.props.onClick, active: status }));
+    });
+
+    return _react2.default.createElement(
+      _Panel2.default,
+      { className: className, type: 'row' },
+      elements
+    );
+  }
+});

build/components/View.js

@@ -34,3 +34,3 @@ 'use strict';
 		className: _react2.default.PropTypes.string,
-		name: _react2.default.PropTypes.string
+		name: _react2.default.PropTypes.string.isRequired
 	},
@@ -37,0 +37,0 @@ render: function render() {

build/components/ViewsManager.js

@@ -22,3 +22,3 @@ 'use strict';
     className: _react2.default.PropTypes.string,
-    defaultView: _react2.default.PropTypes.string.required
+    defaultView: _react2.default.PropTypes.string.isRequired
   },
@@ -46,6 +46,5 @@ contextTypes: {
   componentDidMount: function componentDidMount() {
-    this.context.application.viewManager = this;
+    this.context.application.viewsManager = this;
   },
   transitionTo: function transitionTo(viewName, transition) {
-    console.log(viewName);
     this.setState({
@@ -52,0 +51,0 @@ currentView: viewName,

build/index.js

@@ -28,1 +28,3 @@ /*
 exports.Link = require('./components/Link');
+exports.TabBar = require('./components/TabBar');
+exports.TabBarItem = require('./components/TabBarItem');

package.json

 {
   "name": "touchstack",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Awesome App Framework powered by React & Apache Cordova",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -16,1 +16,13 @@ # TouchStack
 [downloads-image]: https://img.shields.io/npm/dt/touchstack.svg?style=flat-square
+
+## Changelogs
+### 0.3.8
+- Renamed `this.context.application.viewManager` to `this.context.application.viewsManager`
+- New component `TabBar`
+- New component `TabBarItem`
+- New application contexts `navigationBar` and `tabBar`
+- Fixed style problems on `.Application` and `.Link`
+- Added function `setTitle` to `NavigationBar`
+- On `NavigationBar`: renamed `onBackClick` to `onLeftButtonClick`
+- On `NavigationBar`: added `onRightButtonClick`
+- New component `Button`

No alert changes

Improved metrics

Total package byte prevSize

61897

increased by19.73%

Number of package files

36

increased by5.88%

Lines of code

887

increased by29.49%

Number of lines in readme file

28

increased by75%

No dependency changes