react-native-wheel-pick 1.2.2 → 1.2.4

package/README.md

@@ -1,7 +1,7 @@
 
 # [react-native-wheel-pick](https://www.npmjs.com/package/react-native-wheel-pick)
 
-React native wheel picker for both iOS and android. (Support DatePicker)
+React native wheel picker for both iOS and android.
 
 This is not original but inspired by [react-native-wheel-datepicker](https://github.com/pinguinjkeke/react-native-wheel-datepicker)
 
@@ -24,6 +24,8 @@ npm install @react-native-picker/picker --save-dev --legacy-peer-deps
 npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps
 npx pod-install
 
+npx react-native start --reset-cache // clear cache
+
 npx react-native run-ios // re-build native-code
 npx react-native run-android // re-build native-code for gradle
 ```
@@ -77,7 +79,6 @@ onDateChange={(date: Date) => { console.log(date) }}
   maximumDate={new Date('2050-12-31')}
   onDateChange={date => { console.log(date) }}
 />
-
 ```
 ```jsx
 // pickerData also support array of object. (Optional Way)
@@ -108,7 +109,7 @@ onDateChange={(date: Date) => { console.log(date) }}
 ```
 ```jsx
 // Android Only.
-// These is special props for Android. (iOS not work)
+// These is special props for Android. (iOS and Web not work)
 // You can also use these props for DatePicker, too.
 <Picker
   textSize={20}
@@ -127,6 +128,10 @@ onDateChange={(date: Date) => { console.log(date) }}
 <DatePicker
   order='D-M-Y' // Default is M-D-Y
 />
+
+// Test on Web (Platform.OS === 'Web')
+<Picker style={{ height: 50 }} />
+// DatePicker still not supported on Web.
 ```
 ## FYI
 
@@ -140,6 +145,20 @@ You can sponsor me
 OR you can fork this project instead.
 
 ## Release Note
+### 1.2.4 (Feb 17 2025)
+[Web]
+- Test on `Platform.OS === 'web'`
+- Only `<Picker />` can use on Web. `<DatePicker />` still not supported on Web.
+
+### 1.2.3 (Feb 15 2024)
+- Fix state is not updating after onValueChange in Picker Component. Thanks to [@spasma
+](https://github.com/TronNatthakorn/react-native-wheel-pick/issues/52)
+- Test on React Native Version 0.77
+
+[Android]
+- Support [UIManager New Architecture of React Native](https://github.com/reactwg/react-native-new-architecture/discussions/201)
+- Use Handler for fix 23 index problem. Thanks to [@mykhailoperemitko](https://github.com/TronNatthakorn/react-native-wheel-pick/issues/44) [@A-ANing](https://github.com/A-ANing)
+
 ### 1.2.2 (June 7 2023)
 [iOS]
 - Now iOS can use `textColor`, too. [Add missing color option for iOS](https://github.com/TronNatthakorn/react-native-wheel-pick/pull/38) [@aurotones](https://github.com/aurotones)

package/android/build.gradle

@@ -6,9 +6,25 @@ buildscript {
 
 apply plugin: 'com.android.library'
 
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+    apply plugin: 'com.facebook.react'
+}
+
 android {
     compileSdkVersion 33
     namespace 'com.tron'
+
+    defaultConfig {
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
+    }
+
+    buildFeatures {
+        buildConfig true
+    }
 }
 
 dependencies {

package/android/src/main/java/com/tron/ReactWheelCurvedPicker.java

@@ -20,6 +20,11 @@ import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 
+import com.facebook.react.uimanager.UIManagerHelper;
+
+// UIManagerType;
+import com.facebook.react.uimanager.common.UIManagerType;
+
 import java.util.Date;
 import java.util.List;
 
@@ -35,7 +40,13 @@ public class ReactWheelCurvedPicker extends WheelPicker {
 
     public ReactWheelCurvedPicker(ReactContext reactContext) {
         super(reactContext);
-        mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+
+        if(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {	
+            mEventDispatcher = (UIManagerHelper.getUIManager(reactContext, 1 /** UIManagerType */)).getEventDispatcher();
+        } else {
+            mEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        }
+        
         setOnWheelChangeListener(new OnWheelChangeListener() {
             @Override
             public void onWheelScrolled(int offset) {

package/android/src/main/java/com/tron/ReactWheelCurvedPickerManager.java

@@ -1,6 +1,7 @@
 package com.tron;
 
 import android.graphics.Color;
+import android.os.Handler;
 
 import com.aigestudio.wheelpicker.WheelPicker;
 import com.facebook.react.bridge.ReadableArray;
@@ -84,8 +85,18 @@ public class ReactWheelCurvedPickerManager extends SimpleViewManager<ReactWheelC
         //if (picker != null && picker.getState() == WheelPicker.SCROLL_STATE_IDLE) {
         // Log.d("Index from React", index + "");
         if (picker != null) {
-            picker.setSelectedItemPosition(index);
-            picker.invalidate();
+            // picker.setSelectedItemPosition(index);
+            // picker.invalidate();
+
+            final Handler handler = new Handler();
+
+            handler.post(new Runnable() {
+                @Override
+                public void run() {
+                    picker.setSelectedItemPosition(index);
+                    picker.invalidate();
+                }
+            });
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wheel-pick",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "React native wheel picker iOS style with android.",
   "main": "src/index.js",
   "scripts": {

package/src/WheelCurvedPicker.web.js

@@ -0,0 +1,6 @@
+// Wait for future maintenance
+
+import React from 'react';
+import { Picker } from '@react-native-picker/picker';
+
+export default Picker;

package/src/date-picker.web.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react';
+// import { DatePickerIOS } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import PropTypes from 'prop-types';
+
+export default class DatePicker extends PureComponent {
+  static propTypes = {
+    date: PropTypes.instanceOf(Date),
+    maximumDate: PropTypes.instanceOf(Date),
+    minimumDate: PropTypes.instanceOf(Date),
+    mode: PropTypes.oneOf(['date', 'time', 'datetime']),
+    onDateChange: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    mode: 'date',
+    date: new Date(),
+  };
+
+  state = {
+    date: new Date(),
+  };
+
+  // @react-native-community/datetimepicker
+  //2022 use value instead of date
+  //2022 use onChange instead of onDateChange (and first param not date anymore)
+  render() {
+    return (
+      <DateTimePicker
+        {...this.props}
+        onChange={(event, date) => this.onDateChange(date)}
+        display='spinner'
+        value={this.state.date}
+      />
+    );
+  }
+
+  componentDidMount() {
+    this.setState({ date: this.props.date })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.date !== prevProps.date) {
+      this.setState({ date: this.props.date })
+    }
+  }
+
+  onDateChange = (date) => {
+    this.setState({ date });
+    this.props.onDateChange(date);
+  }
+}

package/src/picker.js

@@ -45,6 +45,12 @@ export default class Picker extends Component {
     this.props.onValueChange(selectedValue);
   };
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.selectedValue !== this.props.selectedValue) {
+      this.setState({ selectedValue: this.props.selectedValue });
+    }
+  }
+
   validateDeprecateProps = (oldProp = 'curtain', newProp = '') => {
     if(this.props){
       if(typeof this.props[oldProp] !== 'undefined'){
@@ -76,9 +82,33 @@ export default class Picker extends Component {
       this.validateDeprecateProps('indicatorSize', 'selectLineSize');
     }
 
+    const propsForWeb = { ...props }
+
+    if(Platform.OS === 'web'){
+      propsForWeb.textcolor = propsForWeb.textColor
+      propsForWeb.textsize = propsForWeb.textSize
+
+      propsForWeb.selecttextcolor = propsForWeb.selectTextColor
+      propsForWeb.isshowselectbackground = propsForWeb.isShowSelectBackground.toString()
+      propsForWeb.selectbackgroundcolor = propsForWeb.selectBackgroundColor
+      propsForWeb.isshowselectline = propsForWeb.isShowSelectLine.toString()
+      propsForWeb.selectlinecolor = propsForWeb.selectLineColor
+      propsForWeb.selectlinesize = propsForWeb.selectLineSize
+
+      delete propsForWeb.textColor
+      delete propsForWeb.textSize
+
+      delete propsForWeb.selectTextColor
+      delete propsForWeb.isShowSelectBackground
+      delete propsForWeb.selectBackgroundColor
+      delete propsForWeb.isShowSelectLine
+      delete propsForWeb.selectLineColor
+      delete propsForWeb.selectLineSize
+    }
+
     return (
       <WheelCurvedPicker
-        {...props}
+        {...(Platform.OS === 'web'? propsForWeb: props)}
         style={[styles.picker, style]}
         selectedValue={this.state.selectedValue}
         onValueChange={this.handleChange}
@@ -88,7 +118,7 @@ export default class Picker extends Component {
             key={index}
             value={typeof data.value !== 'undefined' ? data.value : data.toString()}
             label={typeof data.label !== 'undefined' ? data.label : data.toString()}
-            color={props.textColor}
+            color={(Platform.OS === 'web'? propsForWeb.textcolor: props.textColor)}
           />
         ))}
       </WheelCurvedPicker>