Skip to content

Commit 354c18a

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-calendars into release
2 parents e6e3f72 + 3a61838 commit 354c18a

File tree

7 files changed

+12177
-8661
lines changed

7 files changed

+12177
-8661
lines changed

‎example/src/screens/expandableCalendarScreen.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,25 @@ const ExpandableCalendarScreen = (props: Props) => {
5252
(date?: XDate) => {
5353
const rotationInDegrees = rotation.current.interpolate({
5454
inputRange: [0, 1],
55-
outputRange: ['0deg', '180deg']
55+
outputRange: ['0deg', '-180deg']
5656
});
5757
return (
5858
<TouchableOpacity style={styles.header} onPress={toggleCalendarExpansion}>
5959
<Text style={styles.headerTitle}>{date?.toString('MMMM yyyy')}</Text>
60-
<Animated.Image source={CHEVRON} style={{transform: [{rotate: '-90deg'}, {rotate: rotationInDegrees}]}}/>
60+
<Animated.Image source={CHEVRON} style={{transform: [{rotate: '90deg'}, {rotate: rotationInDegrees}]}}/>
6161
</TouchableOpacity>
6262
);
6363
},
6464
[toggleCalendarExpansion]
6565
);
6666

67+
const onCalendarToggled = useCallback(
68+
(isOpen: boolean) => {
69+
rotation.current.setValue(isOpen ? 1 : 0);
70+
},
71+
[rotation]
72+
);
73+
6774
return (
6875
<CalendarProvider
6976
date={ITEMS[1]?.title}
@@ -82,6 +89,7 @@ const ExpandableCalendarScreen = (props: Props) => {
8289
testID={testIDs.expandableCalendar.CONTAINER}
8390
renderHeader={renderHeader}
8491
ref={calendarRef}
92+
onCalendarToggled={onCalendarToggled}
8593
// horizontal={false}
8694
// hideArrows
8795
// disablePan

‎src/calendar-list/index.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import findIndex from 'lodash/findIndex';
22
import PropTypes from 'prop-types';
33
import XDate from 'xdate';
44
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
5-
import {FlatList, FlatListProps, View, ViewStyle} from 'react-native';
5+
import {AccessibilityInfo, FlatList, FlatListProps, View, ViewStyle} from 'react-native';
6+
67
import {extractCalendarProps, extractHeaderProps} from '../componentUpdater';
78
import {parseDate, toMarkingFormat, xdateToData} from '../interface';
89
import {page, sameDate, sameMonth} from '../dateutils';
@@ -100,7 +101,9 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
100101
contentContainerStyle,
101102
onEndReachedThreshold,
102103
onEndReached,
103-
onHeaderLayout
104+
onHeaderLayout,
105+
accessibilityElementsHidden,
106+
importantForAccessibility
104107
} = props;
105108

106109
const calendarProps = extractCalendarProps(props);
@@ -164,6 +167,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
164167
const data = xdateToData(currMont);
165168
onMonthChange?.(data);
166169
onVisibleMonthsChange?.([data]);
170+
AccessibilityInfo.announceForAccessibility(currMont.toString('MMMM yyyy'));
167171
}
168172
}, [currentMonth]);
169173

@@ -271,9 +275,9 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
271275
style={staticHeaderStyle}
272276
month={currentMonth}
273277
addMonth={addMonth}
274-
accessibilityElementsHidden={true} // iOS
275-
importantForAccessibility={'no-hide-descendants'} // Android
276278
onHeaderLayout={onHeaderLayoutToPass}
279+
accessibilityElementsHidden={accessibilityElementsHidden} // iOS
280+
importantForAccessibility={importantForAccessibility} // Android
277281
/>
278282
);
279283
}

‎src/calendar/header/index.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -231,11 +231,11 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
231231
}
232232

233233
const isLeft = direction === 'left';
234-
const arrowId = isLeft ? 'leftArrow' : 'rightArrow';
234+
const arrowDirection = isLeft ? 'left' : 'right';
235+
const arrowId = `${arrowDirection}Arrow`;
235236
const shouldDisable = isLeft ? disableArrowLeft : disableArrowRight;
236237
const onPress = !shouldDisable ? isLeft ? onPressLeft : onPressRight : undefined;
237238
const imageSource = isLeft ? require('../img/previous.png') : require('../img/next.png');
238-
const renderArrowDirection = isLeft ? 'left' : 'right';
239239

240240
return (
241241
<TouchableOpacity
@@ -244,12 +244,9 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
244244
style={style.current.arrow}
245245
hitSlop={hitSlop}
246246
testID={`${testID}.${arrowId}`}
247+
importantForAccessibility={'no-hide-descendants'}
247248
>
248-
{renderArrow ? (
249-
renderArrow(renderArrowDirection)
250-
) : (
251-
<Image source={imageSource} style={shouldDisable ? style.current.disabledArrowImage : style.current.arrowImage}/>
252-
)}
249+
{renderArrow ? renderArrow(arrowDirection) : <Image source={imageSource} style={shouldDisable ? style.current.disabledArrowImage : style.current.arrowImage}/>}
253250
</TouchableOpacity>
254251
);
255252
};
@@ -275,6 +272,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
275272
<View
276273
style={dayNamesStyle}
277274
testID={`${testID}.dayNames`}
275+
importantForAccessibility={'no-hide-descendants'}
278276
>
279277
{renderWeekNumbersSpace()}
280278
{renderWeekDays}
@@ -297,7 +295,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
297295
>
298296
<View style={headerStyle}>
299297
{_renderArrow('left')}
300-
<View style={style.current.headerContainer}>
298+
<View style={style.current.headerContainer} importantForAccessibility={'no-hide-descendants'}>
301299
{_renderHeader()}
302300
{renderIndicator()}
303301
</View>

‎src/calendar/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
22
import XDate from 'xdate';
33
import isEmpty from 'lodash/isEmpty';
44
import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
5-
import {View, ViewStyle, StyleProp} from 'react-native';
5+
import {AccessibilityInfo, View, ViewStyle, StyleProp} from 'react-native';
66
// @ts-expect-error
77
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
88
import constants from '../commons/constants';
@@ -108,6 +108,7 @@ const Calendar = (props: CalendarProps & ContextProp) => {
108108
const _currentMonth = currentMonth.clone();
109109
onMonthChange?.(xdateToData(_currentMonth));
110110
onVisibleMonthsChange?.([xdateToData(_currentMonth)]);
111+
AccessibilityInfo.announceForAccessibility(_currentMonth.toString('MMMM yyyy'));
111112
}, [currentMonth]);
112113

113114
const updateMonth = useCallback((newMonth: XDate) => {

‎src/expandableCalendar/index.tsx

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -398,27 +398,25 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
398398
/** Animated */
399399

400400
const bounceToPosition = (toValue = 0) => {
401-
if (!disablePan) {
402-
const threshold = isOpen ? openHeight.current - closeThreshold : closedHeight + openThreshold;
403-
let _isOpen = _height.current >= threshold;
404-
const newValue = _isOpen ? openHeight.current : closedHeight;
405-
406-
deltaY.setValue(_height.current); // set the start position for the animated value
407-
_height.current = toValue || newValue;
408-
_isOpen = _height.current >= threshold; // re-check after _height.current was set
409-
410-
resetWeekCalendarOpacity(_isOpen);
411-
Animated.spring(deltaY, {
412-
toValue: _height.current,
413-
speed: SPEED,
414-
bounciness: BOUNCINESS,
415-
useNativeDriver: false
416-
}).start(() => {
417-
onCalendarToggled?.(_isOpen);
418-
setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
419-
});
420-
toggleAnimatedHeader(_isOpen);
421-
}
401+
const threshold = isOpen ? openHeight.current - closeThreshold : closedHeight + openThreshold;
402+
let _isOpen = _height.current >= threshold;
403+
const newValue = _isOpen ? openHeight.current : closedHeight;
404+
405+
deltaY.setValue(_height.current); // set the start position for the animated value
406+
_height.current = toValue || newValue;
407+
_isOpen = _height.current >= threshold; // re-check after _height.current was set
408+
409+
resetWeekCalendarOpacity(_isOpen);
410+
Animated.spring(deltaY, {
411+
toValue: _height.current,
412+
speed: SPEED,
413+
bounciness: BOUNCINESS,
414+
useNativeDriver: false
415+
}).start(() => {
416+
onCalendarToggled?.(_isOpen);
417+
setPosition(() => _height.current === closedHeight ? Positions.CLOSED : Positions.OPEN);
418+
});
419+
toggleAnimatedHeader(_isOpen);
422420
};
423421

424422
const resetWeekCalendarOpacity = async (isOpen: boolean) => {
@@ -476,7 +474,7 @@ const ExpandableCalendar = forwardRef<ExpandableCalendarRef, ExpandableCalendarP
476474
if (numberOfDaysCondition) {
477475
setDate?.(value.dateString, UpdateSources.DAY_PRESS);
478476
}
479-
if (closeOnDayPress) {
477+
if (closeOnDayPress && !disablePan) {
480478
closeCalendar();
481479
}
482480
onDayPress?.(value);

‎src/expandableCalendar/style.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,6 @@ export default function styleConstructor(theme: Theme = {}) {
133133
alignItems: appStyle.todayButtonPosition === 'right' ? 'flex-end' : 'flex-start',
134134
position: 'absolute',
135135
left: 20,
136-
right: 20,
137136
bottom: 0
138137
},
139138
todayButton: {

0 commit comments

Comments
 (0)