refactoring: custom scrollbars PR updated, #13175

public/app/core/components/CustomScrollbar/CustomScrollbar.test.tsx

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

public/app/core/components/CustomScrollbar/CustomScrollbar.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import Scrollbars from 'react-custom-scrollbars';
 
-interface GrafanaScrollBarProps {
+interface Props {
   customClassName?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
@@ -9,19 +9,18 @@ interface GrafanaScrollBarProps {
   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> {
+class CustomScrollbar extends PureComponent<Props> {
-  static defaultProps = grafanaScrollBarDefaultProps;
+
+  static defaultProps: Partial<Props> = {
+    customClassName: 'custom-scrollbars',
+    autoHide: true,
+    autoHideTimeout: 200,
+    autoHideDuration: 200,
+    hideTracksWhenNotNeeded: false,
+  };
 
   render() {
     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/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap

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

yarn.lock

@@ -240,6 +240,12 @@
   version "8.10.17"
   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":
   version "16.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"