@@ -50,6 +49,4 @@ const VerticalScrollbar = ({xRef}) => {
);
};
-VerticalScrollbar.propTypes = propTypes;
-
-export default VerticalScrollbar;
\ No newline at end of file
+export default VerticalScrollbar;
diff --git a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.props.js b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.props.js
deleted file mode 100644
index 6ff0d4c..0000000
--- a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.props.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright (c) 2020, Amdocs Corp.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {oneOfType, func, shape, instanceOf} from 'prop-types';
-
-export const propTypes = {
- xRef: oneOfType([
- // Either a function
- func,
- // Or the instance of a DOM native element (see the note about SSR)
- shape({ current: instanceOf(Element) }),
- ]),
-};
\ No newline at end of file
diff --git a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.scss b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.scss
index 3d04c57..339f147 100644
--- a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.scss
+++ b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.scss
@@ -1,27 +1,3 @@
-.scrollbar {
- &.vertically-scrollable .vertical-scrollbar-track {
- visibility: visible;
- pointer-events: auto;
- }
+@import '../tracks';
- .vertical-scrollbar-track {
- position: absolute;
- width: 12px;
- height: 100%;
- right: 0;
- top: 0;
-
- .scrollbar-thumb {
- --thumb-height: max(calc((var(--scrollable-vertical-ratio, 1) * 100%)), var(--scrollable-min-thumb-length, 30px));
- right: 0;
- box-sizing: border-box;
- top: calc(var(--scrollable-scroll-top, 0) * (100% - var(--thumb-height)));
- height: var(--thumb-height);
-
- .scrollbar-thumb-inner {
- width: 6px;
- height: 100%;
- }
- }
- }
-}
+@include tracks(true);
diff --git a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.test.js b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.test.js
index dff156b..9b23387 100644
--- a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.test.js
+++ b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.test.js
@@ -2,6 +2,7 @@ import React from 'react';
import {mount, shallow} from 'enzyme';
import {noop} from 'utility/memory';
import {move} from './VerticalScrollbar.operations';
+import {CSS_VARS} from '../../Scrollable.constants';
import VerticalScrollbar, {__RewireAPI__ as rewire} from './VerticalScrollbar';
describe('
', () => {
@@ -11,6 +12,19 @@ describe('
', () => {
const wrapper = mount(
);
expect(wrapper.find('.scrollbar-thumb')).toHaveLength(2);
expect(wrapper.find('.scrollbar-thumb-inner')).toHaveLength(1);
+ expect(wrapper.find('.scrollbar-track').prop('style')).toBeUndefined();
+ });
+
+ it('should have correct style with CSS variable', () => {
+ const context = {
+ container: {},
+ scrollTop: 10,
+ cssVarsOnTracks: true,
+ };
+ rewire.__Rewire__('useContext', () => context);
+
+ const wrapper = shallow(
);
+ expect(wrapper.find('.scrollbar-track').prop('style')).toEqual({[CSS_VARS.scrollTop]: context.scrollTop});
});
});
@@ -31,6 +45,20 @@ describe('
', () => {
rewire.__ResetDependency__('useRef');
rewire.__ResetDependency__('useContext');
});
+
+ it('handleOnClick() on thumb', () => {
+ const container = {current: {style: {}, scrollTop: 0, scrollHeight: 200}};
+ const ref = {current: {contains: () => true, getBoundingClientRect: () => ({top: 0, height: 100})}};
+ rewire.__Rewire__('useRef', () => ref);
+ rewire.__Rewire__('useContext', () => ({container}));
+ const wrapper = shallow(
);
+
+ wrapper.find('.scrollbar-track').prop('onClick')({clientY: 50, stopPropagation: noop});
+ expect(container.current.scrollTop).toEqual(0);
+
+ rewire.__ResetDependency__('useRef');
+ rewire.__ResetDependency__('useContext');
+ });
});
describe('Operations', () => {
diff --git a/src/components/Scrollable/components/_tracks.scss b/src/components/Scrollable/components/_tracks.scss
new file mode 100644
index 0000000..f6ab7d3
--- /dev/null
+++ b/src/components/Scrollable/components/_tracks.scss
@@ -0,0 +1,41 @@
+@mixin tracks($isVertical) {
+ .scrollbar {
+ &.#{if($isVertical, "vertically", "horizontally")}-scrollable .#{if($isVertical, "vertical", "horizontal")}-scrollbar-track {
+ visibility: visible;
+ pointer-events: auto;
+ }
+
+ .#{if($isVertical, "vertical", "horizontal")}-scrollbar-track {
+ position: absolute;
+
+ #{if($isVertical, width, height)}: var(--scrollable-track-thickness, 12px);
+ #{if($isVertical, height, width)}: 100%;
+ #{if($isVertical, right, bottom)}: 0;
+ #{if($isVertical, top, left)}: 0;
+
+ .scrollbar-thumb {
+ --ratio: var(--scrollable-#{if($isVertical, "vertical", "horizontal")}-ratio, 1);
+ --thumb-size: max(calc((var(--ratio) * 100%)), var(--scrollable-min-thumb-length, 30px));
+
+ @if $isVertical {
+ top: calc(var(--scrollable-scroll-top, 0) * (100% - var(--thumb-size)));
+ }
+ @else {
+ left: calc(var(--scrollable-scroll-left, 0) * (100% - var(--thumb-size)));
+ }
+
+ #{if($isVertical, height, width)}: var(--thumb-size);
+ #{if($isVertical, width, height)}: 100%;
+ #{if($isVertical, right, bottom)}: 0;
+
+ padding: var(--scrollable-thumb-offset);
+ box-sizing: border-box;
+
+ .scrollbar-thumb-inner {
+ #{if($isVertical, width, height)}: var(--scrollable-thumb-thickness);
+ #{if($isVertical, height, width)}: 100%;
+ }
+ }
+ }
+ }
+}