Merge pull request #47 from pcross616/react16

react16 support

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015", "react", "stage-0"],
+  "presets": ["env", "react", "stage-0"],
   "plugins": ["transform-decorators-legacy"]
 }

.eslintrc

@@ -8,7 +8,7 @@
     "node": true                     // Node.js global variables and Node.js-specific rules
   },
   "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 2018
   },
   "rules": {
 /**
@@ -163,14 +163,13 @@
     "react/jsx-sort-prop-types": 0,  // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-prop-types.md
     "react/jsx-uses-react": 2,       // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
     "react/jsx-uses-vars": 2,        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
-    "react/no-did-mount-set-state": [2, "allow-in-func"], // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
+    "react/no-did-mount-set-state": 2, // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
     "react/no-did-update-set-state": 2, // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
     "react/no-multi-comp": 2,        // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md
     "react/no-unknown-property": 2,  // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
     "react/prop-types": 0,           // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
     "react/react-in-jsx-scope": 2,   // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
     "react/self-closing-comp": 2,    // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
-    "react/wrap-multilines": 2,      // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md
     "react/sort-comp": [2, {         // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
       "order": [
         "displayName",

.travis.yml

@@ -6,9 +6,9 @@ cache:
 notifications:
   email: false
 node_js:
-  - '4'
+  - '8'
 before_install:
-  - npm i -g npm@^2.0.0
+  - npm i -g npm@^5.0.0
   - npm i -g codecov
 before_script:
   - npm prune

lib/components/DefaultFrame.js

@@ -30,7 +30,7 @@ DefaultFrame.propTypes = {
    */
   onRemove: PropTypes.func,
 
- /**
+  /**
   * Title of the widget
   */
   title: PropTypes.string,

lib/components/LayoutRenderer.js

@@ -21,7 +21,7 @@ const LayoutRenderer = (props) => {
     addWidgetComponent,
   } = props;
 
-  let rows = layout.rows.map((row, rowIndex) => { // eslint-disable-line arrow-body-style
+  const rows = layout.rows.map((row, rowIndex) => { // eslint-disable-line arrow-body-style
     return (
       <Row
         key={rowIndex}

lib/components/Row.js

@@ -43,6 +43,7 @@ function Row(props) {
         <Widgets
           key={index}
           widgets={column.widgets}
+          containerClassName={column.containerClassName}
           widgetTypes={widgets}
           onRemove={onRemove}
           layout={layout}

lib/components/WidgetFrame.js

@@ -89,49 +89,56 @@ const cardTarget = {
    isDragging: monitor.isDragging(),
  }))
 class WidgetFrame extends Component {
-  render() {
-    const {
-      frameComponent,
-      children,
-      editable,
-      title,
-      connectDragSource,
-      connectDropTarget,
-      isDragging,
-    } = this.props;
-
-    let selected = null;
-
-    if (frameComponent) {
-      // if user provided a custom frame,  use it
-      selected = createElement(frameComponent, {	children,	editable, title, onRemove: this.remove }); // eslint-disable-line max-len
-    } else {
-      // else use the default frame
-      selected = (
-        <DefaultFrame
-          title={title}
-          editable={editable}
-          children={children}
-          onRemove={this.remove}
-        />
-      );
-    }
-    const opacity = isDragging ? 0 : 1;
-    const widgetFrame = (
-        <div style={{ opacity }}>
-            {selected}
-        </div>
-    );
-
-    return editable ? connectDragSource(connectDropTarget(widgetFrame)) : widgetFrame;
-  }
+   render() {
+     const {
+       frameComponent,
+       children,
+       editable,
+       title,
+       frameSettings,
+       connectDragSource,
+       connectDropTarget,
+       isDragging,
+     } = this.props;
+
+     let selected = null;
+
+     if (frameComponent) {
+       // if user provided a custom frame,  use it
+       selected = createElement(frameComponent, {
+         children,
+         editable,
+         title,
+         settings: frameSettings,
+         onRemove: this.remove,
+       });
+     } else {
+       // else use the default frame
+       selected = (
+         <DefaultFrame
+           title={title}
+           editable={editable}
+           children={children}
+           onRemove={this.remove}
+         />
+       );
+     }
+     const opacity = isDragging ? 0 : 1;
+     const widgetFrame = (
+       <div style={{ opacity }}>
+         {selected}
+       </div>
+     );
+
+     return editable ? connectDragSource(connectDropTarget(widgetFrame)) : widgetFrame;
+   }
 
   remove = () => {
     const { layout, rowIndex, columnIndex, widgetIndex } = this.props;
     const newLayout = removeWidget(layout, rowIndex, columnIndex, widgetIndex);
     this.props.onRemove(newLayout);
   }
-}
+ }
 
 WidgetFrame.propTypes = {
   /**
@@ -170,6 +177,11 @@ WidgetFrame.propTypes = {
    */
   frameComponent: PropTypes.func,
 
+  /**
+   * User provided settings for be use by custom widget frame.
+   */
+  frameSettings: PropTypes.object,
+
   /**
    * Name of the widget.
    */
@@ -190,7 +202,7 @@ WidgetFrame.propTypes = {
    */
   connectDragSource: PropTypes.func,
 
-/**
+  /**
  * ReactDnd's connectDropTarget().
  */
   connectDropTarget: PropTypes.func,
@@ -201,4 +213,8 @@ WidgetFrame.propTypes = {
   onRemove: PropTypes.func,
 };
 
+WidgetFrame.defaultProps = {
+  frameSettings: {},
+};
+
 export default WidgetFrame;

lib/components/Widgets.js

@@ -6,8 +6,8 @@ import WidgetFrame from './WidgetFrame';
  * Component that renders the widget which belongs to a column.
  */
 /* 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
+const Widgets = ({ widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex, editable, frameComponent, onMove, containerClassName }) => {
+  const createdWidgets = widgets.map((widget, index) => { // eslint-disable-line arrow-body-style
     return (
       <WidgetFrame
         key={index}
@@ -20,6 +20,7 @@ const Widgets = ({ widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex
         widgetIndex={index}
         editable={editable}
         frameComponent={frameComponent}
+        frameSettings={widgetTypes[widget.key].frameSettings}
         onMove={onMove}
       >
         {
@@ -28,10 +29,14 @@ const Widgets = ({ widgets, widgetTypes, onRemove, layout, columnIndex, rowIndex
       </WidgetFrame>
     );
   });
-  return <div>{createdWidgets}</div>;
+  return <div className={containerClassName}>{createdWidgets}</div>;
 };
 
 Widgets.propTypes = {
+  /**
+   * CSS class name that should be provided to the widgets container.
+   */
+  containerClassName: PropTypes.string,
   /**
    * Widgets that should be rendered.
    */