From f982f1742220a1ff6f7d68b49cd8ba14be20cc1f Mon Sep 17 00:00:00 2001 From: Kenny Tran Date: Mon, 21 Sep 2015 16:46:08 -0700 Subject: [PATCH 1/4] Polish up in src/ --- src/Dropdown/Dropdown.js | 20 ++++++------ src/List/List.js | 24 +++++++------- src/List/ListItem.js | 10 +++--- src/Modal/ModalContents.js | 48 +++++++++++++-------------- src/Portal/Portal.js | 4 +-- src/SidePanel/SidePanelContents.js | 24 +++++++------- src/Table/Table.js | 52 +++++++++++++++--------------- src/Util/Util.js | 2 +- 8 files changed, 91 insertions(+), 93 deletions(-) diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index e481dc46a..a98d9efeb 100644 --- a/src/Dropdown/Dropdown.js +++ b/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 ); diff --git a/src/List/List.js b/src/List/List.js index 65a59dc9f..a7934236a 100644 --- a/src/List/List.js +++ b/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 ( @@ -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 }; diff --git a/src/List/ListItem.js b/src/List/ListItem.js index ed04d00e8..72d4ae417 100644 --- a/src/List/ListItem.js +++ b/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 }; diff --git a/src/Modal/ModalContents.js b/src/Modal/ModalContents.js index 0f2375216..40a7c297b 100644 --- a/src/Modal/ModalContents.js +++ b/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 }; diff --git a/src/Portal/Portal.js b/src/Portal/Portal.js index b6ff2b760..d93a34339 100644 --- a/src/Portal/Portal.js +++ b/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() { diff --git a/src/SidePanel/SidePanelContents.js b/src/SidePanel/SidePanelContents.js index 6be5d6fe1..7fc198eb1 100644 --- a/src/SidePanel/SidePanelContents.js +++ b/src/SidePanel/SidePanelContents.js @@ -1,6 +1,6 @@ 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']; @@ -148,17 +148,17 @@ SidePanel.defaultProps = { }; SidePanel.propTypes = { - children: React.PropTypes.node, - closeByBackdropClick: React.PropTypes.bool, - header: React.PropTypes.node, - onClose: React.PropTypes.func, - open: React.PropTypes.bool, + 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 }; diff --git a/src/Table/Table.js b/src/Table/Table.js index adc960ddc..0304ccadb 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -1,14 +1,14 @@ import React, {PropTypes} from 'react/addons'; import * as Util from '../Util/Util'; -var CSSTransitionGroup = React.addons.CSSTransitionGroup; +const CSSTransitionGroup = React.addons.CSSTransitionGroup; -var sortData = (columns, data, sortBy) => { +let sortData = (columns, data, sortBy) => { if (sortBy.order === undefined || sortBy.prop === undefined) { return data; } - var sortFunction; + let sortFunction; columns.forEach((column) => { if (column.prop === sortBy.prop) { @@ -31,7 +31,7 @@ var sortData = (columns, data, sortBy) => { return data; }; -var getClassName = (column, sortBy, data) => { +let getClassName = (column, sortBy, data) => { if (Util.isFunction(column.className)) { return column.className( column.prop, sortBy, data @@ -62,8 +62,8 @@ export default class Table extends React.Component { } getHeaders(headers, sortBy) { - var buildSortAttributes = (header) => { - var sortEvent = this.handleSort.bind(this, header.prop); + let buildSortAttributes = (header) => { + let sortEvent = this.handleSort.bind(this, header.prop); return { onClick: sortEvent, tabIndex: 0, @@ -74,8 +74,8 @@ export default class Table extends React.Component { }; return headers.map((header, index) => { - var order, heading; - var attributes = {}; + let order, heading; + let attributes = {}; // Only add sorting events if the column has a value for 'prop' // and the 'sorting' property is true. @@ -116,17 +116,17 @@ export default class Table extends React.Component { return data.map((row) => { // Create the custom row attributes object, always with a key. - var rowAttributes = Util.extend( + let rowAttributes = Util.extend( {key: Util.values(Util.pick(row, keys))}, buildRowOptions(row, this)); // For each column in the data, output a cell in each row with the value // specified by the data prop. - var rowCells = columns.map((column, index) => { - var cellAttributes = column.attributes; - var cellClassName = getClassName(column, this.state.sortBy, row); + let rowCells = columns.map((column, index) => { + let cellAttributes = column.attributes; + let cellClassName = getClassName(column, this.state.sortBy, row); - var cellValue = row[column.prop]; + let cellValue = row[column.prop]; if (column.render) { cellValue = column.render(column.prop, row); @@ -153,14 +153,14 @@ export default class Table extends React.Component { } handleSort(prop, options) { - var sortBy = this.state.sortBy; - var onSortCallback = this.props.onSortCallback; + let sortBy = this.state.sortBy; + let onSortCallback = this.props.onSortCallback; options = Util.extend({ toggle: true }, options); if (options.toggle) { - var order; + let order; if (sortBy.order === 'desc') { order = 'asc'; @@ -179,16 +179,16 @@ export default class Table extends React.Component { } render() { - var buildRowOptions = this.props.buildRowOptions; - var columns = this.props.columns; - var data = this.props.data; - var keys = this.props.keys; - var sortBy = this.state.sortBy; - var sortedData = sortData(columns, data, sortBy); - - var headers = this.getHeaders(columns, sortBy); - var rows = this.getRows(sortedData, columns, keys, buildRowOptions); - var tbody; + let buildRowOptions = this.props.buildRowOptions; + let columns = this.props.columns; + let data = this.props.data; + let keys = this.props.keys; + let sortBy = this.state.sortBy; + let sortedData = sortData(columns, data, sortBy); + + let headers = this.getHeaders(columns, sortBy); + let rows = this.getRows(sortedData, columns, keys, buildRowOptions); + let tbody; if (this.props.transition === true) { tbody = ( diff --git a/src/Util/Util.js b/src/Util/Util.js index 4da8fd080..0daaa68e3 100644 --- a/src/Util/Util.js +++ b/src/Util/Util.js @@ -1,4 +1,4 @@ -let Util = { +const Util = { arrayPush(array, values) { let index = -1, length = values.length, From 0acdc98a15d9003be3be6a1f0b5deed56818b0c4 Mon Sep 17 00:00:00 2001 From: Kenny Tran Date: Mon, 21 Sep 2015 16:48:37 -0700 Subject: [PATCH 2/4] Polish examples --- docs/src/Dropdown/index.js | 8 ++++---- docs/src/Table/index.js | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/src/Dropdown/index.js b/docs/src/Dropdown/index.js index 6884ce4ba..9f8ac4a29 100644 --- a/docs/src/Dropdown/index.js +++ b/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: @@ -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', diff --git a/docs/src/Table/index.js b/docs/src/Table/index.js index 1eb57c8d3..42604c34f 100644 --- a/docs/src/Table/index.js +++ b/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'; From dc3dcd6d05027acbfab7bb9c46e3ea8c4828092d Mon Sep 17 00:00:00 2001 From: Kenny Tran Date: Mon, 21 Sep 2015 16:50:04 -0700 Subject: [PATCH 3/4] Polish gulpfile --- docs/gulpTasks.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/gulpTasks.js b/docs/gulpTasks.js index bde6fb625..c9783938f 100644 --- a/docs/gulpTasks.js +++ b/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, From 3f0a73b9bf3ee8b1838411ee9c53e2bfe9739a72 Mon Sep 17 00:00:00 2001 From: Kenny Tran Date: Mon, 21 Sep 2015 17:01:28 -0700 Subject: [PATCH 4/4] Rename SidePanel into SidePanelContents --- src/SidePanel/SidePanelContents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SidePanel/SidePanelContents.js b/src/SidePanel/SidePanelContents.js index 7fc198eb1..ed656bec2 100644 --- a/src/SidePanel/SidePanelContents.js +++ b/src/SidePanel/SidePanelContents.js @@ -5,7 +5,7 @@ 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,7 +147,7 @@ SidePanel.defaultProps = { sidePanelClass: 'side-panel side-panel-large flex-container-col container container-pod container-pod-short flush-top' }; -SidePanel.propTypes = { +SidePanelContents.propTypes = { children: PropTypes.node, closeByBackdropClick: PropTypes.bool, header: PropTypes.node,