react-native-wheel-pick 1.2.3 → 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)
 
@@ -79,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)
@@ -110,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}
@@ -129,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
 
@@ -142,6 +145,11 @@ 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wheel-pick",
-  "version": "1.2.3",
+  "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

@@ -82,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}
@@ -94,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>