Merge branch 'wix-master'

Author: Gueoff

.eslintrc.js

@@ -10,15 +10,15 @@ module.exports = {
     describe: true
   },
   extends: ['eslint:recommended'],
-  parser: 'babel-eslint',
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
       jsx: true
     },
     sourceType: 'module'
   },
-  plugins: ['react', 'react-native', 'jest'],
+  plugins: ['react', 'react-native', 'jest', '@typescript-eslint'],
   rules: {
     'react-native/no-inline-styles': 1,
     'linebreak-style': ['error', 'unix'],

.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

@@ -675,11 +675,73 @@
 ### Changed
 - AgendaList - Remove arrow function from 'onScrollToIndexFailed' and omit 'context' passed to SectionList.
 
-## [1.1263.0] - 2021-x-x
+## [1.1263.0] - 2021-6-3
 
 ## Changed
 - Files formatting (PR #1513).
 - ExpandableCalendar demo - improving 'renderItem' example.
 
 ## 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.
+
+
+## [1.1265.0] - 2021-8-23
+
+## Changed
+- Change import to require - solved "Cannot assign to read only property 'exports' of object '#<Object>'" (PR #1553).
+- TS migration for all Calendars components.
+- Upgrading to react-native 0.64.2.
+
+## Added
+- AgendaList - support offset scroll to section (PR #1526).
+- AgendaList - allow passing 'onScrollToIndexFailed' (PR #1594).
+- Day - support 'inactive' state and add 'disableAllTouchEventsForInactiveDays' prop (PR #1596).
+
+## Fixed
+- ExpandableCalendar - 'onDayPress' not called (PR #1584).
+- Fixed issue with 'dateutils' export (PR #1548).
+
+## [1.1266.0] - 2021-8-24
+
+## Changed
+- Disabling Detox e2e tests.
+
+## [1.1267.0] - 2021-10-5
+
+## Fixed
+- CalendarListItem - height issue (PR #1614).
+- README - links for typescript (PR #1611).
+- lodash - change imports to make it tree-shakeable (PR #1613).
+- ExpandableCalendar - 'today' button bug (PR #1627).
+- CalendarHeader - 'renderHeader' updates.
+- Calendar - 'customHeader' ref.
+- CalendarList - fix types.
+
+## Added
+- Calendar - 'allowSelectionOutOfRange' prop (PR #1618).
+- AgendaList - 'scrollToNextEvent' prop (PR #1636).
+- Number localization (PR #1369).
+- TS types release.
+
+## Changed
+- Use modern export keyword (PR #1615).
+- Remove global and move types to types.ts.

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,25 +332,25 @@ 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]}
 />
 ```
 
 #### Advanced styling
 
-If you want to have complete control over the calendar styles you can do it by overriding default `style.js` files. For example, if you want to override `<CalendarHeader/>` style first you have to find stylesheet id for this file:
+If you want to have complete control over the calendar styles you can do it by overriding default `style.ts` files. For example, if you want to override `<CalendarHeader/>` style first you have to find stylesheet id for this file:
 
-https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.js#L4
+https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.ts#L60
 
 In this case it is `stylesheet.calendar.header`. Next you can add overriding stylesheet to your theme with this id.
 
-https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.js#L56
+https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx#L142
 
 ```javascript
 theme={{
@@ -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.

_editorconfig

@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf

android/app/build.gradle

@@ -16,9 +16,12 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get("enableHermes", false)
 
 android {
+    ndkVersion rootProject.ext.ndkVersion
+
     compileSdkVersion rootProject.ext.compileSdkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
 
+
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
         targetCompatibility JavaVersion.VERSION_1_8
@@ -65,11 +68,12 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
         }
     }

android/app/src/debug/AndroidManifest.xml

@@ -4,5 +4,10 @@
 
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:targetApi="28"
+        tools:ignore="GoogleAppIndexingWarning">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>

android/app/src/main/AndroidManifest.xml

@@ -21,7 +21,5 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-
 </manifest>

android/app/src/main/res/values/styles.xml

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
     </style>