Add the possibility to get selected range label for defined range component

README.md

@@ -1,15 +1,12 @@
-# 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.
 
-# Notice ⚠️
-This project is currently unmaintained because the original maintainers are busy with other things. It should be pretty stable in it's current state but we won't be updating it in the foreseeable future. **If you are willing to maintain it, please fork and open a pr adding your fork's link to this readme.**
-
 ### Why should you use `react-date-range`?
 
 - Stateless date operations
@@ -21,77 +18,76 @@ This project is currently unmaintained because the original maintainers are busy
 
 **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
 
 ```
-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
 
 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';
 
-class MyComponent extends Component {
- handleSelect(date){
+function MyComponent() {
+ function handleSelect(date) {
  console.log(date); // native Date object
  }
- render(){
- return (
- <Calendar
- date={new Date()}
- onChange={this.handleSelect}
- />
- )
- }
+
+ return (
+ <Calendar
+ date={new Date()}
+ onChange={handleSelect}
+ />
+ );
 }
 
 ```
 
 ### `DateRangePicker / DateRange`
 ```javascript
-import { DateRangePicker } from 'react-date-range';
+import { DateRangePicker } from '@atefbena/react-date-range';
 
-class MyComponent extends Component {
- handleSelect(ranges){
+function MyComponent() {
+ function handleSelect(ranges) {
  console.log(ranges);
  // {
  // selection: {
  // startDate: [native Date Object],
  // endDate: [native Date Object],
+ // label: [string] // selected range label 
  // }
  // }
  }
- render(){
- const selectionRange = {
- startDate: new Date(),
- endDate: new Date(),
- key: 'selection',
- }
- return (
- <DateRangePicker
- ranges={[selectionRange]}
- onChange={this.handleSelect}
- />
- )
+
+
+ const selectionRange = {
+ startDate: new Date(),
+ endDate: new Date(),
+ key: 'selection',
  }
+
+ return (
+ <DateRangePicker
+ ranges={[selectionRange]}
+ onChange={handleSelect}
+ />
+ )
 }
 
 ```
@@ -209,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

package.json

@@ -1,6 +1,6 @@
 {
- "name": "react-date-range",
- "version": "1.4.0",
+ "name": "@atefbena/react-date-range",
+ "version": "1.0.4",
  "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:/hypeserver/react-date-range"
+ "url": "git+ssh://git@github.com/atefBB/react-date-range.git"
  },
  "bugs": {
- "url": "http:/hypeserver/react-date-range/issues"
+ "url": "http:/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:/atefBB/react-date-range#readme",
+ "author": "Atef Ben Ali <[email protected]>"
 }

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];
  }
@@ -170,10 +171,9 @@ class DayCell extends Component {
  {this.renderSelectionPlaceholders()}
  {this.renderPreviewPlaceholder()}
  <span className={this.props.styles.dayNumber}>
- {
- dayContentRenderer?.(this.props.day) ||
+ {dayContentRenderer?.(this.props.day) ? (
  <span>{format(this.props.day, this.props.dayDisplayFormat)}</span>
- }
+ ) : null}
  </span>
  </button>
  );

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))