chore: Move CustomScrollbar to @grafana/ui #14759

packages/grafana-ui/package.json

@@ -16,6 +16,7 @@
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.6.3",
     "react-highlight-words": "0.11.0",
     "react-popper": "^1.3.0",
@@ -23,11 +24,14 @@
     "react-virtualized": "^9.21.0"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
     "@types/react": "^16.7.6",
-    "@types/classnames": "^2.2.6",
-    "@types/jquery": "^1.10.35",
+    "@types/react-custom-scrollbars": "^4.0.5",
+    "@types/react-test-renderer": "^16.0.3",
+    "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"
   }
 }

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.test.tsx

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

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react';
+import Scrollbars from 'react-custom-scrollbars';
+
+interface Props {
+  customClassName?: string;
+  autoHide?: boolean;
+  autoHideTimeout?: number;
+  autoHideDuration?: number;
+  hideTracksWhenNotNeeded?: boolean;
+}
+
+/**
+ * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
+ */
+export class CustomScrollbar extends PureComponent<Props> {
+  static defaultProps: Partial<Props> = {
+    customClassName: 'custom-scrollbars',
+    autoHide: true,
+    autoHideTimeout: 200,
+    autoHideDuration: 200,
+    hideTracksWhenNotNeeded: false,
+  };
+
+  render() {
+    const { customClassName, children, ...scrollProps } = this.props;
+
+    return (
+      <Scrollbars
+        className={customClassName}
+        autoHeight={true}
+        // These autoHeightMin & autoHeightMax options affect firefox and chrome differently.
+        // Before these where set to inhert but that caused problems with cut of legends in firefox
+        autoHeightMin={'0'}
+        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 CustomScrollbar;

packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomScrollbar renders correctly 1`] = `
+<div
+  className="custom-scrollbars"
+  style={
+    Object {
+      "height": "auto",
+      "maxHeight": "100%",
+      "minHeight": "0",
+      "overflow": "hidden",
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+>
+  <div
+    className="view"
+    style={
+      Object {
+        "WebkitOverflowScrolling": "touch",
+        "bottom": undefined,
+        "left": undefined,
+        "marginBottom": 0,
+        "marginRight": 0,
+        "maxHeight": "calc(100% + 0px)",
+        "minHeight": "calc(0 + 0px)",
+        "overflow": "scroll",
+        "position": "relative",
+        "right": undefined,
+        "top": undefined,
+      }
+    }
+  >
+    <p>
+      Scrollable content
+    </p>
+  </div>
+  <div
+    className="track-horizontal"
+    style={
+      Object {
+        "display": "none",
+        "height": 6,
+        "opacity": 0,
+        "position": "absolute",
+        "transition": "opacity 200ms",
+      }
+    }
+  >
+    <div
+      className="thumb-horizontal"
+      style={
+        Object {
+          "display": "block",
+          "height": "100%",
+          "position": "relative",
+        }
+      }
+    />
+  </div>
+  <div
+    className="track-vertical"
+    style={
+      Object {
+        "display": "none",
+        "opacity": 0,
+        "position": "absolute",
+        "transition": "opacity 200ms",
+        "width": 6,
+      }
+    }
+  >
+    <div
+      className="thumb-vertical"
+      style={
+        Object {
+          "display": "block",
+          "position": "relative",
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+</div>
+`;

packages/grafana-ui/src/components/index.ts

@@ -1 +1,2 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
+export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';