Skip to content

Commit a7ffe04

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-calendars into release
2 parents 5a21e3d + 8d924e7 commit a7ffe04

File tree

21 files changed

+8332
-53
lines changed

21 files changed

+8332
-53
lines changed

‎.buildkite/pipeline.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ steps:
2727
- label: "Build"
2828
command: |
2929
nvm install
30-
npm install
31-
npm run test
32-
npm run build:ts
30+
yarn
31+
yarn test
32+
yarn build:ts
3333
if [[ $BUILDKITE_PULL_REQUEST == 'false' ]];then
34-
npm run release
34+
yarn release
3535
fi

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
node_modules
22
npm-debug.log
33
.idea
4-
yarn.lock
54
.vscode
65
package-lock.json
76

‎.node-version

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
18
1+
20

‎.yarnrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
--registry "https://registry.npmjs.org/"

‎README.md

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
## A declarative cross-platform React Native calendar component for iOS and Android.
66

77
[![Version](https://img.shields.io/npm/v/react-native-calendars.svg)](https://www.npmjs.com/package/react-native-calendars)
8-
[![Build Status](https://travis-ci.org/wix/react-native-calendars.svg?branch=master)](https://travis-ci.org/wix/react-native-calendars)
9-
8+
[![Build status](https://badge.buildkite.com/1a911fa39db2518a615b73f3dc18ec0938a66403f2ad66f79b.svg)](https://buildkite.com/wix-mobile-oss/react-native-calendars)
109
<br>
1110

1211
This module includes information on how to use this customizable **React Native** calendar component.
@@ -40,7 +39,7 @@ $ git clone [email protected]:wix/react-native-calendars.git
4039
4140
$ cd react-native-calendars
4241
43-
$ npm install
42+
$ yarn install
4443
4544
$ cd ios && pod install && cd ..
4645
@@ -57,14 +56,6 @@ Here's how to get started with react-native-calendars in your React Native proje
5756

5857
### Install the package:
5958

60-
Using `npm`:
61-
62-
```
63-
$ npm install --save react-native-calendars
64-
```
65-
66-
Using `Yarn`:
67-
6859
```
6960
$ yarn add react-native-calendars
7061
```
@@ -197,13 +188,6 @@ export default App;
197188
### Adding a global theme to the calendar:
198189

199190
```javascript
200-
import React, { useState } from 'react';
201-
import { Calendar, LocaleConfig } from 'react-native-calendars';
202-
203-
const App = () => {
204-
const [selected, setSelected] = useState('');
205-
206-
return (
207191
<Calendar
208192
style={{
209193
borderWidth: 1,
@@ -218,7 +202,9 @@ const App = () => {
218202
selectedDayTextColor: '#ffffff',
219203
todayTextColor: '#00adf5',
220204
dayTextColor: '#2d4150',
221-
textDisabledColor: '#d9e
205+
textDisabledColor: '#dd99ee'
206+
}}
207+
</Calendar>
222208
```
223209

224210
## Customized Calendar Examples
@@ -282,7 +268,7 @@ We welcome contributions to react-native-calendars.
282268

283269
If you have an idea for a new feature or have discovered a bug, please open an issue.
284270

285-
Please `npm run test` and `npm run lint` before pushing changes.
271+
Please `yarn test` and `yarn lint` before pushing changes.
286272

287273
Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
288274

‎example/src/mocks/agendaItems.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function getPastDate(numberOfDays: number) {
2828
export const agendaItems = [
2929
{
3030
title: dates[0],
31-
data: [{hour: '12am', duration: '1h', title: 'First Yoga'}]
31+
data: [{hour: '12am', duration: '1h', title: 'First Yoga'}, {hour: '9am', duration: '1h', title: 'Long Yoga', itemCustomHeightType: 'LongEvent'}],
3232
},
3333
{
3434
title: dates[1],
@@ -63,13 +63,13 @@ export const agendaItems = [
6363
]
6464
},
6565
{
66-
title: dates[6],
66+
title: dates[6],
6767
data: [
6868
{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}
6969
]
7070
},
7171
{
72-
title: dates[7],
72+
title: dates[7],
7373
data: [{}]
7474
},
7575
{
@@ -90,7 +90,7 @@ export const agendaItems = [
9090
]
9191
},
9292
{
93-
title: dates[10],
93+
title: dates[10],
9494
data: [
9595
{hour: '12am', duration: '1h', title: 'Last Yoga'}
9696
]
@@ -104,13 +104,13 @@ export const agendaItems = [
104104
]
105105
},
106106
{
107-
title: dates[12],
107+
title: dates[12],
108108
data: [
109109
{hour: '12am', duration: '1h', title: 'Last Yoga'}
110110
]
111111
},
112112
{
113-
title: dates[13],
113+
title: dates[13],
114114
data: [
115115
{hour: '12am', duration: '1h', title: 'Last Yoga'}
116116
]

‎example/src/screens/agendaInfiniteListScreen.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, {useRef, useCallback} from 'react';
2+
import {StyleSheet, View} from 'react-native';
3+
import {ExpandableCalendar, AgendaList, CalendarProvider, WeekCalendar} from 'react-native-calendars';
4+
import testIDs from '../testIDs';
5+
import {agendaItems, getMarkedDates} from '../mocks/agendaItems';
6+
import AgendaItem from '../mocks/AgendaItem';
7+
import {getTheme, themeColor, lightThemeColor} from '../mocks/theme';
8+
9+
const leftArrowIcon = require('../img/previous.png');
10+
const rightArrowIcon = require('../img/next.png');
11+
const ITEMS: any[] = agendaItems;
12+
13+
interface Props {
14+
weekView?: boolean;
15+
}
16+
17+
const AgendaInfiniteListScreen = (props: Props) => {
18+
const {weekView} = props;
19+
const marked = useRef(getMarkedDates());
20+
const theme = useRef(getTheme());
21+
const todayBtnTheme = useRef({
22+
todayButtonTextColor: themeColor
23+
});
24+
25+
const renderItem = useCallback(({item}: any) => {
26+
const isLongItem = item.itemCustomHeightType === 'LongEvent';
27+
return <View style={{paddingTop: isLongItem ? 40 : 0}}><AgendaItem item={item}/></View>;
28+
}, []);
29+
30+
return (
31+
<CalendarProvider
32+
date={ITEMS[1]?.title}
33+
showTodayButton
34+
theme={todayBtnTheme.current}
35+
>
36+
{weekView ? (
37+
<WeekCalendar testID={testIDs.weekCalendar.CONTAINER} firstDay={1} markedDates={marked.current}/>
38+
) : (
39+
<ExpandableCalendar
40+
testID={testIDs.expandableCalendar.CONTAINER}
41+
theme={theme.current}
42+
firstDay={1}
43+
markedDates={marked.current}
44+
leftArrowImageSource={leftArrowIcon}
45+
rightArrowImageSource={rightArrowIcon}
46+
/>
47+
)}
48+
<AgendaList
49+
sections={ITEMS}
50+
renderItem={renderItem}
51+
sectionStyle={styles.section}
52+
infiniteListProps={
53+
{
54+
itemHeight: 80,
55+
titleHeight: 50,
56+
itemHeightByType: {
57+
LongEvent: 120,
58+
}
59+
}
60+
}
61+
/>
62+
</CalendarProvider>
63+
);
64+
};
65+
66+
export default AgendaInfiniteListScreen;
67+
68+
const styles = StyleSheet.create({
69+
calendar: {
70+
paddingLeft: 20,
71+
paddingRight: 20
72+
},
73+
header: {
74+
backgroundColor: 'lightgrey'
75+
},
76+
section: {
77+
backgroundColor: lightThemeColor,
78+
color: 'grey',
79+
textTransform: 'capitalize'
80+
}
81+
});

‎example/src/screens/calendarScreen.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,8 @@ const CalendarScreen = () => {
205205
textColor: 'white',
206206
customContainerStyle: {
207207
borderTopRightRadius: 5,
208-
borderBottomRightRadius: 5
208+
borderBottomRightRadius: 5,
209+
backgroundColor: "green"
209210
}
210211
},
211212
[getDate(25)]: {inactive: true, disableTouchEvent: true}

‎example/src/screens/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MenuScreen from './menuScreen';
44
import CalendarScreen from './calendarScreen';
55
import CalendarPlaygroundScreen from './calendarPlaygroundScreen';
66
import AgendaScreen from './agendaScreen';
7+
import AgendaInfiniteListScreen from './agendaInfiniteListScreen';
78
import CalendarsListScreen from './calendarListScreen';
89
import NewCalendarsListScreen from './newCalendarListScreen';
910
import ExpandableCalendarScreen from './expandableCalendarScreen';
@@ -16,6 +17,7 @@ export function registerScreens() {
1617
Navigation.registerComponent('CalendarScreen', () => CalendarScreen);
1718
Navigation.registerComponent('CalendarPlaygroundScreen', () => CalendarPlaygroundScreen);
1819
Navigation.registerComponent('AgendaScreen', () => AgendaScreen);
20+
Navigation.registerComponent('AgendaInfiniteListScreen', () => AgendaInfiniteListScreen);
1921
Navigation.registerComponent('CalendarListScreen', () => CalendarsListScreen);
2022
Navigation.registerComponent('NewCalendarListScreen', () => NewCalendarsListScreen);
2123
Navigation.registerComponent('ExpandableCalendarScreen', () => ExpandableCalendarScreen);

‎example/src/screens/menuScreen.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface Props {
1414
const MenuScreen = (props: Props) => {
1515
const {componentId} = props;
1616
const [forceRTL, setForceRTL] = useState(false);
17-
17+
1818
const toggleRTL = (value) => {
1919
I18nManager.forceRTL(value);
2020
setForceRTL(value);
@@ -67,6 +67,7 @@ const MenuScreen = (props: Props) => {
6767
{renderEntry(testIDs.menu.HORIZONTAL_LIST, 'Horizontal Calendar List', 'CalendarListScreen', {horizontalView: true})}
6868
{renderEntry(testIDs.menu.HORIZONTAL_LIST, 'NEW Calendar List', 'NewCalendarListScreen')}
6969
{renderEntry(testIDs.menu.AGENDA, 'Agenda', 'AgendaScreen')}
70+
{renderEntry(testIDs.menu.AGENDA_INFINITE, 'Agenda Infinite List', 'AgendaInfiniteListScreen')}
7071
{renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendarScreen')}
7172
{renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendarScreen')}
7273
{renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendarScreen', {weekView: true})}

0 commit comments

Comments
 (0)