From bb16d6b255ab3086ab33fe97150c165a6570b4f6 Mon Sep 17 00:00:00 2001 From: yatesmiao Date: Tue, 1 Aug 2017 12:18:19 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fixed=20=E4=B8=8D=E5=8F=8A=E6=97=B6?= =?UTF-8?q?=E6=9B=B4=E6=96=B0ui=20=E5=92=8C=20=E4=B8=8D=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E4=BC=A0string=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WheelCurvedPicker.android.js | 8 ++++++-- android/build.gradle | 2 +- .../java/com/zyu/ReactWheelCurvedPicker.java | 20 +++++++++++-------- .../zyu/ReactWheelCurvedPickerManager.java | 6 ++++++ package.json | 2 +- 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/WheelCurvedPicker.android.js b/WheelCurvedPicker.android.js index 2cfe37c..f9f6a3f 100644 --- a/WheelCurvedPicker.android.js +++ b/WheelCurvedPicker.android.js @@ -17,6 +17,8 @@ var WheelCurvedPicker = React.createClass ({ textColor: ColorPropType, + indicatorColor: ColorPropType, + textSize: React.PropTypes.number, itemStyle: React.PropTypes.object, @@ -52,7 +54,7 @@ var WheelCurvedPicker = React.createClass ({ if (child.props.value === props.selectedValue) { selectedIndex = index; } - items.push({value: child.props.value, label: child.props.label}); + items.push({value: index, theValue: child.props.value, label: child.props.label}); }); var textSize = props.itemStyle.fontSize @@ -63,7 +65,9 @@ var WheelCurvedPicker = React.createClass ({ _onValueChange: function(e: Event) { if (this.props.onValueChange) { - this.props.onValueChange(e.nativeEvent.data); + var selectedItem = this.state.items[e.nativeEvent.data]; + !selectedItem && (selectedItem = {theValue:0}); + this.props.onValueChange(selectedItem.theValue); } }, diff --git a/android/build.gradle b/android/build.gradle index f0a74ba..adfb79a 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -2,7 +2,7 @@ apply plugin: 'com.android.library' android { compileSdkVersion 23 - buildToolsVersion "23.0.1" + buildToolsVersion "25.0.0" defaultConfig { minSdkVersion 16 targetSdkVersion 22 diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java index 126e866..ac130fb 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java @@ -24,10 +24,12 @@ * @author Sam Yu */ public class ReactWheelCurvedPicker extends WheelCurvedPicker { - + private Integer indicatorColor = Color.WHITE; private final EventDispatcher mEventDispatcher; private List mValueData; - + public void setIndicatorColor(Integer indicatorColor) { + this.indicatorColor = indicatorColor; + } public ReactWheelCurvedPicker(ReactContext reactContext) { super(reactContext); mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher(); @@ -55,11 +57,7 @@ protected void drawForeground(Canvas canvas) { super.drawForeground(canvas); Paint paint = new Paint(); - paint.setColor(Color.WHITE); - int colorFrom = 0x00FFFFFF;//Color.BLACK; - int colorTo = Color.WHITE; - LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR); - paint.setShader(linearGradientShader); + paint.setColor(this.indicatorColor); canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint); canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint); } @@ -68,7 +66,7 @@ protected void drawForeground(Canvas canvas) { public void setItemIndex(int index) { super.setItemIndex(index); unitDeltaTotal = 0; - mHandler.post(this); + mHandler.post(this); } public void setValueData(List data) { @@ -78,6 +76,12 @@ public void setValueData(List data) { public int getState() { return state; } + + @Override + public void setData(List data) { + super.setData(data); + this.postInvalidate(); + } } class ItemSelectedEvent extends Event { diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java index cd0e5c4..d4e8421 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java @@ -72,6 +72,12 @@ public void setTextColor(ReactWheelCurvedPicker picker, Integer color) { picker.setTextColor(color); } } + @ReactProp(name="indicatorColor", customType = "Color") + public void setIndicatorColor(ReactWheelCurvedPicker picker, Integer color) { + if (picker != null) { + picker.setIndicatorColor(color); + } + } @ReactProp(name="textSize") public void setTextSize(ReactWheelCurvedPicker picker, int size) { diff --git a/package.json b/package.json index f6b0040..b783eb1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-wheel-picker", - "version": "1.1.1", + "version": "1.1.2", "description": "React native cross platform picker.", "main": "index.js", "scripts": { From e5f9aa3d1b491a66f9db3d0aebbae68ecfb98a19 Mon Sep 17 00:00:00 2001 From: eagleliu Date: Tue, 1 Aug 2017 21:15:05 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9B=B4=E6=96=B0WheelPicker=E4=B8=BA1.1.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- android/build.gradle | 4 +- .../java/com/zyu/ReactWheelCurvedPicker.java | 61 +++++++++---------- .../zyu/ReactWheelCurvedPickerManager.java | 35 ++++++----- 3 files changed, 54 insertions(+), 46 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index adfb79a..86bf888 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -16,6 +16,8 @@ android { dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) - compile "cn.aigestudio.wheelpicker:WheelPicker:1.0.3" +// compile "cn.aigestudio.wheelpicker:WheelPicker:1.0.3" + compile 'cn.aigestudio.wheelpicker:WheelPicker:1.1.2' + compile 'com.facebook.react:react-native:+' } diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java index ac130fb..82777aa 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java @@ -8,8 +8,7 @@ import android.os.SystemClock; import android.util.AttributeSet; -import com.aigestudio.wheelpicker.core.AbstractWheelPicker; -import com.aigestudio.wheelpicker.view.WheelCurvedPicker; +import com.aigestudio.wheelpicker.WheelPicker; import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.WritableMap; @@ -23,65 +22,65 @@ /** * @author Sam Yu */ -public class ReactWheelCurvedPicker extends WheelCurvedPicker { +public class ReactWheelCurvedPicker extends WheelPicker { private Integer indicatorColor = Color.WHITE; private final EventDispatcher mEventDispatcher; private List mValueData; - public void setIndicatorColor(Integer indicatorColor) { - this.indicatorColor = indicatorColor; - } + private int mState; + public ReactWheelCurvedPicker(ReactContext reactContext) { super(reactContext); mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher(); - setOnWheelChangeListener(new OnWheelChangeListener() { + setOnWheelChangeListener(new WheelPicker.OnWheelChangeListener() { @Override - public void onWheelScrolling(float deltaX, float deltaY) { + public void onWheelScrolled(int offset) { + } @Override - public void onWheelSelected(int index, String data) { - if (mValueData != null && index < mValueData.size()) { + public void onWheelSelected(int position) { + if (mValueData != null && position < mValueData.size()) { mEventDispatcher.dispatchEvent( - new ItemSelectedEvent(getId(), mValueData.get(index))); + new ItemSelectedEvent(getId(), mValueData.get(position))); } } @Override public void onWheelScrollStateChanged(int state) { + mState = state; } }); } @Override - protected void drawForeground(Canvas canvas) { - super.drawForeground(canvas); - - Paint paint = new Paint(); - paint.setColor(this.indicatorColor); - canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint); - canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint); + protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { + super.onMeasure(widthMeasureSpec, heightMeasureSpec); } - @Override - public void setItemIndex(int index) { - super.setItemIndex(index); - unitDeltaTotal = 0; - mHandler.post(this); - } +// @Override +// protected void drawForeground(Canvas canvas) { +// super.drawForeground(canvas); +// +// Paint paint = new Paint(); +// paint.setColor(this.indicatorColor); +// canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint); +// canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint); +// } + +// @Override +// public void setItemIndex(int index) { +// super.setItemIndex(index); +// unitDeltaTotal = 0; +// mHandler.post(this); +// } public void setValueData(List data) { mValueData = data; } public int getState() { - return state; + return mState; } - - @Override - public void setData(List data) { - super.setData(data); - this.postInvalidate(); - } } class ItemSelectedEvent extends Event { diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java index d4e8421..bf9878d 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java @@ -2,7 +2,7 @@ import android.graphics.Color; -import com.aigestudio.wheelpicker.core.AbstractWheelPicker; +import com.aigestudio.wheelpicker.WheelPicker; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.common.MapBuilder; @@ -27,10 +27,17 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager Date: Wed, 2 Aug 2017 20:12:11 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=8A=A0=E4=BA=86=E6=96=B0=E7=89=88?= =?UTF-8?q?=E7=9A=84=E5=B1=9E=E6=80=A7=E5=8F=AF=E4=BB=A5=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/dictionaries/yatesmiao.xml | 3 + .idea/inspectionProfiles/Project_Default.xml | 5 + .idea/misc.xml | 22 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .idea/workspace.xml | 471 ++++++++++++++++++ WheelCurvedPicker.android.js | 208 +++++--- .../java/com/zyu/ReactWheelCurvedPicker.java | 22 +- .../zyu/ReactWheelCurvedPickerManager.java | 112 ++++- 9 files changed, 755 insertions(+), 102 deletions(-) create mode 100644 .idea/dictionaries/yatesmiao.xml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml diff --git a/.idea/dictionaries/yatesmiao.xml b/.idea/dictionaries/yatesmiao.xml new file mode 100644 index 0000000..b73f924 --- /dev/null +++ b/.idea/dictionaries/yatesmiao.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..8d66637 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..b34ce5e --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + CoffeeScript + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..71c8639 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..902e335 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,471 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + getConstants + ReactMethod + createNativeModules + NativeModules + ReactNativeWheelPickerPackage + widthMeasureSpec + setData + ItemSelectedEvent + mValueData + indicatorColor + data + state + setIndicator + setSelectedItemTextColor + _onValueChange + textColor + onValueChange + itemStyle + mState + textSize + + + + + + + + + + + + + true + + false + true + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + project + + + + + + + + + + + + + + + + project + + + true + + + + DIRECTORY + + false + + + + + + + + + + + + 1501577346238 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WheelCurvedPicker.android.js b/WheelCurvedPicker.android.js index f9f6a3f..5f9112a 100644 --- a/WheelCurvedPicker.android.js +++ b/WheelCurvedPicker.android.js @@ -2,96 +2,140 @@ import React from 'react'; import { - View, - ColorPropType, - requireNativeComponent, + View, + ColorPropType, + requireNativeComponent, } from 'react-native'; var WheelCurvedPicker = React.createClass ({ - propTypes: { - ...View.propTypes, - - data: React.PropTypes.array, - - textColor: ColorPropType, - - indicatorColor: ColorPropType, - - textSize: React.PropTypes.number, - - itemStyle: React.PropTypes.object, - - itemSpace: React.PropTypes.number, - - onValueChange: React.PropTypes.func, - - selectedValue: React.PropTypes.any, - - selectedIndex: React.PropTypes.number, - }, - - getDefaultProps(): Object { - return { - itemStyle : {color:"white", fontSize:26}, - itemSpace: 20, - }; - }, - - getInitialState: function() { - return this._stateFromProps(this.props); - }, - - componentWillReceiveProps: function(nextProps) { - this.setState(this._stateFromProps(nextProps)); - }, - - _stateFromProps: function(props) { - var selectedIndex = 0; - var items = []; - React.Children.forEach(props.children, function (child, index) { - if (child.props.value === props.selectedValue) { - selectedIndex = index; - } - items.push({value: index, theValue: child.props.value, label: child.props.label}); - }); - - var textSize = props.itemStyle.fontSize - var textColor = props.itemStyle.color - - return {selectedIndex, items, textSize, textColor}; - }, - - _onValueChange: function(e: Event) { - if (this.props.onValueChange) { - var selectedItem = this.state.items[e.nativeEvent.data]; - !selectedItem && (selectedItem = {theValue:0}); - this.props.onValueChange(selectedItem.theValue); - } - }, - - render() { - return ; - } + propTypes: { + ...View.propTypes, + + data: React.PropTypes.array, + + selectedIndex: React.PropTypes.number, + + selectTextColor: ColorPropType, + + itemStyle: React.PropTypes.object, //textColor textSize + + textSize: React.PropTypes.number, + textColor: ColorPropType, + + // 设置滚轮选择器指示器样式 + indicatorStyle: React.PropTypes.object, //indicatorColor indicatorSize + + indicatorSize: React.PropTypes.number, + indicatorColor: ColorPropType, + + // 设置滚轮选择器是否显示指示器 + indicator: React.PropTypes.bool, + + // 设置滚轮选择器是否显示幕布 + curtain: React.PropTypes.bool, + // 设置滚轮选择器幕布颜色 + curtainColor: ColorPropType, + + // 设置滚轮选择器是否有空气感 + atmospheric: React.PropTypes.bool, + + // 滚轮选择器是否开启卷曲效果 + curved: React.PropTypes.bool, + + // 设置滚轮选择器可见数据项数量 + visibleItemCount: React.PropTypes.number, + + itemSpace: React.PropTypes.number, + + onValueChange: React.PropTypes.func, + + selectedValue: React.PropTypes.any, + + }, + + getDefaultProps(): Object { + return { + itemStyle : {color:"white", fontSize:26}, + indicatorStyle: {color:"red", fontSize:2}, + itemSpace: 20, + }; + }, + + getInitialState: function() { + return this._stateFromProps(this.props); + }, + + componentWillReceiveProps: function(nextProps) { + this.setState(this._stateFromProps(nextProps)); + }, + + _stateFromProps: function(props) { + var selectedIndex = 0; + var items = []; + React.Children.forEach(props.children, function (child, index) { + if (child.props.value === props.selectedValue) { + selectedIndex = index; + } + items.push({value: index, theValue: child.props.value, label: child.props.label}); + }); + + var textSize = props.itemStyle.fontSize + var textColor = props.itemStyle.color + var selectTextColor = props.selectTextColor + var itemSpace = props.itemSpace + var indicator = props.indicator + var indicatorColor = props.indicatorStyle.color + var indicatorSize = props.indicatorStyle.fontSize + var curtain = props.curtain + var curtainColor = props.curtainColor + var atmospheric = props.atmospheric + var curved = props.curved + var visibleItemCount = props.visibleItemCount + + return {selectedIndex, items, textSize, textColor, selectTextColor, itemSpace,indicator, indicatorColor, indicatorSize, curtain, curtainColor, atmospheric, curved, visibleItemCount} ; + }, + + _onValueChange: function(e: Event) { + if (this.props.onValueChange) { + var selectedItem = this.state.items[e.nativeEvent.data]; + !selectedItem && (selectedItem = {theValue:0}); + this.props.onValueChange(selectedItem.theValue); + } + }, + + render() { + return ; + } }); WheelCurvedPicker.Item = React.createClass({ - propTypes: { - value: React.PropTypes.any, // string or integer basically - label: React.PropTypes.string, - }, - - render: function() { - // These items don't get rendered directly. - return null; - }, + propTypes: { + value: React.PropTypes.any, // string or integer basically + label: React.PropTypes.string, + }, + + render: function() { + // These items don't get rendered directly. + return null; + }, }); var WheelCurvedPickerNative = requireNativeComponent('WheelCurvedPicker', WheelCurvedPicker); diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java index 82777aa..61f6497 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPicker.java @@ -9,6 +9,8 @@ import android.util.AttributeSet; import com.aigestudio.wheelpicker.WheelPicker; +import com.aigestudio.wheelpicker.WheelPicker; +import com.aigestudio.wheelpicker.WheelPicker.OnWheelChangeListener; import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.WritableMap; @@ -23,18 +25,20 @@ * @author Sam Yu */ public class ReactWheelCurvedPicker extends WheelPicker { - private Integer indicatorColor = Color.WHITE; +// private Integer indicatorColor = Color.WHITE; private final EventDispatcher mEventDispatcher; private List mValueData; - private int mState; + private int mState; +// public void setIndicatorColor(Integer indicatorColor) { +// this.indicatorColor = indicatorColor; +// } public ReactWheelCurvedPicker(ReactContext reactContext) { super(reactContext); mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher(); - setOnWheelChangeListener(new WheelPicker.OnWheelChangeListener() { + setOnWheelChangeListener(new OnWheelChangeListener() { @Override public void onWheelScrolled(int offset) { - } @Override @@ -52,11 +56,6 @@ public void onWheelScrollStateChanged(int state) { }); } - @Override - protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { - super.onMeasure(widthMeasureSpec, heightMeasureSpec); - } - // @Override // protected void drawForeground(Canvas canvas) { // super.drawForeground(canvas); @@ -66,6 +65,10 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint); // canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint); // } + @Override + protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { + super.onMeasure(widthMeasureSpec, heightMeasureSpec); + } // @Override // public void setItemIndex(int index) { @@ -81,6 +84,7 @@ public void setValueData(List data) { public int getState() { return mState; } + } class ItemSelectedEvent extends Event { diff --git a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java index bf9878d..186de43 100644 --- a/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java +++ b/android/src/main/java/com/zyu/ReactWheelCurvedPickerManager.java @@ -27,18 +27,48 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager