Skip to content

Commit 1415bed

Browse files
torkelotorkelo
committed
Merge branch 'react-custom-scrollbars-wrapper' of https://github.com/alexanderzobnin/grafana into alexanderzobnin-react-custom-scrollbars-wrapper
2 parents 8f054e7 + 8fca79e commit 1415bed

File tree

6 files changed

+236
-1
lines changed

6 files changed

+236
-1
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@types/jest": "^21.1.4",
1616
"@types/node": "^8.0.31",
1717
"@types/react": "^16.0.25",
18+
"@types/react-custom-scrollbars": "^4.0.5",
1819
"@types/react-dom": "^16.0.3",
1920
"angular-mocks": "1.6.6",
2021
"autoprefixer": "^6.4.0",
@@ -154,6 +155,7 @@
154155
"prop-types": "^15.6.0",
155156
"rc-cascader": "^0.14.0",
156157
"react": "^16.2.0",
158+
"react-custom-scrollbars": "^4.2.1",
157159
"react-dom": "^16.2.0",
158160
"react-grid-layout": "0.16.6",
159161
"react-highlight-words": "^0.10.0",

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import renderer from 'react-test-renderer';
3+
import GrafanaScrollbar from './GrafanaScrollbar';
4+
5+
describe('GrafanaScrollbar', () => {
6+
it('renders correctly', () => {
7+
const tree = renderer
8+
.create(
9+
<GrafanaScrollbar>
10+
<p>Scrollable content</p>
11+
</GrafanaScrollbar>
12+
)
13+
.toJSON();
14+
expect(tree).toMatchSnapshot();
15+
});
16+
});

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import Scrollbars from 'react-custom-scrollbars';
3+
4+
interface GrafanaScrollBarProps {
5+
customClassName?: string;
6+
autoHide?: boolean;
7+
autoHideTimeout?: number;
8+
autoHideDuration?: number;
9+
hideTracksWhenNotNeeded?: boolean;
10+
}
11+
12+
const grafanaScrollBarDefaultProps: Partial<GrafanaScrollBarProps> = {
13+
customClassName: 'custom-scrollbars',
14+
autoHide: true,
15+
autoHideTimeout: 200,
16+
autoHideDuration: 200,
17+
hideTracksWhenNotNeeded: false,
18+
};
19+
20+
/**
21+
* Wraps component into <Scrollbars> component from `react-custom-scrollbars`
22+
*/
23+
class GrafanaScrollbar extends React.Component<GrafanaScrollBarProps> {
24+
static defaultProps = grafanaScrollBarDefaultProps;
25+
26+
render() {
27+
const { customClassName, children, ...scrollProps } = this.props;
28+
29+
return (
30+
<Scrollbars
31+
className={customClassName}
32+
autoHeight={true}
33+
autoHeightMin={'100%'}
34+
autoHeightMax={'100%'}
35+
renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
36+
renderTrackVertical={props => <div {...props} className="track-vertical" />}
37+
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
38+
renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
39+
renderView={props => <div {...props} className="view" />}
40+
{...scrollProps}
41+
>
42+
{children}
43+
</Scrollbars>
44+
);
45+
}
46+
}
47+
48+
export default GrafanaScrollbar;

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`GrafanaScrollbar renders correctly 1`] = `
4+
<div
5+
className="custom-scrollbars"
6+
style={
7+
Object {
8+
"height": "auto",
9+
"maxHeight": "100%",
10+
"minHeight": "100%",
11+
"overflow": "hidden",
12+
"position": "relative",
13+
"width": "100%",
14+
}
15+
}
16+
>
17+
<div
18+
className="view"
19+
style={
20+
Object {
21+
"WebkitOverflowScrolling": "touch",
22+
"bottom": undefined,
23+
"left": undefined,
24+
"marginBottom": 0,
25+
"marginRight": 0,
26+
"maxHeight": "calc(100% + 0px)",
27+
"minHeight": "calc(100% + 0px)",
28+
"overflow": "scroll",
29+
"position": "relative",
30+
"right": undefined,
31+
"top": undefined,
32+
}
33+
}
34+
>
35+
<p>
36+
Scrollable content
37+
</p>
38+
</div>
39+
<div
40+
className="track-horizontal"
41+
style={
42+
Object {
43+
"display": "none",
44+
"height": 6,
45+
"opacity": 0,
46+
"position": "absolute",
47+
"transition": "opacity 200ms",
48+
}
49+
}
50+
>
51+
<div
52+
className="thumb-horizontal"
53+
style={
54+
Object {
55+
"display": "block",
56+
"height": "100%",
57+
"position": "relative",
58+
}
59+
}
60+
/>
61+
</div>
62+
<div
63+
className="track-vertical"
64+
style={
65+
Object {
66+
"display": "none",
67+
"opacity": 0,
68+
"position": "absolute",
69+
"transition": "opacity 200ms",
70+
"width": 6,
71+
}
72+
}
73+
>
74+
<div
75+
className="thumb-vertical"
76+
style={
77+
Object {
78+
"display": "block",
79+
"position": "relative",
80+
"width": "100%",
81+
}
82+
}
83+
/>
84+
</div>
85+
</div>
86+
`;

‎public/sass/components/_scrollbar.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,3 +294,46 @@
294294
padding-top: 1px;
295295
}
296296
}
297+
298+
// Custom styles for 'react-custom-scrollbars'
299+
300+
.custom-scrollbars {
301+
// Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
302+
// make scroll working it should fit outer container size (scroll appears only when inner container size is
303+
// greater than outer one).
304+
display: flex;
305+
flex-grow: 1;
306+
307+
.view {
308+
display: flex;
309+
flex-grow: 1;
310+
}
311+
312+
.track-vertical {
313+
border-radius: 3px;
314+
width: 6px !important;
315+
316+
right: 2px;
317+
bottom: 2px;
318+
top: 2px;
319+
}
320+
321+
.track-horizontal {
322+
border-radius: 3px;
323+
height: 6px !important;
324+
325+
right: 2px;
326+
bottom: 2px;
327+
left: 2px;
328+
}
329+
330+
.thumb-vertical {
331+
@include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
332+
border-radius: 6px;
333+
}
334+
335+
.thumb-horizontal {
336+
@include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
337+
border-radius: 6px;
338+
}
339+
}

‎yarn.lock

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,10 @@ [email protected]:
473473
dependencies:
474474
object-assign "4.x"
475475

476+
[email protected]:
477+
version "1.0.0"
478+
resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
479+
476480
agent-base@4, agent-base@^4.1.0, agent-base@~4.2.0:
477481
version "4.2.0"
478482
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.0.tgz#9838b5c3392b962bad031e6a4c5e1024abec45ce"
@@ -3406,6 +3410,14 @@ dom-converter@~0.1:
34063410
dependencies:
34073411
utila "~0.3"
34083412

3413+
dom-css@^2.0.0:
3414+
version "2.1.0"
3415+
resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
3416+
dependencies:
3417+
add-px-to-style "1.0.0"
3418+
prefix-style "2.0.1"
3419+
to-camel-case "1.0.0"
3420+
34093421
dom-helpers@^3.3.1:
34103422
version "3.3.1"
34113423
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -9137,6 +9149,10 @@ prebuild-install@^2.3.0:
91379149
tunnel-agent "^0.6.0"
91389150
which-pm-runs "^1.0.0"
91399151

9152+
[email protected]:
9153+
version "2.0.1"
9154+
resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
9155+
91409156
prelude-ls@~1.1.2:
91419157
version "1.1.2"
91429158
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9388,7 +9404,7 @@ qw@~1.0.1:
93889404
version "1.0.1"
93899405
resolved "https://registry.yarnpkg.com/qw/-/qw-1.0.1.tgz#efbfdc740f9ad054304426acb183412cc8b996d4"
93909406

9391-
raf@^3.4.0:
9407+
raf@^3.1.0, raf@^3.4.0:
93929408
version "3.4.0"
93939409
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
93949410
dependencies:
@@ -9496,6 +9512,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
94969512
minimist "^1.2.0"
94979513
strip-json-comments "~2.0.1"
94989514

9515+
react-custom-scrollbars@^4.2.1:
9516+
version "4.2.1"
9517+
resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
9518+
dependencies:
9519+
dom-css "^2.0.0"
9520+
prop-types "^15.5.10"
9521+
raf "^3.1.0"
9522+
94999523
react-dom@^16.2.0:
95009524
version "16.4.0"
95019525
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
@@ -11335,10 +11359,20 @@ to-buffer@^1.1.0:
1133511359
version "1.1.1"
1133611360
resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
1133711361

11362+
[email protected]:
11363+
version "1.0.0"
11364+
resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
11365+
dependencies:
11366+
to-space-case "^1.0.0"
11367+
1133811368
to-fast-properties@^1.0.3:
1133911369
version "1.0.3"
1134011370
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
1134111371

11372+
to-no-case@^1.0.0:
11373+
version "1.0.2"
11374+
resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
11375+
1134211376
to-object-path@^0.3.0:
1134311377
version "0.3.0"
1134411378
resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -11361,6 +11395,12 @@ to-regex@^3.0.1, to-regex@^3.0.2:
1136111395
regex-not "^1.0.2"
1136211396
safe-regex "^1.1.0"
1136311397

11398+
to-space-case@^1.0.0:
11399+
version "1.0.0"
11400+
resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
11401+
dependencies:
11402+
to-no-case "^1.0.0"
11403+
1136411404
toposort@^1.0.0:
1136511405
version "1.0.7"
1136611406
resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"

0 commit comments

Comments
 (0)