Polish source and examples

docs/gulpTasks.js

@@ -69,7 +69,7 @@ gulp.task('docs:minify-js', ['docs:replace-js-strings'], function () {
     .pipe(gulp.dest(config.dirs.docs.distJS));
 });
 
-gulp.task('docs:replace-js-strings', ['docs:webpack'], function() {
+gulp.task('docs:replace-js-strings', ['docs:webpack'], function () {
   return gulp.src(config.files.docs.distJS)
     .pipe(replace('@@VERSION', packageInfo.version))
     .pipe(gulp.dest(config.dirs.docs.distJS));
@@ -101,10 +101,10 @@ gulp.task('docs:webpack', ['docs:eslint'], function (callback) {
   // run webpack
   webpack(webpackConfig, function (err, stats) {
     if (err) {
-      throw new gutil.PluginError("webpack", err);
+      throw new gutil.PluginError('webpack', err);
     }
 
-    gutil.log("[webpack]", stats.toString({
+    gutil.log('[webpack]', stats.toString({
       children: false,
       chunks: false,
       colors: true,

docs/src/Dropdown/index.js

@@ -10,7 +10,7 @@ class DropdownExample extends React.Component {
   }
 
   render() {
-    var simpleList = [
+    let simpleList = [
       {
         html: 'Foo',
         id: 'foo'
@@ -29,7 +29,7 @@ class DropdownExample extends React.Component {
       }
     ];
 
-    var styledItemsList = [
+    let styledItemsList = [
       {
         html:
           <span>
@@ -92,7 +92,7 @@ class DropdownExample extends React.Component {
       }
     ];
 
-    var dividedList = [
+    let dividedList = [
       {
         className: 'dropdown-menu-header',
         html: 'Foo',
@@ -133,7 +133,7 @@ class DropdownExample extends React.Component {
       }
     ];
 
-    var variedDisplayText = [
+    let variedDisplayText = [
       {
         html: 'Foo',
         id: 'foo',

docs/src/Table/index.js

@@ -21,14 +21,14 @@ class TableExample extends React.Component {
   }
 
   getColumnHeading(prop, order, sortBy) {
-    var caretClassNames = classNames({
+    let caretClassNames = classNames({
       'caret': true,
       'caret--asc': order === 'asc',
       'caret--desc': order === 'desc',
       'caret--visible': sortBy.prop === prop
     });
 
-    var headingStrings = {
+    let headingStrings = {
       'age': 'Age',
       'gender': 'Gender',
       'location': 'Location',
@@ -44,7 +44,7 @@ class TableExample extends React.Component {
   }
 
   getColGroup(size) {
-    var colGroup;
+    let colGroup;
 
     switch (size) {
       case 'large':
@@ -71,7 +71,7 @@ class TableExample extends React.Component {
   }
 
   getColumns(size) {
-    var columns;
+    let columns;
 
     switch (size) {
       case 'large':
@@ -127,7 +127,7 @@ class TableExample extends React.Component {
   }
 
   getRows(size) {
-    var rows;
+    let rows;
 
     switch (size) {
       case 'large':
@@ -213,7 +213,7 @@ class TableExample extends React.Component {
   }
 
   render() {
-    var buttonLabel;
+    let buttonLabel;
 
     if (this.state.rowAdded) {
       buttonLabel = 'Remove Row';

src/Dropdown/Dropdown.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import * as Util from '../Util/Util';
 import * as DOMUtil from '../Util/DOMUtil';
 
-var CSSTransitionGroup = React.addons.CSSTransitionGroup;
+const CSSTransitionGroup = React.addons.CSSTransitionGroup;
 
 export default class Dropdown extends React.Component {
   constructor() {
@@ -29,7 +29,7 @@ export default class Dropdown extends React.Component {
   }
 
   getSelectedHtml(id, items) {
-    var obj = Util.find(items, function (item) {
+    let obj = Util.find(items, function (item) {
       return item.id === id;
     });
 
@@ -38,7 +38,7 @@ export default class Dropdown extends React.Component {
 
   getMenuItems(items) {
     return items.map((item) => {
-      var classSet = classNames(
+      let classSet = classNames(
         {
           'is-selectable': item.selectable !== false,
           'is-selected': item.id === this.state.selectedID
@@ -47,7 +47,7 @@ export default class Dropdown extends React.Component {
         this.props.dropdownMenuListItemClassName
       );
 
-      var handleUserClick = null;
+      let handleUserClick = null;
 
       if (item.selectable !== false) {
         handleUserClick = this.handleItemClick.bind(this, item);
@@ -79,8 +79,8 @@ export default class Dropdown extends React.Component {
   }
 
   handleWrapperBlur(e) {
-    var elID = React.findDOMNode(this).dataset.reactid;
-    var currentEl = e.relatedTarget;
+    let elID = React.findDOMNode(this).dataset.reactid;
+    let currentEl = e.relatedTarget;
 
     // If the blur event fired from within the current dropdown, then the menu
     // needs to remain open. Otherwise it can safely be closed.
@@ -101,12 +101,12 @@ export default class Dropdown extends React.Component {
   }
 
   render() {
-    var dropdownStateClassSet = {
+    let dropdownStateClassSet = {
       'open': this.state.isOpen
     };
-    var dropdownMenu = null;
-    var items = this.props.items;
-    var wrapperClassSet = classNames(
+    let dropdownMenu = null;
+    let items = this.props.items;
+    let wrapperClassSet = classNames(
       dropdownStateClassSet,
       this.props.wrapperClassName
     );

src/List/List.js

@@ -1,4 +1,4 @@
-import React from 'react/addons';
+import React, {PropTypes} from 'react/addons';
 import classNames from 'classnames';
 
 import ListItem from './ListItem';
@@ -8,8 +8,8 @@ const CSSTransitionGroup = React.addons.CSSTransitionGroup;
 export default class List extends React.Component {
 
   getListItems(list, childIndex = 0) {
-    var items = list.map(function (item, parentIndex) {
-      var key = `${parentIndex}.${childIndex}`;
+    let items = list.map(function (item, parentIndex) {
+      let key = `${parentIndex}.${childIndex}`;
       childIndex++;
 
       if (item.items) {
@@ -40,15 +40,15 @@ export default class List extends React.Component {
   }
 
   render() {
-    var defaultClasses = [
+    let defaultClasses = [
       'list'
     ];
 
-    var classes = classNames(
+    let classes = classNames(
       defaultClasses.concat(this.props.className.split(' '))
     );
 
-    var Tag = this.props.tag;
+    let Tag = this.props.tag;
 
     return (
       <Tag {...this.props} className={classes}>
@@ -68,10 +68,10 @@ List.defaultProps = {
 };
 
 List.propTypes = {
-  attributes: React.PropTypes.object,
-  className: React.PropTypes.string,
-  items: React.PropTypes.array.isRequired,
-  tag: React.PropTypes.string,
-  transition: React.PropTypes.bool,
-  transitionName: React.PropTypes.string
+  attributes: PropTypes.object,
+  className: PropTypes.string,
+  items: PropTypes.array.isRequired,
+  tag: PropTypes.string,
+  transition: PropTypes.bool,
+  transitionName: PropTypes.string
 };

src/List/ListItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import classNames from 'classnames';
 
 export default class ListItem extends React.Component {
@@ -32,8 +32,8 @@ ListItem.defaultProps = {
 };
 
 ListItem.propTypes = {
-  className: React.PropTypes.string,
-  children: React.PropTypes.node,
-  attributes: React.PropTypes.object,
-  tag: React.PropTypes.string
+  className: PropTypes.string,
+  children: PropTypes.node,
+  attributes: PropTypes.object,
+  tag: PropTypes.string
 };

src/Modal/ModalContents.js

@@ -1,4 +1,4 @@
-import React from 'react/addons';
+import React, {PropTypes} from 'react/addons';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 
 import * as DOMUtil from '../Util/DOMUtil';
@@ -265,29 +265,29 @@ ModalContents.defaultProps = {
 };
 
 ModalContents.propTypes = {
-  children: React.PropTypes.node,
-  closeByBackdropClick: React.PropTypes.bool,
-  footer: React.PropTypes.object,
-  maxHeightPercentage: React.PropTypes.number,
-  onClose: React.PropTypes.func,
-  open: React.PropTypes.bool,
-  showCloseButton: React.PropTypes.bool,
-  showFooter: React.PropTypes.bool,
-  subHeader: React.PropTypes.node,
-  titleText: React.PropTypes.string,
+  children: PropTypes.node,
+  closeByBackdropClick: PropTypes.bool,
+  footer: PropTypes.object,
+  maxHeightPercentage: PropTypes.number,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+  showCloseButton: PropTypes.bool,
+  showFooter: PropTypes.bool,
+  subHeader: PropTypes.node,
+  titleText: PropTypes.string,
 
   // Classes
-  backdropClass: React.PropTypes.string,
-  bodyClass: React.PropTypes.string,
-  closeButtonClass: React.PropTypes.string,
-  closeIconClass: React.PropTypes.string,
-  closeTitleClass: React.PropTypes.string,
-  containerClass: React.PropTypes.string,
-  footerClass: React.PropTypes.string,
-  footerContainerClass: React.PropTypes.string,
-  headerClass: React.PropTypes.string,
-  headerContainerClass: React.PropTypes.string,
-  innerBodyClass: React.PropTypes.string,
-  modalClass: React.PropTypes.string,
-  titleClass: React.PropTypes.string
+  backdropClass: PropTypes.string,
+  bodyClass: PropTypes.string,
+  closeButtonClass: PropTypes.string,
+  closeIconClass: PropTypes.string,
+  closeTitleClass: PropTypes.string,
+  containerClass: PropTypes.string,
+  footerClass: PropTypes.string,
+  footerContainerClass: PropTypes.string,
+  headerClass: PropTypes.string,
+  headerContainerClass: PropTypes.string,
+  innerBodyClass: PropTypes.string,
+  modalClass: PropTypes.string,
+  titleClass: PropTypes.string
 };

src/Portal/Portal.js

@@ -1,6 +1,4 @@
-import React from 'react/addons';
-
-let PropTypes = React.PropTypes;
+import React, {PropTypes} from 'react/addons';
 
 export default class Portal extends React.Component {
   componentDidMount() {

src/SidePanel/SidePanelContents.js

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import GeminiScrollbar from 'react-gemini-scrollbar';
-import React from 'react/addons';
+import React, {PropTypes} from 'react/addons';
 
 const CSSTransitionGroup = React.addons.CSSTransitionGroup;
 const METHODS_TO_BIND = ['handleBackdropClick', 'closeSidePanel'];
 
-export default class SidePanel extends React.Component {
+export default class SidePanelContents extends React.Component {
   constructor() {
     super();
 
@@ -132,7 +132,7 @@ export default class SidePanel extends React.Component {
 
 }
 
-SidePanel.defaultProps = {
+SidePanelContents.defaultProps = {
   closeByBackdropClick: true,
   header: null,
   onClose: () => {},
@@ -147,18 +147,18 @@ SidePanel.defaultProps = {
   sidePanelClass: 'side-panel side-panel-large flex-container-col container container-pod container-pod-short flush-top'
 };
 
-SidePanel.propTypes = {
-  children: React.PropTypes.node,
-  closeByBackdropClick: React.PropTypes.bool,
-  header: React.PropTypes.node,
-  onClose: React.PropTypes.func,
-  open: React.PropTypes.bool,
+SidePanelContents.propTypes = {
+  children: PropTypes.node,
+  closeByBackdropClick: PropTypes.bool,
+  header: PropTypes.node,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
 
   // Classes
-  backdropClass: React.PropTypes.string,
-  bodyClass: React.PropTypes.string,
-  containerClass: React.PropTypes.string,
-  headerClass: React.PropTypes.string,
-  headerContainerClass: React.PropTypes.string,
-  sidePanelClass: React.PropTypes.string
+  backdropClass: PropTypes.string,
+  bodyClass: PropTypes.string,
+  containerClass: PropTypes.string,
+  headerClass: PropTypes.string,
+  headerContainerClass: PropTypes.string,
+  sidePanelClass: PropTypes.string
 };