react-native-wheel - npm Package Compare versions

Comparing version 1.0.8 to 1.1.1

index.js

@@ -1,14 +0,16 @@
-var React = require('react-native');
+import React,{
+    Component,
+    PropTypes
+} from 'react';
 
-var { NativeModules,requireNativeComponent,PropTypes,View} = React;
+import ReactNative,{
+    requireNativeComponent
+} from 'react-native';
 
-var UIManager = NativeModules.UIManager;
 
-var NativeWheelView = requireNativeComponent('RCTWheelView',WheelView);
+let NativeWheelView = requireNativeComponent('RCTWheelView',WheelView);
 
-var WHEELVIEW_REF = 'wheel';
 
-var WheelView = React.createClass({
-    propTypes: {
-        ...View.propTypes,
+export default class WheelView extends React.Component{
+    static propTypes = {
         onItemChange: PropTypes.func,
@@ -19,27 +21,16 @@ values: PropTypes.array,
         textSize: PropTypes.number,
-    },
-    handleOnChange(event){
+        itemsVisible: PropTypes.number,
+        velocityFling: PropTypes.number,
+    };
+
+    _onItemChange(event) {
         if(this.props.onItemChange){
             this.props.onItemChange(event.nativeEvent.index);
         }
-    },
-    previous: function(){
-        UIManager.dispatchViewManagerCommand(
-            React.findNodeHandle(this.refs.wheel),
-            UIManager.RCTWheelView.Commands.previous,
-            null,
-        );
-    },
-    next: function(){
-        UIManager.dispatchViewManagerCommand(
-            React.findNodeHandle(this.refs.wheel),
-            UIManager.RCTWheelView.Commands.next,
-            null,
-        );
-    },
+    };
+
     render(){
-        return <NativeWheelView {...this.props} onChange={this.handleOnChange} ref={WHEELVIEW_REF}/>;
+        return <NativeWheelView {...this.props} onChange={this._onItemChange.bind(this)} />;
     }
-});
+};
 
-module.exports = WheelView;

package.json

 {
   "name": "react-native-wheel",
-  "version": "1.0.8",
+  "version": "1.1.1",
   "description": "android wheel view for react-native",
@@ -21,3 +21,5 @@ "main": "index.js",
   },
-  "homepage": "https://github.com/shexiaoheng/react-native-wheel#readme"
+  "homepage": "https://github.com/shexiaoheng/react-native-wheel#readme",
+  "dependencies": {},
+  "devDependencies": {}
 }

README.md

@@ -0,12 +1,25 @@
+<<<<<<< HEAD
+# react-native-wheel [![npm version](https://img.shields.io/badge/npm-1.1.1 -blue.svg)](https://www.npmjs.com/package/react-native-wheel) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)
+the android wheel view for react-native
+=======
 # react-native-wheel
-the android wheel view for react-native component
+RN的Android滚轮组件
+>>>>>>> 0b79623990a1ce06b7aea3f7e6e02933f7503d86
 
-## Installation and How to use
+## PropTypes
+* values            数据源（支持 String int double boolean）
+* isLoop            是否循环滚动
+* textSize          字体大小
+* selectedIndex     默认选中的下标
+* velocityFling     滚动速度，建议 15-25
+* onItemChange      滚动回调
 
-#### Step 1 - NPM Install
+## 安装和使用
 
+#### NPM Install
+
 ```shell
 npm install --save react-native-wheel
 ```
-#### Step 2 - Update Gradle Settings
+#### Update Gradle Settings
 
@@ -17,12 +30,7 @@ ```gradle
 
-include ':reactwheelview', ':app' 
-project(':reactwheelview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel')
- // if there are more library
- // include ':app' , ':libraryone' , ':librarytwo' , 'more...'
- // project(':libraryonename').projectDir = new File(rootProject.projectDir, '../node_modules/libraryonemodule')
- // project(':librarytwoname').projectDir = new File(rootProject.projectDir, '../node_modules/librarytwomodule')
- // more..
+include ':react-native-wheel' 
+project(':react-native-wheel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel')
 ```
 
-#### Step 3 - Update app Gradle Build
+#### Update app Gradle Build
 
@@ -35,7 +43,7 @@ ```gradle
     ...
-    compile project(':reactwheelview')
+    compile project(':react-native-wheel')
 }
 ```
 
-#### Step 4 - Register React Package
+#### Register React Package
 
@@ -46,22 +54,9 @@ ```java
 
-public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
 
-    private ReactInstanceManager mReactInstanceManager;
-    private ReactRootView mReactRootView;
-
     @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-        mReactRootView = new ReactRootView(this);
-        mReactInstanceManager = ReactInstanceManager.builder()
-                .setApplication(getApplication())
-                .setBundleAssetName("index.android.bundle")
-                .setJSMainModuleName("index.android")
-                .addPackage(new MainReactPackage())
-                .addPackage(new WheelPackage()) // register wheel package
-                .setUseDeveloperSupport(BuildConfig.DEBUG)
-                .setInitialLifecycleState(LifecycleState.RESUMED)
-                .build();
-        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
-        setContentView(mReactRootView);
+    protected List<ReactPackage> getPackages() {
+        return Arrays.<ReactPackage>asList(
+            new MainReactPackage(),
+            new WheelPackage()      // Added there
+        );
     }
@@ -72,59 +67,43 @@ ...
 
-#### Step 5 - Require and use in Javascript
+#### Use
 
 ```js
-// file: index.android.js
 
-'use strict';
-
-var React = require('react-native');
-var {
+import React, { Component } from 'react';
+import {
   AppRegistry,
   StyleSheet,
   Text,
-  ToastAndroid,
   View,
-} = React;
+  ToastAndroid
+} from 'react-native';
 
-var WheelView = require('react-native-wheel');
+import WheelView from 'react-native-wheel';
 
-var Dimensions = require('Dimensions');
+import Dimensions from 'Dimensions';
 
+let SCREEN_WIDTH = Dimensions.get('window').width;
+let SCREEN_HEIGHT = Dimensions.get('window').height;
 
-var SCREEN_WIDTH = Dimensions.get('window').width;
-var SCREEN_HEIGHT = Dimensions.get('window').height;
 
+let wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];
 
-var wheelData = ['one','two','three','four','five','six','seven','eight','nine','ten'];
+let currentIndex;
 
-var currentIndex;
-
-var AwesomeProject = React.createClass({
-  previous(){
-    this.refs.wheel.previous();
-  },
-  next(){
-    this.refs.wheel.next();
-  },
-  finish(){
-    ToastAndroid.show('select item : ' + wheelData[currentIndex] ,ToastAndroid.LONG);
-  },
-  onItemChange(index){
+class AwesomeProject extends Component {
+  ok(){
+    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);
+  }
+  _onItemChange(index){
     currentIndex = index;
-  },
-  render: function() {
+  }
+  render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome} onPress={this.previous} >
-          上一个
+        <Text style={styles.ok} onPress={this.ok.bind(this)} >
+          确定
         </Text>
-        <Text style={styles.instructions} onPress={this.next} >
-          下一个
-        </Text>
-        <Text style={styles.instructions} onPress={this.finish} >
-          完成
-        </Text>
         <WheelView
           style={styles.wheelview}
-          onItemChange={this.onItemChange}
+          onItemChange={this._onItemChange.bind(this)}
           values={wheelData}
@@ -134,3 +113,3 @@ isLoop={false}
           textSize={20}
-          ref='wheel'
+          velocityFling={20}
         />
@@ -140,3 +119,3 @@ </View>
   }
-});
+};
 
@@ -150,17 +129,7 @@ var styles = StyleSheet.create({
   },
-  previous: {
-    margin: 20,
-    fontSize: 22,
+  ok: {
+    margin: 5,
     color: '#000000',
+    fontSize: 18,
   },
-  next: {
-    margin: 20,
-    color: '#000000',
-    fontSize: 22,
-  },
-  finish: {
-    margin: 20,
-    color: '#000000',
-    fontSize: 22,
-  },
   wheelview: {
@@ -176,24 +145,8 @@ width: SCREEN_WIDTH,
 
+## Run Renderings
+![1](/img/1.jpg)
+![2](/img/2.jpg)
+![3](/img/3.jpg)
 
-## Notes
-
-- Only in the following versions tested , other versions do not guarantee success
-```gradle
-// file: react-native-wheel/build.gradle
-
-android {
-    compileSdkVersion 23  //@
-    buildToolsVersion "23.0.1"  //@
-
-    defaultConfig {
-        minSdkVersion 16 
-        targetSdkVersion 22  //@
-    }
-}
-
-dependencies {
-    compile 'com.facebook.react:react-native:0.16.1'  //@
-}
-
-
-```
+## Reference
+https://github.com/weidongjian/androidWheelView

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

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

Improved metrics

Lines of code

54

increased by42.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

87324

decreased by-46.25%

Number of lines in readme file

145

decreased by-24.48%

No dependency changes