react-native-country-picker-modal - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/index.js

@@ -10,6 +10,8 @@ 'use strict';
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _reactNative = require('react-native');
 
-var _reactNative2 = _interopRequireDefault(_reactNative);
-
 var _worldCountries = require('world-countries');
@@ -39,4 +41,4 @@
 
-var CountryPicker = function (_React$Component) {
-  _inherits(CountryPicker, _React$Component);
+var CountryPicker = function (_Component) {
+  _inherits(CountryPicker, _Component);
 
@@ -48,2 +50,5 @@ function CountryPicker(props) {
 
+    var ds = new _reactNative.ListView.DataSource({ rowHasChanged: function rowHasChanged(r1, r2) {
+        return r1 !== r2;
+      } });
     _this.state = {
@@ -53,5 +58,5 @@ cca2: props.cca2,
       modalVisible: false,
-      countries: _this._orderCountryList()
+      countries: ds.cloneWithRows(_this._orderCountryList())
     };
-    _this.letters = _lodash2.default.map(_lodash2.default.range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1), function (n) {
+    _this.letters = _lodash2.default.range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1).map(function (n) {
       return String.fromCharCode(n).substr(0);
@@ -113,25 +118,28 @@ });
     value: function _scrollTo(letter) {
-      if (letter === 'A') {
-        this._scrollView.scrollTo({
-          y: 0
-        });
-      } else if (letter > 'U') {
-        this._scrollView.scrollTo({
-          y: this.lettersPositions['Z'] - _Ratio2.default.getHeightPercent(85)
-        });
-      } else {
-        this._scrollView.scrollTo({
-          y: this.lettersPositions[letter]
-        });
+      var _this3 = this;
+
+      // dimensions of country list and window
+      var itemHeight = _Ratio2.default.getHeightPercent(7);
+      var listPadding = _Ratio2.default.getPercent(2);
+      var listHeight = _worldCountries2.default.length * itemHeight + 2 * listPadding;
+      var windowHeight = _Ratio2.default.getHeightPercent(100);
+
+      // find position of first country that starts with letter
+      var index = this._orderCountryList().map(function (country) {
+        return _this3._getCountryName(country)[0];
+      }).indexOf(letter);
+      if (index === -1) {
+        return;
       }
-    }
-  }, {
-    key: '_updateLetterPosition',
-    value: function _updateLetterPosition(countryName, position_y) {
+      var position = index * itemHeight + listPadding;
 
-      var firstLetter = countryName.substr(0, 1);
+      // do not scroll past the end of the list
+      if (position + windowHeight > listHeight) {
+        position = listHeight - windowHeight;
+      }
 
-      if (!this.lettersPositions[firstLetter] || this.lettersPositions[firstLetter] && this.lettersPositions[firstLetter] > position_y) {
-        this.lettersPositions[firstLetter] = position_y;
-      }
+      // scroll
+      this._scrollView.scrollTo({
+        y: position
+      });
     }
@@ -141,5 +149,5 @@ }, {
     value: function _renderCountry(country, index) {
-      var _this3 = this;
+      var _this4 = this;
 
-      return _reactNative2.default.createElement(
+      return _react2.default.createElement(
         _reactNative.TouchableOpacity,
@@ -149,8 +157,5 @@ {
           onPress: function onPress() {
-            return _this3._onSelect(country);
+            return _this4._onSelect(country);
           },
-          activeOpacity: 0.99,
-          onLayout: function onLayout(e) {
-            return _this3._updateLetterPosition(_this3._getCountryName(country), e.nativeEvent.layout.y);
-          } },
+          activeOpacity: 0.99 },
         this._renderCountryDetail(country)
@@ -162,5 +167,5 @@ );
     value: function _renderLetters(letter, index) {
-      var _this4 = this;
+      var _this5 = this;
 
-      return _reactNative2.default.createElement(
+      return _react2.default.createElement(
         _reactNative.TouchableOpacity,
@@ -170,9 +175,9 @@ {
           onPress: function onPress() {
-            return _this4._scrollTo(letter);
+            return _this5._scrollTo(letter);
           },
           activeOpacity: 0.6 },
-        _reactNative2.default.createElement(
+        _react2.default.createElement(
           _reactNative.View,
           { style: styles.letter },
-          _reactNative2.default.createElement(
+          _react2.default.createElement(
             _reactNative.Text,
@@ -188,16 +193,16 @@ { style: styles.letterText },
     value: function _renderCountryDetail(country) {
-      return _reactNative2.default.createElement(
+      return _react2.default.createElement(
         _reactNative.View,
         { style: styles.itemCountry },
-        _reactNative2.default.createElement(
+        _react2.default.createElement(
           _reactNative.View,
           { style: styles.itemCountryFlag },
-          _reactNative2.default.createElement(_reactNative.Image, {
+          _react2.default.createElement(_reactNative.Image, {
             style: styles.imgStyle,
             source: { uri: _CountryFlags2.default[country.cca2] } })
         ),
-        _reactNative2.default.createElement(
+        _react2.default.createElement(
           _reactNative.View,
           { style: styles.itemCountryName },
-          _reactNative2.default.createElement(
+          _react2.default.createElement(
             _reactNative.Text,
@@ -213,18 +218,18 @@ { style: styles.countryName },
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
-      return _reactNative2.default.createElement(
+      return _react2.default.createElement(
         _reactNative.View,
         null,
-        _reactNative2.default.createElement(
+        _react2.default.createElement(
           _reactNative.TouchableOpacity,
           {
             onPress: function onPress() {
-              return _this5.setState({ modalVisible: true });
+              return _this6.setState({ modalVisible: true });
             },
             activeOpacity: 0.7 },
-          _reactNative2.default.createElement(
+          _react2.default.createElement(
             _reactNative.View,
             { style: styles.touchFlag },
-            _reactNative2.default.createElement(_reactNative.Image, {
+            _react2.default.createElement(_reactNative.Image, {
               style: styles.imgStyle,
@@ -234,24 +239,22 @@ source: { uri: _CountryFlags2.default[this.state.cca2] } })
         ),
-        _reactNative2.default.createElement(
+        _react2.default.createElement(
           _reactNative.Modal,
           { visible: this.state.modalVisible },
-          _reactNative2.default.createElement(
-            _reactNative.ScrollView,
-            {
-              ref: function ref(scrollView) {
-                _this5._scrollView = scrollView;
-              },
-              contentContainerStyle: styles.contentContainer,
-              showsVerticalScrollIndicator: false,
-              bounces: false,
-              scrollsToTop: true },
-            _lodash2.default.map(this.state.countries, function (country, index) {
-              return _this5._renderCountry(country, index);
-            })
-          ),
-          _reactNative2.default.createElement(
+          _react2.default.createElement(_reactNative.ListView, {
+            contentContainerStyle: styles.contentContainer,
+            ref: function ref(scrollView) {
+              _this6._scrollView = scrollView;
+            },
+            dataSource: this.state.countries,
+            renderRow: function renderRow(country) {
+              return _this6._renderCountry(country);
+            },
+            initialListSize: 20,
+            pageSize: _worldCountries2.default.length - 20
+          }),
+          _react2.default.createElement(
             _reactNative.View,
             { style: styles.letters },
             _lodash2.default.map(this.letters, function (letter, index) {
-              return _this5._renderLetters(letter, index);
+              return _this6._renderLetters(letter, index);
             })
@@ -265,3 +268,3 @@ )
   return CountryPicker;
-}(_reactNative2.default.Component);
+}(_react.Component);
 
@@ -268,0 +271,0 @@ var styles = _reactNative.StyleSheet.create({

dist/Ratio.js

@@ -7,3 +7,8 @@ 'use strict';
 
-var dimension = require('react-native').Dimensions.get('window');
+var React = require('react-native');
+var dimension = React.Dimensions.get('window');
+// remove the status bar height since the modal view does not cover this area
+if (React.Platform.OS === 'android') {
+  dimension.height = dimension.height - 24;
+}
 
@@ -10,0 +15,0 @@ var Ratio = function () {

package.json

 {
   "name": "react-native-country-picker-modal",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "Country picker",
@@ -28,6 +28,6 @@ "main": "dist/index.js",
   "devDependencies": {
-    "babel-cli": "6.6.4",
-    "babel-preset-es2015": "6.6.0",
+    "babel-cli": "6.9.0",
+    "babel-preset-es2015": "6.9.0",
     "babel-preset-react": "6.5.0",
-    "cz-conventional-changelog": "1.1.5"
+    "cz-conventional-changelog": "1.1.6"
   },
@@ -40,5 +40,5 @@ "config": {
   "dependencies": {
-    "lodash": "4.6.1",
-    "world-countries": "1.7.7"
+    "lodash": "4.12.0",
+    "world-countries": "1.7.8"
   }
 }

README.md

@@ -0,1 +1,3 @@
+[**Support me with a Follow**](https://github.com/xcarpentier/followers)
+
 # react-native-country-picker-modal
@@ -2,0 +4,0 @@

src/index.js

@@ -8,3 +8,4 @@ 'use strict';
 
-import React, {
+import React, { Component } from 'react';
+import {
   StyleSheet,
@@ -18,4 +19,4 @@ View,
   Text,
-}
-from 'react-native';
+  ListView
+} from 'react-native';
 import countries from 'world-countries';
@@ -26,6 +27,7 @@ import _ from 'lodash';
 
-class CountryPicker extends React.Component {
+class CountryPicker extends Component {
 
   constructor(props) {
     super(props);
+    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     this.state = {
@@ -35,5 +37,5 @@ cca2: props.cca2,
       modalVisible: false,
-      countries: this._orderCountryList()
+      countries: ds.cloneWithRows(this._orderCountryList())
     };
-    this.letters = _.map(_.range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1), n => String.fromCharCode(n).substr(0));
+    this.letters = _.range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1).map(n => String.fromCharCode(n).substr(0));
     this.lettersPositions = {};
@@ -84,29 +86,26 @@ }
   _scrollTo(letter) {
-    if (letter === 'A') {
-      this._scrollView.scrollTo({
-        y: 0
-      });
-    } else if (letter > 'U') {
-      this._scrollView.scrollTo({
-        y: this.lettersPositions['Z'] - Ratio.getHeightPercent(85)
-      });
-    } else {
-      this._scrollView.scrollTo({
-        y: this.lettersPositions[letter]
-      });
+    // dimensions of country list and window
+    const itemHeight = Ratio.getHeightPercent(7);
+    const listPadding = Ratio.getPercent(2);
+    const listHeight = countries.length * itemHeight + 2 * listPadding;
+    const windowHeight = Ratio.getHeightPercent(100);
+
+    // find position of first country that starts with letter
+    const index = this._orderCountryList().map((country) => {
+      return this._getCountryName(country)[0];
+    }).indexOf(letter);
+    if (index === -1) {
+      return;
     }
+    let position = index * itemHeight + listPadding;
 
-  }
+    // do not scroll past the end of the list
+    if (position + windowHeight > listHeight) {
+      position = listHeight - windowHeight;
+    }
 
-  _updateLetterPosition(countryName, position_y) {
-
-    let firstLetter = countryName.substr(0, 1);
-
-    if (!this.lettersPositions[firstLetter] ||
-      (
-        this.lettersPositions[firstLetter] &&
-        this.lettersPositions[firstLetter] > position_y)
-    ) {
-      this.lettersPositions[firstLetter] = position_y;
-    }
+    // scroll
+    this._scrollView.scrollTo({
+      y: position
+    });
   }
@@ -119,4 +118,3 @@
         onPress={()=> this._onSelect(country)}
-        activeOpacity={0.99}
-        onLayout={ e => this._updateLetterPosition(this._getCountryName(country), e.nativeEvent.layout.y) }>
+        activeOpacity={0.99}>
         {this._renderCountryDetail(country)}
@@ -168,3 +166,3 @@ </TouchableOpacity>);
         <Modal visible={this.state.modalVisible}>
-          <ScrollView
+          {/*<ScrollView
             ref={(scrollView) => { this._scrollView = scrollView; }}
@@ -176,3 +174,11 @@ contentContainerStyle={styles.contentContainer}
             {_.map(this.state.countries, (country, index) => this._renderCountry(country, index))}
-          </ScrollView>
+          </ScrollView>*/}
+          <ListView
+            contentContainerStyle={styles.contentContainer}
+            ref={(scrollView) => { this._scrollView = scrollView; }}
+            dataSource={this.state.countries}
+            renderRow={(country) => this._renderCountry(country)}
+            initialListSize={20}
+            pageSize={countries.length - 20}
+          />
           <View style={styles.letters}>
@@ -179,0 +185,0 @@ {_.map(this.letters, (letter, index) => this._renderLetters(letter, index))}

src/Ratio.js

 'use strict';
 
-var dimension = require('react-native').Dimensions.get('window');
+var React = require('react-native');
+var dimension = React.Dimensions.get('window');
+// remove the status bar height since the modal view does not cover this area
+if (React.Platform.OS === 'android') {
+  dimension.height = dimension.height - 24;
+}
 
@@ -5,0 +10,0 @@ class Ratio {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1080210

increased by0.08%

Lines of code

2202

increased by0.78%

Number of lines in readme file

115

increased by1.77%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash@4.12.0(transitive)

• + Addedworld-countries@1.7.8(transitive)

• - Removedlodash@4.6.1(transitive)

• - Removedworld-countries@1.7.7(transitive)

• Updatedlodash@4.12.0

• Updatedworld-countries@1.7.8