improve docs

jquense · Jul 25, 2018 · f909681 · f909681
1 parent 929a277
commit f909681
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 128 deletions.
diff --git a/examples/App.js b/examples/App.js
@@ -23,15 +23,40 @@ import Resource from './demos/resource'
 import DndResource from './demos/dndresource'
 import Timeslots from './demos/timeslots'
 import Dnd from './demos/dnd'
+import Dropdown from 'react-bootstrap/lib/Dropdown'
+import MenuItem from 'react-bootstrap/lib/MenuItem'
 
 const globalizeLocalizer = localizer(globalize)
 
 let demoRoot =
   'https://github.com/intljusticemission/react-big-calendar/tree/master/examples/demos'
 
+const EXAMPLES = {
+  basic: 'Basic Calendar',
+  selectable: 'Create events',
+  cultures: 'Localization',
+  popup: 'Show more via a popup',
+  timeslots: 'Custom Time Grids',
+  rendering: 'Customized Component Rendering',
+  customView: 'Custom Calendar Views',
+  resource: 'Resource Scheduling',
+  dnd: 'Addon: Drag and drop',
+}
+
 class Example extends React.Component {
-  state = { selected: 'dnd' }
+  constructor(...args) {
+    super(...args)
 
+    const hash = (window.location.hash || '').slice(1)
+
+    this.state = {
+      selected: EXAMPLES[hash] ? hash : 'basic',
+    }
+  }
+
+  select = selected => {
+    this.setState({ selected })
+  }
   render() {
     let selected = this.state.selected
     let Current = {
@@ -74,69 +99,29 @@ class Example extends React.Component {
           </div>
         </div>
         <div className="examples">
-          <header>
-            <ul className="examples--list list-unstyled">
-              <li className={cn({ active: selected === 'basic' })}>
-                <a href="#" onClick={this.select.bind(null, 'basic')}>
-                  Basic
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'selectable' })}>
-                <a href="#" onClick={this.select.bind(null, 'selectable')}>
-                  Selectable
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'cultures' })}>
-                <a href="#" onClick={this.select.bind(null, 'cultures')}>
-                  I18n and Locales
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'popup' })}>
-                <a href="#" onClick={this.select.bind(null, 'popup')}>
-                  Popup
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'timeslots' })}>
-                <a href="#" onClick={this.select.bind(null, 'timeslots')}>
-                  Timeslots
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'rendering' })}>
-                <a href="#" onClick={this.select.bind(null, 'rendering')}>
-                  Custom rendering
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'customView' })}>
-                <a href="#" onClick={this.select.bind(null, 'customView')}>
-                  Custom View
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'Resource' })}>
-                <a href="#" onClick={this.select.bind(null, 'resource')}>
-                  Resource columns
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'dnd' })}>
-                <a href="#" onClick={this.select.bind(null, 'dnd')}>
-                  Drag and Drop
-                </a>
-              </li>
-              <li className={cn({ active: selected === 'dndresource' })}>
-                <a href="#" onClick={this.select.bind(null, 'dndresource')}>
-                  D'n'D Resource columns
-                </a>
-              </li>
-            </ul>
-          </header>
-          <div className="example">
-            <div className="view-source">
+          <header className="examples--header">
+            <div className="examples--view-source">
               <a target="_blank" href={demoRoot + '/' + selected + '.js'}>
                 <strong>
                   <i className="fa fa-code" />
                   {' View example source code'}
                 </strong>
               </a>
             </div>
+            <Dropdown className="examples--dropdown" pullRight>
+              <Dropdown.Toggle bsStyle="link" className="dropdown--toggle ">
+                {EXAMPLES[selected]}
+              </Dropdown.Toggle>
+              <Dropdown.Menu>
+                {Object.entries(EXAMPLES).map(([key, title]) => (
+                  <MenuItem href={`#${key}`} onClick={() => this.select(key)}>
+                    {title}
+                  </MenuItem>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
+          </header>
+          <div className="example">
             <Current localizer={globalizeLocalizer} />
           </div>
         </div>
@@ -149,11 +134,8 @@ class Example extends React.Component {
       </div>
     )
   }
-
-  select = (selected, e) => {
-    e.preventDefault()
-    this.setState({ selected })
-  }
 }
 
-render(<Example />, document.getElementById('app'))
+document.addEventListener('DOMContentLoaded', () => {
+  render(<Example />, document.getElementById('app'))
+})
diff --git a/examples/demos/cultures.js b/examples/demos/cultures.js
@@ -17,7 +17,7 @@ class Cultures extends React.Component {
 
     return (
       <React.Fragment>
-        <h3 className="callout">
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <label>Select a Culture</label>{' '}
           <select
             className="form-control"
@@ -31,7 +31,7 @@ class Cultures extends React.Component {
               </option>
             ))}
           </select>
-        </h3>
+        </div>
         <BigCalendar
           rtl={rtl}
           events={events}

diff --git a/examples/styles.less b/examples/styles.less
@@ -2,19 +2,34 @@
 @import "~bootstrap/less/variables.less";
 
 @blue: #3174ad;
+@pink: #ad3173;
 
 html {
   font-size: 10px;
 }
 
 body {
   font-size: 16px;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 h4 {
   margin-top: 20px;
 }
 
+a {
+  transform: all 200ms;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}
+
 .jumbotron {
   background-color: @blue;
   color: white;
@@ -48,9 +63,9 @@ h4 {
 .example {
   font-size: 14px;
   padding: 0 40px;
-  min-height: ~"calc(100vh - 20px)";
+  min-height: ~"calc(100vh - 100px)";
   min-height: max-content;
-  height: ~"calc(100vh - 20px)";
+  height: ~"calc(100vh - 100px)";
   width: 100%;
   margin: auto;
 
@@ -112,11 +127,45 @@ h4 > a > code  {
   padding: 0;
 }
 
-.view-source {
-  font-size: 90%;
-  float: right;
+
+.examples--header {
+  padding: 0 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
   margin-bottom: 15px;
-  margin-left: auto;
+}
+
+.examples--dropdown {
+
+}
+
+.dropdown--toggle {
+  font-size: 18px;
+  font-weight: 600;
+  border-radius: 3px;
+  transition: all 200ms;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    color: @pink;
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: darken(@pink, 5%);
+    border: 1px solid @pink;
+    text-decoration: none;
+  }
+}
+
+.examples--view-source {
+  font-size: 90%;
 }
 
 .callout {

diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "mt-changelog": "^0.6.1",
     "prettier": "^1.9.1",
     "react": "^16.4.1",
-    "react-bootstrap": "^0.28.0",
+    "react-bootstrap": "^0.32.1",
     "react-docgen": "^2.14.1",
     "react-dom": "^16.4.1",
     "release-script": "^1.0.0",

diff --git a/src/Agenda.js b/src/Agenda.js
@@ -42,7 +42,7 @@ class Agenda extends React.Component {
 
     let range = dates.range(date, end, 'day')
 
-    events = events.filter(event => inRange(event, date, end, this.props))
+    events = events.filter(event => inRange(event, date, end, accessors))
 
     events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
 
@@ -82,7 +82,7 @@ class Agenda extends React.Component {
     } = this.props
 
     events = events.filter(e =>
-      inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), this.props)
+      inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), accessors)
     )
 
     return events.map((event, idx) => {