- add infinite scroll

- expose mont&tyear renderer
- add visual improvements

Author: mkg0

CHANGELOG.md

@@ -113,5 +113,14 @@ Momentjs: `moment(dateString).toDate()`
 - `init` prop removed.
 
 ### Added
+- `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.
+- Infinite scroll feature. Sample usage:
+```js
+  const horizontalScroll={enabled: true, monthHeight: 300, monthWidth: 300 };
+  const verticalScroll={enabled: true, monthHeight: 220, longMonthHeight: 240 };
+  <DateRangePicker scroll={horizontalScroll} />
+  <DateRangePicker scroll={verticalScroll} months={2} />
+```
 
-- Date range selection by drag n drop.

README.md

@@ -103,6 +103,8 @@ specialDays                          | Date[]    | []               | defines sp
 onPreviewChange                      | Func      |                  | callback for preview changes. fn()
 minDate                              | Date      |                  | defines minimum date. Disabled earlier dates
 maxDate                              | Date      |                  | defines maximum date. Disabled later dates
+direction                            | String    | 'vertical'                 | defines maximum date. Disabled later dates
+scroll                       				 | Object    | { enabled: false }| infinite scroll behaviour configuration. Checkout [Infinite Scroll](#infinite-scrolled-mode) section 
 showMonthArrow                       | Boolean   | true             | show/hide month arrow button
 onChange(Calendar)                   | Func      |                  | callback function for date changes. fn(date: Date)
 color(Calendar)                      | String    | `#3d91ff`        | defines color for selected date in Calendar
@@ -112,6 +114,8 @@ moveRangeOnFirstSelection(DateRange) | Boolean   | false            | move range
 ranges(Calendar)                     | *Object[] | []               | Defines ranges. array of range object
 showDateDisplay(DateRange)      | Boolean   | true             | show/hide selection display row. Uses `dateDisplayFormat` for formatter
 dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected range preview formatter. checkout [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format)
+
+
 > *shape of range:
 > ```js
 >	{
@@ -126,6 +130,24 @@ dateDisplayFormat(DateRange)         | String    | `MMM D,YYYY`     | selected r
 >	}
 >```
 
+#### 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.
+
+```js
+	// shape of scroll prop
+  scroll: {
+    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"
+    calendarWidth: PropTypes.number, // defaults monthWidth * months
+    calendarHeight: PropTypes.number, // defaults monthHeight * months
+  }),
+```
+
+
 TODOs
 
 - make mobile friendly (integrate tap and swipe actions)

demo/src/components/Main.js

@@ -67,7 +67,13 @@ export default class Main extends Component {
     this.state = {
       dateRange: {
         selection: {
-          startDate: addDays(new Date(), 1115),
+          startDate: new Date(),
+          endDate: null,
+        },
+      },
+      dateRangePickerI: {
+        selection: {
+          startDate: new Date(),
           endDate: null,
         },
       },
@@ -81,7 +87,7 @@ export default class Main extends Component {
           endDate: addDays(new Date(), 8),
         },
       },
-      datePickerInternational: addDays(new Date(), 1167),
+      datePickerInternational: new Date(),
       locale: 'ja',
       dateRangePicker: {
         selection: {
@@ -129,7 +135,6 @@ export default class Main extends Component {
           <div>
             <DateRangePicker
               onChange={this.handleRangeChange.bind(this, 'dateRangePicker')}
-              showMonthArrow={false}
               showSelectionPreview={true}
               moveRangeOnFirstSelection={false}
               className={'PreviewArea'}
@@ -141,6 +146,40 @@ export default class Main extends Component {
                   key: 'selection',
                 },
               ]}
+              direction="horizontal"
+            />
+          </div>
+        </Section>
+
+        <Section title="Date Range Picker - Vertical Infinite">
+          <div>
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePickerI.selection.startDate)}
+            />
+            <input
+              type="text"
+              readOnly
+              value={formatDateDisplay(this.state.dateRangePickerI.selection.endDate)}
+            />
+          </div>
+          <div>
+            <DateRangePicker
+              onChange={this.handleRangeChange.bind(this, 'dateRangePickerI')}
+              className={'PreviewArea'}
+              months={1}
+              minDate={addDays(new Date(), -300)}
+              maxDate={addDays(new Date(), 900)}
+              direction="vertical"
+              scroll={{ enabled: true }}
+              ranges={[
+                {
+                  startDate: this.state.dateRangePickerI.selection.startDate,
+                  endDate: this.state.dateRangePickerI.selection.endDate,
+                  key: 'selection',
+                },
+              ]}
             />
           </div>
         </Section>

package.json

@@ -5,12 +5,13 @@
   "main": "dist/index.js",
   "scripts": {
     "dev": "NODE_ENV=development & webpack-dev-server --hot --inline",
-    "prebuild": "rm -rf dist/* & rm -rf demo/dist/*",
+    "clear": "rm -rf dist/* & rm -rf demo/dist/*",
     "build": "NODE_ENV=production & yarn build-library & yarn build-demo",
     "build-demo": "webpack -p",
     "build-library": "babel ./src --out-dir ./dist --ignore test.js & postcss 'src/styles.scss' -d dist --ext css & postcss 'src/theme/*.scss' -d 'dist/theme' --ext css",
     "lint": "eslint 'src/**/*.js'",
-    "test": "jest"
+    "test": "jest",
+    "preversion": "yarn clear & yarn build"
   },
   "keywords": [
     "react",
@@ -33,7 +34,8 @@
   },
   "dependencies": {
     "classnames": "^2.2.1",
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "react-list": "^0.8.8"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || >=15.0"