react-native-dates-picker 0.1.0 → 0.1.2

package/src/components/DatePicker.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import Wheel from './WheelPicker/Wheel';
 import { CONTAINER_HEIGHT } from '../enums';
 import {
   getFormatted,
@@ -10,6 +9,7 @@ import {
   getTimeRange,
   getDate,
 } from '../utils';
+import Wheel from './WheelPicker/Wheel';
 
 function createNumberList(start: number, end: number, first: number = 1) {
   return new Array(end - start).fill(0).map((_, index) => ({
@@ -90,30 +90,16 @@ const DatePicker: React.FC = () => {
     [currentDate, onSelectDate]
   );
 
-  const createIndicatorStyle = useCallback(
-    (index: number) => {
-      const len = columns?.length || 0;
-      if (!index && len > 1)
-        return { borderTopRightRadius: 0, borderBottomRightRadius: 0 };
-      else if (index === len - 1 && len > 1)
-        return { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 };
-      else if (len > 2) return { borderRadius: 0 };
-      else return undefined;
-    },
-    [columns]
-  );
-
   return (
     <View style={styles.container}>
       <View style={styles.datePickerContainer}>
-        {columns?.map((item, index) => (
+        {columns?.map((item) => (
           <View style={styles.wheelContainer} key={item}>
             {item === 'year' && (
               <Wheel
                 value={year}
                 items={years}
                 setValue={(value) => onSelectYear(value)}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'month' && (
@@ -121,7 +107,6 @@ const DatePicker: React.FC = () => {
                 value={month + 1}
                 items={months}
                 setValue={(value) => onSelectMonth(value - 1)}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'day' && (
@@ -129,7 +114,6 @@ const DatePicker: React.FC = () => {
                 value={getDate(currentDate).date()}
                 items={days}
                 setValue={(value) => handleChangeDate(value, 'date')}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'hour' && (
@@ -137,7 +121,6 @@ const DatePicker: React.FC = () => {
                 value={hour}
                 items={hours}
                 setValue={(value) => handleChangeDate(value, 'hour')}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'minute' && (
@@ -145,7 +128,6 @@ const DatePicker: React.FC = () => {
                 value={minute}
                 items={minutes}
                 setValue={(value) => handleChangeDate(value, 'minute')}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
             {item === 'second' && (
@@ -153,7 +135,6 @@ const DatePicker: React.FC = () => {
                 value={second}
                 items={seconds}
                 setValue={(value) => handleChangeDate(value, 'second')}
-                indicatorStyle={createIndicatorStyle(index)}
               />
             )}
           </View>

package/src/components/Day.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { isEqual } from 'lodash';
 import { CalendarThemeProps, IDayObject } from '../types';
 import { CONTAINER_HEIGHT } from '../enums';
 import { addColorAlpha } from '../utils';
-import { isEqual } from 'lodash';
 
 export const daySize = 46;
 

package/src/components/DaySelector.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import dayjs from 'dayjs';
 import { useCalendarContext } from '../CalendarContext';
-import Day, { EmptyDay } from './Day';
 import {
   getParsedDate,
   getMonthDays,
@@ -13,6 +12,7 @@ import {
   getDate,
   getFormatted,
 } from '../utils';
+import Day, { EmptyDay } from './Day';
 
 const DaySelector: React.FC = () => {
   const {

package/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet, Image } from 'react-native';
-import { useCalendarContext } from '../CalendarContext';
 import dayjs from 'dayjs';
+import { useCalendarContext } from '../CalendarContext';
 import type { HeaderProps } from '../types';
 import { getDateYear, getYearRange, YEAR_PAGE_SIZE } from '../utils';
 

package/src/components/TimeSelector.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
-import Wheel from './WheelPicker/Wheel';
 import { CONTAINER_HEIGHT } from '../enums';
 import { getParsedDate, getDate, getFormatted } from '../utils';
+import Wheel from './WheelPicker/Wheel';
 
 function createNumberList(num: number) {
   return new Array(num).fill(0).map((_, index) => ({

package/src/components/WheelPicker/Wheel.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Platform, type ViewStyle } from 'react-native';
+import { Platform } from 'react-native';
 import WheelNative from './WheelNative';
 import WheelWeb from './WheelWeb';
 import { PickerOption } from '../../types';
@@ -8,7 +8,6 @@ interface WheelProps {
   value: number;
   setValue?: (value: number) => void;
   items: Array<PickerOption>;
-  indicatorStyle?: ViewStyle;
 }
 
 const Wheel: React.FC<WheelProps> = (props) => {

package/src/components/WheelPicker/WheelNative.tsx

@@ -1,5 +1,4 @@
 import React, { memo } from 'react';
-import { StyleSheet, Platform } from 'react-native';
 import WheelPicker from './WheelNativePicker';
 import { PickerOption } from '../../types';
 
@@ -19,7 +18,6 @@ const WheelNative: React.FC<WheelProps> = ({
       value={value}
       options={items}
       onChange={setValue}
-      containerStyle={defaultStyles.container}
       itemHeight={44}
       decelerationRate="fast"
     />
@@ -27,14 +25,3 @@ const WheelNative: React.FC<WheelProps> = ({
 };
 
 export default memo(WheelNative);
-
-const defaultStyles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    ...Platform.select({
-      web: {
-        userSelect: 'none',
-      },
-    }),
-  },
-});

package/src/components/WheelPicker/WheelNativePicker/wheel-picker-item.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import { Animated, Text, StyleSheet } from 'react-native';
-import { PickerOption } from 'src/types';
+import { useCalendarContext } from '../../../CalendarContext';
+import { PickerOption } from '../../../types';
 
 interface ItemProps {
   option: PickerOption | null;
@@ -23,6 +24,7 @@ const WheelPickerItem: React.FC<ItemProps> = ({
   rotationFunction,
   scaleFunction,
 }) => {
+  const { theme } = useCalendarContext();
   const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
 
   const translateY = relativeScrollIndex.interpolate({
@@ -118,9 +120,10 @@ const WheelPickerItem: React.FC<ItemProps> = ({
           opacity,
           transform: [{ translateY }, { rotateX }, { scale }],
         },
+        theme.wheelPickerItemStyle,
       ]}
     >
-      <Text>{option?.text}</Text>
+      <Text style={theme.wheelPickerTextStyle}>{option?.text}</Text>
     </Animated.View>
   );
 };

package/src/components/WheelPicker/WheelNativePicker/wheel-picker.tsx

@@ -3,7 +3,6 @@ import {
   NativeSyntheticEvent,
   NativeScrollEvent,
   Animated,
-  ViewStyle,
   View,
   ViewProps,
   FlatListProps,
@@ -13,13 +12,13 @@ import {
 } from 'react-native';
 import WheelPickerItem from './wheel-picker-item';
 import { PickerOption } from '../../../types';
+import { useCalendarContext } from '../../../CalendarContext';
 
 interface Props {
   value: number | string;
   options: PickerOption[];
   onChange: (index: number | string) => void;
   itemHeight?: number;
-  containerStyle?: ViewStyle;
   containerProps?: Omit<ViewProps, 'style'>;
   scaleFunction?: (x: number) => number;
   rotationFunction?: (x: number) => number;
@@ -42,6 +41,7 @@ const WheelPicker: React.FC<Props> = ({
   containerProps = {},
   flatListProps = {},
 }) => {
+  const { theme } = useCalendarContext();
   const momentumStarted = useRef(false);
   const selectedIndex = options.findIndex((item) => item.value === value);
 
@@ -141,7 +141,11 @@ const WheelPicker: React.FC<Props> = ({
 
   return (
     <View
-      style={[styles.container, { height: containerHeight }]}
+      style={[
+        styles.container,
+        { height: containerHeight },
+        theme.wheelPickerContainerStyle,
+      ]}
       {...containerProps}
     >
       <View
@@ -151,6 +155,7 @@ const WheelPicker: React.FC<Props> = ({
             transform: [{ translateY: -itemHeight / 2 }],
             height: itemHeight,
           },
+          theme.wheelPickerSelectedIndicatorStyle,
         ]}
       />
       <Animated.FlatList
@@ -198,6 +203,7 @@ const WheelPicker: React.FC<Props> = ({
 
 const styles = StyleSheet.create({
   container: {
+    display: 'flex',
     position: 'relative',
   },
   selectedIndicator: {

package/src/components/WheelPicker/WheelWeb.tsx

@@ -7,10 +7,11 @@ import {
   Platform,
   Text,
 } from 'react-native';
-import { sin } from './animated-math';
+import { isEqual } from 'lodash';
 import { CONTAINER_HEIGHT } from '../../enums';
 import { PickerOption } from '../../types';
-import { isEqual } from 'lodash';
+import { useCalendarContext } from '../../CalendarContext';
+import { sin } from './animated-math';
 
 interface WheelProps {
   value: number | string;
@@ -25,6 +26,7 @@ const WheelWeb: React.FC<WheelProps> = ({
   setValue = () => {},
   items,
 }) => {
+  const { theme } = useCalendarContext();
   const displayCount = 5;
   const translateY = useRef(new Animated.Value(0)).current;
   const renderCount =
@@ -120,7 +122,10 @@ const WheelWeb: React.FC<WheelProps> = ({
   }, [displayValues, radius, value, displayCount, translateY]);
 
   return (
-    <View style={[defaultStyles.container]} {...panResponder.panHandlers}>
+    <View
+      style={[defaultStyles.container, theme.wheelPickerContainerStyle]}
+      {...panResponder.panHandlers}
+    >
       <View
         style={[
           defaultStyles.selectedIndicator,
@@ -128,6 +133,7 @@ const WheelWeb: React.FC<WheelProps> = ({
             transform: [{ translateY: -ITEM_HEIGHT / 2 }],
             height: ITEM_HEIGHT,
           },
+          theme.wheelPickerSelectedIndicatorStyle,
         ]}
       />
       {displayValues?.map((displayValue, index) => {
@@ -156,7 +162,9 @@ const WheelWeb: React.FC<WheelProps> = ({
               opacity: displayValue?.value !== value ? 0.3 : 1,
             }}
           >
-            <Text>{displayValue?.text}</Text>
+            <Text style={theme?.wheelPickerTextStyle}>
+              {displayValue?.text}
+            </Text>
           </Animated.View>
         );
       })}

package/src/types.ts

@@ -47,8 +47,7 @@ export type CalendarThemeProps = {
   wheelPickerContainerStyle?: ViewStyle;
   wheelPickerItemStyle?: ViewStyle;
   wheelPickerTextStyle?: TextStyle;
-  wheelPickerIndicatorStyle?: ViewStyle;
-  wheelPickerDecelerationRate?: 'normal' | 'fast' | number;
+  wheelPickerSelectedIndicatorStyle?: ViewStyle;
   selectedRangeBackgroundColor?: string;
 };