Merge pull request #485 from hypeserver/prepare-release-1.2.0

Release 1.2.0

Author: kamyar

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @burakcan @mkg0 @kamyar

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+## 1.2.0
+
+### Added
+- `dayContentRenderer` prop: You can control how each date cell is rendered be passing this function that excepts a date and returns what need to be rendered (#242, #384, #476)
+
+
+## 1.1.4
+
+### Fixed
+- #356: Use babel-plugin-date-fns to reduce bundle size
+- #373, #415, #416: Add missing aria labels
+
+
 ## 1.0.0
 ### Changed
 - BREAKING: `date-fns` is now loaded as a peerDependency. You can use this plugin with your own project's `date-fns` version. However if you want to keep using date-fns versions older than 2.0.0, (minimum version is 2.0.0-alpha.1) you need to pass the following props to your component. ([See the reason here](https://blog.date-fns.org/post/unicode-tokens-in-date-fns-v2-sreatyki91jg/), also see [this table](https://date-fns.org/docs/format))

README.md

@@ -188,9 +188,17 @@ If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHe
 ```
 
 
-TODOs
+### Release workflow
+- Merge everything that needs to be in the release to master
+- Open a new release PR than:
+  - bumps version to appropriate one <new_version>
+  - Update CHANGELOG.md
+- Make sure the demo and important features are working as expected
+- After merging, tag the master commit with `release/<new_version>` and let Github Action handle publishing
+- = Profit 🙈
+
+### TODOs
 
 - Make mobile friendly (integrate tap and swipe actions)
-- Add complex booking customization example with exposed dayRenderer prop
 - Add tests
 - Improve documentation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-date-range",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A React component for choosing dates and date ranges.",
   "main": "dist/index.js",
   "scripts": {

src/components/DateRangePicker/README.md

@@ -91,25 +91,25 @@ const [state, setState] = useState({
 import { addDays } from 'date-fns';
 import { useState } from 'react';
 
-const [state, setState] = useState([
-  {
+const [state, setState] = useState({
+  selection1: {
     startDate: addDays(new Date(), -6),
     endDate: new Date(),
     key: 'selection1'
   },
-  {
+  selection2: {
     startDate: addDays(new Date(), 1),
     endDate: addDays(new Date(), 7),
     key: 'selection2'
   }
-]);
+});
 
 <DateRangePicker
-  onChange={item => setState([item.selection])}
+  onChange={item => setState({ ...state, ...item })}
   showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
-  ranges={state}
+  ranges={[state.selection1, state.selection2]}
   direction="horizontal"
   ariaLabels={{
     dateInput: {
@@ -131,18 +131,18 @@ Show orange dot only for weekend
 import { addDays, format, isWeekend } from 'date-fns';
 import { useState } from 'react';
 
-const [state, setState] = useState([
-  {
+const [state, setState] = useState({
+  selection1: {
     startDate: addDays(new Date(), -6),
     endDate: new Date(),
     key: 'selection1'
   },
-  {
+  selection2: {
     startDate: addDays(new Date(), 1),
     endDate: addDays(new Date(), 7),
     key: 'selection2'
   }
-]);
+});
 
 function customDayContent(day) {
   extraDot = null;
@@ -170,11 +170,11 @@ function customDayContent(day) {
 }
 
 <DateRangePicker
-  onChange={item => setState([item.selection])}
+  onChange={item => setState({ ...state, ...item })}
   showSelectionPreview={true}
   moveRangeOnFirstSelection={false}
   months={2}
-  ranges={state}
+  ranges={[state.selection1, state.selection2]}
   direction="horizontal"
   dayContentRenderer={customDayContent}
   ariaLabels={{