Style tweaks (#112)

* style tweaks for time grid

* fix auto-prefixing

* [fixed] Toolbar proptype

* refresh demo page

* clean up linting

* test cm

.storybook/webpack.config.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const Autoprefixer = require('less-plugin-autoprefix');
+
 module.exports = {
   resolve: {
     extensions: ['', '.js', '.jsx']
@@ -24,5 +26,13 @@ module.exports = {
       {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
       {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
     ]
+  },
+
+  lessLoader: {
+    lessPlugins: [
+      new Autoprefixer({
+        browsers: ['last 2 versions', 'ie >= 10']
+      })
+    ]
   }
 };

.travis.yml

@@ -1,8 +1,11 @@
 sudo: false
 language: node_js
 node_js:
-  - "iojs"
+  - stable
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+branches:
+  only:
+    - master

examples/Api.js

@@ -34,7 +34,7 @@ let Api = React.createClass({
     let typeInfo = this.renderType(data);
 
     return (
-      <section>
+      <section key={name}>
         <Heading id={`prop-${name}`}>
           <a href={`#prop-${name}`}>
             <code>{name}</code>

examples/App.js

@@ -80,12 +80,12 @@ const Example = React.createClass({
             </ul>
           </aside>
           <div className='example'>
-            <div  style={{ marginBottom: 15 }}>
+            <div className='view-source'>
               <a target='_blank' href={demoRoot + '/' + selected + '.js' }>
-                <strong><i className='fa fa-code'/>{' view example source code'}</strong>
+                <strong><i className='fa fa-code'/>{' View example source code'}</strong>
               </a>
             </div>
-            <Current />
+            <Current className='demo' />
           </div>
         </div>
         <div className='docs'>

examples/demos/basic.js

@@ -6,6 +6,7 @@ let Basic = React.createClass({
   render(){
     return (
       <BigCalendar
+        {...this.props}
         events={events}
         defaultDate={new Date(2015, 3, 1)}
       />

examples/demos/cultures.js

@@ -18,8 +18,8 @@ let Cultures = React.createClass({
     let rtl = this.state.culture === 'ar-AE';
 
     return (
-      <div>
-        <h3 style={{ marginBottom: 20 }}>
+      <div {...this.props}>
+        <h3 className="callout">
           <label>Select a Culture</label>
           {' '}
           <select

examples/demos/popup.js

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import BigCalendar from 'react-big-calendar';
 import events from '../events';
 let Popup = React.createClass({
   render(){
     return (
-      <div>
-        <h3 className='text-info text-center demo-info'>
+      <div {...this.props}>
+        <h3 className='callout'>
           Click the "+x more" link on any calendar day that cannot fit all the days events to
           see an inline popup of all the events.
         </h3>

examples/demos/rendering.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import BigCalendar from 'react-big-calendar';
 import events from '../events';
 
@@ -24,7 +24,7 @@ function EventAgenda({ event }) {
 let Rendering = React.createClass({
   render(){
     return (
-      <div>
+      <div {...this.props}>
         <BigCalendar
           events={events}
           defaultDate={new Date(2015, 3, 1)}

examples/demos/selectable.js

@@ -1,12 +1,12 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import BigCalendar from 'react-big-calendar';
 import events from '../events';
 
 let Selectable = React.createClass({
   render(){
     return (
-      <div>
-        <h3 className='text-info text-center demo-info'>
+      <div {...this.props}>
+        <h3 className="callout">
           Click an event to see more info, or
           drag the mouse over the calendar to select a date/time range.
         </h3>

examples/styles.less

@@ -2,13 +2,14 @@
 // .panel-default {
 //   border-radius: 0;
 // }
+@blue: #3174ad;
 
 body {
   font-size: 16px;
 }
 
 .jumbotron {
-  background-color: #3174ad;
+  background-color: @blue;
   color: white;
 
   a {
@@ -17,10 +18,6 @@ body {
   }
 }
 
-.example {
-  font-size: 14px;
-}
-
 .contain {
   background-color: white;
   border-radius: 3px;
@@ -30,15 +27,37 @@ body {
 }
 
 .docs {
-  background-color: #3174ad;
+  background-color: @blue;
   margin-top: 20px;
   padding: 30px;
 }
 
 .examples {
   position: relative;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.example {
+  font-size: 14px;
+  flex: 1;
+
+  &,
+  & > * {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .demo,
+  .rbc-calendar {
+    flex: 1;
+    min-height: 580px;
+  }
 }
 
+
 .section {
   margin-bottom: 20px;
 }
@@ -48,11 +67,27 @@ aside {
 }
 
 h3 > a > code {
-  color: #3174ad;
+  color: @blue;
   background: none;
   padding: 0;
 }
 
+.view-source {
+  font-size: 90%;
+  float: right;
+  margin-bottom: 15px;
+  margin-left: auto;
+}
+
+.callout {
+  border-left: 4px solid @blue;
+  padding: 10px;
+  color: darken(@blue, 10%);
+  font-size: 20px;
+  margin-bottom: 15px;
+  margin-top: 0;
+}
+
 pre {
   border-radius: 0;
   border: none;

package.json

@@ -24,16 +24,17 @@
   "scripts": {
     "clean": "rimraf lib",
     "clean:examples": "rimraf examples/static",
-    "less": "lessc -x src/less/styles.less ./lib/css/react-big-calendar.css",
+    "less": "lessc --autoprefix=\"ie >= 10, last 2 versions\" src/less/styles.less ./lib/css/react-big-calendar.css",
     "assets": "cpy src/less/* lib/less",
     "build": "npm run clean && babel src --out-dir lib && npm run assets && npm run less",
     "build:examples": "npm run clean:examples && webpack --config webpack/docs.config.es6.js",
     "build:visual-test": "webpack --config webpack/visual-test.es6.js",
     "examples": "npm run clean:examples && babel-node ./examples/server.js",
     "lint": "eslint src test",
     "storybook": "start-storybook -p 9002",
-    "test": "npm run lint && karma start --single-run",
+    "test": "npm run lint",
     "tdd": "karma start",
+    "lint": "eslint src --ext .jsx --ext .js",
     "release": "release"
   },
   "peerDependencies": {
@@ -42,7 +43,6 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^1.28.1",
-    "autoprefixer-core": "^5.2.1",
     "babel-cli": "^6.7.5",
     "babel-core": "^6.7.6",
     "babel-eslint": "^6.0.2",
@@ -75,6 +75,7 @@
     "karma-webpack": "^1.7.0",
     "less": "^2.5.1",
     "less-loader": "^2.2.0",
+    "less-plugin-autoprefix": "^1.5.1",
     "lolex": "^1.4.0",
     "markdown-jsx-loader": "^2.0.1",
     "marked": "^0.3.5",

src/Calendar.jsx

@@ -283,7 +283,7 @@ let Calendar = React.createClass({
     components: PropTypes.shape({
       event: elementType,
 
-      toolbar: PropTypes.element,
+      toolbar: elementType,
 
       agenda: PropTypes.shape({
         date: elementType,
@@ -457,4 +457,8 @@ let Calendar = React.createClass({
   }
 });
 
-export default uncontrollable(Calendar, { view: 'onView', date: 'onNavigate', selected: 'onSelectEvent' })
+export default uncontrollable(Calendar, {
+  view: 'onView',
+  date: 'onNavigate',
+  selected: 'onSelectEvent'
+})

src/DayColumn.jsx

@@ -18,7 +18,7 @@ function snapToSlot(date, step){
   return new Date(Math.floor(date.getTime() / roundTo) * roundTo)
 }
 
-function positionFromDate(date, min, step){
+function positionFromDate(date, min){
   return dates.diff(min, dates.merge(min, date), 'minutes')
 }
 
@@ -105,8 +105,7 @@ let DaySlot = React.createClass({
 
     return (
       <TimeColumn {...props}
-        type="day"
-        showLabels={false}
+        className='rbc-day-slot'
         timeslots={timeslots}
         now={now}
         min={min}
@@ -126,7 +125,7 @@ let DaySlot = React.createClass({
     );
   },
 
-  renderEvents(numSlots, totalMin) {
+  renderEvents() {
     let {
       events, step, min, culture, eventPropGetter
       , selected, eventTimeRangeFormat, eventComponent
@@ -220,7 +219,7 @@ let DaySlot = React.createClass({
       this.setState(state)
     }
 
-    let selectionState = ({ x, y }) => {
+    let selectionState = ({ y }) => {
       let { step, min, max } = this.props;
       let { top, bottom } = getBoundsForNode(node)
 
@@ -279,7 +278,7 @@ let DaySlot = React.createClass({
     this._selector = null;
   },
 
-  _selectSlot({ startDate, endDate, endSlot, startSlot }) {
+  _selectSlot({ startDate, endDate }) {
     let current = startDate
       , slots = [];
 

src/Month.jsx

@@ -97,7 +97,7 @@ let MonthView = React.createClass({
     }, false)
   },
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     if (this.state.needLimitMeasure)
       this._measureRowLimit(this.props)
   },
@@ -308,7 +308,7 @@ let MonthView = React.createClass({
     )
   },
 
-  _measureRowLimit(props) {
+  _measureRowLimit() {
     let eventHeight = getHeight(this._measureEvent);
     let labelHeight = getHeight(this._firstDateRow);
     let eventSpace = getHeight(this._firstRow) - labelHeight;