Merge branch 'master' of github.com:wix/react-native-calendars into r…

…elease

.npmignore

@@ -256,3 +256,9 @@ demo/
 # eslint-rules/
 scripts/
 
+# Typescript
+# ignore the .ts files
+*.ts
+*.tsx
+# include the .d.ts files
+!*.d.ts 

CHANGELOG.md

@@ -684,3 +684,21 @@
 ## Fixed
 - Day - passed props for custom 'dayComponent'.
 - WeekCalendar - update marking on disabled day press.
+
+## [1.1264.0] - 2021-6-27
+
+## Added
+- WeekCalendar - adding presenter and unit tests (PR #1499).
+- CalendarContextProvider - adding presenter and unit tests (PR #1503).
+- Release snapshot versions (PR #1536 and PR #1538).
+- Typescript setup and DayBasic migration to TS (PR #1539).
+- Agenda - 'showClosingKnob' prop to use knob for closing the calendar (PR #1430).
+
+## Changed
+- Updating Cocoapods version to 1.10.1.
+
+## Fixed
+- Timeline - fix event height and top calculations (PR #1498).
+- TS - Fix build process (PR #1545).
+- ExpandableCalendar - fix arrow press callbacks (PR #1489).
+- README & ISSUE_TEMPLATE - edit.

ISSUE_TEMPLATE.md

@@ -2,7 +2,7 @@ Please make our job easier by filling this template out to completion. If you're
 
 ## Description
 
-1-2 sentences describing the problem you're having or the feature you'd like to request
+1-2 sentences describing the problem you're having or the feature you'd like to request.
 
 ## Expected Behavior
 
@@ -27,10 +27,14 @@ Please run these commands in the project folder and fill in their results:
 
 Also specify:
 
-1. Phone/emulator/simulator & version:
+1. Device/emulator/simulator & OS version:
 
 ## Reproducible Demo
 
 Please provide a minimized reproducible demonstration of the problem you're reporting.
 
 Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.
+
+## Screenshots
+
+Screenshots or gifs of the issue and the suggested fix will help us move faster with the review process.

README.md

@@ -36,7 +36,7 @@ All parameters for components are optional. By default the month of current loca
 
 Event handler callbacks are called with `calendar objects` like this:
 
-```javasctipt
+```javascript
 {
   day: 1,      // day of month (1-31)
   month: 1,    // month of year (1-12)
@@ -46,7 +46,7 @@ Event handler callbacks are called with `calendar objects` like this:
 }
 ```
 
-Parameters that require date types accept `YYYY-MM-DD` formated `date-strings`, JavaScript date objects, `calendar objects` and `UTC timestamps`.
+Parameters that require date types accept `YYYY-MM-DD` formatted `date-strings`, JavaScript date objects, `calendar objects` and `UTC timestamps`.
 
 Calendars can be localized by adding custom locales to `LocaleConfig` object:
 
@@ -93,10 +93,10 @@ LocaleConfig.defaultLocale = 'fr';
   renderArrow={(direction) => (<Arrow/>)}
   // Do not show days of other months in month page. Default = false
   hideExtraDays={true}
-  // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
+  // If hideArrows = false and hideExtraDays = false do not switch month when tapping on greyed out
   // day from another month that is visible in calendar page. Default = false
   disableMonthChange={true}
-  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday
   firstDay={1}
   // Hide day names. Default = false
   hideDayNames={true}
@@ -112,7 +112,7 @@ LocaleConfig.defaultLocale = 'fr';
   disableArrowRight={true}
   // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
   disableAllTouchEventsForDisabledDays={true}
-  // Replace default month and year title with custom one. the function receive a date as parameter.
+  // Replace default month and year title with custom one. the function receive a date as parameter
   renderHeader={(date) => {/*Return JSX*/}}
   // Enable the option to swipe between months. Default = false
   enableSwipeMonths={true}
@@ -151,20 +151,20 @@ Multi-Dot marking
 </kbd>
 <p></p>
 
-Use `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop. 
+Use `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop.
 The property `color` is mandatory while `key` and `selectedColor` are optional. If key is omitted then the array index is used as key. If `selectedColor` is omitted then `color` will be used for selected dates.
 
 ```javascript
-const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
-const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
-const workout = {key:'workout', color: 'green'};
+const vacation = {key: 'vacation', color: 'red', selectedDotColor: 'blue'};
+const massage = {key: 'massage', color: 'blue', selectedDotColor: 'blue'};
+const workout = {key: 'workout', color: 'green'};
 
 <Calendar
+  markingType={'multi-dot'}
   markedDates={{
     '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
     '2017-10-26': {dots: [massage, workout], disabled: true}
   }}
-  markingType={'multi-dot'}
 />
 ```
 
@@ -181,15 +181,13 @@ Period marking
 
 ```javascript
 <Calendar
-  // Collection of dates that have to be colored in a special way. Default = {}
+  markingType={'period'}
   markedDates={{
     '2012-05-20': {textColor: 'green'},
     '2012-05-22': {startingDay: true, color: 'green'},
     '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
     '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
   }}
-  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
-  markingType={'period'}
 />
 ```
 
@@ -204,6 +202,7 @@ Multi-period marking
 
 ```javascript
 <Calendar
+  markingType='multi-period'
   markedDates={{
     '2017-12-14': {
       periods: [
@@ -220,8 +219,6 @@ Multi-period marking
       ]
     }
   }}
-  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
-  markingType='multi-period'
 />
 ```
 
@@ -234,7 +231,6 @@ Custom marking allows you to customize each marker with custom styles.
 
 ```javascript
 <Calendar
-  // Date marking style [simple/period/multi-dot/single]. Default = 'simple'
   markingType={'custom'}
   markedDates={{
     '2018-03-28': {
@@ -274,7 +270,7 @@ Custom marking allows you to customize each marker with custom styles.
     '2012-05-22': {color: '#70d7c7', textColor: 'white'},
     '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
     '2012-05-24': {color: '#70d7c7', textColor: 'white'},
-    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'},
+    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'}
   }}
 />
 ```
@@ -336,13 +332,13 @@ The loading indicator next to the month name will be displayed if `<Calendar/>`
 #### Customize days titles with disabled styling
 ```javascript
 <Calendar
-    theme={{
-     textSectionTitleDisabledColor: '#d9e1e8'
-    }}
-    disabledDaysIndexes={[0, 6]}
-    markedDates={{
+  theme={{
+    textSectionTitleDisabledColor: '#d9e1e8'
+  }}
+  markedDates={{
     ...this.getDisabledDates('2012-05-01', '2012-05-30', [0, 6])
-    }}
+  }}
+  disabledDaysIndexes={[0, 6]}
 />
 ```
 
@@ -493,9 +489,9 @@ An advanced `Agenda` component that can display interactive listings for calenda
   // Callback that fires when the calendar is opened or closed
   onCalendarToggled={(calendarOpened) => {console.log(calendarOpened)}}
   // Callback that gets called on day press
-  onDayPress={(day)=>{console.log('day pressed')}}
+  onDayPress={(day) => {console.log('day pressed')}}
   // Callback that gets called when day changes while scrolling agenda list
-  onDayChange={(day)=>{console.log('day changed')}}
+  onDayChange={(day) => {console.log('day changed')}}
   // Initially selected day
   selected={'2012-05-16'}
   // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
@@ -508,7 +504,7 @@ An advanced `Agenda` component that can display interactive listings for calenda
   futureScrollRange={50}
   // Specify how each item should be rendered in agenda
   renderItem={(item, firstItemInDay) => {return (<View />);}}
-  // Specify how each date should be rendered. day can be undefined if the item is not first in that day.
+  // Specify how each date should be rendered. day can be undefined if the item is not first in that day
   renderDay={(day, item) => {return (<View />);}}
   // Specify how empty date content with no items should be rendered
   renderEmptyDate={() => {return (<View />);}}
@@ -520,6 +516,8 @@ An advanced `Agenda` component that can display interactive listings for calenda
   rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
   // Hide knob button. Default = false
   hideKnob={true}
+  // When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false
+  showClosingKnob={false}
   // By default, agenda dates are marked if they have at least one item, but you can override this if needed
   markedDates={{
     '2012-05-16': {selected: true, marked: true},
@@ -528,11 +526,11 @@ An advanced `Agenda` component that can display interactive listings for calenda
   }}
   // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false
   disabledByDefault={true}
-  // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
+  // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly
   onRefresh={() => console.log('refreshing...')}
   // Set this true while waiting for new data from a refresh
   refreshing={false}
-  // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView.
+  // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView
   refreshControl={null}
   // Agenda theme
   theme={{
@@ -556,6 +554,8 @@ See also the list of [contributors](https://github.com/wix/react-native-calendar
 
 ## Contributing
 
-Pull requests are most welcome! 
+Pull requests are most welcome!
 Please `npm run test` and `npm run lint` before push.
-Don't forget to add a **title** and a **description** that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are very helpful.
+Don't forget to add a **title** and a **description** that explain the issue you're trying to solve and your suggested solution. 
+Screenshots and gifs are VERY helpful.
+Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.

example/src/screens/agenda.js

@@ -23,6 +23,7 @@ export default class AgendaScreen extends Component {
         renderItem={this.renderItem.bind(this)}
         renderEmptyDate={this.renderEmptyDate.bind(this)}
         rowHasChanged={this.rowHasChanged.bind(this)}
+        showClosingKnob={true}
         // markingType={'period'}
         // markedDates={{
         //    '2017-05-08': {textColor: '#43515c'},

ios/Podfile.lock

@@ -349,11 +349,11 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
-  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -379,4 +379,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: a49123e8ee98a70297a33fb5ca1c3b1b1b871165
 
-COCOAPODS: 1.10.0
+COCOAPODS: 1.10.1

package.json

@@ -5,6 +5,7 @@
   "description": "React Native Calendar Components",
   "scripts": {
     "build": "xcodebuild -project ios/CalendarsExample.xcodeproj build",
+    "build:ts": "tsc",
     "e2e": "node ./scripts/test-e2e.js --release",
     "test": "npm run lint && npm run unit && npm run e2e",
     "unit": "jest",
@@ -39,6 +40,8 @@
     "@babel/core": "^7.12.9",
     "@babel/eslint-parser": "^7.13.4",
     "@babel/runtime": "^7.12.5",
+    "@types/lodash": "^4.14.170",
+    "@types/react-native": "^0.63.52",
     "@welldone-software/why-did-you-render": "^6.0.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
@@ -61,7 +64,8 @@
     "react-native-navigation": "^6.7.1",
     "react-test-renderer": "^17.0.1",
     "semver": "5.x.x",
-    "shell-utils": "1.x.x"
+    "shell-utils": "1.x.x",
+    "typescript": "^4.3.3"
   },
   "optionalDependencies": {
     "moment": "^2.24.0"

scripts/release.js

@@ -5,14 +5,15 @@ const semver = require('semver');
 const exec = require('shell-utils').exec;
 
 const ONLY_ON_BRANCH = 'origin/release';
-const VERSION_TAG = 'latest';
+const isSnapshotBuild = process.env.RELEASE_SNAPSHOT_VERSION === 'true';
+const VERSION_TAG = isSnapshotBuild ? 'snapshot' : 'latest';
 const VERSION_INC = 'minor';
 
 function run() {
   if (!validateEnv()) {
     return;
   }
-  
+
   setupGit();
   createNpmRc();
   versionTagAndPublish();
@@ -28,7 +29,7 @@ function validateEnv() {
     return false;
   }
 
-  if (process.env.GIT_BRANCH !== ONLY_ON_BRANCH) {
+  if (process.env.GIT_BRANCH !== ONLY_ON_BRANCH && !isSnapshotBuild) {
     console.log(`not publishing on branch ${process.env.GIT_BRANCH}`);
     return false;
   }
@@ -42,7 +43,7 @@ function setupGit() {
   exec.execSyncSilent(`git config --global user.name "${process.env.GIT_USER}"`);
   const remoteUrl = new RegExp('https?://(\\S+)').exec(exec.execSyncRead('git remote -v'))[1];
   exec.execSyncSilent(`git remote add deploy "https://${process.env.GIT_USER}:${process.env.GIT_TOKEN}@${remoteUrl}"`);
-  exec.execSync(`git checkout ${ONLY_ON_BRANCH}`);
+  exec.execSync(`git checkout ${process.env.GIT_BRANCH}`);
 }
 
 function createNpmRc() {
@@ -61,12 +62,18 @@ function versionTagAndPublish() {
   const currentPublished = findCurrentPublishedVersion();
   console.log(`current published version: ${currentPublished}`);
 
-  const version = semver.gt(packageVersion, currentPublished) ? packageVersion : semver.inc(currentPublished, VERSION_INC);
+  let version;
+  if (isSnapshotBuild) {
+    version = `${currentPublished}-snapshot.${process.env.BUILD_ID}`;
+  } else {
+    version = semver.gt(packageVersion, currentPublished) ? packageVersion : semver.inc(currentPublished, VERSION_INC);
+  }
+
   tryPublishAndTag(version);
 }
 
 function findCurrentPublishedVersion() {
-  return exec.execSyncRead(`npm view ${process.env.npm_package_name} dist-tags.${VERSION_TAG}`);
+  return exec.execSyncRead(`npm view ${process.env.npm_package_name} dist-tags.latest`);
 }
 
 function tryPublishAndTag(version) {