kevindantas · kevindantas · Mar 26, 2019 · Mar 26, 2019 · Mar 27, 2019 · Mar 27, 2019
diff --git a/demo/src/Docs.js b/demo/src/Docs.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import PickerDocs from './pages/pickers';
+import Sidebar from './components/Sidebar';
+import GlobalStyle from './styles/global';
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template: 'sidebar content';
+  grid-gap: 2rem;
+  padding-right: 2rem;
+`;
+
+const Content = styled.div`
+  grid-area: content;
+
+  > div {
+    display: grid;
+    width: 98%;
+  }
+`;
+
+function Docs() {
+  return (
+    <React.Fragment>
+      <GlobalStyle />
+      <Wrapper>
+        <Sidebar />
+        <Content>
+          <PickerDocs />
+        </Content>
+      </Wrapper>
+    </React.Fragment>
+  );
+}
+
+export default Docs;
diff --git a/demo/src/components/Alfredo.js b/demo/src/components/Alfredo.js
@@ -0,0 +1,58 @@
+import React from 'react';
+
+const Alfredo = props => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 261.46 429.38"
+    width="261.46"
+    height="429.38"
+    {...props}>
+    <path
+      fill="#fdca39"
+      d="M187.57 104.79c.79 3.33 3.21 2.54 5.57 2.34 15.7-1.36 31.35-3.8 47.19-2.76-.03 2.53-2.18 3.51-3.64 5-6.56 6.73-5.47 11.69 3.07 15.79 4.35 2.09 9.69 1.71 13.31 5.47-9.35 18.23-23.93 28.66-44.97 29.67-.15 3.07 2.22 4.63 3.26 6.79 3.35 3.09 2.45 6.03-.42 8.77-3.36 3.2-7.55 4.84-11.96 5.93-7.73 1.9-15.65 2.79-23.54 2.99-24.84.65-49.67-.02-74.48-1.24-6.99-.34-10.37-3.39-9.31-10.08.84-5.3-2.97-9.16-2.56-14.02-2.69-21.97-.8-44.09-2.11-66.14-1.1-18.41 1.06-36.76 6.76-54.55 4.96-15.5 13.43-28.48 26.07-38.74h2.58c2.68 18.42 5.38 36.84 8.03 55.27.45 3.11 1.91 4.08 5.16 4.05 14.88-.14 14.76-.03 15.2-15.28.3-10.42.99-20.84 1.54-32.02 6.91 4.78 10.58 11.22 13.72 17.92 5.16 11 7.69 22.72 7.97 34.82.18 7.6.66 14.8 5.6 21.2 2.3 2.98 3.8 6.69 4.56 10.53-1.85 1.9-4.55.44-6.59 1.69-1.72 1.06-3.22 2.36-2.86 4.52.42 2.53 2.52 1.56 4.1 1.55 2.93-.03 5.91-.87 8.75.53zM91.48 405.83c-14.24.37-28.11-1.36-41.89-5.41-17.09-5.02-25.22-16.76-27.55-33.45-.57-4.07-.51-7.15-6.03-4.2-2.83 1.52-3.88-1.46-4.76-3.75-4.24-10.94-6.49-22.17-4.82-33.94.46-3.27 1.13-6.44-3.98-6.05-.36.03-.83-1.32-1.25-2.03-1.61-4.64.58-9.61-1.22-14.23v-1.29c2.76-5.39 2.87-11.43 3.96-17.19 6.01-31.58 26.61-50.74 55.13-65.16-1.86 6.24-3.59 11.29-4.87 16.46-11.67 47.07-3.9 91.81 16.49 134.96 3.02 6.38 6.62 12.49 10.08 18.65.66 1.18 1.11 3.36 2.8 3 2.18-.47 1.35-2.79 1.63-4.39 4.44 5.2 7.19 10.98 6.28 18.02z"
+    />
+    <path d="M0 302.77c2.69 4.55.66 9.5 1.22 14.23l-.61-.09-.61.04v-14.18z" fill="#fde6a1" />
+    <path
+      fill="#fdca39"
+      d="M224.3 186.68c22.5 30.91 28.7 64.65 17.53 101.38-2.29 7.52-3.97 15.24-7.15 22.47-5.92 9.63-13.59 18.05-18.9 28.14-5.35 10.14-7.38 20.95-7.83 32.15-.33 8.12.1 16.28-.13 24.4-.14 4.69.82 6.86 6.37 6.63 8.87-.36 15.88 5.83 17.84 14.37.08.63.11 1.28.26 1.89 1.85 7.12 1.55 7.4-5.4 6.84-12.32-1-24.66-1.78-36.99-2.77-1.67-.13-2.98-.36-3.4 1.67-2.62-.33-3-2.79-4.2-4.44-4.83-6.62-11-10.59-19.5-10.47-7.06.1-14.13.15-21.19-.04-6.78-.19-8.79-2.01-7.89-8.57 1.53-11.11.74-22.22 1.03-33.33.26-9.93-1.15-19.69-3.67-29.21-3.88-14.61-11.11-26.86-25.82-33.17-.99-.42-1.87-1.03-2.44-1.99 1.12-17.79-1.47-35.39-2.97-53.03-1.19-14.04-2.9-28.03-4.38-42.04 2.87-2.12 5.8-.46 8.64 0 23.83 3.87 46.42 12.33 69.55 18.79 8.48 2.37 17.09 4.22 25.55 6.62 5.26 1.49 8.53-.31 11.21-4.78 6.22-10.35 9.09-21.69 10.63-33.5.39-2.95.21-6.14 3.25-8.01z"
+    />
+    <path
+      fill="#fbb613"
+      d="M102.82 302.62c12.28 1.58 18.56 10.63 24.26 20 7.08 11.65 8.85 24.96 9.28 38.16.42 13.21 1.36 26.52-1.03 39.71-.84 4.66.59 7.16 6.1 6.74 6.39-.48 12.87.17 19.28-.19 12.82-.7 21.03 5.31 25.78 16.8 2.2 3.96 2.21 5.84-3.48 5.48-24.83-1.55-49.66-3.03-74.46-5.05-5.57-.45-8.57-2.73-10.85-7.29-1.91-3.81-4.15-7.46-6.24-11.18-2.09-6-4.17-12-6.26-18-6.31-18.85-10.51-37.96-6.6-57.96 1.6-8.17 5.39-15.29 11.19-21.31 3.57-3.65 7.71-6.08 13.03-5.91z"
+    />
+    <path
+      d="M224.3 186.68c-1.29 7.14-2.5 14.3-3.88 21.42-1.66 8.52-5.42 16.14-10.02 23.46-2.45 3.91-5.09 4.75-9.59 3.68-24.57-5.8-48.51-13.81-72.82-20.49-10.69-2.94-21.66-4.84-32.51-7.21-2.96-3.06-4.37-6.81-4.65-10.97-.46-6.91-4.3-9.21-10.85-6.55-3.14 1.28-6.39 2.3-9.69 3.47-.49-8.69 2.81-16.81 13.96-17.75-2.93-4.57-3.28-9.72-3.67-14.82-.13-1.76-1.15-4.32.98-5.17 1.07-.43 2.96 1.2 4.49 1.87 1.1.48 1.46 2.21 3.07 1.81 4.02 4.31 6.1 8.78 4 15.09-1.31 3.96 1.21 6.92 5.94 7.03 30.21.69 60.42 2.83 90.62-.05 6.18-.59 12.32-1.82 17.82-5.01 3.65-2.11 6.14-4.81 3.88-9.41 7.74 4.27 10.94 11.53 12.92 19.6z"
+      fill="#e81f34"
+    />
+    <path
+      fill="#fbb613"
+      d="M232.02 416.23c-.94-1.4-1.84-2.83-2.83-4.18-4.62-6.29-10.37-10.26-18.6-8.27-2.46.6-4.44.95-4.37-2.35.32-15.97-1.47-32.04 2.14-47.88 3.08-13.5 10.46-24.69 19.05-35.12 2.24-2.72 3.53-6.5 7.27-7.9-7.97 28.41-14.77 57.01-14.4 86.94 14.21-5.62 22.8-1.9 27.44 11.65 2.02 5.88.49 7.81-5.45 7.31-3.4-.3-6.83-.15-10.25-.2z"
+    />
+    <path
+      d="M253.08 130.63c-5.39-1.17-10.82-2.23-15.79-4.77-8.45-4.32-9.32-10.55-2.35-17.08 1.69-1.58 3.59-2.95 5.39-4.42 4.38-1.14 8.82-2.01 13.33-1.17 4.72.88 8.21 3.54 7.75 8.66-.64 7.07-2.65 13.81-8.33 18.78z"
+      fill="#211243"
+    />
+    <path
+      d="M187.57 104.79c-3.95.61-7.92 1.11-11.84 1.88-2.72.53-3.32-.79-3.42-3.06-.25-5.62 4.46-8.48 11.86-7.12 2.4 2.25 4.63 4.56 3.4 8.3z"
+      fill="#191737"
+    />
+    <path
+      d="M119.3 29.36c.61 8.15.34 16.5 2.11 24.39 1.56 6.95-2 9.59-6.54 12.66-2.92 1.97-3.78.72-4.03-2.01-1.15-12.38 1.53-23.98 6.75-35.07l1.71.03z"
+      fill="#fbb713"
+    />
+    <path
+      d="M149.25 101.93c3.28-.11 5.8 1.3 7.44 4.05 1.11 1.87 1.07 3.73-1.36 4.66-3.55 1.37-7.13 2.68-10.7 3.99-2.78 1.02-3.31-1.12-3.78-2.94-1.19-4.65 3.16-9.64 8.4-9.76z"
+      fill="#161435"
+    />
+    <path
+      d="M161.38 42.62c3.36 7.41 5.8 15.03 6.25 24.24-10.74-6.77-4.81-16.38-6.25-24.24z"
+      fill="#fbb816"
+    />
+    <path
+      d="M199.69 215.37c-.78-.87-1.7-1.72-2.4-2.73-2.43-3.47-1.04-7.76 2.91-9.17 1.46-.52 3.13-.9 4.05.57.88 1.41-.41 2.17-1.6 2.86-3.26 1.91-.37 3.07.7 4.21 2.82 2.99 2.22 5.76-.46 8.29-1.75 1.66-4.44 3.14-6.25 1.44-2.48-2.33.12-3.42 2.18-4.23.31-.11.46-.62.87-1.24z"
+      fill="#fdf7f5"
+    />
+  </svg>
+);
+
+export default Alfredo;
diff --git a/demo/src/components/Sidebar.js b/demo/src/components/Sidebar.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+import Alfredo from './Alfredo';
+
+const Aside = styled.aside`
+  background: #fff;
+  grid-area: sidebar;
+  width: 15vw;
+  height: 100vh;
+  position: sticky;
+  flex-basis: 20% 1 1;
+  left: 0;
+  top: 0;
+  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
+`;
+
+const List = styled.ul`
+  padding: 0;
+`;
+
+const ListItem = styled.li`
+  width: 100%;
+  list-style: none;
+  padding: 8px 24px;
+  font-size: 18px;
+`;
+
+const ListLink = styled.a`
+  text-decoration: none;
+  color: #333;
+  font-weight: 400;
+  display: block;
+`;
+
+const Logo = styled(Alfredo)`
+  width: 50%;
+  height: 140px;
+  margin: 1rem;
+`;
+
+function Sidebar() {
+  return (
+    <Aside>
+      <Logo />
+      <List>
+        <ListItem>
+          <ListLink href="#calendar">Calendar</ListLink>
+        </ListItem>
+
+        <ListItem>
+          <ListLink href="#date-range">Date Range</ListLink>
+        </ListItem>
+
+        <ListItem>
+          <ListLink href="#defined-ranges">Defined Range</ListLink>
+        </ListItem>
+
+        <ListItem>
+          <ListLink href="#date-range-picker">Date Range Picker</ListLink>
+        </ListItem>
+      </List>
+    </Aside>
+  );
+}
+
+export default Sidebar;
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>React Date Range Demo</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css">
 </head>
 <body>
   <div id="root"></div>

diff --git a/demo/src/main.dev.js b/demo/src/main.dev.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
-import Main from './components/Main';
+import Docs from './Docs';
 
 const render = Component => {
   ReactDOM.render(
@@ -12,11 +12,11 @@ const render = Component => {
   );
 };
 
-render(Main);
+render(Docs);
 
 // Webpack Hot Module Replacement API
 if (module.hot) {
-  module.hot.accept('./components/Main', () => {
-    render(Main);
+  module.hot.accept('./Docs', () => {
+    render(Docs);
   });
 }
diff --git a/demo/src/main.js b/demo/src/main.js
@@ -1,5 +1,5 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Main from './components/Main';
+import Docs from './Docs';
 
-ReactDom.render(<Main />, document.getElementById('root'));
+ReactDom.render(<Docs />, document.getElementById('root'));
diff --git a/demo/src/pages/pickers/DemoCalendar.js b/demo/src/pages/pickers/DemoCalendar.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Calendar } from '../../../../src';
+
+class DemoCalendar extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      date: null,
+    };
+  }
+
+  handleRangeChange(date) {
+    this.setState({
+      date,
+    });
+  }
+
+  render() {
+    return (
+      <Calendar
+        onChange={this.handleRangeChange.bind(this)}
+        date={this.state.date}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export const MonthsDateDate = () => <DemoCalendar months={2} />;
+
+export default DemoCalendar;
diff --git a/demo/src/pages/pickers/DemoDateRange.js b/demo/src/pages/pickers/DemoDateRange.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { DateRange } from '../../../../src';
+
+class DemoDateRange extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      range: {
+        selection: {
+          startDate: new Date(),
+          endDate: null,
+          key: 'selection',
+        },
+      },
+    };
+  }
+
+  handleRangeChange(payload) {
+    this.setState({
+      range: {
+        ...this.state.range,
+        ...payload,
+      },
+    });
+  }
+
+  render() {
+    console.log(this.props);
+    return (
+      <DateRange
+        onChange={this.handleRangeChange.bind(this)}
+        ranges={[this.state.range.selection]}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export const MonthsDateDate = () => <DemoDateRange months={2} />;
+
+export default DemoDateRange;
diff --git a/demo/src/pages/pickers/DemoDateRangePicker.js b/demo/src/pages/pickers/DemoDateRangePicker.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { DateRangePicker } from '../../../../src';
+
+class DemoDateRangePicker extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      range: {
+        selection: {
+          startDate: new Date(),
+          endDate: null,
+          key: 'selection',
+        },
+      },
+    };
+  }
+
+  handleRangeChange(payload) {
+    this.setState({
+      range: {
+        ...this.state.range,
+        ...payload,
+      },
+    });
+  }
+
+  render() {
+    console.log(this.props);
+    return (
+      <DateRangePicker
+        onChange={this.handleRangeChange.bind(this)}
+        ranges={[this.state.range.selection]}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export const MonthsDateDate = () => <DemoDateRangePicker months={2} />;
+
+export default DemoDateRangePicker;
diff --git a/demo/src/pages/pickers/DemoDefinedRanges.js b/demo/src/pages/pickers/DemoDefinedRanges.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import DefinedRange from '../../../../src/components/DefinedRange';
+
+class DemoDefinedRanges extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      range: {
+        selection: {
+          startDate: new Date(),
+          endDate: new Date(),
+          key: 'selection',
+        },
+      },
+    };
+  }
+
+  handleRangeChange(payload) {
+    this.setState({
+      range: {
+        ...this.state.range,
+        ...payload,
+      },
+    });
+  }
+
+  render() {
+    return (
+      <DefinedRange
+        ranges={[this.state.range.selection]}
+        onChange={this.handleRangeChange.bind(this)}
+        {...this.props}
+      />
+    );
+  }
+}
+
+const staticRanges = [
+  {
+    label: 'My custom range',
+    hasCustomRendering: true,
+    range: () => ({
+      startDate: new Date(),
+      endDate: new Date(),
+    }),
+    isSelected() {
+      return true;
+    },
+  },
+];
+
+function renderStaticRangeLabel(range) {
+  return <span>{range.label}</span>;
+}
+
+export const CustomDefinedRange = () => (
+  <DemoDefinedRanges renderStaticRangeLabel={renderStaticRangeLabel} staticRanges={staticRanges} />
+);
+
+export default DemoDefinedRanges;