react-native-segmented-picker - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0

package.json

 {
   "name": "react-native-segmented-picker",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "A segmentable dropdown picker wheel with no native dependencies.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -15,2 +15,5 @@ # React Native Segmented Picker
 
+![Android Example](https://imgkk.com/i/z_da.gif)
+![iOS Example](https://imgkk.com/i/qk1d.gif)
+
 ## Installation
@@ -17,0 +20,0 @@

src/components/SegmentedPicker/SegmentedPicker.js

 import React, { Component } from 'react';
 import {
+  Platform,
   Modal,
@@ -23,2 +24,6 @@ TouchableOpacity,
     this.pickerContainerRef = React.createRef();
+
+    if (!props.options) {
+      throw new Error('<SegmentedPicker /> cannot render without the `options` prop.');
+    }
   }
@@ -232,2 +237,3 @@
   _nearestOptionIndex = (offsetY, column) => {
+    const { options } = this.props;
     const scrollDirection = this[`scrollDirection_${column}`]; // 0 = Up, 1 = Down
@@ -240,3 +246,10 @@ const rounding = (scrollDirection === 0) ? 'floor' : 'ceil';
     );
-    const nearestArrayMember = Math[rounding](adjustedOffsetY) || 0;
+    let nearestArrayMember = Math[rounding](adjustedOffsetY) || 0;
+    // Safety checks making sure we don't return an out of range index
+    const columnSize = Object.keys(options[column]).length;
+    if (Math.sign(nearestArrayMember) === -1) {
+      nearestArrayMember = 0;
+    } else if (nearestArrayMember > columnSize - 1) {
+      nearestArrayMember = columnSize - 1;
+    }
     return nearestArrayMember;
@@ -253,2 +266,3 @@ }
   _onScroll = (event, column) => {
+    if (!event.nativeEvent) return;
     const { y } = event.nativeEvent.contentOffset;
@@ -282,4 +296,10 @@ const lastScrollOffset = this[`lastScrollOffset_${column}`];
    */
-  _onScrollEndDrag = (column) => {
+  _onScrollEndDrag = (event, column) => {
     this[`isDragging_${column}`] = false;
+    if (Platform.OS === 'ios' && !this[`isMomentumScrolling_${column}`]) {
+      // Not required on Android because all scrolls exit as momentum scrolls,
+      // so the below method has already been called prior to this event.
+      // Timeout is to temporarily allow raising fingers.
+      this._selectIndexFromScrollPosition(event, column, 280);
+    }
   };
@@ -293,7 +313,16 @@
    */
+  _onMomentumScrollBegin = (event, column) => {
+    this[`isMomentumScrolling_${column}`] = true;
+  };
+
+  /**
+   * @private
+   * @param {object} event: Event details from React Native.
+   * @param {string} column
+   * @return {void}
+   */
   _onMomentumScrollEnd = (event, column) => {
-    const { y } = event.nativeEvent.contentOffset;
-    const nearestOptionIndex = this._nearestOptionIndex(y, column);
+    this[`isMomentumScrolling_${column}`] = false;
     if (!this[`isDragging_${column}`]) {
-      this.selectIndex(nearestOptionIndex, column);
+      this._selectIndexFromScrollPosition(event, column);
     }
@@ -304,2 +333,21 @@ };
    * @private
+   * Scrolls to the nearest index based off a y offset from the FlatList.
+   * @param {object} event: Event details from React Native.
+   * @param {string} column
+   * @param {number?} delay
+   * @return {void}
+   */
+  _selectIndexFromScrollPosition = (event, column, delay = 0) => {
+    if (!event.nativeEvent) return;
+    const { y } = event.nativeEvent.contentOffset;
+    const nearestOptionIndex = this._nearestOptionIndex(y, column);
+    setTimeout(() => {
+      if (!this[`isDragging_${column}`] && !this[`isMomentumScrolling_${column}`]) {
+        this.selectIndex(nearestOptionIndex, column);
+      }
+    }, delay);
+  };
+
+  /**
+   * @private
    * This method is called when the picker is closed unexpectedly without pressing the
@@ -366,4 +414,6 @@ * "Done" button in the top right hand corner.
         transparent
+        onRequestClose={this._onCancel}
       >
         <UI.ModalContainer
+          useNativeDriver
           animation="fadeIn"
@@ -379,2 +429,3 @@ easing="ease-out-cubic"
           <UI.PickerContainer
+            useNativeDriver
             animation="slideInUp"
@@ -443,3 +494,4 @@ easing="ease-in-out-cubic"
                       onScrollBeginDrag={() => this._onScrollBeginDrag(column)}
-                      onScrollEndDrag={() => this._onScrollEndDrag(column)}
+                      onScrollEndDrag={event => this._onScrollEndDrag(event, column)}
+                      onMomentumScrollBegin={event => this._onMomentumScrollBegin(event, column)}
                       onMomentumScrollEnd={event => this._onMomentumScrollEnd(event, column)}
@@ -462,3 +514,3 @@ scrollEventThrottle={32}
   defaultSelections: {},
-  size: 40,
+  size: 45,
   confirmText: 'Done',
@@ -465,0 +517,0 @@ confirmTextColor: '#0A84FF',

src/components/SegmentedPicker/Styles.js

@@ -96,3 +96,3 @@ import React from 'react';
   width: 100%;
-  height: 1;
+  height: 1px;
 `;
@@ -99,0 +99,0 @@

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35644

increased by5.95%

Lines of code

845

increased by6.16%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

146

increased by2.1%

No dependency changes