Working DatePresetPicker with demo

Author: sharq1

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ['es2015', 'stage-0', 'react']
+}

.editorconfig

@@ -0,0 +1,14 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true
+indent_style = tab
+
+[*.json]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,5 @@
+.publish/*
+dist/*
+example/dist/*
+lib/*
+node_modules/*

.eslintrc

@@ -0,0 +1,32 @@
+{
+	"parser": "babel-eslint",
+	"env": {
+		"browser": true,
+		"node": true
+	},
+	"plugins": [
+		"react"
+	],
+	"rules": {
+		"curly": [2, "multi-line"],
+		"quotes": [2, "single", "avoid-escape"],
+		"react/display-name": 0,
+		"react/jsx-boolean-value": 1,
+		"react/jsx-quotes": 1,
+		"react/jsx-no-undef": 1,
+		"react/jsx-sort-props": 0,
+		"react/jsx-sort-prop-types": 1,
+		"react/jsx-uses-react": 1,
+		"react/jsx-uses-vars": 1,
+		"react/no-did-mount-set-state": 1,
+		"react/no-did-update-set-state": 1,
+		"react/no-multi-comp": 1,
+		"react/no-unknown-property": 1,
+		"react/prop-types": 1,
+		"react/react-in-jsx-scope": 1,
+		"react/self-closing-comp": 1,
+		"react/wrap-multilines": 1,
+		"semi": 2,
+		"strict": 0
+	}
+}

.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Coverage tools
+lib-cov
+coverage
+coverage.html
+.cover*
+
+# Dependency directory
+node_modules
+
+# Example build directory
+example/dist
+.publish
+
+# Editor and other tmp files
+*.swp
+*.un~
+*.iml
+*.ipr
+*.iws
+*.sublime-*
+.idea/
+*.DS_Store

README.md

@@ -0,0 +1,33 @@
+# react-dates-presets
+
+Preset picker based on `react-dates` - allows you to define preset ranges like `today`, `last week`, etc.
+
+![demo gif](http://streamfoundations.github.io/react-dates-presets/demo/demo.gif)
+
+## Demo & Examples
+
+Live demo: [streamfoundations.github.io/react-dates-presets/demo](http://streamfoundations.github.io/react-dates-presets/demo/)
+
+## Usage
+
+```
+render() {
+  const ranges = [
+    { id: 'today', range: { startDate: moment(), endDate: moment() }, label: 'Today' },
+    { id: '7_days', range: { startDate: moment().subtract(7, 'days'), endDate: moment() }, label: 'Last 7 days' },
+    { id: '1_month', range: { startDate: moment().subtract(1, 'month'), endDate: moment() }, label: 'Last month' },
+    { id: '2_months', range: { startDate: moment().subtract(2, 'months'), endDate: moment() }, label: 'Last 2 months' },
+  ];
+
+  return (
+    <DatePresetPicker
+      value={this.props.value}
+      onChange={this.onChange}
+      ranges={ranges}
+      isOutsideRange={(date) => date >= moment().add(1, 'days') /* allow past dates */}
+    />
+  );
+}
+```
+
+You can also check out working code in [/demo/App.jsx](https://github.com/streamfoundations/react-dates-presets/blob/master/demo/App.jsx).

demo/App.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import moment from 'moment';
+import 'react-dates/lib/css/_datepicker.css';
+import DatePresetPicker from '../lib/index.js';
+import '../lib/styles.css';
+
+class App extends React.Component {
+  onChange(vals) {
+    console.log('onChange called with args: ', vals);
+  };
+
+  render() {
+    const initialState = { startDate: moment().format('YYYY-MM-DD'), endDate: moment().format('YYYY-MM-DD') };
+
+    const ranges = [
+      { id: 'today', range: { startDate: moment(), endDate: moment() }, label: 'Today' },
+      { id: '7_days', range: { startDate: moment().subtract(7, 'days'), endDate: moment() }, label: 'Last 7 days' },
+      { id: '1_month', range: { startDate: moment().subtract(1, 'month'), endDate: moment() }, label: 'Last month' },
+      { id: '2_months', range: { startDate: moment().subtract(2, 'months'), endDate: moment() }, label: 'Last 2 months' },
+    ];
+
+    return (
+      <DatePresetPicker
+        value={initialState}
+        onChange={this.onChange}
+        ranges={ranges}
+        isOutsideRange={() => false /* allow future & past dates */}
+      />
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('react'));

demo/app.js

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="user-scalable=yes, width=device-width" />
+  <title>React Popover demo</title>
+  <link href="./styles.css" media="all" rel="stylesheet" />
+  <style>
+    html, body, #react, #react > div {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      background-color: #E9F1F7;
+    }
+    body {
+      padding: 15px 30px;
+    }
+  </style>
+</head>
+<body>
+<div id="react"></div>
+<script src="./vendor.js"></script>
+<script src="./app.js"></script>
+</body>
+</html>