From 840f63eb9a7c54f7c2722836a23b73dc73ada1af Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Thu, 4 Nov 2021 10:46:54 +0100 Subject: [PATCH 01/14] feat: add `label` property to `range` object in `defined range` component --- src/components/DefinedRange/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/DefinedRange/index.js b/src/components/DefinedRange/index.js index 10ca9f960..b637e53ee 100644 --- a/src/components/DefinedRange/index.js +++ b/src/components/DefinedRange/index.js @@ -17,7 +17,12 @@ class DefinedRange extends Component { handleRangeChange = range => { const { onChange, ranges, focusedRange } = this.props; - const selectedRange = ranges[focusedRange[0]]; + let selectedRange = ranges[focusedRange[0]]; + selectedRange = { + ...selectedRange, + ...{ label: range.label } + } + if (!onChange || !selectedRange) return; onChange({ [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range }, @@ -83,7 +88,13 @@ class DefinedRange extends Component { : null, }} key={i} - onClick={() => this.handleRangeChange(staticRange.range(this.props))} + onClick={() => { + let rangeWithLabel = { + ...staticRange.range(this.props), + ...{ label: staticRange.label } + } + this.handleRangeChange(rangeWithLabel) + }} onFocus={() => onPreviewChange && onPreviewChange(staticRange.range(this.props))} onMouseOver={() => onPreviewChange && onPreviewChange(staticRange.range(this.props)) From 04b7c207e62bd7fd7f9aeb815fb45ec6ec2d5b80 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Thu, 4 Nov 2021 12:22:18 +0100 Subject: [PATCH 02/14] docs: use `function` component in `code examples` in `README.md` file --- README.md | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 2467cd147..95533cc54 100644 --- a/README.md +++ b/README.md @@ -46,18 +46,17 @@ import 'react-date-range/dist/theme/default.css'; // theme css file ```javascript import { Calendar } from 'react-date-range'; -class MyComponent extends Component { - handleSelect(date){ +function MyComponent() { + function handleSelect(date) { console.log(date); // native Date object } - render(){ - return ( - - ) - } + + return ( + + ); } ``` @@ -66,8 +65,8 @@ class MyComponent extends Component { ```javascript import { DateRangePicker } from 'react-date-range'; -class MyComponent extends Component { - handleSelect(ranges){ +function MyComponent() { + function handleSelect(ranges) { console.log(ranges); // { // selection: { @@ -76,19 +75,20 @@ class MyComponent extends Component { // } // } } - render(){ - const selectionRange = { - startDate: new Date(), - endDate: new Date(), - key: 'selection', - } - return ( - - ) + + + const selectionRange = { + startDate: new Date(), + endDate: new Date(), + key: 'selection', } + + return ( + + ) } ``` From e12300723076544016d07d5db844a915fb2a301b Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 10:21:26 +0100 Subject: [PATCH 03/14] build: add `npm related stuff` in `package.json` file --- package.json | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f723d2650..1ebac047a 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-date-range", - "version": "1.4.0", + "name": "@atefbena/react-date-range", + "version": "1.0.0", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { @@ -29,10 +29,10 @@ "license": "MIT", "repository": { "type": "git", - "url": "http://github.com/hypeserver/react-date-range" + "url": "git+ssh://git@github.com/atefBB/react-date-range.git" }, "bugs": { - "url": "http://github.com/hypeserver/react-date-range/issues" + "url": "http://github.com/atefBB/react-date-range/issues" }, "browserslist": [ "defaults" @@ -83,5 +83,7 @@ "style-loader": "^1.0.0", "url-loader": "^3.0.0", "webpack": "^4.41.5" - } + }, + "homepage": "https://github.com/atefBB/react-date-range#readme", + "author": "Atef Ben Ali " } From 383f8cf856a41e26eae2e9257424dc65821237ea Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 12:14:48 +0100 Subject: [PATCH 04/14] build: increase package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1ebac047a..2825c0fb8 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@atefbena/react-date-range", - "version": "1.0.0", + "version": "1.0.1", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From 6e0c4dfb94b79f86e7c06a25bfba86564cfacad9 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 14:29:11 +0100 Subject: [PATCH 05/14] docs: edit `README.md` file --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 95533cc54..e23704269 100644 --- a/README.md +++ b/README.md @@ -25,12 +25,12 @@ A date library agnostic React component for choosing dates and date ranges. Uses ### Installation ``` -npm install --save react-date-range +yarn add @atefbena/react-date-range ``` This plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder. ``` -npm install --save react date-fns +yarn add react date-fns ``` ## Usage @@ -38,13 +38,13 @@ npm install --save react date-fns You need to import skeleton and theme styles first. ```javascript -import 'react-date-range/dist/styles.css'; // main style file -import 'react-date-range/dist/theme/default.css'; // theme css file +import '@atefbena/react-date-range/dist/styles.css'; // main style file +import '@atefbena/react-date-range/dist/theme/default.css'; // theme css file ``` ### `DatePicker` ```javascript -import { Calendar } from 'react-date-range'; +import { Calendar } from '@atefbena/react-date-range'; function MyComponent() { function handleSelect(date) { @@ -63,7 +63,7 @@ function MyComponent() { ### `DateRangePicker / DateRange` ```javascript -import { DateRangePicker } from 'react-date-range'; +import { DateRangePicker } from '@atefbena/react-date-range'; function MyComponent() { function handleSelect(ranges) { @@ -86,7 +86,7 @@ function MyComponent() { return ( ) } From fd28e93d7a0ec028b3b98a52978a7f46b0836dbb Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 14:33:30 +0100 Subject: [PATCH 06/14] docs: add `label` property in `selection` object in `README.md` file --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e23704269..996c4b8e6 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ function MyComponent() { // selection: { // startDate: [native Date Object], // endDate: [native Date Object], + // label: [string] // selected range label // } // } } From 2561ce22f9239fe262be6a3b60bde4414a2b7563 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 14:38:30 +0100 Subject: [PATCH 07/14] docs: edit `README.md` file --- README.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 996c4b8e6..803629aa5 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ -# react-date-range -[![npm](https://img.shields.io/npm/v/react-date-range)](https://www.npmjs.com/package/react-date-range) -[![npm](https://img.shields.io/npm/l/react-date-range)]() -[![npm](https://img.shields.io/npm/dw/react-date-range)](https://www.npmjs.com/package/react-date-range) -[![sponsors](https://img.shields.io/github/sponsors/hypeserver)](https://github.com/sponsors/hypeserver) +# @atefbena/react-date-range +### A fork of the great `react-date-range` package +[![npm](https://img.shields.io/npm/v/react-date-range)](https://www.npmjs.com/package/@atefbena/react-date-range) +[![npm](https://img.shields.io/npm/l/@atefbena/react-date-range)]() +[![npm](https://img.shields.io/npm/dw/react-date-range)](https://www.npmjs.com/package/@atefbena/react-date-range) A date library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations. -### Why should you use `react-date-range`? +### Why should you use `@atefbena/react-date-range`? - Stateless date operations - Highly configurable @@ -18,8 +18,6 @@ A date library agnostic React component for choosing dates and date ranges. Uses **Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range) -![](https://raw.githubusercontent.com/hypeserver/react-date-range/master/demo/ss.png) - ## Getting Started ### Installation From 4a39babf9d5d1e90a9a8d229a796ad8209197330 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 16:06:57 +0100 Subject: [PATCH 08/14] docs: edit `README.md` file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 803629aa5..386a17da4 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ function MyComponent() { return ( ); } From aa59a6459a48fef77e43c7eaccffe08039bf2ab4 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 14:39:57 +0100 Subject: [PATCH 09/14] build: increase package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2825c0fb8..cc48fb318 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@atefbena/react-date-range", - "version": "1.0.1", + "version": "1.0.2", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From b97edf84fb35d4a236b2e69ebf6897118f6041b2 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 16:13:43 +0100 Subject: [PATCH 10/14] build: increase package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc48fb318..4a326946b 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@atefbena/react-date-range", - "version": "1.0.2", + "version": "1.0.3", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From 96c0ac7ddac3000e126f4ae37a84387b857083b7 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Fri, 5 Nov 2021 16:34:08 +0100 Subject: [PATCH 11/14] docs: add `migrating to typescript` in `todos` section in `README.md` file --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 386a17da4..3a6529166 100644 --- a/README.md +++ b/README.md @@ -205,3 +205,4 @@ If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHe - Make mobile friendly (integrate tap and swipe actions) - Add tests - Improve documentation +- Migrate to Typescript From f5877417b66aa54e361f91ff0d819bf80c70a004 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Mon, 8 Nov 2021 14:59:27 +0100 Subject: [PATCH 12/14] fix: check `start/end dates` are not null in `rendering selection placeholders` func in `day cell` component --- src/components/DayCell/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 26f12539e..20eb78cfa 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -114,6 +114,7 @@ class DayCell extends Component { const inRanges = ranges.reduce((result, range) => { let startDate = range.startDate; let endDate = range.endDate; + if (startDate === null || endDate === null) return result; if (startDate && endDate && isBefore(endDate, startDate)) { [startDate, endDate] = [endDate, startDate]; } From 41a1af56d9ea8db1d148c3764fb39c53fd1df293 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Mon, 8 Nov 2021 15:04:38 +0100 Subject: [PATCH 13/14] build: increase package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a326946b..f56177d05 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@atefbena/react-date-range", - "version": "1.0.3", + "version": "1.0.4", "description": "A React component for choosing dates and date ranges.", "main": "dist/index.js", "scripts": { From c08214d80b1e34ef1d29caefc4bec4641e348e39 Mon Sep 17 00:00:00 2001 From: Atef Ben Ali Date: Tue, 9 Nov 2021 09:19:59 +0100 Subject: [PATCH 14/14] chore: clean-up --- src/components/DayCell/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 20eb78cfa..5f25a976d 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -171,10 +171,9 @@ class DayCell extends Component { {this.renderSelectionPlaceholders()} {this.renderPreviewPlaceholder()} - { - dayContentRenderer?.(this.props.day) || + {dayContentRenderer?.(this.props.day) ? ( {format(this.props.day, this.props.dayDisplayFormat)} - } + ) : null} );