Merge pull request #26 from farhoudshapouran/fix-time-picker-web

fix: time selector display in web
farhoudshapouran · Oct 31, 2023 · e46182e · e46182e
2 parents b54ec22 + 7aa49fe
commit e46182e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/TimePicker/Wheel.tsx b/src/components/TimePicker/Wheel.tsx
@@ -5,9 +5,11 @@ import {
   TextStyle,
   View,
   ViewStyle,
+  Platform,
 } from 'react-native';
 import React, { useMemo, useRef } from 'react';
 import { sin } from './AnimatedMath';
+import { CALENDAR_HEIGHT } from '../../enums';
 
 export interface WheelStyleProps {
   containerStyle?: ViewStyle;
@@ -180,11 +182,17 @@ export default function Wheel({
 
 const styles = StyleSheet.create({
   container: {
-    height: '100%',
     minWidth: 30,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
+    height: CALENDAR_HEIGHT / 2,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+    }),
   },
   contentContainer: {
     justifyContent: 'space-between',

diff --git a/src/components/TimeSelector.tsx b/src/components/TimeSelector.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import Wheel from './TimePicker/Wheel';
+import { CALENDAR_HEIGHT } from '../enums';
 
 function createNumberList(num: number) {
   return new Array(num).fill(0).map((_, index) => index);
@@ -83,11 +84,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 140,
-    height: '50%',
+    width: CALENDAR_HEIGHT / 2,
+    height: CALENDAR_HEIGHT / 2,
   },
   timePickerText: {
-    fontSize: 22,
+    fontSize: 24,
     fontWeight: 'bold',
   },
 });