Better imports organization. Fixes #140

components/_mixins.scss

@@ -252,11 +252,6 @@
   transition-duration: $duration;
 }
 
-@mixin rounded-overflow() {
-  overflow: hidden;
-  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
-
 // The frames are this way to prevent a flicker in Safari
 // See https://goo.gl/5luFDk
 @mixin ripple-loading($name, $width, $height, $opacity: 0.3) {

components/animations/index.js

@@ -1,4 +1,4 @@
-module.exports = {
-  SlideLeft: require('./slide-left'),
-  SlideRight: require('./slide-right')
-};
+import SlideLeft from './slide-left';
+import SlideRight from './slide-right';
+
+export default {SlideLeft, SlideRight};

components/autocomplete/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Input from '../input';
+import events from '../utils/events';
 import style from './style';
-import utils from '../utils';
 
 const POSITION = {
   AUTO: 'auto',
@@ -129,7 +129,7 @@ class Autocomplete extends React.Component {
   }
 
   select (key, event) {
-    utils.events.pauseEvent(event);
+    events.pauseEvent(event);
     const values = this.values(this.props.value);
     this.handleChange([key, ...values.keys()]);
   }

components/button/style.scss

@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    @include rounded-overflow();
+    overflow: hidden;
   }
 }
 

components/date_picker/calendar/index.jsx

@@ -4,7 +4,8 @@ import { SlideLeft, SlideRight } from '../../animations';
 import FontIcon from '../../font_icon';
 import Ripple from '../../ripple';
 import Month from './month';
-import utils from '../../utils';
+import time from '../../utils/time';
+import utils from '../../utils/utils';
 import style from './style';
 
 class Calendar extends React.Component {
@@ -40,11 +41,11 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    this.props.onChange(utils.time.setDay(this.state.viewDate, day));
+    this.props.onChange(time.setDay(this.state.viewDate, day));
   };
 
   handleYearClick = (year) => {
-    const viewDate = utils.time.setYear(this.props.selectedDate, year);
+    const viewDate = time.setYear(this.props.selectedDate, year);
     this.setState({viewDate});
     this.props.onChange(viewDate);
   };
@@ -53,7 +54,7 @@ class Calendar extends React.Component {
     this.refs.rippleRight.start(event);
     this.setState({
       direction: 'right',
-      viewDate: utils.time.addMonths(this.state.viewDate, 1)
+      viewDate: time.addMonths(this.state.viewDate, 1)
     });
   };
 
@@ -61,7 +62,7 @@ class Calendar extends React.Component {
     this.refs.rippleLeft.start(event);
     this.setState({
       direction: 'left',
-      viewDate: utils.time.addMonths(this.state.viewDate, -1)
+      viewDate: time.addMonths(this.state.viewDate, -1)
     });
   };
 

components/date_picker/calendar/month.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import utils from '../../utils';
+import time from '../../utils/time';
+import utils from '../../utils/utils';
 import Day from './day';
 import style from './style';
 
@@ -18,14 +19,14 @@ class Month extends React.Component {
 
   renderWeeks () {
     return utils.range(0, 7).map(i => {
-      return <span key={i}>{ utils.time.getFullDayOfWeek(i).charAt(0) }</span>;
+      return <span key={i}>{ time.getFullDayOfWeek(i).charAt(0) }</span>;
     });
   }
 
   renderDays () {
-    return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+    return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-      const disabled = utils.time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
+      const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
 
       return (
         <Day
@@ -44,7 +45,7 @@ class Month extends React.Component {
     return (
       <div className={style.month}>
         <span className={style.title}>
-          { utils.time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
+          { time.getFullMonth(this.props.viewDate)} { this.props.viewDate.getFullYear() }
         </span>
         <div className={style.week}>{ this.renderWeeks() }</div>
         <div className={style.days}>{ this.renderDays() }</div>

components/list/index.jsx

@@ -1,7 +1,7 @@
-module.exports = {
-  List: require('./list'),
-  ListItem: require('./item'),
-  ListDivider: require('./divider'),
-  ListCheckbox: require('./checkbox'),
-  ListSubHeader: require('./subheader')
-};
+import List from './list';
+import ListItem from './item';
+import ListDivider from './divider';
+import ListCheckbox from './checkbox';
+import ListSubHeader from './subheader';
+
+export default {List, ListItem, ListDivider, ListCheckbox, ListSubHeader};

components/menu/index.jsx

@@ -1,6 +1,11 @@
-module.exports = {
-  Menu: require('./menu'),
-  MenuItem: require('./menu_item'),
-  MenuDivider: require('./menu_divider'),
-  IconMenu: require('./icon_menu')
+import Menu from './menu';
+import MenuItem from './menu_item';
+import MenuDivider from './menu_divider';
+import IconMenu from './icon_menu';
+
+export default {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  IconMenu
 };

components/menu/menu.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import MenuItem from './menu_item';
-import utils from '../utils';
+import { events, utils } from '../utils';
 import style from './style.menu';
 
 const POSITION = {
@@ -49,7 +49,7 @@ class Menu extends React.Component {
   componentDidUpdate (prevProps, prevState) {
     if (prevState.active && !this.state.active) {
       if (this.props.onHide) this.props.onHide();
-      utils.events.removeEventsFromDocument({click: this.handleDocumentClick});
+      events.removeEventsFromDocument({click: this.handleDocumentClick});
     } else if (!prevState.active && this.state.active && this.props.onShow) {
       this.props.onShow();
     }
@@ -64,7 +64,7 @@ class Menu extends React.Component {
 
   componentWillUpdate (prevState, nextState) {
     if (!prevState.active && nextState.active) {
-      utils.events.addEventsToDocument({click: this.handleDocumentClick});
+      events.addEventsToDocument({click: this.handleDocumentClick});
     }
   }
 
@@ -82,7 +82,7 @@ class Menu extends React.Component {
   }
 
   handleDocumentClick = (event) => {
-    if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
+    if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
       this.setState({active: false, rippled: false});
     }
   };

components/radio/index.jsx

@@ -1,4 +1,4 @@
-module.exports = {
-  RadioButton: require('./radio_button'),
-  RadioGroup: require('./radio_group')
-};
+import RadioButton from './radio_button';
+import RadioGroup from './radio_group';
+
+export default {RadioButton, RadioGroup};

components/slider/index.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import style from './style';
-import utils from '../utils';
+import events from '../utils/events';
+import prefixer from '../utils/prefixer';
+import utils from '../utils/utils';
 import ProgressBar from '../progress_bar';
 import Input from '../input';
 
@@ -83,14 +85,14 @@ class Slider extends React.Component {
 
   handleMouseDown = (event) => {
     if (this.state.inputFocused) this.refs.input.blur();
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.start(utils.events.getMousePosition(event));
-    utils.events.pauseEvent(event);
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.start(events.getMousePosition(event));
+    events.pauseEvent(event);
   };
 
   handleMouseMove = (event) => {
-    utils.events.pauseEvent(event);
-    this.move(utils.events.getMousePosition(event));
+    events.pauseEvent(event);
+    this.move(events.getMousePosition(event));
   };
 
   handleMouseUp = () => {
@@ -104,11 +106,11 @@ class Slider extends React.Component {
   };
 
   handleSliderBlur = () => {
-    utils.events.removeEventsFromDocument(this.getKeyboardEvents());
+    events.removeEventsFromDocument(this.getKeyboardEvents());
   };
 
   handleSliderFocus = () => {
-    utils.events.addEventsToDocument(this.getKeyboardEvents());
+    events.addEventsToDocument(this.getKeyboardEvents());
   };
 
   handleTouchEnd = () => {
@@ -116,14 +118,14 @@ class Slider extends React.Component {
   };
 
   handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
+    this.move(events.getTouchPosition(event));
   };
 
   handleTouchStart = (event) => {
     if (this.state.inputFocused) this.refs.input.blur();
-    this.start(utils.events.getTouchPosition(event));
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    utils.events.pauseEvent(event);
+    this.start(events.getTouchPosition(event));
+    events.addEventsToDocument(this.getTouchEventMap());
+    events.pauseEvent(event);
   };
 
   addToValue (increment) {
@@ -153,7 +155,7 @@ class Slider extends React.Component {
   }
 
   end (revents) {
-    utils.events.removeEventsFromDocument(revents);
+    events.removeEventsFromDocument(revents);
     this.setState({ pressed: false });
   }
 
@@ -224,7 +226,7 @@ class Slider extends React.Component {
   }
 
   render () {
-    const knobStyles = utils.prefixer({transform: `translateX(${this.knobOffset()}px)`});
+    const knobStyles = prefixer({transform: `translateX(${this.knobOffset()}px)`});
     let className = this.props.className;
     if (this.props.editable) className += ` ${style.editable}`;
     if (this.props.pinned) className += ` ${style.pinned}`;

components/snackbar/index.jsx

@@ -20,7 +20,7 @@ class Snackbar extends React.Component {
   componentDidUpdate () {
     if (this.props.active && this.props.timeout) {
       setTimeout(() => {
-        this.props.onTimeout(event, this);
+        this.props.onTimeout();
       }, this.props.timeout);
     }
   }

components/table/row.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Checkbox from '../checkbox';
-import utils from '../utils';
+import utils from '../utils/utils';
 import style from './style';
 
 class TableRow extends React.Component {

components/tabs/index.jsx

@@ -1,4 +1,4 @@
-module.exports = {
-  Tabs: require('./tabs'),
-  Tab: require('./tab')
-};
+import Tabs from './tabs';
+import Tab from './tab';
+
+export default { Tabs, Tab };

components/time_picker/clock/hand.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import style from './style';
-import utils from '../../utils';
+import events from '../../utils/events';
+import prefixer from '../../utils/prefixer';
+import utils from '../../utils/utils';
 
 class Hand extends React.Component {
   static propTypes = {
@@ -40,11 +42,11 @@ class Hand extends React.Component {
   }
 
   handleMouseMove = (event) => {
-    this.move(utils.events.getMousePosition(event));
+    this.move(events.getMousePosition(event));
   };
 
   handleTouchMove = (event) => {
-    this.move(utils.events.getTouchPosition(event));
+    this.move(events.getTouchPosition(event));
   };
 
   handleMouseUp = () => {
@@ -56,14 +58,14 @@ class Hand extends React.Component {
   };
 
   mouseStart (event) {
-    utils.events.addEventsToDocument(this.getMouseEventMap());
-    this.move(utils.events.getMousePosition(event));
+    events.addEventsToDocument(this.getMouseEventMap());
+    this.move(events.getMousePosition(event));
   }
 
   touchStart (event) {
-    utils.events.addEventsToDocument(this.getTouchEventMap());
-    this.move(utils.events.getTouchPosition(event));
-    utils.events.pauseEvent(event);
+    events.addEventsToDocument(this.getTouchEventMap());
+    this.move(events.getTouchPosition(event));
+    events.pauseEvent(event);
   }
 
   getPositionRadius (position) {
@@ -80,9 +82,9 @@ class Hand extends React.Component {
     return utils.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
   }
 
-  end (events) {
+  end (evts) {
     if (this.props.onMoved) this.props.onMoved();
-    utils.events.removeEventsFromDocument(events);
+    events.removeEventsFromDocument(evts);
   }
 
   move (position) {
@@ -93,7 +95,7 @@ class Hand extends React.Component {
 
   render () {
     const className = `${style.hand} ${this.props.className}`;
-    const handStyle = utils.prefixer({
+    const handStyle = prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.props.angle}deg)`
     });

components/time_picker/clock/hours.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import utils from '../../utils';
+import utils from '../../utils/utils';
 import Face from './face';
 import Hand from './hand';
 

components/time_picker/clock/minutes.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import utils from '../../utils';
+import utils from '../../utils/utils';
 import style from './style';
 import Face from './face';
 import Hand from './hand';

components/time_picker/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import events from '../utils/events';
 import time from '../utils/time';
 import style from './style';
-import events from '../utils/events';
 import Input from '../input';
 import TimeDialog from './dialog';
 

components/utils/events.js

@@ -1,5 +1,4 @@
-module.exports = {
-
+export default {
   getMousePosition (event) {
     return {
       x: event.pageX,
@@ -41,5 +40,4 @@ module.exports = {
     }
     return false;
   }
-
 };

components/utils/index.js

@@ -1,66 +1,6 @@
-module.exports = {
+import events from './events';
+import prefixer from './prefixer';
+import time from './time';
+import utils from './utils';
 
-  angleFromPositions (cx, cy, ex, ey) {
-    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-
-  angle360FromPositions (cx, cy, ex, ey) {
-    const angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
-  },
-
-  range (start = 0, stop = null, step = 1) {
-    let [_start, _stop] = [0, start];
-    if (stop !== null) {
-      [_start, _stop] = [start, stop];
-    }
-    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    const range = Array(length);
-
-    for (let idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-
-  round (number, decimals) {
-    if (!isNaN(parseFloat(number)) && isFinite(number)) {
-      const decimalPower = Math.pow(10, decimals);
-      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
-    }
-    return NaN;
-  },
-
-  getViewport () {
-    return {
-      height: window.innerHeight || document.documentElement.offsetHeight,
-      width: window.innerWidth || document.documentElement.offsetWidth
-    };
-  },
-
-  cloneObject (object) {
-    return JSON.parse(JSON.stringify(object));
-  },
-
-  inputTypeForPrototype (prototype) {
-    if (prototype === Date) return 'date';
-    if (prototype === Number) return 'number';
-    if (prototype === Boolean) return 'checkbox';
-    return 'text';
-  },
-
-  prepareValueForInput (value, type) {
-    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
-    if (type === 'checkbox') {
-      return value ? 'on' : null;
-    }
-    return value;
-  },
-
-  events: require('./events'),
-  prefixer: require('./prefixer'),
-  time: require('./time'),
-  testing: require('./testing')
-};
+export default {events, prefixer, time, utils};

components/utils/prefixer.js

@@ -37,4 +37,4 @@ function prefixer (style, defaultValue = {}) {
   return _style;
 }
 
-module.exports = prefixer;
+export default prefixer;

components/utils/testing.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 
-module.exports = {
-
+export default {
   renderComponent (Component, props = {}, state = {}) {
     const component = TestUtils.renderIntoDocument(<Component {...props} />);
     if (state !== {}) { component.setState(state); }
@@ -14,5 +13,4 @@ module.exports = {
     shallowRenderer.render(React.createElement(component, props, children.length > 1 ? children : children[0]));
     return shallowRenderer.getRenderOutput();
   }
-
 };

components/utils/time.js

@@ -1,5 +1,4 @@
-module.exports = {
-
+export default {
   getDaysInMonth (d) {
     const resultDate = this.getFirstDayOfMonth(d);
     resultDate.setMonth(resultDate.getMonth() + 1);
@@ -177,5 +176,4 @@ module.exports = {
   dateOutOfRange (date, minDate, maxDate) {
     return ((minDate && !(date >= minDate)) || (maxDate && !(date <= maxDate)));
   }
-
 };

components/utils/utils.js

@@ -0,0 +1,60 @@
+export default {
+  angleFromPositions (cx, cy, ex, ey) {
+    const theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+
+  angle360FromPositions (cx, cy, ex, ey) {
+    const angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+
+  range (start = 0, stop = null, step = 1) {
+    let [_start, _stop] = [0, start];
+    if (stop !== null) {
+      [_start, _stop] = [start, stop];
+    }
+    const length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    const range = Array(length);
+
+    for (let idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+
+  round (number, decimals) {
+    if (!isNaN(parseFloat(number)) && isFinite(number)) {
+      const decimalPower = Math.pow(10, decimals);
+      return Math.round(parseFloat(number) * decimalPower) / decimalPower;
+    }
+    return NaN;
+  },
+
+  getViewport () {
+    return {
+      height: window.innerHeight || document.documentElement.offsetHeight,
+      width: window.innerWidth || document.documentElement.offsetWidth
+    };
+  },
+
+  cloneObject (object) {
+    return JSON.parse(JSON.stringify(object));
+  },
+
+  inputTypeForPrototype (prototype) {
+    if (prototype === Date) return 'date';
+    if (prototype === Number) return 'number';
+    if (prototype === Boolean) return 'checkbox';
+    return 'text';
+  },
+
+  prepareValueForInput (value, type) {
+    if (type === 'date') return new Date(value).toISOString().slice(0, 10);
+    if (type === 'checkbox') {
+      return value ? 'on' : null;
+    }
+    return value;
+  }
+};

spec/components/input.jsx

@@ -3,7 +3,7 @@ import Input from '../../components/input';
 
 class InputTest extends React.Component {
   state = {
-    normal: 'hello world',
+    normal: 'Tony Stark',
     fixedLabel: '',
     withIcon: ''
   };

spec/components/list.jsx

@@ -99,7 +99,7 @@ class ListTest extends React.Component {
           </List>
         </div>
 
-        <h5>Avatar, sinle text and icon</h5>
+        <h5>Avatar, single text and icon</h5>
         <p>Similar to a previous one but only with one text line</p>
         <div style={listStyle}>
           <List>

spec/components/snackbar.jsx

@@ -3,19 +3,16 @@ import Button from '../../components/button';
 import Snackbar from '../../components/snackbar';
 
 class SnackbarTest extends React.Component {
-
-  handleSnackbarClick = (event, instance) => {
-    console.log('handleSnackbarClick', event, instance);
-    this.setState({ active: false });
+  handleSnackbarClick = () => {
+    this.setState({active: false});
   };
 
-  handleSnackbarTimeout = (event, instance) => {
-    console.log('handleSnackbarClick', event, instance);
-    this.setState({ active: false });
+  handleSnackbarTimeout = () => {
+    this.setState({active: false});
   };
 
   handleClick = () => {
-    this.setState({ active: true });
+    this.setState({active: true});
   };
 
   state = {
@@ -33,7 +30,7 @@ class SnackbarTest extends React.Component {
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
-          timeout={2}
+          timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='warning'