refactoring: custom scrollbars PR updated, #13175

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

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

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

-import React from 'react';
+import React, { PureComponent } from 'react';
 import Scrollbars from 'react-custom-scrollbars';
 import Scrollbars from 'react-custom-scrollbars';
 
 
-interface GrafanaScrollBarProps {
+interface Props {
   customClassName?: string;
   customClassName?: string;
   autoHide?: boolean;
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHideTimeout?: number;
@@ -9,19 +9,18 @@ interface GrafanaScrollBarProps {
   hideTracksWhenNotNeeded?: boolean;
   hideTracksWhenNotNeeded?: boolean;
 }
 }
 
 
-const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
+/**
+ * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
+ */
+class CustomScrollbar extends PureComponent<Props> {
+
+  static defaultProps: Partial<Props> = {
     customClassName: 'custom-scrollbars',
     customClassName: 'custom-scrollbars',
     autoHide: true,
     autoHide: true,
     autoHideTimeout: 200,
     autoHideTimeout: 200,
     autoHideDuration: 200,
     autoHideDuration: 200,
     hideTracksWhenNotNeeded: false,
     hideTracksWhenNotNeeded: false,
-};
-
-/**
- * Wraps component into <Scrollbars> component from `react-custom-scrollbars`
- */
-class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
-  static defaultProps = grafanaScrollBarDefaultProps;
+  };
 
 
   render() {
   render() {
     const { customClassName, children, ...scrollProps } = this.props;
     const { customClassName, children, ...scrollProps } = this.props;
@@ -45,4 +44,4 @@ class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
   }
   }
 }
 }
 
 
-export default GrafanaScrollbar;
+export default CustomScrollbar;

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 
-exports[`GrafanaScrollbar renders correctly 1`] = `
+exports[`CustomScrollbar renders correctly 1`] = `
 <div
 <div
   className="custom-scrollbars"
   className="custom-scrollbars"
   style={
   style={

yarn.lock

@@ -240,6 +240,12 @@
   version "8.10.17"
   version "8.10.17"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.17.tgz#d48cf10f0dc6dcf59f827f5a3fc7a4a6004318d3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.17.tgz#d48cf10f0dc6dcf59f827f5a3fc7a4a6004318d3"
 
 
+"@types/react-custom-scrollbars@^4.0.5":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.5.tgz#8629b4b3164914d27df7cb0ca0a086c0ad406389"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.0.3":
 "@types/react-dom@^16.0.3":
   version "16.0.6"
   version "16.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"