style: 💄 修改时间选择的宽度！

Author: limintao

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "@react-native-community"
+    "@react-native"
   ],
   "ignorePatterns": [
     ".*.js",

example/src/App.tsx

@@ -78,19 +78,11 @@ export default function App() {
         />
 
         <View style={styles.modesContainer}>
-          <Text
-            style={{
-              // eslint-disable-next-line react-native/no-inline-styles
-              marginRight: 8,
-            }}
-          >
-            Mode:
-          </Text>
+          <Text style={{ marginRight: 8 }}>Mode:</Text>
           <TouchableOpacity
             style={[
               styles.modeSelect,
               {
-                // eslint-disable-next-line react-native/no-inline-styles
                 backgroundColor:
                   mode === 'single' ? theme?.mainColor : undefined,
               },
@@ -109,7 +101,6 @@ export default function App() {
           <TouchableOpacity
             style={[
               styles.modeSelect,
-              // eslint-disable-next-line react-native/no-inline-styles
               {
                 backgroundColor:
                   mode === 'range' ? theme?.mainColor : undefined,
@@ -129,7 +120,6 @@ export default function App() {
           <TouchableOpacity
             style={[
               styles.modeSelect,
-              // eslint-disable-next-line react-native/no-inline-styles
               {
                 backgroundColor:
                   mode === 'multiple' ? theme?.mainColor : undefined,
@@ -150,7 +140,6 @@ export default function App() {
             style={[
               styles.modeSelect,
               {
-                // eslint-disable-next-line react-native/no-inline-styles
                 backgroundColor:
                   mode === 'wheel' ? theme?.mainColor : undefined,
               },
@@ -215,19 +204,17 @@ export default function App() {
               displayFullDays
               timePicker={timePicker}
               // minDate={range.startDate}
-              // maxDate={new Date()}
-              //firstDayOfWeek={1}
+              maxDate={new Date('2025-02-18 00:00:00')}
+              // firstDayOfWeek={1}
               // columns={['year', 'month', 'day', 'hour', 'minute', 'second']}
               onChange={onChange}
               headerButtonColor={theme?.mainColor}
               selectedItemColor={theme?.mainColor}
-              // eslint-disable-next-line react-native/no-inline-styles
               selectedTextStyle={{
                 fontWeight: 'bold',
                 color: theme?.activeTextColor,
               }}
               wheelPickerItemStyle={{ paddingHorizontal: 0 }}
-              // eslint-disable-next-line react-native/no-inline-styles
               todayContainerStyle={{
                 borderWidth: 1,
               }}

src/DateTimePicker.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useReducer } from 'react';
+import { memo, useCallback, useEffect, useReducer } from 'react';
 import {
   getFormatted,
   getDate,

src/components/Calendar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import type { CalendarViews } from '../enums';

src/components/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import Wheel from './WheelPicker/Wheel';

src/components/Day.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo, useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
 import { CalendarThemeProps, IDayObject } from '../types';
 import { CALENDAR_HEIGHT } from '../enums';
@@ -20,7 +20,7 @@ function EmptyDayPure({ height }: { height?: number }) {
   return <View style={style.dayCell} />;
 }
 
-export const EmptyDay = React.memo(EmptyDayPure);
+export const EmptyDay = memo(EmptyDayPure);
 
 function Day({
   date,
@@ -36,7 +36,7 @@ function Day({
   theme,
   height,
 }: Props) {
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
     onSelectDate(date);
   }, [onSelectDate, date]);
 
@@ -190,4 +190,4 @@ const customComparator = (
   );
 };
 
-export default React.memo(Day, customComparator);
+export default memo(Day, customComparator);

src/components/DaySelector.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import dayjs from 'dayjs';
 import { useCalendarContext } from '../CalendarContext';

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { View, Text, Pressable, StyleSheet, Image } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import dayjs from 'dayjs';

src/components/MonthSelector.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text, View, Pressable, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import { getParsedDate, getMonths } from '../utils';

src/components/TimeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import Wheel from './WheelPicker/Wheel';
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: CALENDAR_HEIGHT / 2,
+    width: '80%',
     height: CALENDAR_HEIGHT / 2,
   },
   timePickerText: {