react-native-wheel-pick 1.1.0 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +146 -9
  2. package/android/build.gradle +16 -7
  3. package/android/src/main/java/com/tron/ReactWheelCurvedPicker.java +19 -28
  4. package/android/src/main/java/com/tron/ReactWheelCurvedPickerManager.java +107 -22
  5. package/package.json +9 -4
  6. package/src/WheelCurvedPicker.android.js +11 -10
  7. package/src/WheelCurvedPicker.ios.js +2 -2
  8. package/src/date-picker.android.js +20 -14
  9. package/src/date-picker.ios.js +9 -4
  10. package/src/picker.js +35 -5
package/README.md CHANGED
@@ -1,20 +1,153 @@
1
+
1
2
  # react-native-wheel-pick
2
3
 
3
4
  React native wheel picker for both iOS and android. (Support DatePicker)
4
5
 
5
- This is not original but inspire by [react-native-wheel-datepicker](https://github.com/pinguinjkeke/react-native-wheel-datepicker)
6
-
7
- ![](https://preview.ibb.co/iUjDZo/screen1.png)
6
+ This is not original but inspire by [react-native-wheel-datepicker](https://github.com/pinguinjkeke/react-native-wheel-datepicker)
8
7
 
9
8
  ## How to use
10
9
 
10
+ React Native >= 0.60+
11
+ ```
12
+ npm install react-native-wheel-pick
13
+ npx pod-install
14
+ ```
15
+
16
+ React Native < 0.60
11
17
  ```
12
18
  npm install react-native-wheel-pick
13
19
  react-native link react-native-wheel-pick
14
20
  ```
15
21
  [react-native-wheel-pick](https://www.npmjs.com/package/react-native-wheel-pick)
16
22
 
17
- ## Example code
23
+ # Preview
24
+
25
+ ![](https://i.ibb.co/4W7h12M/rn-wl-pk-1-1-13.png)
26
+
27
+ ## Example code
28
+ ```jsx
29
+ import { Picker, DatePicker } from 'react-native-wheel-pick';
30
+
31
+ // use Picker
32
+ <Picker
33
+ style={{ backgroundColor: 'white', width: 300, height: 215 }}
34
+ selectedValue='item4'
35
+ pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
36
+ onValueChange={value => { console.log(value) }}
37
+ />
38
+
39
+ // use DatePicker
40
+ <DatePicker
41
+ style={{ backgroundColor: 'white', width: 370, height: 240 }}
42
+ onDateChange={date => { console.log(date) }}
43
+ />
44
+
45
+ ```
46
+ ## Note
47
+
48
+ - For DatePicker of iOS use [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker)
49
+ - For Picker of iOS use [@react-native-picker/picker](hhttps://github.com/react-native-picker/picker)
50
+ - For Picker and DatePicker of Android use WheelPicker of [WheelPicker](https://github.com/AigeStudio/WheelPicker)
51
+ - Pull request are welcome.
52
+
53
+ ## More Example
54
+
55
+ ```jsx
56
+ // DatePicker set default select date
57
+ <DatePicker
58
+ style={{ height: 215, width: 300 }}
59
+ date={new Date('2018-06-27')} // Optional prop - default is Today
60
+ onDateChange={date => { console.log(date) }}
61
+ />
62
+
63
+ // DatePicker set min/max Date
64
+ <DatePicker
65
+ style={{ height: 215, width: 300 }}
66
+ minimumDate={new Date('2000-01-01')}
67
+ maximumDate={new Date('2050-12-31')}
68
+ onDateChange={date => { console.log(date) }}
69
+ />
70
+
71
+ ```
72
+ ```jsx
73
+ // pickerData also support array of object.
74
+
75
+ // Way 1
76
+ <Picker
77
+ selectedValue='item4'
78
+ pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
79
+ onValueChange={value => { console.log(value) }}
80
+ />
81
+
82
+ // Optional Way 2
83
+ <Picker
84
+ style={{ backgroundColor: 'white', width: 300, height: 215 }}
85
+ selectedValue='5765387680'
86
+ pickerData={[
87
+ { value : '5765387677', label : 'item1' },
88
+ { value : '5765387678', label : 'item2' },
89
+ { value : '5765387679', label : 'item3' },
90
+ { value : '5765387680', label : 'item4' },
91
+ { value : '5765387681', label : 'item5' },
92
+ { value : '5765387682', label : 'item6' },
93
+ { value : '5765387683', label : 'item7' },
94
+ ]}
95
+ onValueChange={value => { console.log(value) }}
96
+ />
97
+ ```
98
+ ```jsx
99
+ // Android Only.
100
+ // These is special prop for Android. (iOS not work)
101
+ // You can also use these prop for DatePicker, too.
102
+ <Picker
103
+ textColor='red'
104
+ textSize={20}
105
+
106
+ selectTextColor='green'
107
+ isShowSelectBackground={false} // Default is true
108
+ selectBackgroundColor='#8080801A' // support HEXA color Style (#rrggbbaa)
109
+ // (Please always set 'aa' value for transparent)
110
+
111
+ isShowSelectLine={false} // Default is true
112
+ selectLineColor='black'
113
+ selectLineSize={6} // Default is 4
114
+ />
115
+ ```
116
+
117
+ ## Release Note
118
+
119
+ ### 1.1.3 (June 19 2022)
120
+
121
+ - Restructure code of Picker iOS and Android.
122
+ - pickerData support array of object.
123
+ [Android]
124
+ - Update sdk support for SDK Version 30 (Google Play need sdk version 30+)
125
+ - Now android support for selectLine selectBackground. Special thanks to [@kaisv7n](https://github.com/darkbluesun) for his pull request,
126
+ [Update WheelPicker version, exposed more methods and fixed crash on android](https://github.com/TronNatthakorn/react-native-wheel-pick/pull/12) I changed prop name for more understandable.
127
+
128
+ - DatePicker of Android also support width.
129
+ - Deprecated some android prop that make library faster. (Atmospheric / Curved / visibleItemCount / itemSpace)
130
+ If you want it back pull request are welcome.
131
+ - Change some prop name for make code more understandable.
132
+ - If update from version <= 1.1.2. You will get warning about Deprecated prop if you still use, I write some logic for make app not crash. (Please fix warning if possible.)
133
+
134
+ # FYI
135
+
136
+ For version 1.1.3 - I update this library support for React Native Version 0.68 / Android 11 / iOS 15.2
137
+
138
+ If you use React Native Version less than 0.68 / Android older than 11 / iOS older than 15.2.
139
+ It is possible to have unexpected bug.
140
+
141
+ I rarely check this lib. Up on my life's time.
142
+
143
+ If you want to pay me coffee for check & merge your request. Please contact me directly [facebook.com/tron.natthakorn](https://facebook.com/tron.natthakorn)
144
+
145
+ ## Preview for version <= 1.12
146
+
147
+ ![](https://preview.ibb.co/iUjDZo/screen1.png)
148
+
149
+
150
+ ## Example code for version <= 1.12
18
151
 
19
152
  ```jsx
20
153
  import { Platform } from 'react-native';
@@ -39,16 +172,14 @@ const isIos = Platform.OS === 'ios'
39
172
  />
40
173
 
41
174
  ```
42
- ## Note
175
+ ## Note for version <= 1.12
43
176
 
44
177
  - For iOS use default PickerIOS / DatePickerIOS of React Native.
45
178
  - For Android use WheelPicker of [WheelPicker](https://github.com/AigeStudio/WheelPicker)
46
179
  - Line color is white in android. (Support Line style in future. Pull request welcome)
47
180
  - Line color is grey in IOS but it has bug line not show in Picker (iOS 11.4 not sure other version).
48
181
 
49
- ### Pull request are welcome for more support in future (Text Style / Line Style / Line Bug)
50
-
51
- ## More Example
182
+ ## More Example for version <= 1.12
52
183
 
53
184
  ```jsx
54
185
  // DatePicker set default choose date
@@ -67,7 +198,13 @@ const isIos = Platform.OS === 'ios'
67
198
  />
68
199
  ```
69
200
 
70
- ## Release Note
201
+ ## Release Note for version <= 1.12
202
+
203
+ ### 1.1.2 (April 13 2022)
204
+ - Edit broken url.
205
+
206
+ ### 1.1.1 (November 20 2021)
207
+ - Edit broken url.
71
208
 
72
209
  ### 1.1.0 (January 14 2020)
73
210
  - Use react-native.config.js instead of rnpm section. [@darkbluesun](https://github.com/darkbluesun)
package/android/build.gradle CHANGED
@@ -1,15 +1,21 @@
1
+ buildscript {
2
+ repositories {
3
+ maven { url "https://jitpack.io" }
4
+ }
5
+ }
6
+
1
7
  apply plugin: 'com.android.library'
2
8
 
3
- def safeExtGet(prop, fallback) {
4
- rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
5
- }
9
+ //def safeExtGet(prop, fallback) {
10
+ // rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
11
+ //}
6
12
 
7
13
  android {
8
- compileSdkVersion safeExtGet('compileSdkVersion', 26)
9
- buildToolsVersion "27.0.3"
14
+ compileSdk 30
15
+ /// buildToolsVersion '30.0.2'
10
16
  defaultConfig {
11
17
  minSdkVersion 16
12
- targetSdkVersion 26
18
+ targetSdkVersion 30
13
19
  versionCode 1
14
20
  versionName "1.0"
15
21
  ndk {
@@ -20,6 +26,9 @@ android {
20
26
 
21
27
  dependencies {
22
28
  implementation fileTree(dir: 'libs', include: ['*.jar'])
23
- implementation "cn.aigestudio.wheelpicker:WheelPicker:1.0.3"
29
+ //implementation "cn.aigestudio.wheelpicker:WheelPicker:1.0.3"
30
+ //implementation "cn.aigestudio.wheelpicker:WheelPicker:1.1.2"
31
+ //https://jitpack.io/com/github/AigeStudio/WheelPicker/5913fa15fc
32
+ implementation "com.github.AigeStudio:WheelPicker:5913fa15fc"
24
33
  implementation 'com.facebook.react:react-native:+'
25
34
  }
package/android/src/main/java/com/tron/ReactWheelCurvedPicker.java CHANGED
@@ -8,8 +8,10 @@ import android.graphics.Shader;
8
8
  import android.os.SystemClock;
9
9
  import android.util.AttributeSet;
10
10
 
11
- import com.aigestudio.wheelpicker.core.AbstractWheelPicker;
12
- import com.aigestudio.wheelpicker.view.WheelCurvedPicker;
11
+ // import android.util.Log;
12
+
13
+ import com.aigestudio.wheelpicker.WheelPicker;
14
+ import com.aigestudio.wheelpicker.WheelPicker.OnWheelChangeListener;
13
15
  import com.facebook.react.bridge.Arguments;
14
16
  import com.facebook.react.bridge.ReactContext;
15
17
  import com.facebook.react.bridge.WritableMap;
@@ -24,60 +26,49 @@ import java.util.List;
24
26
  /**
25
27
  * Credit Author: Sam Yu
26
28
  */
27
- public class ReactWheelCurvedPicker extends WheelCurvedPicker {
29
+ public class ReactWheelCurvedPicker extends WheelPicker {
28
30
 
29
31
  private final EventDispatcher mEventDispatcher;
30
32
  private List<Object> mValueData;
31
33
 
34
+ //private int mState;
35
+
32
36
  public ReactWheelCurvedPicker(ReactContext reactContext) {
33
37
  super(reactContext);
34
38
  mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
35
39
  setOnWheelChangeListener(new OnWheelChangeListener() {
36
40
  @Override
37
- public void onWheelScrolling(float deltaX, float deltaY) {
41
+ public void onWheelScrolled(int offset) {
38
42
  }
39
43
 
40
44
  @Override
41
- public void onWheelSelected(int index, String data) {
42
- if (mValueData != null && index < mValueData.size()) {
45
+ public void onWheelSelected(int position) {
46
+ // Log.d("onWheelSelected", "Wheel Selected");
47
+ if (mValueData != null && position < mValueData.size()) {
43
48
  mEventDispatcher.dispatchEvent(
44
- new ItemSelectedEvent(getId(), mValueData.get(index)));
49
+ new ItemSelectedEvent(getId(), mValueData.get(position)));
45
50
  }
46
51
  }
47
52
 
48
53
  @Override
49
54
  public void onWheelScrollStateChanged(int state) {
55
+ //mState = state;
50
56
  }
51
57
  });
52
58
  }
53
59
 
54
60
  @Override
55
- protected void drawForeground(Canvas canvas) {
56
- super.drawForeground(canvas);
57
-
58
- Paint paint = new Paint();
59
- paint.setColor(Color.WHITE);
60
- int colorFrom = 0x00FFFFFF;//Color.BLACK;
61
- int colorTo = Color.WHITE;
62
- LinearGradient linearGradientShader = new LinearGradient(rectCurItem.left, rectCurItem.top, rectCurItem.right/2, rectCurItem.top, colorFrom, colorTo, Shader.TileMode.MIRROR);
63
- paint.setShader(linearGradientShader);
64
- canvas.drawLine(rectCurItem.left, rectCurItem.top, rectCurItem.right, rectCurItem.top, paint);
65
- canvas.drawLine(rectCurItem.left, rectCurItem.bottom, rectCurItem.right, rectCurItem.bottom, paint);
66
- }
67
-
68
- @Override
69
- public void setItemIndex(int index) {
70
- super.setItemIndex(index);
71
- unitDeltaTotal = 0;
72
- mHandler.post(this);
61
+ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
62
+ super.onMeasure(widthMeasureSpec, heightMeasureSpec);
73
63
  }
74
64
 
75
65
  public void setValueData(List<Object> data) {
76
66
  mValueData = data;
77
67
  }
78
68
 
79
- public int getState() {
80
- return state;
69
+ public void getState() {
70
+ //public int getState() {
71
+ //return state;
81
72
  }
82
73
  }
83
74
 
@@ -114,4 +105,4 @@ class ItemSelectedEvent extends Event<ItemSelectedEvent> {
114
105
 
115
106
  return eventData;
116
107
  }
117
- }
108
+ }
package/android/src/main/java/com/tron/ReactWheelCurvedPickerManager.java CHANGED
@@ -2,7 +2,7 @@ package com.tron;
2
2
 
3
3
  import android.graphics.Color;
4
4
 
5
- import com.aigestudio.wheelpicker.core.AbstractWheelPicker;
5
+ import com.aigestudio.wheelpicker.WheelPicker;
6
6
  import com.facebook.react.bridge.ReadableArray;
7
7
  import com.facebook.react.bridge.ReadableType;
8
8
  import com.facebook.react.bridge.ReadableMap;
@@ -12,6 +12,8 @@ import com.facebook.react.uimanager.SimpleViewManager;
12
12
  import com.facebook.react.uimanager.ThemedReactContext;
13
13
  import com.facebook.react.uimanager.annotations.ReactProp;
14
14
 
15
+ // import android.util.Log;
16
+
15
17
  import java.util.ArrayList;
16
18
  import java.util.Map;
17
19
 
@@ -22,25 +24,38 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
22
24
 
23
25
  private static final String REACT_CLASS = "WheelCurvedPicker";
24
26
 
25
- private static final int DEFAULT_TEXT_SIZE = 25 * 2;
26
- private static final int DEFAULT_ITEM_SPACE = 14 * 2;
27
+ private static final int DEFAULT_TEXT_SIZE = 24 * 2;
28
+ private static final int DEFAULT_ITEM_SPACE = 16 * 2;
29
+
30
+ @Override
31
+ public Map getExportedCustomDirectEventTypeConstants() {
32
+ return MapBuilder.of(
33
+ ItemSelectedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onValueChange")
34
+ );
35
+ }
27
36
 
28
37
  @Override
29
38
  protected ReactWheelCurvedPicker createViewInstance(ThemedReactContext reactContext) {
30
39
  ReactWheelCurvedPicker picker = new ReactWheelCurvedPicker(reactContext);
31
- picker.setTextColor(Color.LTGRAY);
32
- picker.setCurrentTextColor(Color.WHITE);
33
- picker.setTextSize(DEFAULT_TEXT_SIZE);
40
+ picker.setItemTextColor(Color.BLACK);
41
+ picker.setItemTextSize(DEFAULT_TEXT_SIZE);
42
+ picker.setSelectedItemTextColor(Color.WHITE);
34
43
  picker.setItemSpace(DEFAULT_ITEM_SPACE);
44
+ picker.setIndicator(true);
45
+ picker.setIndicatorSize(4);
46
+ picker.setIndicatorColor(Color.parseColor("#26808080"));
47
+ picker.setCurtain(true);
48
+ picker.setCurtainColor(Color.parseColor("#1A808080"));
49
+ picker.setAtmospheric(true);
50
+ picker.setCurved(true);
51
+ picker.setVisibleItemCount(7);
35
52
 
36
- return picker;
37
- }
53
+ picker.setItemAlign(0);
38
54
 
39
- @Override
40
- public Map getExportedCustomDirectEventTypeConstants() {
41
- return MapBuilder.of(
42
- ItemSelectedEvent.EVENT_NAME, MapBuilder.of("registrationName", "onValueChange")
43
- );
55
+ // Trick Code - wake setSelectItemPosition
56
+ picker.setSelectedItemPosition(1); // Cannot 0 instead of 1, I Don Know why but need this line for make ReactProp selectIndex Work
57
+
58
+ return picker;
44
59
  }
45
60
 
46
61
  @ReactProp(name="data")
@@ -66,31 +81,101 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
66
81
 
67
82
  @ReactProp(name="selectedIndex")
68
83
  public void setSelectedIndex(ReactWheelCurvedPicker picker, int index) {
69
- if (picker != null && picker.getState() == AbstractWheelPicker.SCROLL_STATE_IDLE) {
70
- picker.setItemIndex(index);
84
+ //if (picker != null && picker.getState() == WheelPicker.SCROLL_STATE_IDLE) {
85
+ // Log.d("Index from React", index + "");
86
+ if (picker != null) {
87
+ picker.setSelectedItemPosition(index);
71
88
  picker.invalidate();
72
89
  }
73
90
  }
74
91
 
92
+ // @ReactProp(name="atmospheric")
93
+ // public void setAtmospheric(ReactWheelCurvedPicker picker, boolean hasAtmospheric) {
94
+ // if (picker != null) {
95
+ // picker.setAtmospheric(hasAtmospheric);
96
+ // }
97
+ // }
98
+
99
+ // @ReactProp(name="curved")
100
+ // public void setCurved(ReactWheelCurvedPicker picker, boolean hasCurved) {
101
+ // if (picker != null) {
102
+ // picker.setCurved(hasCurved);
103
+ // }
104
+ // }
105
+
106
+ // @ReactProp(name="visibleItemCount")
107
+ // public void setVisibleItemCount(ReactWheelCurvedPicker picker, int num) {
108
+ // if (picker != null) {
109
+ // picker.setVisibleItemCount(num);
110
+ // }
111
+ // }
112
+
113
+ // // Didnot work on android 11
114
+ // @ReactProp(name="itemSpace")
115
+ // public void setItemSpace(ReactWheelCurvedPicker picker, int space) {
116
+ // if (picker != null) {
117
+ // picker.setItemSpace((int) PixelUtil.toPixelFromDIP(space));
118
+ // }
119
+ // }
120
+
75
121
  @ReactProp(name="textColor", customType = "Color")
76
122
  public void setTextColor(ReactWheelCurvedPicker picker, Integer color) {
77
123
  if (picker != null) {
78
- picker.setCurrentTextColor(color);
79
- picker.setTextColor(color);
124
+ picker.setItemTextColor(color);
80
125
  }
81
126
  }
82
127
 
83
128
  @ReactProp(name="textSize")
84
129
  public void setTextSize(ReactWheelCurvedPicker picker, int size) {
85
130
  if (picker != null) {
86
- picker.setTextSize((int) PixelUtil.toPixelFromDIP(size));
131
+ picker.setItemTextSize((int) PixelUtil.toPixelFromDIP(size));
132
+ }
133
+ }
134
+
135
+ @ReactProp(name="selectTextColor", customType = "Color")
136
+ public void setSelectedTextColor(ReactWheelCurvedPicker picker, Integer color) {
137
+ if (picker != null) {
138
+ picker.setSelectedItemTextColor(color);
139
+ }
140
+ }
141
+
142
+ //@ReactProp(name="curtain")
143
+ @ReactProp(name="isShowSelectBackground")
144
+ public void setCurtain(ReactWheelCurvedPicker picker, boolean hasCurtain) {
145
+ if (picker != null) {
146
+ picker.setCurtain(hasCurtain);
147
+ }
148
+ }
149
+
150
+ //@ReactProp(name="curtainColor", customType = "Color")
151
+ @ReactProp(name="selectBackgroundColor", customType = "Color")
152
+ public void setCurtainColor(ReactWheelCurvedPicker picker, Integer color) {
153
+ if (picker != null) {
154
+ picker.setCurtainColor(color);
155
+ }
156
+ }
157
+
158
+ // @ReactProp(name="indicator")
159
+ @ReactProp(name="isShowSelectLine")
160
+ public void setIndicator(ReactWheelCurvedPicker picker, boolean hasIndicator) {
161
+ if (picker != null) {
162
+ picker.setIndicator(hasIndicator);
163
+ }
164
+ }
165
+
166
+ //@ReactProp(name="indicatorColor", customType = "Color")
167
+ @ReactProp(name="selectLineColor", customType = "Color")
168
+ public void setIndicatorColor(ReactWheelCurvedPicker picker, Integer color) {
169
+ if (picker != null) {
170
+ picker.setIndicatorColor(color);
87
171
  }
88
172
  }
89
173
 
90
- @ReactProp(name="itemSpace")
91
- public void setItemSpace(ReactWheelCurvedPicker picker, int space) {
174
+ //@ReactProp(name="indicatorSize")
175
+ @ReactProp(name="selectLineSize")
176
+ public void setIndicatorSize(ReactWheelCurvedPicker picker, int size) {
92
177
  if (picker != null) {
93
- picker.setItemSpace((int) PixelUtil.toPixelFromDIP(space));
178
+ picker.setIndicatorSize(size);
94
179
  }
95
180
  }
96
181
 
@@ -98,4 +183,4 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
98
183
  public String getName() {
99
184
  return REACT_CLASS;
100
185
  }
101
- }
186
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-wheel-pick",
3
- "version": "1.1.0",
3
+ "version": "1.1.3",
4
4
  "description": "React native wheel picker iOS style with android.",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -13,9 +13,11 @@
13
13
  "keywords": [
14
14
  "react-native",
15
15
  "picker",
16
- "wheel"
16
+ "wheel",
17
+ "wheel-pick",
18
+ "wheel-picker"
17
19
  ],
18
- "author": "Natthakorn Nakhaseno <tron.natthakorn@gmail.com>",
20
+ "author": "Tron Natthakorn <tron.natthakorn@engineer.com>",
19
21
  "license": "MIT",
20
22
  "bugs": {
21
23
  "url": "https://github.com/TronNatthakorn/react-native-wheel-pick/issues"
@@ -27,6 +29,9 @@
27
29
  "peerDependencies": {
28
30
  "moment": ">=2.0.0",
29
31
  "prop-types": "*",
30
- "react-native": ">=0.45.0"
32
+ "react-native": ">=0.45.0",
33
+ "deprecated-react-native-prop-types": "^2.3.0",
34
+ "@react-native-community/datetimepicker": "^6.1.3",
35
+ "@react-native-picker/picker": "^2.4.1"
31
36
  }
32
37
  }
package/src/WheelCurvedPicker.android.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { PureComponent } from 'react';
2
- import { ColorPropType, requireNativeComponent, View, ViewPropTypes as RNViewPropTypes } from 'react-native';
2
+ import { requireNativeComponent, View } from 'react-native';
3
+ import { ColorPropType, ViewPropTypes as RNViewPropTypes, } from 'deprecated-react-native-prop-types'
3
4
  import PropTypes from 'prop-types';
4
5
 
5
6
  const ViewPropTypes = RNViewPropTypes || View.propTypes;
@@ -25,30 +26,30 @@ class WheelCurvedPicker extends PureComponent {
25
26
  data: PropTypes.array,
26
27
  textColor: ColorPropType,
27
28
  textSize: PropTypes.number,
28
- itemSpace: PropTypes.number,
29
29
  onValueChange: PropTypes.func.isRequired,
30
30
  selectedValue: PropTypes.any,
31
- selectedIndex: PropTypes.number,
31
+ // selectedIndex: PropTypes.number,
32
32
  };
33
33
 
34
34
  static defaultProps = {
35
35
  textSize: 26,
36
- itemSpace: 20,
37
36
  textColor: '#333',
38
37
  };
39
38
 
40
- state = {}
39
+ state = {
40
+ selectedIndex: 0
41
+ }
41
42
 
42
43
  onValueChange = ({ nativeEvent: { data } }) => {
44
+ this.props.onValueChange(data);
43
45
  if(firstTimeOnChange) {
44
46
  return firstTimeOnChange = false
45
47
  }
46
- this.props.onValueChange(data);
47
48
  }
48
49
 
49
- componentDidMount() {
50
- this.setState(stateFromProps(this.props));
51
- }
50
+ // componentDidMount() {
51
+ // this.setState(stateFromProps(this.props));
52
+ // }
52
53
 
53
54
  static getDerivedStateFromProps(nextProps) {
54
55
  return stateFromProps(nextProps)
@@ -75,7 +76,7 @@ class Item extends PureComponent {
75
76
  };
76
77
 
77
78
  // These items don't get rendered directly.
78
- render = () => null;
79
+ render = () => <></>;
79
80
  }
80
81
 
81
82
  WheelCurvedPicker.Item = Item;
package/src/WheelCurvedPicker.ios.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import { PickerIOS } from 'react-native';
2
+ import { Picker } from '@react-native-picker/picker';
3
3
 
4
- export default PickerIOS;
4
+ export default Picker;
package/src/date-picker.android.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { PureComponent } from 'react';
2
- import { ColorPropType, StyleSheet, View, ViewPropTypes as RNViewPropTypes } from 'react-native';
2
+ import { StyleSheet, View } from 'react-native';
3
+ import { ColorPropType, ViewPropTypes as RNViewPropTypes } from 'deprecated-react-native-prop-types'
3
4
  import PropTypes from 'prop-types';
4
5
  import moment from 'moment';
5
6
  import Picker from './picker';
@@ -23,7 +24,6 @@ const styles = StyleSheet.create({
23
24
  });
24
25
 
25
26
  const stylesFromProps = props => ({
26
- itemSpace: props.itemSpace,
27
27
  textColor: props.textColor,
28
28
  textSize: props.textSize,
29
29
  style: props.style,
@@ -45,7 +45,6 @@ export default class DatePicker extends PureComponent {
45
45
  style: ViewPropTypes.style,
46
46
  textColor: ColorPropType,
47
47
  textSize: PropTypes.number,
48
- itemSpace: PropTypes.number,
49
48
  };
50
49
 
51
50
  static defaultProps = {
@@ -62,7 +61,6 @@ export default class DatePicker extends PureComponent {
62
61
  style: null,
63
62
  textColor: '#333',
64
63
  textSize: 26,
65
- itemSpace: 20,
66
64
  };
67
65
 
68
66
  constructor(props) {
@@ -97,7 +95,10 @@ export default class DatePicker extends PureComponent {
97
95
 
98
96
  static getDerivedStateFromProps(nextProps, prevState) {
99
97
  if (prevState.date !== nextProps.date) {
100
- this.parseDate(nextProps.date);
98
+
99
+ if(typeof this === 'object' && typeof this.parseDate === 'function'){
100
+ this.parseDate(nextProps.date);
101
+ }
101
102
 
102
103
  return { date: nextProps.date }
103
104
  }
@@ -116,7 +117,7 @@ export default class DatePicker extends PureComponent {
116
117
  this.newValue.year = year;
117
118
  this.checkDate(oldYear, this.newValue.month);
118
119
  if(firstTimeOnChange.year) {
119
- return firstTimeOnChange.year = false
120
+ firstTimeOnChange.year = false
120
121
  }
121
122
  this.props.onDateChange(this.getValue());
122
123
  };
@@ -127,7 +128,7 @@ export default class DatePicker extends PureComponent {
127
128
  this.newValue.month = month - 1;
128
129
  this.checkDate(this.newValue.year, oldMonth);
129
130
  if(firstTimeOnChange.month) {
130
- return firstTimeOnChange.month = false
131
+ firstTimeOnChange.month = false
131
132
  }
132
133
  this.props.onDateChange(this.getValue());
133
134
  };
@@ -136,7 +137,7 @@ export default class DatePicker extends PureComponent {
136
137
  this.newValue.date = date;
137
138
  this.checkDate(this.newValue.year, this.newValue.month);
138
139
  if(firstTimeOnChange.date) {
139
- return firstTimeOnChange.date = false
140
+ firstTimeOnChange.date = false
140
141
  }
141
142
  this.props.onDateChange(this.getValue());
142
143
  };
@@ -144,7 +145,7 @@ export default class DatePicker extends PureComponent {
144
145
  onHourChange = (hour) => {
145
146
  this.newValue.hour = hour;
146
147
  if(firstTimeOnChange.hour) {
147
- return firstTimeOnChange.hour = false
148
+ firstTimeOnChange.hour = false
148
149
  }
149
150
  this.props.onDateChange(this.getValue());
150
151
  };
@@ -152,7 +153,7 @@ export default class DatePicker extends PureComponent {
152
153
  onMinuteChange = (minute) => {
153
154
  this.newValue.minute = minute;
154
155
  if(firstTimeOnChange.minute) {
155
- return firstTimeOnChange.minute = false
156
+ firstTimeOnChange.minute = false
156
157
  }
157
158
  this.props.onDateChange(this.getValue());
158
159
  };
@@ -168,8 +169,10 @@ export default class DatePicker extends PureComponent {
168
169
  }
169
170
 
170
171
  render() {
172
+ const width_wrapper = this.props.style.width || '100%';
173
+
171
174
  return (
172
- <View style={styles.row}>
175
+ <View style={{...styles.row, width: width_wrapper}}>
173
176
  {['date', 'datetime'].includes(this.props.mode) && this.datePicker}
174
177
  {['time', 'datetime'].includes(this.props.mode) && this.timePicker}
175
178
  </View>
@@ -191,7 +194,8 @@ export default class DatePicker extends PureComponent {
191
194
  <View key='date' style={styles.picker}>
192
195
  <Picker
193
196
  {...propsStyles}
194
- style={this.props.style}
197
+ {...this.props}
198
+ style={{...this.props.style, width: '100%'}}
195
199
  ref={(date) => { this.dateComponent = date; }}
196
200
  selectedValue={this.state.date.getDate()}
197
201
  pickerData={this.state.dayRange}
@@ -203,7 +207,8 @@ export default class DatePicker extends PureComponent {
203
207
  <View key='month' style={styles.picker}>
204
208
  <Picker
205
209
  {...propsStyles}
206
- style={this.props.style}
210
+ {...this.props}
211
+ style={{...this.props.style, width: '100%'}}
207
212
  ref={(month) => { this.monthComponent = month; }}
208
213
  selectedValue={this.state.date.getMonth() + 1}
209
214
  pickerData={this.state.monthRange}
@@ -215,7 +220,8 @@ export default class DatePicker extends PureComponent {
215
220
  <View key='year' style={styles.picker}>
216
221
  <Picker
217
222
  {...propsStyles}
218
- style={this.props.style}
223
+ {...this.props}
224
+ style={{...this.props.style, width: '100%'}}
219
225
  ref={(year) => { this.yearComponent = year; }}
220
226
  selectedValue={this.state.date.getFullYear()}
221
227
  pickerData={this.state.yearRange}
package/src/date-picker.ios.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { PureComponent } from 'react';
2
- import { DatePickerIOS } from 'react-native';
2
+ // import { DatePickerIOS } from 'react-native';
3
+ import DateTimePicker from '@react-native-community/datetimepicker';
3
4
  import PropTypes from 'prop-types';
4
5
 
5
6
  export default class DatePicker extends PureComponent {
@@ -20,12 +21,16 @@ export default class DatePicker extends PureComponent {
20
21
  date: new Date(),
21
22
  };
22
23
 
24
+ // @react-native-community/datetimepicker
25
+ //2022 use value instead of date
26
+ //2022 use onChange instead of onDateChange (and first param not date anymore)
23
27
  render() {
24
28
  return (
25
- <DatePickerIOS
29
+ <DateTimePicker
26
30
  {...this.props}
27
- onDateChange={this.onDateChange}
28
- date={this.state.date}
31
+ onChange={(event, date) => this.onDateChange(date)}
32
+ display='spinner'
33
+ value={this.state.date}
29
34
  />
30
35
  );
31
36
  }
package/src/picker.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { Component } from 'react';
2
- import { ColorPropType, StyleSheet, View, ViewPropTypes as RNViewPropTypes, Text } from 'react-native';
2
+ import { StyleSheet, View, Text, Platform } from 'react-native';
3
+ import { ColorPropType, ViewPropTypes as RNViewPropTypes, } from 'deprecated-react-native-prop-types'
3
4
  import PropTypes from 'prop-types';
4
5
  import WheelCurvedPicker from './WheelCurvedPicker';
5
6
 
@@ -19,7 +20,6 @@ export default class Picker extends Component {
19
20
  static propTypes = {
20
21
  textColor: ColorPropType,
21
22
  textSize: PropTypes.number,
22
- itemSpace: PropTypes.number,
23
23
  itemStyle: ViewPropTypes.style,
24
24
  onValueChange: PropTypes.func.isRequired,
25
25
  pickerData: PropTypes.array.isRequired,
@@ -30,9 +30,11 @@ export default class Picker extends Component {
30
30
  static defaultProps = {
31
31
  textColor: '#333',
32
32
  textSize: 26,
33
- itemSpace: 20,
34
33
  itemStyle: null,
35
- style: null,
34
+ // onValueChange: () => {}, // Require
35
+ // pickerData: [''], // Require
36
+ style: {},
37
+ selectedValue: '',
36
38
  };
37
39
 
38
40
  state = {
@@ -44,9 +46,37 @@ export default class Picker extends Component {
44
46
  this.props.onValueChange(selectedValue);
45
47
  };
46
48
 
49
+ validateDeprecateProps = (oldProp = 'curtain', newProp = '') => {
50
+ if(this.props){
51
+ if(typeof this.props[oldProp] !== 'undefined'){
52
+ this.props[oldProp] = undefined;
53
+
54
+ if(newProp === ''){
55
+ console.warn(`react-native-wheel-pick : "${oldProp}" Prop was deprecated. Please remove it for improve native performance.`)
56
+ } else {
57
+ console.warn(`react-native-wheel-pick : "${oldProp}" Prop was deprecated. Please use "${newProp}" instead.`)
58
+ }
59
+ }
60
+ }
61
+ }
62
+
47
63
  render() {
48
64
  const { pickerData, style, ...props } = this.props;
49
65
 
66
+ if(Platform.OS === 'android'){
67
+ //checkDeprecatedProp
68
+ this.validateDeprecateProps('atmospheric');
69
+ this.validateDeprecateProps('curved');
70
+ this.validateDeprecateProps('visibleItemCount');
71
+ this.validateDeprecateProps('itemSpace');
72
+ this.validateDeprecateProps('curtain', 'isShowSelectBackground');
73
+ this.validateDeprecateProps('curtainColor', 'selectBackgroundColor');
74
+
75
+ this.validateDeprecateProps('indicator', 'isShowSelectLine');
76
+ this.validateDeprecateProps('indicatorColor', 'selectLineColor');
77
+ this.validateDeprecateProps('indicatorSize', 'selectLineSize');
78
+ }
79
+
50
80
  return (
51
81
  <WheelCurvedPicker
52
82
  {...props}
@@ -57,7 +87,7 @@ export default class Picker extends Component {
57
87
  {pickerData.map((data, index) => (
58
88
  <PickerItem
59
89
  key={index}
60
- value={typeof data.value !== 'undefined' ? data.value : data}
90
+ value={typeof data.value !== 'undefined' ? data.value : data.toString()}
61
91
  label={typeof data.label !== 'undefined' ? data.label : data.toString()}
62
92
  />
63
93
  ))}