Merge branch 'master' of https://github.com/awitherspoon/dazzle into …

…awitherspoon-master # Conflicts: # dist/lib.js # dist/lib.js.map
Raathigesh · Jul 22, 2017 · 970b4ae · 970b4ae
2 parents 6f5e2af + be0cc2a
commit 970b4ae
Show file tree

Hide file tree

Showing 30 changed files with 6,359 additions and 178 deletions.
diff --git a/lib/components/AddWidget.js b/lib/components/AddWidget.js
@@ -1,18 +1,17 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * Default AddWidget component.
  * @param  {[type]} {text    [description]
  * @param  {[type]} onClick} [description]
  * @return {[type]}          [description]
  */
-const AddWidget = ({text, onClick}) => {
-  return (
-    <div className="add-widget-button" onClick={onClick}>
-      <a className="add-widget-link">{text}</a>
-    </div>
-  );
-};
+const AddWidget = ({ text, onClick }) => (
+  <div className="add-widget-button" onClick={onClick}>
+    <a className="add-widget-link">{text}</a>
+  </div>
+);
 
 AddWidget.propTypes = {
   /**

diff --git a/lib/components/Column.js b/lib/components/Column.js
@@ -1,21 +1,22 @@
-import React, { Component, PropTypes, createElement } from 'react';
+import React, { Component, createElement } from 'react';
+import PropTypes from 'prop-types';
 import { DropTarget } from 'react-dnd';
 import { WIDGET } from './ItemTypes';
 import AddWidget from './AddWidget';
 import { moveWidget } from '../util';
 
 const columnTarget = {
   drop(props, monitor) {
-    const { layout, rowIndex, columnIndex, onMove} = props;
+    const { layout, rowIndex, columnIndex, onMove } = props;
     const item = monitor.getItem();
     if (item.columnIndex !== columnIndex || item.rowIndex !== rowIndex) {
       const movedLayout = moveWidget(layout, {
         rowIndex: item.rowIndex,
         columnIndex: item.columnIndex,
         widgetIndex: item.widgetIndex,
       }, {
-        rowIndex: rowIndex,
-        columnIndex: columnIndex,
+        rowIndex,
+        columnIndex,
       }, item.widgetName);
       onMove(movedLayout);
     }
@@ -56,9 +57,10 @@ class Column extends Component {
 
     let addWidgetComponentToUse = null;
     if (addWidgetComponent) {
-      addWidgetComponentToUse = createElement(addWidgetComponent, {	text: addWidgetComponentText, onClick:	() => {onAdd(layout, rowIndex, columnIndex);} });
+      // eslint max-len=off
+      addWidgetComponentToUse = createElement(addWidgetComponent, {	text: addWidgetComponentText, onClick:	() => {onAdd(layout, rowIndex, columnIndex);} }); // eslint-disable-line
     } else {
-      addWidgetComponentToUse = <AddWidget text={addWidgetComponentText} onClick={() => {onAdd(layout, rowIndex, columnIndex);}}/>;
+      addWidgetComponentToUse = <AddWidget text={addWidgetComponentText} onClick={() => {onAdd(layout, rowIndex, columnIndex);}}/>; // eslint-disable-line
     }
 
     return (
@@ -145,7 +147,7 @@ Column.propTypes = {
   addWidgetComponent: PropTypes.func,
 };
 
-Column.defaultProps  = {
+Column.defaultProps = {
   editableColumnClass: 'editable-column',
   droppableColumnClass: 'droppable-column',
 };

diff --git a/lib/components/Dashboard.js b/lib/components/Dashboard.js
@@ -1,12 +1,14 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import LayoutRenderer from './LayoutRenderer';
 
 /**
  * Main dashboard component. This is where all of this starts.
  */
- @DragDropContext(HTML5Backend)
+/* eslint react/prefer-stateless-function: "off" */
+@DragDropContext(HTML5Backend)
 class Dashboard extends Component {
   render() {
     return (

diff --git a/lib/components/DefaultFrame.js b/lib/components/DefaultFrame.js
@@ -1,19 +1,18 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 /**
  * Default frame that will be used with the widgets.
  */
-const DefaultFrame = ({children, onRemove, editable, title}) => {
-  return (
-    <div className="defaultWidgetFrame">
-      <div className="defaultWidgetFrameHeader">
-        <span className="title">{title}</span>
-        {editable && <a  className="remove" onClick={() => {onRemove();}}>Remove</a>}
-      </div>
-      {children}
+const DefaultFrame = ({ children, onRemove, editable, title }) => (
+  <div className="defaultWidgetFrame">
+    <div className="defaultWidgetFrameHeader">
+      <span className="title">{title}</span>
+      {editable && <a className="remove" onClick={() => onRemove()}>Remove</a>}
     </div>
-  );
-};
+    {children}
+  </div>
+);
 
 DefaultFrame.propTypes = {
   /**

diff --git a/lib/components/LayoutRenderer.js b/lib/components/LayoutRenderer.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Row from './Row';
 
 /**
@@ -20,7 +21,7 @@ const LayoutRenderer = (props) => {
     addWidgetComponent,
   } = props;
 
-  let rows = layout.rows.map((row, rowIndex) => {
+  let rows = layout.rows.map((row, rowIndex) => { // eslint-disable-line arrow-body-style
     return (
       <Row
         key={rowIndex}
@@ -38,7 +39,7 @@ const LayoutRenderer = (props) => {
         droppableColumnClass={droppableColumnClass}
         addWidgetComponentText={addWidgetComponentText}
         addWidgetComponent={addWidgetComponent}
-        />
+      />
     );
   });
 

diff --git a/lib/components/Row.js b/lib/components/Row.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Column from './Column';
 import Widgets from './Widgets';
 
@@ -23,7 +24,7 @@ function Row(props) {
     onMove,
   } = props;
 
-  const items = columns.map((column, index) => {
+  const items = columns.map((column, index) => { // eslint-disable-line arrow-body-style
     return (
       <Column
         key={index}

diff --git a/lib/components/WidgetFrame.js b/lib/components/WidgetFrame.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes, createElement } from 'react';
+import React, { Component, createElement } from 'react';
+import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import { DragSource, DropTarget } from 'react-dnd';
 import { WIDGET } from './ItemTypes';
@@ -57,22 +58,22 @@ const cardTarget = {
 
     if (monitor.getItem().columnIndex === columnIndex) {
       const newLayout = sortWidget(layout, {
-        rowIndex: rowIndex,
-        columnIndex: columnIndex,
+        rowIndex,
+        columnIndex,
         widgetIndex: dragIndex,
       }, {
-        rowIndex: rowIndex,
-        columnIndex: columnIndex,
+        rowIndex,
+        columnIndex,
         widgetIndex: hoverIndex,
-      },  monitor.getItem().widgetName);
+      }, monitor.getItem().widgetName);
 
       props.onMove(newLayout);
 
       // Note: we're mutating the monitor item here!
       // Generally it's better to avoid mutations,
       // but it's good here for the sake of performance
       // to avoid expensive index searches.
-      monitor.getItem().widgetIndex = hoverIndex;
+      monitor.getItem().widgetIndex = hoverIndex; // eslint-disable-line no-param-reassign
     }
   },
 };
@@ -87,7 +88,7 @@ const cardTarget = {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  }))
-class WidgetFrame  extends Component {
+class WidgetFrame extends Component {
   render() {
     const {
       frameComponent,
@@ -103,7 +104,7 @@ class WidgetFrame  extends Component {
 
     if (frameComponent) {
       // if user provided a custom frame,  use it
-      selected = createElement(frameComponent, {	children,	editable, title, onRemove: this.remove });
+      selected = createElement(frameComponent, {	children,	editable, title, onRemove: this.remove }); // eslint-disable-line max-len
     } else {
       // else use the default frame
       selected = (
@@ -127,7 +128,7 @@ class WidgetFrame  extends Component {
 
   remove = () => {
     const { layout, rowIndex, columnIndex, widgetIndex } = this.props;
-    const newLayout = removeWidget(layout, rowIndex, columnIndex,  widgetIndex);
+    const newLayout = removeWidget(layout, rowIndex, columnIndex, widgetIndex);
     this.props.onRemove(newLayout);
   }
 }

diff --git a/lib/components/Widgets.js b/lib/components/Widgets.js
@@ -1,11 +1,13 @@
-import React, { PropTypes, createElement } from 'react';
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 import WidgetFrame from './WidgetFrame';
 
 /**
  * Component that renders the widget which belongs to a column.
  */
-const Widgets = ({widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex, editable, frameComponent, onMove}) => {
-  let createdWidgets = widgets.map((widget, index)=> {
+/* eslint max-len: "off" */
+const Widgets = ({ widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex, editable, frameComponent, onMove }) => {
+  let createdWidgets = widgets.map((widget, index) => { // eslint-disable-line arrow-body-style
     return (
       <WidgetFrame
         key={index}

diff --git a/lib/index.js b/lib/index.js
@@ -1,2 +1,2 @@
-export  { default as default } from './components/Dashboard';
+export { default as default } from './components/Dashboard';
 export { addWidget } from './util';
diff --git a/lib/util/index.js b/lib/util/index.js
@@ -46,6 +46,7 @@ export function removeWidget(layout, rowIndex, columnIndex, widgetIndex) {
  * Moves a widget from column to column.
  */
 export function moveWidget(layout, initialLocation, destination, widgetName) {
+  /* eslint max-len: "off" */
   const removedLayout = removeWidget(layout, initialLocation.rowIndex, initialLocation.columnIndex, initialLocation.widgetIndex);
   const movedLayout = addWidget(removedLayout, destination.rowIndex, destination.columnIndex, widgetName);
   return movedLayout;

diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "cross-env": "^1.0.7",
     "css-loader": "^0.23.0",
     "cz-conventional-changelog": "^1.1.5",
-    "enzyme": "^2.2.0",
+    "enzyme": "^2.8.2",
     "eslint": "2.5.2",
     "eslint-config-airbnb": "^6.2.0",
     "eslint-loader": "^1.1.1",
@@ -64,9 +64,9 @@
     "jsdom": "^8.1.0",
     "json-loader": "^0.5.3",
     "mocha": "^2.3.4",
-    "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
-    "react-dom": "^0.14.0",
+    "react": "^15.5.4",
+    "react-addons-test-utils": "^15.5.1",
+    "react-dom": "^15.5.4",
     "react-hot-loader": "^1.3.0",
     "react-modal": "^1.1.1",
     "rimraf": "^2.4.3",

diff --git a/sample/components/AddWidgetDialog.jsx b/sample/components/AddWidgetDialog.jsx
@@ -1,20 +1,20 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Modal from 'react-modal';
 
-const AddWidgetDialog = ({ widgets, isModalOpen, onRequestClose, onWidgetSelect}) => {
-  const widgetItems = Object.keys(widgets).map(widget => {
-    return (
-      <div className="list-group">
-        <a href="#" className="list-group-item" onClick={() => onWidgetSelect(widget)}>
-          <h6 className="list-group-item-heading">{widgets[widget].title}</h6>
-        </a>
-      </div>
-    );
-  });
+const AddWidgetDialog = ({ widgets, isModalOpen, onRequestClose, onWidgetSelect }) => {
+  const widgetItems = Object.keys(widgets).map(widget => (
+    <div className="list-group">
+      <a href="#" className="list-group-item" onClick={() => onWidgetSelect(widget)}>
+        <h6 className="list-group-item-heading">{widgets[widget].title}</h6>
+      </a>
+    </div>
+  ));
   return (
     <Modal
       className="Modal__Bootstrap modal-dialog"
-      isOpen={isModalOpen}>
+      isOpen={isModalOpen}
+    >
       <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" onClick={onRequestClose}>

diff --git a/sample/components/Container.jsx b/sample/components/Container.jsx
@@ -1,14 +1,13 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const Container = ({children}) => {
-  return (
-    <div className="container body">
-      <div className="main_container">
-        {children}
-      </div>
+const Container = ({ children }) => (
+  <div className="container body">
+    <div className="main_container">
+      {children}
     </div>
-  );
-};
+  </div>
+);
 
 Container.propTypes = {
   children: PropTypes.array,

diff --git a/sample/components/CustomAddWidgetButton.jsx b/sample/components/CustomAddWidgetButton.jsx
@@ -1,12 +1,11 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const CustomAddWidgetButton = ({text, onClick}) => {
-  return (
-    <div>
-      <button onClick={onClick}>{text}</button>
-    </div>
-  );
-};
+const CustomAddWidgetButton = ({ text, onClick }) => (
+  <div>
+    <button onClick={onClick}>{text}</button>
+  </div>
+);
 
 CustomAddWidgetButton.propTypes = {
   text: PropTypes.string,

diff --git a/sample/components/EditBar.jsx b/sample/components/EditBar.jsx
@@ -1,17 +1,16 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const EditBar = ({ onEdit }) => {
-  return (
-    <div className="row edit-bar">
-      <div className="col-sm-12 text-right">
-        <button type="button" className="btn btn-default btn-xs" onClick={onEdit}>
-          <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>
-            Edit
-          </button>
-      </div>
+const EditBar = ({ onEdit }) => (
+  <div className="row edit-bar">
+    <div className="col-sm-12 text-right">
+      <button type="button" className="btn btn-default btn-xs" onClick={onEdit}>
+        <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+          Edit
+        </button>
     </div>
-  );
-};
+  </div>
+);
 
 EditBar.propTypes = {
   onEdit: PropTypes.func,