Skip to content

Commit 81ca66c

Browse files
farhoudshapouranfarhoudshapouran
authored
Merge pull request #174 from farhoudshapouran/fix/styling-issues
Fix styling issues
2 parents bb2ede2 + bce1cf0 commit 81ca66c

File tree

13 files changed

+146
-85
lines changed

13 files changed

+146
-85
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ yarn add react-native-ui-datepicker
4343

4444
```jsx
4545
import { useState } from 'react';
46-
import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker';
46+
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
4747

4848
export function Calendar() {
49-
const defaultStyles = getDefaultStyles();
49+
const defaultStyles = useDefaultStyles();
5050
const [selected, setSelected] = useState<DateType>();
5151

5252
return (
@@ -164,10 +164,10 @@ Use the `styles` prop to apply custom styles instead of the default ones.
164164
These styles are mapped to the values of the [UI Theme](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/src/ui.ts) enums.
165165

166166
```jsx
167-
import DateTimePicker, { getDefaultStyles } from 'react-native-ui-datepicker';
167+
import DateTimePicker, { useDefaultStyles } from 'react-native-ui-datepicker';
168168

169169
export function Calendar() {
170-
const defaultStyles = getDefaultStyles();
170+
const defaultStyles = useDefaultStyles();
171171

172172
return (
173173
<DateTimePicker
@@ -190,10 +190,10 @@ Use the `classNames` prop to apply custom class names instead of the default one
190190
These class names are mapped to the values of the [UI Theme](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/src/ui.ts) enums.
191191

192192
```jsx
193-
import DateTimePicker, { getDefaultClassNames } from 'react-native-ui-datepicker';
193+
import DateTimePicker, { useDefaultClassNames } from 'react-native-ui-datepicker';
194194

195195
export function Calendar() {
196-
const defaultClassNames = getDefaultClassNames();
196+
const defaultClassNames = useDefaultClassNames();
197197

198198
return (
199199
<DateTimePicker

‎demo/components/ui/calendar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DateTimePicker, {
33
DateType,
44
CalendarDay,
55
CalendarComponents,
6-
getDefaultClassNames,
6+
useDefaultClassNames,
77
} from 'react-native-ui-datepicker';
88
import Feather from '@expo/vector-icons/Feather';
99
import { cssInterop } from 'nativewind';
@@ -33,7 +33,7 @@ function Calendar({
3333
components,
3434
...props
3535
}: React.ComponentProps<typeof DateTimePicker>) {
36-
const defaultClassNames = getDefaultClassNames();
36+
const defaultClassNames = useDefaultClassNames();
3737

3838
return (
3939
<DateTimePicker

‎example/app/bottom-sheet.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import DateTimePicker, {
1010
DateType,
1111
CalendarDay,
1212
CalendarComponents,
13-
getDefaultStyles,
13+
useDefaultStyles,
1414
} from 'react-native-ui-datepicker';
1515

1616
export default function BottomSheetScreen() {
17-
const defaultStyles = getDefaultStyles();
17+
const defaultStyles = useDefaultStyles();
1818
const [date, setDate] = useState<DateType>();
1919
const bottomSheetModalRef = useRef<BottomSheetModal>(null);
2020
const [dates, setDates] = useState<DateType[]>();

‎src/__tests__/__snapshots__/common.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,10 @@ exports[`COMMON TESTS should render with default options 1`] = `
8383
style={
8484
Object {
8585
"height": 14,
86+
"tintColor": "hsl(240 10% 3.9%)",
8687
"width": 14,
8788
}
8889
}
89-
tintColor="hsl(240 10% 3.9%)"
9090
/>
9191
</View>
9292
</View>
@@ -261,10 +261,10 @@ exports[`COMMON TESTS should render with default options 1`] = `
261261
style={
262262
Object {
263263
"height": 14,
264+
"tintColor": "hsl(240 10% 3.9%)",
264265
"width": 14,
265266
}
266267
}
267-
tintColor="hsl(240 10% 3.9%)"
268268
/>
269269
</View>
270270
</View>

‎src/components/header/index.tsx‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,11 @@
11
import React, { memo } from 'react';
22
import { View, StyleSheet } from 'react-native';
3-
import type { HeaderProps } from './types';
3+
import type { HeaderProps, NavigationProps } from './types';
44
import PrevButton from './prev-button';
55
import NextButton from './next-button';
66
import Selectors from './selectors';
77
import { isEqual } from 'lodash';
88

9-
const Header = ({
10-
navigationPosition,
11-
styles = {},
12-
classNames = {},
13-
}: HeaderProps) => {
14-
return (
15-
<View
16-
style={[defaultStyles.headerContainer, styles?.header]}
17-
className={classNames.header}
18-
>
19-
{navigationPosition === 'left' ? (
20-
<View style={defaultStyles.container}>
21-
<View style={defaultStyles.navigation}>
22-
<PrevButton
23-
style={styles.button_prev}
24-
className={classNames.button_prev}
25-
/>
26-
<NextButton
27-
style={styles.button_next}
28-
className={classNames.button_next}
29-
/>
30-
</View>
31-
<Selectors position="left" />
32-
</View>
33-
) : navigationPosition === 'right' ? (
34-
<View style={defaultStyles.container}>
35-
<Selectors position="right" />
36-
<View style={defaultStyles.navigation}>
37-
<PrevButton
38-
style={styles.button_prev}
39-
className={classNames.button_prev}
40-
/>
41-
<NextButton
42-
style={styles.button_next}
43-
className={classNames.button_next}
44-
/>
45-
</View>
46-
</View>
47-
) : (
48-
<View style={defaultStyles.container}>
49-
<PrevButton
50-
style={styles.button_prev}
51-
className={classNames.button_prev}
52-
/>
53-
<Selectors position="around" />
54-
<NextButton
55-
style={styles.button_next}
56-
className={classNames.button_next}
57-
/>
58-
</View>
59-
)}
60-
</View>
61-
);
62-
};
63-
649
const defaultStyles = StyleSheet.create({
6510
headerContainer: {
6611
paddingVertical: 3,
@@ -77,6 +22,66 @@ const defaultStyles = StyleSheet.create({
7722
},
7823
});
7924

25+
const NavigationButtons = ({ styles, classNames }: NavigationProps) => (
26+
<View style={defaultStyles.navigation}>
27+
<PrevButton
28+
style={styles?.button_prev}
29+
imageStyle={styles?.button_prev_image}
30+
className={classNames?.button_prev}
31+
imageClassName={classNames?.button_prev_image}
32+
/>
33+
<NextButton
34+
style={styles?.button_next}
35+
imageStyle={styles?.button_next_image}
36+
className={classNames?.button_next}
37+
imageClassName={classNames?.button_next_image}
38+
/>
39+
</View>
40+
);
41+
42+
const Header = ({
43+
navigationPosition = 'around',
44+
styles = {},
45+
classNames = {},
46+
}: HeaderProps) => {
47+
return (
48+
<View
49+
style={[defaultStyles.headerContainer, styles?.header]}
50+
className={classNames?.header}
51+
>
52+
<View style={defaultStyles.container}>
53+
{navigationPosition === 'left' ? (
54+
<>
55+
<NavigationButtons styles={styles} classNames={classNames} />
56+
<Selectors position="left" />
57+
</>
58+
) : navigationPosition === 'right' ? (
59+
<>
60+
<Selectors position="right" />
61+
<NavigationButtons styles={styles} classNames={classNames} />
62+
</>
63+
) : (
64+
<>
65+
<PrevButton
66+
style={styles?.button_prev}
67+
imageStyle={styles?.button_prev_image}
68+
className={classNames?.button_prev}
69+
imageClassName={classNames?.button_prev_image}
70+
/>
71+
<Selectors position="around" />
72+
<NextButton
73+
style={styles?.button_next}
74+
imageStyle={styles?.button_next_image}
75+
className={classNames?.button_next}
76+
imageClassName={classNames?.button_next_image}
77+
/>
78+
</>
79+
)}
80+
</View>
81+
</View>
82+
);
83+
};
84+
8085
const customComparator = (
8186
prev: Readonly<HeaderProps>,
8287
next: Readonly<HeaderProps>

‎src/components/header/next-button.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { memo, useCallback } from 'react';
1+
import React, { memo, useCallback, useMemo } from 'react';
22
import {
33
Image,
4+
ImageStyle,
45
Pressable,
56
StyleSheet,
67
useColorScheme,
@@ -17,10 +18,17 @@ const arrow_right = require('../../assets/images/arrow_right.png');
1718

1819
type NextButtonProps = {
1920
style?: Styles[UI.button_next];
21+
imageStyle?: Styles[UI.button_next_image];
2022
className?: ClassNames[UI.button_next];
23+
imageClassName?: ClassNames[UI.button_next_image];
2124
};
2225

23-
const NextButton = ({ style, className }: NextButtonProps) => {
26+
const NextButton = ({
27+
style,
28+
imageStyle,
29+
className,
30+
imageClassName,
31+
}: NextButtonProps) => {
2432
const {
2533
currentYear,
2634
onChangeMonth,
@@ -45,6 +53,15 @@ const NextButton = ({ style, className }: NextButtonProps) => {
4553
}
4654
}, [calendarView, currentYear, onChangeMonth, onChangeYear]);
4755

56+
const iconStyle: ImageStyle = useMemo(
57+
() => ({
58+
...defaultStyles.icon,
59+
tintColor: COLORS[theme].foreground,
60+
...(imageStyle as ImageStyle),
61+
}),
62+
[imageStyle, theme]
63+
);
64+
4865
return (
4966
<Pressable
5067
disabled={calendarView === 'time'}
@@ -60,8 +77,8 @@ const NextButton = ({ style, className }: NextButtonProps) => {
6077
{components.IconNext || (
6178
<Image
6279
source={arrow_right}
63-
tintColor={COLORS[theme].foreground}
64-
style={defaultStyles.icon}
80+
style={iconStyle}
81+
className={imageClassName}
6582
/>
6683
)}
6784
</View>
@@ -74,7 +91,10 @@ const customComparator = (
7491
next: Readonly<NextButtonProps>
7592
) => {
7693
const areEqual =
77-
prev.className === next.className && isEqual(prev.style, next.style);
94+
prev.className === next.className &&
95+
isEqual(prev.style, next.style) &&
96+
isEqual(prev.imageStyle, next.imageStyle) &&
97+
isEqual(prev.imageClassName, next.imageClassName);
7898

7999
return areEqual;
80100
};

‎src/components/header/prev-button.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { memo, useCallback } from 'react';
1+
import React, { memo, useCallback, useMemo } from 'react';
22
import {
33
Image,
4+
ImageStyle,
45
Pressable,
56
StyleSheet,
67
useColorScheme,
@@ -17,10 +18,17 @@ const arrow_left = require('../../assets/images/arrow_left.png');
1718

1819
type PrevButtonProps = {
1920
style?: Styles[UI.button_prev];
21+
imageStyle?: Styles[UI.button_prev_image];
2022
className?: ClassNames[UI.button_prev];
23+
imageClassName?: ClassNames[UI.button_prev_image];
2124
};
2225

23-
const PrevButton = ({ style, className }: PrevButtonProps) => {
26+
const PrevButton = ({
27+
style,
28+
imageStyle,
29+
className,
30+
imageClassName,
31+
}: PrevButtonProps) => {
2432
const {
2533
currentYear,
2634
calendarView,
@@ -45,6 +53,15 @@ const PrevButton = ({ style, className }: PrevButtonProps) => {
4553
}
4654
}, [calendarView, currentYear, onChangeMonth, onChangeYear]);
4755

56+
const iconStyle: ImageStyle = useMemo(
57+
() => ({
58+
...defaultStyles.icon,
59+
tintColor: COLORS[theme].foreground,
60+
...(imageStyle as ImageStyle),
61+
}),
62+
[imageStyle, theme]
63+
);
64+
4865
return (
4966
<Pressable
5067
disabled={calendarView === 'time'}
@@ -60,8 +77,8 @@ const PrevButton = ({ style, className }: PrevButtonProps) => {
6077
{components.IconPrev || (
6178
<Image
6279
source={arrow_left}
63-
tintColor={COLORS[theme].foreground}
64-
style={defaultStyles.icon}
80+
style={iconStyle}
81+
className={imageClassName}
6582
/>
6683
)}
6784
</View>
@@ -74,7 +91,10 @@ const customComparator = (
7491
next: Readonly<PrevButtonProps>
7592
) => {
7693
const areEqual =
77-
prev.className === next.className && isEqual(prev.style, next.style);
94+
prev.className === next.className &&
95+
isEqual(prev.style, next.style) &&
96+
isEqual(prev.imageStyle, next.imageStyle) &&
97+
isEqual(prev.imageClassName, next.imageClassName);
7898

7999
return areEqual;
80100
};

‎src/components/header/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,8 @@ export type HeaderProps = {
88
styles?: Styles;
99
classNames?: ClassNames;
1010
};
11+
12+
export type NavigationProps = {
13+
styles?: Styles;
14+
classNames?: ClassNames;
15+
};

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ export type {
1111
CalendarYear,
1212
CalendarComponents,
1313
} from './types';
14-
export { getDefaultClassNames, getDefaultStyles } from './theme';
14+
export { useDefaultClassNames, useDefaultStyles } from './theme';
1515

1616
export default DateTimePicker;

‎src/react-native-extended.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,8 @@ declare module 'react-native' {
1212
interface PressableProps {
1313
className?: string;
1414
}
15+
16+
interface ImageProps {
17+
className?: string;
18+
}
1519
}

0 commit comments

Comments
 (0)