Merge pull request #8 from jobready/feature/NEP-1126

[NEP-1126] added property for displaying a scrollbar
rdytech · Mar 22, 2018 · f31fa65 · f31fa65
2 parents a2beb85 + ef6d60a
commit f31fa65
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 34 deletions.
diff --git a/dist/react-dashboard.js b/dist/react-dashboard.js
@@ -36276,7 +36276,9 @@ var Dashboard = React.createClass({
                     widgetId: widget.id,
                     icon: widget.icon,
                     editMode: this.props.editMode,
-                    enabled: widget.enabled
+                    enabled: widget.enabled,
+                    scrollable: widget.scrollable,
+                    maxHeight: widget.max_height
                 }));
             }, this);
         }
@@ -36307,7 +36309,9 @@ var ListWidget = React.createClass({
     getDefaultProps: function getDefaultProps() {
         return {
             pollInterval: 300000,
-            editMode: false
+            editMode: false,
+            scrollable: false,
+            maxHeight: "226px"
         };
     },
 
@@ -36331,7 +36335,13 @@ var ListWidget = React.createClass({
         this.loadItems();
         this.interval = setInterval(this.loadItems, this.props.pollInterval);
     },
-
+    scrollableStyles: function scrollableStyles() {
+        if (this.props.scrollable === true) {
+            return { overflowY: "scroll", maxHeight: this.props.maxHeight };
+        } else {
+            return {};
+        }
+    },
     render: function render() {
         var classes = "icon heading-icon " + this.props.icon;
         var listItems = this.state.data.items.map(function (item) {
@@ -36369,7 +36379,7 @@ var ListWidget = React.createClass({
             ),
             React.createElement(
                 "div",
-                { className: "panel-body" },
+                { className: "panel-body", style: this.scrollableStyles() },
                 React.createElement(
                     "div",
                     { className: "list-group" },

diff --git a/dist/react-dashboard.min.js b/dist/react-dashboard.min.js
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
@@ -35,7 +35,9 @@ var Dashboard = React.createClass({
                             widgetId: widget.id,
                             icon: widget.icon,
                             editMode: this.props.editMode,
-                            enabled: widget.enabled
+                            enabled: widget.enabled,
+                            scrollable: widget.scrollable,
+                            maxHeight: widget.max_height
                         })
                     ));
             }, this);

diff --git a/src/components/ListWidget.js b/src/components/ListWidget.js
@@ -9,7 +9,9 @@ var ListWidget = React.createClass({
     getDefaultProps: function () {
         return {
             pollInterval: 300000,
-            editMode: false
+            editMode: false,
+            scrollable: false,
+            maxHeight: '226px'
         };
     },
 
@@ -33,7 +35,14 @@ var ListWidget = React.createClass({
         this.loadItems();
         this.interval = setInterval(this.loadItems, this.props.pollInterval);
     },
-
+    scrollableStyles: function() {
+      if (this.props.scrollable === true) {
+        return { overflowY: 'scroll', maxHeight: this.props.maxHeight };
+      }
+      else {
+        return {};
+      }
+    },
     render: function () {
         var classes = "icon heading-icon " + this.props.icon;
         var listItems = this.state.data.items.map(function (item) {
@@ -60,7 +69,7 @@ var ListWidget = React.createClass({
                     {saveButton}
                     <span className="badge pull-right bg-primary">{this.state.data.count}</span>
                 </div>
-                <div className="panel-body">
+                <div className="panel-body" style={this.scrollableStyles()}>
                     <div className="list-group">
                          {listItems}
                     </div>

diff --git a/test/components/DashboardTest.js b/test/components/DashboardTest.js
@@ -7,11 +7,6 @@ var ListWidget = require('../../src/components/ListWidget');
 var DashboardConfigurationStore = require('../../src/stores/DashboardConfigurationStore');
 
 describe('Dashboard', function () {
-    it('loads the configuration from the store', function () {
-        TestUtils.renderIntoDocument(<Dashboard />);
-        expect(DashboardConfigurationStore.get.mock.calls.length).toEqual(1);
-    });
-
     it('supports rendering list widgets', function () {
         var widgetConfiguration = {
             "widgets": [{
@@ -24,8 +19,7 @@ describe('Dashboard', function () {
                 "poll": 10000
             }]
         };
-        DashboardConfigurationStore.get.mockReturnValue(widgetConfiguration);
-        var dashboard = TestUtils.renderIntoDocument(<Dashboard />);
+        var dashboard = TestUtils.renderIntoDocument(<Dashboard editMode='false' configuration={widgetConfiguration} />);
 
         var widgets = TestUtils.scryRenderedComponentsWithType(dashboard, ListWidget);
         expect(widgets.length).toEqual(1);
@@ -43,8 +37,7 @@ describe('Dashboard', function () {
                 "poll": 10000
             }]
         };
-        DashboardConfigurationStore.get.mockReturnValue(widgetConfiguration);
-        var dashboard = TestUtils.renderIntoDocument(<Dashboard />);
+        var dashboard = TestUtils.renderIntoDocument(<Dashboard editMode='false' configuration={widgetConfiguration}/>);
 
         var widgets = TestUtils.scryRenderedComponentsWithType(dashboard, ListWidget);
         expect(widgets.length).toEqual(0);
@@ -63,8 +56,7 @@ describe('Dashboard', function () {
                     "poll": 10000
                 }]
             };
-            DashboardConfigurationStore.get.mockReturnValue(widgetConfiguration);
-            var dashboard = TestUtils.renderIntoDocument(<Dashboard editMode={true}/>);
+            var dashboard = TestUtils.renderIntoDocument(<Dashboard editMode={true} configuration={widgetConfiguration} />);
 
             var widgets = TestUtils.scryRenderedComponentsWithType(dashboard, ListWidget);
             expect(widgets.length).toEqual(1);

diff --git a/test/components/WidgetSaveButtonTest.js b/test/components/WidgetSaveButtonTest.js
@@ -7,14 +7,14 @@ var ListWidget = require('../../src/components/ListWidget');
 var DashboardActions = require('../../src/actions/DashboardActions');
 
 describe('WidgetSaveButton', function () {
-    it('shows renders a button', function () {
+    it('renders a link', function () {
         var widget = TestUtils.renderIntoDocument(<WidgetSaveButton enabled={true} />);
-        var button = TestUtils.findRenderedDOMComponentWithTag(widget, "button");
+        var button = TestUtils.findRenderedDOMComponentWithTag(widget, "a");
     });
 
     it('Sends a Toggle Widget action when clicked', function () {
         var widget = TestUtils.renderIntoDocument(<WidgetSaveButton enabled={true} />);
-        var button = TestUtils.findRenderedDOMComponentWithTag(widget, "button");
+        var button = TestUtils.findRenderedDOMComponentWithTag(widget, "a");
         React.addons.TestUtils.Simulate.click(button);
         expect(DashboardActions.toggleWidget.mock.calls.length).toEqual(1);
     });