scrollbar refactor: replace HOC by component with children

public/app/core/components/ScrollBar/GrafanaScrollbar.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import GrafanaScrollbar from './GrafanaScrollbar';
+
+describe('GrafanaScrollbar', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(
+        <GrafanaScrollbar>
+          <p>Scrollable content</p>
+        </GrafanaScrollbar>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

public/app/core/components/ScrollBar/GrafanaScrollbar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Scrollbars from 'react-custom-scrollbars';
+
+interface GrafanaScrollBarProps {
+  customClassName?: string;
+  autoHide?: boolean;
+  autoHideTimeout?: number;
+  autoHideDuration?: number;
+  hideTracksWhenNotNeeded?: boolean;
+}
+
+const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
+  customClassName: 'custom-scrollbars',
+  autoHide: true,
+  autoHideTimeout: 200,
+  autoHideDuration: 200,
+  hideTracksWhenNotNeeded: false,
+};
+
+/**
+ * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
+ */
+class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
+  static defaultProps = grafanaScrollBarDefaultProps;
+
+  render() {
+    const { customClassName, children, ...scrollProps } = this.props;
+
+    return (
+      <Scrollbars
+        className={customClassName}
+        autoHeight={true}
+        autoHeightMin={'100%'}
+        autoHeightMax={'100%'}
+        renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
+        renderTrackVertical={props => <div {...props} className="track-vertical" />}
+        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
+        renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
+        renderView={props => <div {...props} className="view" />}
+        {...scrollProps}
+      >
+        {children}
+      </Scrollbars>
+    );
+  }
+}
+
+export default GrafanaScrollbar;

public/app/core/components/ScrollBar/__snapshots__/withScrollBar.test.tsx.snap → public/app/core/components/ScrollBar/__snapshots__/GrafanaScrollbar.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`withScrollBar renders correctly 1`] = `
+exports[`GrafanaScrollbar renders correctly 1`] = `
 <div
   className="custom-scrollbars"
   style={
@@ -32,9 +32,9 @@ exports[`withScrollBar renders correctly 1`] = `
       }
     }
   >
-    <div
-      className="my-component"
-    />
+    <p>
+      Scrollable content
+    </p>
   </div>
   <div
     className="track-horizontal"

public/app/core/components/ScrollBar/withScrollBar.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import withScrollBar from './withScrollBar';
-
-class TestComponent extends React.Component {
-  render() {
-    return <div className="my-component" />;
-  }
-}
-
-describe('withScrollBar', () => {
-  it('renders correctly', () => {
-    const TestComponentWithScroll = withScrollBar(TestComponent);
-    const tree = renderer
-      .create(
-        <TestComponentWithScroll>
-          <p>Scrollable content</p>
-        </TestComponentWithScroll>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

public/app/core/components/ScrollBar/withScrollBar.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import Scrollbars from 'react-custom-scrollbars';
-
-interface WithScrollBarProps {
-  customClassName?: string;
-  autoHide?: boolean;
-  autoHideTimeout?: number;
-  autoHideDuration?: number;
-  hideTracksWhenNotNeeded?: boolean;
-}
-
-const withScrollBarDefaultProps: Partial<WithScrollBarProps> = {
-  customClassName: 'custom-scrollbars',
-  autoHide: true,
-  autoHideTimeout: 200,
-  autoHideDuration: 200,
-  hideTracksWhenNotNeeded: false,
-};
-
-/**
- * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
- */
-export default function withScrollBar<P extends object>(WrappedComponent: React.ComponentType<P>) {
-  return class extends React.Component<P & WithScrollBarProps> {
-    static defaultProps = withScrollBarDefaultProps;
-
-    render() {
-      // Use type casting here in order to get rest of the props working. See more
-      // https://github.com/Microsoft/TypeScript/issues/14409
-      // https://github.com/Microsoft/TypeScript/pull/13288
-      const { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded, customClassName, ...props } = this
-        .props as WithScrollBarProps;
-      const scrollProps = { autoHide, autoHideTimeout, autoHideDuration, hideTracksWhenNotNeeded };
-
-      return (
-        <Scrollbars
-          className={customClassName}
-          autoHeight={true}
-          autoHeightMin={'100%'}
-          autoHeightMax={'100%'}
-          renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
-          renderTrackVertical={props => <div {...props} className="track-vertical" />}
-          renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
-          renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
-          renderView={props => <div {...props} className="view" />}
-          {...scrollProps}
-        >
-          <WrappedComponent {...props} />
-        </Scrollbars>
-      );
-    }
-  };
-}