Skip to content

Commit 8b260a2

Browse files
PradeetPradeet
committed
chore: adding support for theme changes and dynamic theming
1 parent a3383e2 commit 8b260a2

File tree

11 files changed

+721
-432
lines changed

11 files changed

+721
-432
lines changed

‎example/src/screens/calendarPlaygroundScreen.tsx‎

Lines changed: 56 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ const NewCalendarScreen = () => {
4141
const [disableArrowRight, setDisableArrowRight] = useState(false);
4242

4343
const toggleMinAndMax = useCallback(() => setMinAndMax(!minAndMax), [minAndMax]);
44-
const toggleAllowSelectionOutOfRange = useCallback(() => setAllowSelectionOutOfRange(!allowSelectionOutOfRange), [allowSelectionOutOfRange]);
44+
const toggleAllowSelectionOutOfRange = useCallback(
45+
() => setAllowSelectionOutOfRange(!allowSelectionOutOfRange),
46+
[allowSelectionOutOfRange]
47+
);
4548
const toggleEnableSwipeMonths = useCallback(() => setEnableSwipeMonths(!enableSwipeMonths), [enableSwipeMonths]);
4649
const toggleDisableMonthChange = useCallback(() => setDisableMonthChange(!disableMonthChange), [disableMonthChange]);
4750
const toggleShowWeekNumbers = useCallback(() => setShowWeekNumbers(!showWeekNumbers), [showWeekNumbers]);
@@ -50,28 +53,40 @@ const NewCalendarScreen = () => {
5053
const toggleHideDayNames = useCallback(() => setHideDayNames(!hideDayNames), [hideDayNames]);
5154
const toggleHideArrows = useCallback(() => setHideArrows(!hideArrows), [hideArrows]);
5255
const toggleDisabledByDefault = useCallback(() => setDisabledByDefault(!disabledByDefault), [disabledByDefault]);
53-
const toggleDisableAllTouchEventsForDisabledDays = useCallback(() => setDisableAllTouchEventsForDisabledDays(!disableAllTouchEventsForDisabledDays), [disableAllTouchEventsForDisabledDays]);
54-
const toggleDisableAllTouchEventsForInactiveDays = useCallback(() => setDisableAllTouchEventsForInactiveDays(!disableAllTouchEventsForInactiveDays), [disableAllTouchEventsForInactiveDays]);
55-
const toggleDisplayLoadingIndicator = useCallback(() => setDisplayLoadingIndicator(!displayLoadingIndicator), [displayLoadingIndicator]);
56-
const toggleDisabledDaysIndexes = useCallback(() => setDisabledDaysIndexes(!disabledDaysIndexes), [disabledDaysIndexes]);
56+
const toggleDisableAllTouchEventsForDisabledDays = useCallback(
57+
() => setDisableAllTouchEventsForDisabledDays(!disableAllTouchEventsForDisabledDays),
58+
[disableAllTouchEventsForDisabledDays]
59+
);
60+
const toggleDisableAllTouchEventsForInactiveDays = useCallback(
61+
() => setDisableAllTouchEventsForInactiveDays(!disableAllTouchEventsForInactiveDays),
62+
[disableAllTouchEventsForInactiveDays]
63+
);
64+
const toggleDisplayLoadingIndicator = useCallback(
65+
() => setDisplayLoadingIndicator(!displayLoadingIndicator),
66+
[displayLoadingIndicator]
67+
);
68+
const toggleDisabledDaysIndexes = useCallback(
69+
() => setDisabledDaysIndexes(!disabledDaysIndexes),
70+
[disabledDaysIndexes]
71+
);
5772
const toggleDayComponent = useCallback(() => setDayComponent(!dayComponent), [dayComponent]);
5873
const toggleCustomHeader = useCallback(() => setCustomHeader(!customHeader), [customHeader]);
5974
const toggleCustomHeaderTitle = useCallback(() => setCustomHeaderTitle(!customHeaderTitle), [customHeaderTitle]);
6075
const toggleRenderArrow = useCallback(() => setRenderArrow(!renderArrow), [renderArrow]);
6176
const toggleDisableArrowLeft = useCallback(() => setDisableArrowLeft(!disableArrowLeft), [disableArrowLeft]);
6277
const toggleDisableArrowRight = useCallback(() => setDisableArrowRight(!disableArrowRight), [disableArrowRight]);
6378

64-
const getDate = (count) => {
79+
const getDate = count => {
6580
const date = new Date(INITIAL_DATE);
6681
const newDate = date.setDate(date.getDate() + count);
6782
return CalendarUtils.getCalendarDateString(newDate);
6883
};
6984

70-
const onDayPress = useCallback((day) => {
85+
const onDayPress = useCallback(day => {
7186
setSelected(day.dateString);
7287
}, []);
7388

74-
const onDayLongPress = useCallback((day) => {
89+
const onDayLongPress = useCallback(day => {
7590
Alert.alert(`Date: ${day.dateString}`);
7691
}, []);
7792

@@ -139,7 +154,14 @@ const NewCalendarScreen = () => {
139154

140155
const periodWithDotsMarks = useMemo(() => {
141156
return {
142-
[getDate(-3)]: {marked: true, dotColor: 'white', startingDay: true, endingDay: true, color: '#50cebb', textColor: 'white'},
157+
[getDate(-3)]: {
158+
marked: true,
159+
dotColor: 'white',
160+
startingDay: true,
161+
endingDay: true,
162+
color: '#50cebb',
163+
textColor: 'white'
164+
},
143165
[INITIAL_DATE]: {marked: true, dotColor: '#50cebb'},
144166
[getDate(1)]: {disabled: true, marked: true, dotColor: '#50cebb'},
145167
[getDate(2)]: {startingDay: true, color: '#50cebb', textColor: 'white'},
@@ -370,7 +392,7 @@ const NewCalendarScreen = () => {
370392

371393
const CustomHeader = React.forwardRef((props, ref) => {
372394
customHeaderProps.current = props;
373-
395+
374396
return (
375397
// @ts-expect-error
376398
<View ref={ref} {...props} style={styles.customHeader}>
@@ -420,27 +442,23 @@ const NewCalendarScreen = () => {
420442

421443
const CustomHeaderTitle = (
422444
<TouchableOpacity style={styles.customTitleContainer} onPress={() => console.warn('Tapped!')}>
423-
<Text style={styles.customTitle}>{selectedValue.getMonth() + 1}-{selectedValue.getFullYear()}</Text>
445+
<Text style={styles.customTitle}>
446+
{selectedValue.getMonth() + 1}-{selectedValue.getFullYear()}
447+
</Text>
424448
</TouchableOpacity>
425449
);
426450

427451
/** Custom Arrow */
428-
const _renderArrow = useCallback((direction) => {
452+
const _renderArrow = useCallback(direction => {
429453
const text = direction === 'left' ? '<<' : '>>';
430-
return (
431-
<Text>{text}</Text>
432-
);
454+
return <Text>{text}</Text>;
433455
}, []);
434456

435457
/** Props Switches */
436458
const renderSwitch = (label: string, state: any, toggleSwitch: any) => {
437459
return (
438460
<View style={styles.switchContainer}>
439-
<Switch
440-
value={state}
441-
onValueChange={toggleSwitch}
442-
trackColor={{true: GREEN}}
443-
/>
461+
<Switch value={state} onValueChange={toggleSwitch} trackColor={{true: GREEN}}/>
444462
<Text style={[styles.switchText, styles.text]}>{label}</Text>
445463
</View>
446464
);
@@ -451,7 +469,8 @@ const NewCalendarScreen = () => {
451469
<View>
452470
{renderSwitch('Min and Max Dates', minAndMax, toggleMinAndMax)}
453471
<View style={styles.subSwitchContainer}>
454-
{minAndMax && renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
472+
{minAndMax &&
473+
renderSwitch('Allow Selection Out Of Range', allowSelectionOutOfRange, toggleAllowSelectionOutOfRange)}
455474
</View>
456475
{renderSwitch('Enable Swipe Months', enableSwipeMonths, toggleEnableSwipeMonths)}
457476
{renderSwitch('Disable Month Change', disableMonthChange, toggleDisableMonthChange)}
@@ -460,8 +479,16 @@ const NewCalendarScreen = () => {
460479
{renderSwitch('Hide Extra Days', hideExtraDays, toggleHideExtraDays)}
461480
{renderSwitch('Hide Day Names', hideDayNames, toggleHideDayNames)}
462481
{renderSwitch('Disabled By Default', disabledByDefault, toggleDisabledByDefault)}
463-
{renderSwitch('Disable All Touch Events For Disabled Days', disableAllTouchEventsForDisabledDays, toggleDisableAllTouchEventsForDisabledDays)}
464-
{renderSwitch('Disable All Touch Events For Inactive Days', disableAllTouchEventsForInactiveDays, toggleDisableAllTouchEventsForInactiveDays)}
482+
{renderSwitch(
483+
'Disable All Touch Events For Disabled Days',
484+
disableAllTouchEventsForDisabledDays,
485+
toggleDisableAllTouchEventsForDisabledDays
486+
)}
487+
{renderSwitch(
488+
'Disable All Touch Events For Inactive Days',
489+
disableAllTouchEventsForInactiveDays,
490+
toggleDisableAllTouchEventsForInactiveDays
491+
)}
465492
{renderSwitch('Display Loading Indicator', displayLoadingIndicator, toggleDisplayLoadingIndicator)}
466493
{renderSwitch('Disabled Days Indexes', disabledDaysIndexes, toggleDisabledDaysIndexes)}
467494
{renderSwitch('Hide Arrows', hideArrows, toggleHideArrows)}
@@ -492,11 +519,9 @@ const NewCalendarScreen = () => {
492519
return (
493520
<TouchableOpacity onPress={() => setType(index)} key={index} style={styles.radioButtonContainer}>
494521
<View style={styles.radioButton}>
495-
{selectedButtonIndex === index &&
496-
<View style={styles.selectedRadioButton}/>
497-
}
522+
{selectedButtonIndex === index && <View style={styles.selectedRadioButton}/>}
498523
</View>
499-
<Text>{value}</Text>
524+
<Text>{value}</Text>
500525
</TouchableOpacity>
501526
);
502527
};
@@ -563,8 +588,8 @@ const styles = StyleSheet.create({
563588
alignItems: 'center'
564589
},
565590
text: {
566-
fontSize: 14,
567-
fontWeight: 'bold'
591+
fontSize: 14,
592+
fontWeight: 'bold'
568593
},
569594
buttonText: {
570595
color: GREEN,
@@ -628,8 +653,8 @@ const styles = StyleSheet.create({
628653
padding: 8
629654
},
630655
customTitleContainer: {
631-
flexDirection: 'row',
632-
alignItems: 'center',
656+
flexDirection: 'row',
657+
alignItems: 'center',
633658
padding: 10
634659
},
635660
customTitle: {

‎src/calendar/day/basic/index.tsx‎

Lines changed: 88 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React, { Fragment, useCallback, useRef } from 'react';
2-
import { TouchableOpacity, Text, View, ViewProps } from 'react-native';
3-
import { xdateToData } from '../../../interface';
4-
import { Theme, DayState, MarkingTypes, DateData } from '../../../types';
5-
import Marking, { MarkingProps } from '../marking';
1+
import React, {Fragment, useCallback, useMemo} from 'react';
2+
import {TouchableOpacity, Text, View, ViewProps} from 'react-native';
3+
import {xdateToData} from '../../../interface';
4+
import {Theme, DayState, MarkingTypes, DateData} from '../../../types';
5+
import Marking, {MarkingProps} from '../marking';
66
import styleConstructor from './style';
77

8-
98
export interface BasicDayProps extends ViewProps {
109
/** Theme object */
1110
theme?: Theme;
@@ -31,10 +30,23 @@ export interface BasicDayProps extends ViewProps {
3130
testID?: string;
3231
}
3332

34-
const BasicDay = (props) => {
35-
const { theme, date, onPress, onLongPress, markingType, marking, state, disableAllTouchEventsForDisabledDays, disableAllTouchEventsForInactiveDays, accessibilityLabel, children, testID } = props;
33+
const BasicDay = props => {
34+
const {
35+
theme,
36+
date,
37+
onPress,
38+
onLongPress,
39+
markingType,
40+
marking,
41+
state,
42+
disableAllTouchEventsForDisabledDays,
43+
disableAllTouchEventsForInactiveDays,
44+
accessibilityLabel,
45+
children,
46+
testID
47+
} = props;
3648
const dateData = date ? xdateToData(date) : undefined;
37-
const style = useRef(styleConstructor(theme));
49+
const style = useMemo(() => styleConstructor(theme), [theme]);
3850
const _marking = marking || {};
3951
const isSelected = _marking.selected || state === 'selected';
4052
const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled';
@@ -44,30 +56,27 @@ const BasicDay = (props) => {
4456
const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD;
4557
const isCustom = markingType === Marking.markings.CUSTOM;
4658
const shouldDisableTouchEvent = () => {
47-
const { disableTouchEvent } = _marking;
59+
const {disableTouchEvent} = _marking;
4860
let disableTouch = false;
4961
if (typeof disableTouchEvent === 'boolean') {
5062
disableTouch = disableTouchEvent;
51-
}
52-
else if (typeof disableAllTouchEventsForDisabledDays === 'boolean' && isDisabled) {
63+
} else if (typeof disableAllTouchEventsForDisabledDays === 'boolean' && isDisabled) {
5364
disableTouch = disableAllTouchEventsForDisabledDays;
54-
}
55-
else if (typeof disableAllTouchEventsForInactiveDays === 'boolean' && isInactive) {
65+
} else if (typeof disableAllTouchEventsForInactiveDays === 'boolean' && isInactive) {
5666
disableTouch = disableAllTouchEventsForInactiveDays;
5767
}
5868
return disableTouch;
5969
};
6070
const getContainerStyle = () => {
61-
const { customStyles, selectedColor } = _marking;
62-
const styles = [style.current.base];
71+
const {customStyles, selectedColor} = _marking;
72+
const styles = [style.base];
6373
if (isSelected) {
64-
styles.push(style.current.selected);
74+
styles.push(style.selected);
6575
if (selectedColor) {
66-
styles.push({ backgroundColor: selectedColor });
76+
styles.push({backgroundColor: selectedColor});
6777
}
68-
}
69-
else if (isToday) {
70-
styles.push(style.current.today);
78+
} else if (isToday) {
79+
styles.push(style.today);
7180
}
7281
//Custom marking type
7382
if (isCustom && customStyles && customStyles.container) {
@@ -79,22 +88,19 @@ const BasicDay = (props) => {
7988
return styles;
8089
};
8190
const getTextStyle = () => {
82-
const { customStyles, selectedTextColor } = _marking;
83-
const styles = [style.current.text];
91+
const {customStyles, selectedTextColor} = _marking;
92+
const styles = [style.text];
8493
if (isSelected) {
85-
styles.push(style.current.selectedText);
94+
styles.push(style.selectedText);
8695
if (selectedTextColor) {
87-
styles.push({ color: selectedTextColor });
96+
styles.push({color: selectedTextColor});
8897
}
89-
}
90-
else if (isDisabled) {
91-
styles.push(style.current.disabledText);
92-
}
93-
else if (isToday) {
94-
styles.push(style.current.todayText);
95-
}
96-
else if (isInactive) {
97-
styles.push(style.current.inactiveText);
98+
} else if (isDisabled) {
99+
styles.push(style.disabledText);
100+
} else if (isToday) {
101+
styles.push(style.todayText);
102+
} else if (isInactive) {
103+
styles.push(style.inactiveText);
98104
}
99105
// Custom marking type
100106
if (isCustom && customStyles && customStyles.text) {
@@ -109,34 +115,65 @@ const BasicDay = (props) => {
109115
onLongPress?.(dateData);
110116
}, [onLongPress, date]);
111117
const renderMarking = () => {
112-
const { marked, dotColor, dots, periods } = _marking;
118+
const {marked, dotColor, dots, periods} = _marking;
113119
// if marking is not set or is multi dot, return null
114120
// we are doing this as it takes the space in bottom of day making text move upwards.
115121
if (!marked || isMultiDot) return null;
116-
return (<Marking type={markingType} theme={theme} marked={isMultiDot ? true : marked} selected={isSelected} disabled={isDisabled} inactive={isInactive} today={isToday} dotColor={dotColor} dots={dots} periods={periods} />);
122+
return (
123+
<Marking
124+
type={markingType}
125+
theme={theme}
126+
marked={isMultiDot ? true : marked}
127+
selected={isSelected}
128+
disabled={isDisabled}
129+
inactive={isInactive}
130+
today={isToday}
131+
dotColor={dotColor}
132+
dots={dots}
133+
periods={periods}
134+
/>
135+
);
117136
};
118137
const renderText = () => {
119-
return (<Text allowFontScaling={false} style={getTextStyle()} testID={`${testID}.text`}>
120-
{String(children)}
121-
</Text>);
138+
return (
139+
<Text allowFontScaling={false} style={getTextStyle()} testID={`${testID}.text`}>
140+
{String(children)}
141+
</Text>
142+
);
122143
};
123144
const renderContent = () => {
124-
return (<Fragment>
125-
{renderText()}
126-
{renderMarking()}
127-
</Fragment>);
145+
return (
146+
<Fragment>
147+
{renderText()}
148+
{renderMarking()}
149+
</Fragment>
150+
);
128151
};
129152
const renderContainer = () => {
130-
const { activeOpacity } = _marking;
131-
return (<TouchableOpacity testID={testID} style={getContainerStyle()} activeOpacity={activeOpacity} disabled={shouldDisableTouchEvent()} onPress={!shouldDisableTouchEvent() ? _onPress : undefined} onLongPress={!shouldDisableTouchEvent() ? _onLongPress : undefined} accessible accessibilityRole={isDisabled ? undefined : 'button'} accessibilityLabel={accessibilityLabel}>
132-
{isMultiPeriod ? renderText() : renderContent()}
133-
</TouchableOpacity>);
153+
const {activeOpacity} = _marking;
154+
return (
155+
<TouchableOpacity
156+
testID={testID}
157+
style={getContainerStyle()}
158+
activeOpacity={activeOpacity}
159+
disabled={shouldDisableTouchEvent()}
160+
onPress={!shouldDisableTouchEvent() ? _onPress : undefined}
161+
onLongPress={!shouldDisableTouchEvent() ? _onLongPress : undefined}
162+
accessible
163+
accessibilityRole={isDisabled ? undefined : 'button'}
164+
accessibilityLabel={accessibilityLabel}
165+
>
166+
{isMultiPeriod ? renderText() : renderContent()}
167+
</TouchableOpacity>
168+
);
134169
};
135170
const renderPeriodsContainer = () => {
136-
return (<View style={style.current.container}>
137-
{renderContainer()}
138-
{renderMarking()}
139-
</View>);
171+
return (
172+
<View style={style.container}>
173+
{renderContainer()}
174+
{renderMarking()}
175+
</View>
176+
);
140177
};
141178
return isMultiPeriod ? renderPeriodsContainer() : renderContainer();
142179
};

0 commit comments

Comments
 (0)