@antscorp/antsomi-ui 1.3.5-beta.487 → 1.3.5-beta.488
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,16 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
|
|
13
13
|
import { cloneDeep } from 'lodash';
|
|
14
14
|
// Libraries
|
|
15
|
-
import React, { useRef } from 'react';
|
|
15
|
+
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
16
16
|
// Styled
|
|
17
17
|
import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
|
|
18
18
|
const THUMB_SIZE = 4;
|
|
19
19
|
const MARGIN = 3;
|
|
20
|
-
export const Scrollbars = props => {
|
|
20
|
+
export const Scrollbars = forwardRef((props, refProp) => {
|
|
21
21
|
// Props
|
|
22
22
|
const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
|
|
23
23
|
// Refs
|
|
24
24
|
const ref = useRef(null);
|
|
25
|
+
useImperativeHandle(refProp, () => ref.current, []);
|
|
25
26
|
/**
|
|
26
27
|
* Updates the size and position of the custom scrollbar thumbs based on the provided dimensions and scroll positions.
|
|
27
28
|
*
|
|
@@ -57,7 +58,7 @@ export const Scrollbars = props => {
|
|
|
57
58
|
ref.current.trackHorizontal.style.visibility =
|
|
58
59
|
scrollWidth <= clientWidth ? 'hidden' : 'visible';
|
|
59
60
|
};
|
|
60
|
-
return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`,
|
|
61
|
+
return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
|
|
61
62
|
var { style } = _a, restOfProps = __rest(_a, ["style"]);
|
|
62
63
|
return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
|
|
63
64
|
}, renderTrackHorizontal: (_a) => {
|
|
@@ -77,5 +78,5 @@ export const Scrollbars = props => {
|
|
|
77
78
|
// }
|
|
78
79
|
// Return a div element with the adjusted styles and original props, applying a custom class for styling
|
|
79
80
|
return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
|
|
80
|
-
}, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps)));
|
|
81
|
-
};
|
|
81
|
+
}, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
|
|
82
|
+
});
|