moneymobile-react - npm Package Compare versions

Comparing version 0.6.1-beta to 0.7.0-beta

dist/components/GoogleSearch.js

@@ -19,4 +19,5 @@ 'use strict';
     googleMapsApiKey: React.PropTypes.string.isRequired,
+    leftIcon: React.PropTypes.string,
     onCurrentLocationClick: React.PropTypes.func,
-    onInputFocus: React.PropTypes.func,
+    onLeftIconClick: React.PropTypes.func,
     onSearchResultClick: React.PropTypes.func,
@@ -37,2 +38,3 @@ placeholder: React.PropTypes.string,
       gettingLocation: false,
+      showBody: false,
       searchString: '',
@@ -76,2 +78,5 @@ results: []
   },
+  _handleInputFocus: function _handleInputFocus() {
+    this.setState({ showBody: true });
+  },
   _handleResultClick: function _handleResultClick(result) {
@@ -91,2 +96,3 @@ var _this3 = this;
 
+          _this3.setState({ showBody: false });
           _this3.props.onSearchResultClick(_extends({}, result, latLng));
@@ -116,3 +122,4 @@ });
           _this4.setState({
-            gettingLocation: false
+            gettingLocation: false,
+            showBody: false
           });
@@ -128,3 +135,4 @@
           _this4.setState({
-            gettingLocation: false
+            gettingLocation: false,
+            showBody: false
           });
@@ -140,2 +148,9 @@
   },
+  _handleLeftIconClick: function _handleLeftIconClick() {
+    if (this.state.showBody) {
+      this.setState({ showBody: false });
+    } else {
+      this.props.onLeftIconClick();
+    }
+  },
   render: function render() {
@@ -148,2 +163,7 @@ var _this5 = this;
 
+    if (this.props.leftIcon) {
+      styles.searchIcon.left = 22;
+      styles.input.paddingLeft = 52;
+    }
+
     return React.createElement(
@@ -156,4 +176,11 @@ 'div',
         { style: styles.search },
+        this.props.leftIcon ? React.createElement(Icon, {
+          color: StyleConstants.Colors.CHARCOAL,
+          onClick: this._handleLeftIconClick,
+          size: 22,
+          style: styles.leftIcon,
+          type: this.props.leftIcon
+        }) : null,
         React.createElement(Icon, {
-          color: StyleConstants.Colors.WHITE,
+          color: StyleConstants.Colors.CHARCOAL,
           size: 22,
@@ -164,4 +191,4 @@ style: styles.searchIcon,
         React.createElement('input', {
-          autoFocus: true,
           onChange: this._handleInputChange,
+          onFocus: this._handleInputFocus,
           placeholder: this.props.placeholder || null,
@@ -173,3 +200,3 @@ style: styles.input,
       ),
-      React.createElement(
+      this.state.showBody ? React.createElement(
         'div',
@@ -201,3 +228,3 @@ { style: styles.results },
         })
-      )
+      ) : null
     );
@@ -214,3 +241,3 @@ }
   search: {
-    backgroundColor: StyleConstants.Colors.ASH,
+    backgroundColor: StyleConstants.Colors.PORCELAIN,
     padding: 12
@@ -222,3 +249,3 @@ },
     outline: 'none',
-    color: StyleConstants.Colors.WHITE,
+    color: StyleConstants.Colors.CHARCOAL,
     fontSize: StyleConstants.FontSizes.MEDIUM,
@@ -230,2 +257,9 @@ paddingLeft: 30,
   },
+  leftIcon: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    padding: 12
+  },
   searchIcon: {
@@ -232,0 +266,0 @@ position: 'absolute',

dist/components/Input.js

@@ -13,2 +13,3 @@ 'use strict';
   propTypes: {
+    disabled: React.PropTypes.bool,
     isRequired: React.PropTypes.bool,
@@ -21,2 +22,7 @@ label: React.PropTypes.string,
 
+  getDefaultProps: function getDefaultProps() {
+    return {
+      disabled: false
+    };
+  },
   getInitialState: function getInitialState() {
@@ -23,0 +29,0 @@ return {

package.json

 {
   "name": "moneymobile-react",
-  "version": "0.6.1-beta",
+  "version": "0.7.0-beta",
   "description": "Mobile specific UI components",
@@ -5,0 +5,0 @@ "main": "dist/Index.js",

src/components/GoogleSearch.js

@@ -13,4 +13,5 @@ const GoogleMapsAPI = require('google-maps');
     googleMapsApiKey: React.PropTypes.string.isRequired,
+    leftIcon: React.PropTypes.string,
     onCurrentLocationClick: React.PropTypes.func,
-    onInputFocus: React.PropTypes.func,
+    onLeftIconClick: React.PropTypes.func,
     onSearchResultClick: React.PropTypes.func,
@@ -32,2 +33,3 @@ placeholder: React.PropTypes.string,
       gettingLocation: false,
+      showBody: false,
       searchString: '',
@@ -70,2 +72,6 @@ results: []
 
+  _handleInputFocus () {
+    this.setState({ showBody: true });
+  },
+
   _handleResultClick (result) {
@@ -83,2 +89,3 @@ if (this.props.onSearchResultClick) {
 
+          this.setState({ showBody: false });
           this.props.onSearchResultClick(Object.assign({}, result, latLng));
@@ -106,3 +113,4 @@ });
         this.setState({
-          gettingLocation: false
+          gettingLocation: false,
+          showBody: false
         });
@@ -118,3 +126,4 @@
         this.setState({
-          gettingLocation: false
+          gettingLocation: false,
+          showBody: false
         });
@@ -130,2 +139,10 @@
 
+  _handleLeftIconClick () {
+    if (this.state.showBody) {
+      this.setState({ showBody: false });
+    } else {
+      this.props.onLeftIconClick();
+    }
+  },
+
   render () {
@@ -136,2 +153,7 @@ const color = this.props.color || StyleConstants.Colors.PRIMARY;
 
+    if (this.props.leftIcon) {
+      styles.searchIcon.left = 22;
+      styles.input.paddingLeft = 52;
+    }
+
     return (
@@ -141,5 +163,14 @@ <div style={componentStyles}>
         <div style={styles.search}>
+        {this.props.leftIcon ? (
           <Icon
-            color={StyleConstants.Colors.WHITE}
+            color={StyleConstants.Colors.CHARCOAL}
+            onClick={this._handleLeftIconClick}
             size={22}
+            style={styles.leftIcon}
+            type={this.props.leftIcon}
+          />
+        ) : null}
+          <Icon
+            color={StyleConstants.Colors.CHARCOAL}
+            size={22}
             style={styles.searchIcon}
@@ -149,4 +180,4 @@ type='search'
           <input
-            autoFocus={true}
             onChange={this._handleInputChange}
+            onFocus={this._handleInputFocus}
             placeholder={this.props.placeholder || null}
@@ -158,29 +189,30 @@ style={styles.input}
         </div>
-
-        <div style={styles.results}>
-          {navigator.geolocation ? (
-            <div
-              onClick={this._handleCurrentLocationClick}
-              style={styles.result}
-            >
-              <Icon
-                color={color}
-                size={24}
-                type='location'
-              /> Use my current location
-            </div>
-          ) : null}
-
-          {this.state.results.map(result => {
-            return (
+        {this.state.showBody ? (
+          <div style={styles.results}>
+            {navigator.geolocation ? (
               <div
-                key={Math.floor(Math.random() * 100000)}
-                onClick={this._handleResultClick.bind(null, result)}
-                style={resultStyles}
+                onClick={this._handleCurrentLocationClick}
+                style={styles.result}
               >
-                {this.props.resultsFormatter(result)}
+                <Icon
+                  color={color}
+                  size={24}
+                  type='location'
+                /> Use my current location
               </div>
-            );
-          })}
-        </div>
+            ) : null}
+
+            {this.state.results.map(result => {
+              return (
+                <div
+                  key={Math.floor(Math.random() * 100000)}
+                  onClick={this._handleResultClick.bind(null, result)}
+                  style={resultStyles}
+                >
+                  {this.props.resultsFormatter(result)}
+                </div>
+              );
+            })}
+          </div>
+        ) : null}
       </div>
@@ -198,3 +230,3 @@ );
   search: {
-    backgroundColor: StyleConstants.Colors.ASH,
+    backgroundColor: StyleConstants.Colors.PORCELAIN,
     padding: 12
@@ -206,3 +238,3 @@ },
     outline: 'none',
-    color: StyleConstants.Colors.WHITE,
+    color: StyleConstants.Colors.CHARCOAL,
     fontSize: StyleConstants.FontSizes.MEDIUM,
@@ -214,2 +246,9 @@ paddingLeft: 30,
   },
+  leftIcon: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    padding: 12
+  },
   searchIcon: {
@@ -216,0 +255,0 @@ position: 'absolute',

src/components/Input.js

@@ -7,2 +7,3 @@ const React = require('react');
   propTypes: {
+    disabled: React.PropTypes.bool,
     isRequired: React.PropTypes.bool,
@@ -15,2 +16,8 @@ label: React.PropTypes.string,
 
+  getDefaultProps () {
+    return {
+      disabled: false
+    };
+  },
+
   getInitialState () {
@@ -17,0 +24,0 @@ return {

No alert changes

Worsened metrics

Total package byte prevSize

125867

decreased by-89.04%

Number of package files

46

decreased by-2.13%

Lines of code

3916

decreased by-48.82%

No dependency changes