Merge branch 'master' into fix-toggle-button-group-corners

2019-01-09 13:15:34 +01:00
parent 6e3225c29e 34c4e245f3
commit 525367c591
23 changed files with 290 additions and 70 deletions
@@ -18,6 +18,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",
@@ -30,6 +31,9 @@
    "@types/jquery": "^1.10.35",
    "@types/lodash": "^4.14.119",
    "@types/react": "^16.7.6",
+    "@types/react-custom-scrollbars": "^4.0.5",
+    "@types/react-test-renderer": "^16.0.3",
+    "react-test-renderer": "^16.7.0",
    "typescript": "^3.2.2"
  }
 }
@@ -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();
+  });
+});
@@ -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;
@@ -0,0 +1,40 @@
+.custom-scrollbars {
+  // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
+  // make scroll working it should fit outer container size (scroll appears only when inner container size is
+  // greater than outer one).
+  display: flex;
+  flex-grow: 1;
+
+  .view {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+
+  .track-vertical {
+    border-radius: 3px;
+    width: 6px !important;
+    right: 2px;
+    bottom: 2px;
+    top: 2px;
+  }
+
+  .track-horizontal {
+    border-radius: 3px;
+    height: 6px !important;
+
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+  }
+
+  .thumb-vertical {
+    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+
+  .thumb-horizontal {
+    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
+    border-radius: 6px;
+  }
+}
@@ -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>
+`;
@@ -1,2 +1,3 @@
+@import 'CustomScrollbar/CustomScrollbar';
@import 'DeleteButton/DeleteButton';
@import 'Tooltip/Tooltip';
@@ -1,3 +1,4 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
 export { Tooltip } from './Tooltip/Tooltip';
 export { Portal } from './Portal/Portal';
+export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';