diff --git a/. eslintignore b/. eslintignore
index c98508c3f..cd275d762 100644
--- a/. eslintignore
+++ b/. eslintignore
@@ -1,3 +1,4 @@
/node_modules/*
/lib/*
/dist/*
+**/*.snap
diff --git a/.babelrc b/.babelrc
old mode 100644
new mode 100755
index afd61d7d5..6c0694734
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,11 @@
{
"presets": [
- "env",
- "react"
+ ["@babel/preset-env"],
+ ["@babel/preset-react"]
],
"plugins": [
- "date-fns",
- "transform-object-rest-spread",
- "transform-export-extensions"
+ ["@babel/plugin-transform-class-properties"],
+ ["@babel/plugin-proposal-export-default-from"]
]
-}
\ No newline at end of file
+}
+
diff --git a/.gitattributes b/.gitattributes
new file mode 100755
index 000000000..dfe077042
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 000000000..9b6d60fc5
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @burakcan @mkg0 @kamyar
diff --git a/.github/issue_template.md b/.github/issue_template.md
new file mode 100755
index 000000000..f92d3ef64
--- /dev/null
+++ b/.github/issue_template.md
@@ -0,0 +1,14 @@
+## Subject of the issue
+Describe your issue here.
+
+## [BUG] Bug Reproduce Steps
+Tell us how to reproduce this issue.
+
+## [BUG] Expected behaviour
+
+
+## Environment
+Package Version:
+React version:
+Node version:
+Browser:
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100755
index 000000000..b882557bd
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,14 @@
+## Types of changes
+
+What types of changes does your code introduce?
+
+_Put an `x` in the boxes that apply_
+
+- [ ] Bugfix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+
+## Description
+Describe your pr here.
+
+> Related Issue: #xxx
\ No newline at end of file
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
new file mode 100644
index 000000000..d42530580
--- /dev/null
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+ push:
+ branches: [ master ]
+ pull_request:
+ # The branches below must be a subset of the branches above
+ branches: [ master ]
+ schedule:
+ - cron: '16 22 * * 6'
+
+jobs:
+ analyze:
+ name: Analyze
+ runs-on: ubuntu-latest
+ permissions:
+ actions: read
+ contents: read
+ security-events: write
+
+ strategy:
+ fail-fast: false
+ matrix:
+ language: [ 'javascript' ]
+ # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+ # Learn more:
+ # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+ steps:
+ - name: Checkout repository
+ uses: actions/checkout@v2
+
+ # Initializes the CodeQL tools for scanning.
+ - name: Initialize CodeQL
+ uses: github/codeql-action/init@v1
+ with:
+ languages: ${{ matrix.language }}
+ # If you wish to specify custom queries, you can do so here or in a config file.
+ # By default, queries listed here will override any specified in a config file.
+ # Prefix the list here with "+" to use these queries and those in the config file.
+ # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+ # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
+ # If this step fails, then you should remove it and run the build manually (see below)
+ - name: Autobuild
+ uses: github/codeql-action/autobuild@v1
+
+ # ℹ️ Command-line programs to run using the OS shell.
+ # 📚 https://git.io/JvXDl
+
+ # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+ # and modify them (or add more) to build your code if your project
+ # uses a compiled language
+
+ #- run: |
+ # make bootstrap
+ # make release
+
+ - name: Perform CodeQL Analysis
+ uses: github/codeql-action/analyze@v1
diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
new file mode 100644
index 000000000..e13d9b733
--- /dev/null
+++ b/.github/workflows/demo.yml
@@ -0,0 +1,24 @@
+name: Demo - Build and Deploy
+on:
+ push:
+ tags:
+ - release/*
+ # Enable manual trigger
+ workflow_dispatch:
+jobs:
+ demo-deploy:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout 🛎️
+ uses: actions/checkout@v2.3.1
+ - name: Install
+ run: yarn install
+ - name: Build
+ run: yarn build
+ - run: cp -R dist styleguide/
+ - run: cp -R demo styleguide/
+ - name: Deploy 🚀
+ uses: JamesIves/github-pages-deploy-action@4.1.4
+ with:
+ branch: gh-pages
+ folder: styleguide
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 000000000..242913fea
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,22 @@
+name: Publish
+on:
+ push:
+ tags:
+ - release/*
+jobs:
+ build:
+ name: NPM Package
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - name: Publish new version to NPM
+ uses: actions/setup-node@v1
+ with:
+ node-version: 13.x
+ registry-url: 'https://registry.npmjs.org'
+ - run: yarn install
+ - run: yarn build
+ - run: yarn publish
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
new file mode 100644
index 000000000..13dae9408
--- /dev/null
+++ b/.github/workflows/tests.yml
@@ -0,0 +1,14 @@
+name: CI
+on: [push]
+jobs:
+ build:
+ name: Test
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: borales/actions-yarn@v4
+ with:
+ cmd: install
+ - uses: borales/actions-yarn@v4
+ with:
+ cmd: test
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
index c95a69547..31ca39e05
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,9 @@
node_modules/
.DS_Store
*.log
-dist/
.idea
*.orig
lib/
+NOTES.txt
+dist/
+styleguide/
diff --git a/.npmignore b/.npmignore
index 26373d5b2..730141481 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,10 +1,16 @@
-node_modules/
-.DS_Store
-*.log
-.gitignore
.git/
+.github/
+.vscode/
demo/
-webpack.config.js
-yarn.lock.js
-.postcssconfig
+node_modules/
+styleguide/
+webpack/
.babelrc
+.DS_Store
+.eslintrc.js
+.gitattributes
+.gitignore
+*.log
+postcss.config.js
+styleguide.config.js
+yarn.lock
diff --git a/.prettierrc b/.prettierrc
new file mode 100755
index 000000000..727df7cf8
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 110,
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+ }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
old mode 100644
new mode 100755
index 2fcc8312f..4f5029d4c
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,4 @@
{
- "prettier.eslintIntegration": true,
"eslint.enable": true,
- "eslint.autoFixOnSave": true,
"editor.tabSize": 2
}
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d484a26d1..f308befba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,69 @@ 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).
+## 2.0.1
+### BREAKING CHANGE:
+- date-fns 3 support. if you use date-fns 2, please use old version 1.4.0.
-## [Unreleased]
+## 1.4.0
+
+### Added
+- `calendarFocus` prop: Whether calendar focus month should be forward-driven or backwards-driven. can be `forwards` or `backwards` (Default: `forwards`)
+- `preventSnapRefocus` prop: prevents unneceessary refocus of shown range on selection. (Default: `false`)
+
+## 1.3.0
+
+### Added
+- `retainEndDateOnFirstSelection` prop: You can prevent the endDate from changing for selections when the startDate is updated. Default behaviour is for endDate to reset which is preserved. This prop makes this configurable.
+
+
+## 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))
+
+```jsx
+
+```
+
+### Added
+- `weekStartsOn` prop: You can set the week start day. (Number, 0 - Sunday, 1 - Monday etc.) If not specified, gets the week start day from your locale.
+
+- `weekdayDisplayFormat`, `dayDisplayFormat` and `monthDisplayFormat` props: For being able to use different versions of date-fns
+
+- `startDatePlaceholder` and `endDatePlaceholder` props: You can set different placeholders for Date inputs. If not set, falls back to 'Early' and 'Continuous'.
+
+- `fixedHeight` prop: Set this to `true` to prevent height change while selecting different months. Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
+
+- `editableDateInputs` prop: Set this to `true` to make the inputs editable. Falls back to false.
+
+- `DateInput` and `InputRangeField` are exported as dedicated components.
+
+
+### Fixed
+- Works with React 16, without warnings (Deprecated methods are removed: componentWillReceiveProps )
+- IE11 Bug where the last day of each week is not shown.
+- Now infinite scroll mode works as expected.
+
+## 1.0.0 beta
### Changed
- BREAKING: `Calendar` and `DateRange` are now totally controlled components with stateless date management.
@@ -26,7 +86,7 @@ NEW
```js
this.setState({ eventDate: date })} //
+ onChange={date => this.setState({ eventDate: date })} //
/>
```
@@ -34,7 +94,7 @@ NEW with moment (or any other date libraries)
```js
this.setState({ eventDate: moment(date) })} //
+ onChange={date => this.setState({ eventDate: moment(date) })} //
/>
```
- BREAKING: Theming and style approach complately changed. `react-date-range` don't use inline styles any more. At the new version you should import **skeleton styles** and **theme styles**
@@ -56,7 +116,7 @@ import 'react-date-range/dist/theme/default.css';
NEW
```js
import turkish from 'react-date-range/locale/tr';
- // you can view full list in https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js
+ // you can view full list in https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js
```
@@ -114,6 +174,7 @@ Momentjs: `moment(dateString).toDate()`
- `specialDays` prop removed.
### Added
+- `disabledDates` prop: It's a set of disabled dates.
- `DefinedRanges` component: It's a set of date presets. Receives `inputRanges`, `staticRanges` for setting date ranges.
- `DateRangePicker` component. It's combined version of `DateRange` with `DefinedRanges` component.
- Date range selection by drag.
@@ -137,3 +198,5 @@ Momentjs: `moment(dateString).toDate()`
- `focusedRange` prop added: It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second value is which step on date range(startDate or endDate).
- `initialFocusedRange` prop added: Initial value for focused range. See `focusedRange` for usage.
- `onRangeFocusChange` prop added: Callback function for focus changes by user.
+- `dragSelectionEnabled` prop added
+- `showMonthAndYearPickers` prop added
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1c3e7c475..8f9480feb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
# Contributing Guide
-Make sure your issue or feature doesn't have any related issue at [react-date-range repo](https://github.com/Adphorus/react-date-range/issues). If it didn't exist already, create an issue.
+Make sure your issue or feature doesn't have any related issue at [react-date-range repo](https://github.com/hypeserver/react-date-range/issues). If it didn't exist already, create an issue.
## Getting Started
@@ -10,13 +10,13 @@ Make sure your issue or feature doesn't have any related issue at [react-date-ra
3. Run `yarn` to install the dependencies.
-4. Run `yarn dev` to start development server.
+4. Run `yarn run dev` to start development server.
## Building
-. Run `run test` and `run lint` for make sure tests passes and linter doesn't throw any error.
+. Run `yarn run test` and `yarn run lint` for make sure tests passes and linter doesn't throw any error.
-. Run `yarn build` compile the library and demo source.
+. Run `yarn run build` compile the library and demo source.
. Push your changes and create a PR and apply code review decisions.
diff --git a/LICENCE b/LICENSE
similarity index 93%
rename from LICENCE
rename to LICENSE
index 35d45c819..744faeba2 100644
--- a/LICENCE
+++ b/LICENSE
@@ -1,5 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2015-2016 Adphorus
+Copyright (c) 2015-2020 Adphorus
+Copyright (c) 2020- Hypeserver
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
diff --git a/README.md b/README.md
index 163b8d223..7e44cd6a4 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,15 @@
# react-date-range
-[](https://www.npmjs.com/package/react-date-range)
-
+[](https://www.npmjs.com/package/react-date-range)
+[]()
+[](https://www.npmjs.com/package/react-date-range)
+[](https://github.com/sponsors/hypeserver)
-[]()
-[](https://www.npmjs.com/package/react-date-range)
-
-> ⚠️ Warning: the current branch represents the new pre-release version. [Legacy version](https://github.com/Adphorus/react-date-range/tree/v0) deprecated.
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
@@ -18,21 +19,21 @@ A date library agnostic React component for choosing dates and date ranges. Uses
- Drag n Drop selection
- Keyboard friendly
-**Live Demo :** [http://adphorus.github.io/react-date-range](http://adphorus.github.io/react-date-range)
+**Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range)
-
+
## Getting Started
### Installation
```
-yarn add react-date-range@next
+npm install --save react-date-range
```
+This plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder.
-If you don't use yarn
```
-$ npm install --save react-date-range@next
+npm install --save react date-fns
```
## Usage
@@ -49,17 +50,17 @@ import 'react-date-range/dist/theme/default.css'; // theme css file
import { Calendar } from 'react-date-range';
class MyComponent extends Component {
- handleSelect(date){
- console.log(date); // native Date object
- }
- render(){
- return (
-
- )
- }
+ handleSelect(date){
+ console.log(date); // native Date object
+ }
+ render(){
+ return (
+
+ )
+ }
}
```
@@ -69,50 +70,54 @@ class MyComponent extends Component {
import { DateRangePicker } from 'react-date-range';
class MyComponent extends Component {
- handleSelect(ranges){
- console.log(ranges);
- // {
- // selection: {
- // startDate: [native Date Object],
- // endDate: [native Date Object],
- // }
- // }
- }
- render(){
- const selectionRange = {
- startDate: new Date(),
- endDate: new Date(),
- key: 'selection',
- }
- return (
-
- )
- }
+ handleSelect(ranges){
+ console.log(ranges);
+ // {
+ // selection: {
+ // startDate: [native Date Object],
+ // endDate: [native Date Object],
+ // }
+ // }
+ }
+ render(){
+ const selectionRange = {
+ startDate: new Date(),
+ endDate: new Date(),
+ key: 'selection',
+ }
+ return (
+
+ )
+ }
}
```
### Options
-Property | type | Default Value | Desctiption
+Property | type | Default Value | Description
-------------------------------------|-----------|------------------|-----------------------------------------------------------------
-locale | Object | enUS from locale | you can view full list from [here](https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/v2.0.0-alpha.7/docs/I18n#supported-languages).
+locale | Object | enUS from locale | you can view full list from [here](https://github.com/hypeserver/react-date-range/tree/next/src/locale/index.js). Locales directly exported from [`date-fns/locales`](https://date-fns.org/docs/I18n#supported-languages).
className | String | | wrapper classname
months | Number | 1 | rendered month count
showSelectionPreview | Boolean | true | show preview on focused/hovered dates
+showMonthAndYearPickers | Boolean | true | show select tags for month and year on calendar top, if false it will just display the month and year
rangeColors | String[] | | defines color for selection preview.
shownDate | Date | | initial focus date
minDate | Date | | defines minimum date. Disabled earlier dates
maxDate | Date | | defines maximum date. Disabled later dates
direction | String | 'vertical' | direction of calendar months. can be `vertical` or `horizontal`
-scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
+disabledDates | Date[] | [] | dates that are disabled
+disabledDay | Func | | predicate function that disable day fn(date: Date)
+scroll | Object | { enabled: false }| infinite scroll behaviour configuration. Check out [Infinite Scroll](#infinite-scrolled-mode) section
showMonthArrow | Boolean | true | show/hide month arrow button
navigatorRenderer | Func | | renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
ranges | *Object[] | [] | Defines ranges. array of range object
-moveRangeOnFirstSelection(DateRange) | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate.
+moveRangeOnFirstSelection(DateRange) | Boolean | false | move range on startDate selection. Otherwise endDate will replace with startDate unless `retainEndDateOnFirstSelection` is set to true.
+retainEndDateOnFirstSelection(DateRange) | Boolean | false | Retain end date when the start date is changed, unless start date is later than end date. Ignored if `moveRangeOnFirstSelection` is set to true.
onChange(Calendar) | Func | | callback function for date changes. fn(date: Date)
onChange(DateRange) | Func | | callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties.
color(Calendar) | String | `#3d91ff` | defines color for selected date in Calendar
@@ -121,37 +126,66 @@ showDateDisplay(DateRange) | Boolean | true | show/hide
onShownDateChange(DateRange,Calendar)| Function | | Callback function that is called when the shown date changes
initialFocusedRange(DateRange) | Object | | Initial value for focused range. See `focusedRange` for usage.
focusedRange(DateRange) | Object | | It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second one is which step on date range(startDate or endDate).
-onRangeFocusChange(DateRange) | Object | | Callback function for focus changes by user
-preview(DateRange) | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`
+onRangeFocusChange(DateRange) | Object | | Callback function for focus changes
+preview(DateRange) | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }`
showPreview(DateRange) | bool | true | visibility of preview
+editableDateInputs(Calendar) | bool | false | whether dates can be edited in the Calendar's input fields
+dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop
+calendarFocus(Calendar) | String | 'forwards' | Whether calendar focus month should be forward-driven or backwards-driven. can be 'forwards' or 'backwards'
+preventSnapRefocus(Calendar) | bool | false | prevents unneceessary refocus of shown range on selection
onPreviewChange(DateRange) | Object | | Callback function for preview changes
-dateDisplayFormat(DateRange) | String | `MMM D, YYYY` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
-staticRanges(`DefinedRange`, `DateRangePicker`) | Array | [default preDefined ranges](https://github.com/Adphorus/react-date-range/blob/master/src/defaultRanges.js) | -
-inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default input ranges](https://github.com/Adphorus/react-date-range/blob/master/src/defaultRanges.js) | -
-
+dateDisplayFormat | String | `MMM d, yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
+dayDisplayFormat | String | `d` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
+weekdayDisplayFormat | String | `E` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
+monthDisplayFormat | String | `MMM yyyy` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/docs/format)
+weekStartsOn | Number | | Whether the week start day that comes from the locale will be overriden. Default value comes from your locale, if no local is specified, note that default locale is enUS
+startDatePlaceholder | String | `Early` | Start Date Placeholder
+endDatePlaceholder | String | `Continuous` | End Date Placeholder
+fixedHeight | Boolean | false | Since some months require less than 6 lines to show, by setting this prop, you can force 6 lines for all months.
+renderStaticRangeLabel(`DefinedRange`)| Function | | Callback function to be triggered for the static range configurations that have `hasCustomRendering: true` on them. Instead of rendering `staticRange.label`, return value of this callback will be rendered.
+staticRanges(`DefinedRange`, `DateRangePicker`) | Array | [default preDefined ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | -
+inputRanges(`DefinedRange`, `DateRangePicker`) | Array | [default input ranges](https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js) | -
+ariaLabels | Object | {} | inserts aria-label to inner elements
+dayContentRenderer | Function | null | Function to customize the rendering of Calendar Day. given a date is supposed to return what to render.
*shape of range:
```js
- {
- startDate: PropTypes.object,
- endDate: PropTypes.object,
- color: PropTypes.string,
- key: PropTypes.string,
- autoFocus: PropTypes.bool,
- disabled: PropTypes.bool,
- showDateDisplay: PropTypes.bool,
- }
+ {
+ startDate: PropTypes.object,
+ endDate: PropTypes.object,
+ color: PropTypes.string,
+ key: PropTypes.string,
+ autoFocus: PropTypes.bool,
+ disabled: PropTypes.bool,
+ showDateDisplay: PropTypes.bool,
+ }
```
+ **shape of ariaLabels:
+ ```js
+ {
+ // The key of dateInput should be same as key in range.
+ dateInput: PropTypes.objectOf(
+ PropTypes.shape({
+ startDate: PropTypes.string,
+ endDate: PropTypes.string
+ })
+ ),
+ monthPicker: PropTypes.string,
+ yearPicker: PropTypes.string,
+ prevButton: PropTypes.string,
+ nextButton: PropTypes.string,
+ }
+```
#### Infinite Scrolled Mode
To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.
-If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/withs with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.
+If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/width with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.
```js
- // shape of scroll prop
+ // shape of scroll prop
scroll: {
- enabled: PropTypes.bool,
+ enabled: PropTypes.bool,
monthHeight: PropTypes.number,
longMonthHeight: PropTypes.number, // some months has 1 more row than others
monthWidth: PropTypes.number, // just used when direction="horizontal"
@@ -161,9 +195,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
+ - Update CHANGELOG.md
+- Make sure the demo and important features are working as expected
+- After merging, tag the master commit with `release/` 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
diff --git a/demo/.babelrc b/demo/.babelrc
deleted file mode 100644
index f12334524..000000000
--- a/demo/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "presets": [
- ["env", { "modules": false }],
- "react"
- ],
- "plugins": [
- ["transform-object-rest-spread"]
- ],
- "env": {
- "development": {
- "plugins": ["react-hot-loader/babel"]
- }
- }
-}
\ No newline at end of file
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 000000000..b59152f87
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,14 @@
+**react-date-range** can be installed with **npm**, by the following command:
+
+```bash static
+npm install react-date-range
+```
+
+First, styles and theme file must be imported:
+
+```js static
+import 'react-date-range/dist/styles.css'; // main css file
+import 'react-date-range/dist/theme/default.css'; // theme css file
+```
+
+Then, import one of the 4 standalone components: [DateRange](#daterange), [DateRangePicker](#daterangepicker), [Calendar](#calendar), [DefinedRange](#definedrange)
diff --git a/demo/components/Logo.jsx b/demo/components/Logo.jsx
new file mode 100755
index 000000000..591ef1373
--- /dev/null
+++ b/demo/components/Logo.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'rsg-components/Styled';
+import logo from './logo.svg';
+
+const styles = ({ fontFamily, color }) => ({
+ logo: {
+ display: 'flex',
+ alignItems: 'center',
+ margin: 0,
+ fontFamily: fontFamily.base,
+ fontSize: 18,
+ fontWeight: 'normal',
+ color: color.baseBackground,
+ },
+ image: {
+ width: '2.5em',
+ marginLeft: '-0.5em',
+ },
+});
+
+export function LogoRenderer({ classes, children }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+LogoRenderer.propTypes = {
+ classes: PropTypes.object.isRequired,
+ children: PropTypes.node,
+};
+
+export default Styled(styles)(LogoRenderer);
diff --git a/demo/components/SectionsRenderer.jsx b/demo/components/SectionsRenderer.jsx
new file mode 100755
index 000000000..8ed26a40f
--- /dev/null
+++ b/demo/components/SectionsRenderer.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'rsg-components/Styled';
+// Import default implementation from react-styleguidist using the full path
+import DefaultSectionsRenderer from 'react-styleguidist/lib/client/rsg-components/Sections/SectionsRenderer';
+
+const styles = ({ fontFamily, space }) => ({
+ headingSpacer: {
+ marginBottom: space[2],
+ },
+ descriptionText: {
+ marginTop: space[0],
+ fontFamily: fontFamily.base,
+ },
+});
+
+function SectionsRenderer({ children }) {
+ return (
+