@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024
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.
- package/Avatar.js +63 -0
- package/CHANGELOG.md +7 -0
- package/Divider.js +23 -0
- package/{GeneUIProvider/index.js → GeneUIProvider.js} +52 -65
- package/HelperText.js +69 -0
- package/Info.js +64 -0
- package/Label.js +38 -0
- package/Loader.js +21 -0
- package/Pill.js +64 -0
- package/TextLink.js +20 -0
- package/{index-65217440.js → Tooltip.js} +104 -80
- package/{lib → components}/atoms/Avatar/Avatar.d.ts +7 -6
- package/components/atoms/Avatar/index.d.ts +1 -0
- package/{lib → components}/atoms/Divider/Divider.d.ts +5 -5
- package/components/atoms/Divider/index.d.ts +1 -0
- package/{lib → components}/atoms/HelperText/HelperText.d.ts +6 -5
- package/components/atoms/HelperText/index.d.ts +1 -0
- package/{lib → components}/atoms/Info/Info.d.ts +5 -5
- package/components/atoms/Info/index.d.ts +1 -0
- package/{lib → components}/atoms/Label/Label.d.ts +3 -3
- package/components/atoms/Label/index.d.ts +1 -0
- package/{lib → components}/atoms/Loader/Loader.d.ts +5 -5
- package/components/atoms/Loader/index.d.ts +1 -0
- package/{lib → components}/atoms/Pill/Pill.d.ts +7 -6
- package/components/atoms/Pill/index.d.ts +1 -0
- package/{lib → components}/atoms/TextLink/TextLink.d.ts +5 -5
- package/components/atoms/TextLink/index.d.ts +1 -0
- package/{lib → components}/molecules/Tooltip/Tooltip.d.ts +26 -21
- package/components/molecules/Tooltip/index.d.ts +1 -0
- package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +30 -0
- package/components/providers/GeneUIProvider/index.d.ts +1 -0
- package/hooks/index.d.ts +2 -20
- package/hooks/useDebounceCallback/index.d.ts +1 -0
- package/hooks/useDebounceCallback/useDebounceCallback.d.ts +2 -0
- package/hooks/useEllipsisDetection/index.d.ts +1 -1
- package/hooks/useEllipsisDetection/useEllipsisDetection.d.ts +2 -2
- package/{index-031ff73c.js → index-ce02421b.js} +4 -4
- package/index.d.ts +11 -121
- package/index.js +12 -159
- package/package.json +24 -43
- package/tokens-0abb4e1b.js +6 -0
- package/types/index.d.ts +0 -3
- package/useEllipsisDetection-46d712b6.js +34 -0
- package/ActionableList/index.js +0 -1694
- package/AdvancedSearch/index.js +0 -892
- package/Alert/index.js +0 -98
- package/Avatar/index.js +0 -58
- package/Badge/index.js +0 -29
- package/Breadcrumb/index.js +0 -130
- package/BusyLoader/index.js +0 -31
- package/Button/index.js +0 -30
- package/Card/index.js +0 -502
- package/CardList/index.js +0 -662
- package/CellMeasurerCache-80be385d.js +0 -229
- package/Charts/index.js +0 -17662
- package/Checkbox/index.js +0 -229
- package/CheckboxGroup/index.js +0 -203
- package/CheckboxGroupWithSearch/index.js +0 -280
- package/Collapse/index.js +0 -195
- package/ColorPicker/index.js +0 -210
- package/ComboBox/index.js +0 -524
- package/Copy/index.js +0 -56
- package/Counter/index.js +0 -312
- package/DateFilter/index.js +0 -183
- package/DatePicker/index.js +0 -1229
- package/DatePickerInput/index.js +0 -883
- package/Divider/index.js +0 -23
- package/Drawer/index.js +0 -261
- package/Dropdown/index.js +0 -43
- package/Editor/index.js +0 -22975
- package/Empty/index.js +0 -76
- package/ExtendedInput/index.js +0 -590
- package/Form/index.js +0 -85
- package/FormContainer/index.js +0 -189
- package/FormableCheckbox/index.js +0 -24
- package/FormableDatePicker/index.js +0 -43
- package/FormableDropdown/index.js +0 -50
- package/FormableEditor/index.js +0 -26
- package/FormableHOC-85f89a81.js +0 -83
- package/FormableMultiSelectDropdown/index.js +0 -50
- package/FormableNumberInput/index.js +0 -34
- package/FormableRadio/index.js +0 -22
- package/FormableSwitcher/index.js +0 -22
- package/FormableTextInput/index.js +0 -34
- package/FormableUploader/index.js +0 -44
- package/Grid/index.js +0 -167
- package/HelperText/index.js +0 -86
- package/Holder/index.js +0 -261
- package/Icon/index.js +0 -62
- package/Image/index.js +0 -45
- package/ImagePreview/index.js +0 -217
- package/Info/index.js +0 -41
- package/InfoOutline-dd2e89d9.js +0 -29
- package/InteractiveWidget/index.js +0 -78
- package/KeyValue/index.js +0 -22
- package/Label/index.js +0 -48
- package/LinkButton/index.js +0 -34
- package/Loader/index.js +0 -23
- package/Menu/index.js +0 -281
- package/MobileNavigation/index.js +0 -94
- package/MobilePopup/index.js +0 -182
- package/Modal/index.js +0 -251
- package/ModuleTitle/index.js +0 -141
- package/NavigationMenu/index.js +0 -222
- package/Notification/index.js +0 -120
- package/Option/index.js +0 -184
- package/Overlay/index.js +0 -187
- package/Overspread/index.js +0 -291
- package/Pagination/index.js +0 -261
- package/Paper/index.js +0 -96
- package/Pill/index.js +0 -67
- package/Popover/index.js +0 -725
- package/PopoverV2/index.js +0 -19
- package/Portal/index.js +0 -58
- package/Products/index.js +0 -115
- package/Profile/index.js +0 -589
- package/Progress/index.js +0 -200
- package/QRCode/index.js +0 -814
- package/Radio/index.js +0 -151
- package/RadioGroup/index.js +0 -104
- package/Range/index.js +0 -191
- package/Rating/index.js +0 -174
- package/RichEditor/index.js +0 -13
- package/RichEditor-78c2617e.js +0 -228
- package/Scrollbar/index.js +0 -1585
- package/Search/index.js +0 -75
- package/SearchWithDropdown/index.js +0 -140
- package/Section/index.js +0 -61
- package/SkeletonLoader/index.js +0 -81
- package/Slider/index.js +0 -261
- package/Status/index.js +0 -97
- package/Steps/index.js +0 -314
- package/SuggestionList/index.js +0 -385
- package/Switcher/index.js +0 -193
- package/Table/index.js +0 -57
- package/TableCompositions/index.js +0 -16995
- package/Tabs/index.js +0 -235
- package/Tag/index.js +0 -102
- package/TextLink/index.js +0 -20
- package/Textarea/index.js +0 -242
- package/Time/index.js +0 -62
- package/TimePicker/index.js +0 -575
- package/Timeline/index.js +0 -113
- package/Title/index.js +0 -65
- package/Toaster/index.js +0 -116
- package/Tooltip/index.js +0 -6
- package/TransferList/index.js +0 -493
- package/Uploader/index.js +0 -992
- package/ValidatableCheckbox/index.js +0 -123
- package/ValidatableDatePicker/index.js +0 -316
- package/ValidatableDropdown/index.js +0 -141
- package/ValidatableElements/index.js +0 -67
- package/ValidatableMultiSelectDropdown/index.js +0 -152
- package/ValidatableNumberInput/index.js +0 -204
- package/ValidatableRadio/index.js +0 -116
- package/ValidatableSwitcher/index.js +0 -93
- package/ValidatableTextInput/index.js +0 -167
- package/ValidatableTimeInput/index.js +0 -174
- package/ValidatableUploader/index.js +0 -98
- package/Widget/index.js +0 -225
- package/_commonjsHelpers-24198af3.js +0 -35
- package/_rollupPluginBabelHelpers-a83240e1.js +0 -11
- package/callAfterDelay-7272faca.js +0 -12
- package/checkTimeValidation-e56771be.js +0 -16
- package/checkboxRadioSwitcher-5b69d7bd.js +0 -4
- package/clsx.m-2bb6df4b.js +0 -3
- package/config-1053d64d.js +0 -20
- package/configs-00612ce0.js +0 -103
- package/configs.js +0 -111
- package/dateValidation-67caec66.js +0 -225
- package/debounce-4419bc2f.js +0 -17
- package/guid-8ddf77b3.js +0 -16
- package/hooks/useBodyScroll.js +0 -16
- package/hooks/useClick.js +0 -18
- package/hooks/useClickOutside.js +0 -25
- package/hooks/useDebounce.js +0 -28
- package/hooks/useDeviceType.js +0 -17
- package/hooks/useDidMount.js +0 -15
- package/hooks/useForceUpdate.js +0 -8
- package/hooks/useHover.js +0 -20
- package/hooks/useImgDownload.js +0 -18
- package/hooks/useKeyDown.js +0 -21
- package/hooks/useMount.js +0 -13
- package/hooks/useMutationObserver.js +0 -21
- package/hooks/usePrevious.js +0 -10
- package/hooks/useThrottle.js +0 -16
- package/hooks/useToggle.js +0 -11
- package/hooks/useUpdatableRef.js +0 -14
- package/hooks/useUpdate.js +0 -10
- package/hooks/useWidth.js +0 -16
- package/hooks/useWindowSize.js +0 -40
- package/index-122432cd.js +0 -270
- package/index-262edd7a.js +0 -77
- package/index-2f5aa51e.js +0 -6483
- package/index-370f9acd.js +0 -4
- package/index-45eafea6.js +0 -90
- package/index-480fd7d9.js +0 -10032
- package/index-5f37f281.js +0 -168
- package/index-73aaa093.js +0 -1940
- package/index.mobile.d.ts +0 -14
- package/lib/atoms/Avatar/index.d.ts +0 -1
- package/lib/atoms/Badge/Badge.d.ts +0 -36
- package/lib/atoms/Badge/index.d.ts +0 -1
- package/lib/atoms/BusyLoader/BusyLoader.d.ts +0 -32
- package/lib/atoms/BusyLoader/BusyLoaderHolderHOC.d.ts +0 -8
- package/lib/atoms/BusyLoader/index.d.ts +0 -1
- package/lib/atoms/Button/Button.d.ts +0 -70
- package/lib/atoms/Button/index.d.ts +0 -1
- package/lib/atoms/Divider/index.d.ts +0 -1
- package/lib/atoms/Empty/Empty.d.ts +0 -39
- package/lib/atoms/Empty/index.d.ts +0 -1
- package/lib/atoms/Empty/utils.d.ts +0 -9
- package/lib/atoms/HelperText/index.d.ts +0 -1
- package/lib/atoms/Image/Image.d.ts +0 -51
- package/lib/atoms/Image/index.d.ts +0 -1
- package/lib/atoms/ImagePreview/ImagePreview.d.ts +0 -56
- package/lib/atoms/ImagePreview/ImagePreviewHOC.d.ts +0 -4
- package/lib/atoms/ImagePreview/Magnifier.d.ts +0 -40
- package/lib/atoms/ImagePreview/index.d.ts +0 -1
- package/lib/atoms/Info/index.d.ts +0 -1
- package/lib/atoms/KeyValue/KeyValue.d.ts +0 -29
- package/lib/atoms/KeyValue/index.d.ts +0 -1
- package/lib/atoms/Label/index.d.ts +0 -1
- package/lib/atoms/LinkButton/LinkButton.d.ts +0 -46
- package/lib/atoms/LinkButton/index.d.ts +0 -1
- package/lib/atoms/Loader/index.d.ts +0 -1
- package/lib/atoms/Pill/index.d.ts +0 -1
- package/lib/atoms/Rating/DefaultSvg.d.ts +0 -3
- package/lib/atoms/Rating/Rating.d.ts +0 -49
- package/lib/atoms/Rating/index.d.ts +0 -1
- package/lib/atoms/TextLink/index.d.ts +0 -1
- package/lib/molecules/Copy/Copy.d.ts +0 -38
- package/lib/molecules/Copy/index.d.ts +0 -1
- package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts +0 -70
- package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts +0 -8
- package/lib/molecules/InteractiveWidget/index.d.ts +0 -1
- package/lib/molecules/Tooltip/index.d.ts +0 -1
- package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts +0 -30
- package/lib/providers/GeneUIProvider/index.d.ts +0 -1
- package/localization-4ba17032.js +0 -46
- package/objectWithoutPropertiesLoose-e1596bdb.js +0 -62
- package/rangeAndSlider-693a3d41.js +0 -8684
- package/react-beautiful-dnd.esm-b637016a.js +0 -10116
- package/react-lifecycles-compat.es-6e1f3768.js +0 -158
- package/redux-e591c1b8.js +0 -536
- package/tokens-8ab1179c.js +0 -6
- package/tslib.es6-f211516f.js +0 -35
- package/useEllipsisDetection-c1c9ad94.js +0 -38
package/Scrollbar/index.js
DELETED
|
@@ -1,1585 +0,0 @@
|
|
|
1
|
-
import { _ as _extends$1 } from '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
2
|
-
import React__default, { forwardRef, useEffect } from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
import { c as classnames } from '../index-031ff73c.js';
|
|
5
|
-
import { c as commonjsGlobal } from '../_commonjsHelpers-24198af3.js';
|
|
6
|
-
import { j as customScrollbarConfig } from '../configs-00612ce0.js';
|
|
7
|
-
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
8
|
-
|
|
9
|
-
var lib = {};
|
|
10
|
-
|
|
11
|
-
var Scrollbars = {};
|
|
12
|
-
|
|
13
|
-
var rafExports = {};
|
|
14
|
-
var raf$1 = {
|
|
15
|
-
get exports(){ return rafExports; },
|
|
16
|
-
set exports(v){ rafExports = v; },
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
var performanceNowExports = {};
|
|
20
|
-
var performanceNow = {
|
|
21
|
-
get exports(){ return performanceNowExports; },
|
|
22
|
-
set exports(v){ performanceNowExports = v; },
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
// Generated by CoffeeScript 1.12.2
|
|
26
|
-
(function() {
|
|
27
|
-
var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;
|
|
28
|
-
|
|
29
|
-
if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
|
|
30
|
-
performanceNow.exports = function() {
|
|
31
|
-
return performance.now();
|
|
32
|
-
};
|
|
33
|
-
} else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
|
|
34
|
-
performanceNow.exports = function() {
|
|
35
|
-
return (getNanoSeconds() - nodeLoadTime) / 1e6;
|
|
36
|
-
};
|
|
37
|
-
hrtime = process.hrtime;
|
|
38
|
-
getNanoSeconds = function() {
|
|
39
|
-
var hr;
|
|
40
|
-
hr = hrtime();
|
|
41
|
-
return hr[0] * 1e9 + hr[1];
|
|
42
|
-
};
|
|
43
|
-
moduleLoadTime = getNanoSeconds();
|
|
44
|
-
upTime = process.uptime() * 1e9;
|
|
45
|
-
nodeLoadTime = moduleLoadTime - upTime;
|
|
46
|
-
} else if (Date.now) {
|
|
47
|
-
performanceNow.exports = function() {
|
|
48
|
-
return Date.now() - loadTime;
|
|
49
|
-
};
|
|
50
|
-
loadTime = Date.now();
|
|
51
|
-
} else {
|
|
52
|
-
performanceNow.exports = function() {
|
|
53
|
-
return new Date().getTime() - loadTime;
|
|
54
|
-
};
|
|
55
|
-
loadTime = new Date().getTime();
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
}).call(commonjsGlobal);
|
|
59
|
-
|
|
60
|
-
var now = performanceNowExports
|
|
61
|
-
, root = typeof window === 'undefined' ? commonjsGlobal : window
|
|
62
|
-
, vendors = ['moz', 'webkit']
|
|
63
|
-
, suffix = 'AnimationFrame'
|
|
64
|
-
, raf = root['request' + suffix]
|
|
65
|
-
, caf = root['cancel' + suffix] || root['cancelRequest' + suffix];
|
|
66
|
-
|
|
67
|
-
for(var i = 0; !raf && i < vendors.length; i++) {
|
|
68
|
-
raf = root[vendors[i] + 'Request' + suffix];
|
|
69
|
-
caf = root[vendors[i] + 'Cancel' + suffix]
|
|
70
|
-
|| root[vendors[i] + 'CancelRequest' + suffix];
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// Some versions of FF have rAF but not cAF
|
|
74
|
-
if(!raf || !caf) {
|
|
75
|
-
var last = 0
|
|
76
|
-
, id = 0
|
|
77
|
-
, queue = []
|
|
78
|
-
, frameDuration = 1000 / 60;
|
|
79
|
-
|
|
80
|
-
raf = function(callback) {
|
|
81
|
-
if(queue.length === 0) {
|
|
82
|
-
var _now = now()
|
|
83
|
-
, next = Math.max(0, frameDuration - (_now - last));
|
|
84
|
-
last = next + _now;
|
|
85
|
-
setTimeout(function() {
|
|
86
|
-
var cp = queue.slice(0);
|
|
87
|
-
// Clear queue here to prevent
|
|
88
|
-
// callbacks from appending listeners
|
|
89
|
-
// to the current frame's queue
|
|
90
|
-
queue.length = 0;
|
|
91
|
-
for(var i = 0; i < cp.length; i++) {
|
|
92
|
-
if(!cp[i].cancelled) {
|
|
93
|
-
try{
|
|
94
|
-
cp[i].callback(last);
|
|
95
|
-
} catch(e) {
|
|
96
|
-
setTimeout(function() { throw e }, 0);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}, Math.round(next));
|
|
101
|
-
}
|
|
102
|
-
queue.push({
|
|
103
|
-
handle: ++id,
|
|
104
|
-
callback: callback,
|
|
105
|
-
cancelled: false
|
|
106
|
-
});
|
|
107
|
-
return id
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
caf = function(handle) {
|
|
111
|
-
for(var i = 0; i < queue.length; i++) {
|
|
112
|
-
if(queue[i].handle === handle) {
|
|
113
|
-
queue[i].cancelled = true;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
raf$1.exports = function(fn) {
|
|
120
|
-
// Wrap in a new function to prevent
|
|
121
|
-
// `cancel` potentially being assigned
|
|
122
|
-
// to the native rAF function
|
|
123
|
-
return raf.call(root, fn)
|
|
124
|
-
};
|
|
125
|
-
rafExports.cancel = function() {
|
|
126
|
-
caf.apply(root, arguments);
|
|
127
|
-
};
|
|
128
|
-
rafExports.polyfill = function(object) {
|
|
129
|
-
if (!object) {
|
|
130
|
-
object = root;
|
|
131
|
-
}
|
|
132
|
-
object.requestAnimationFrame = raf;
|
|
133
|
-
object.cancelAnimationFrame = caf;
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
var domCssExports = {};
|
|
137
|
-
var domCss = {
|
|
138
|
-
get exports(){ return domCssExports; },
|
|
139
|
-
set exports(v){ domCssExports = v; },
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
var div = null;
|
|
143
|
-
var prefixes = [ 'Webkit', 'Moz', 'O', 'ms' ];
|
|
144
|
-
|
|
145
|
-
var prefixStyle = function prefixStyle (prop) {
|
|
146
|
-
// re-use a dummy div
|
|
147
|
-
if (!div) {
|
|
148
|
-
div = document.createElement('div');
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
var style = div.style;
|
|
152
|
-
|
|
153
|
-
// prop exists without prefix
|
|
154
|
-
if (prop in style) {
|
|
155
|
-
return prop
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
// borderRadius -> BorderRadius
|
|
159
|
-
var titleCase = prop.charAt(0).toUpperCase() + prop.slice(1);
|
|
160
|
-
|
|
161
|
-
// find the vendor-prefixed prop
|
|
162
|
-
for (var i = prefixes.length; i >= 0; i--) {
|
|
163
|
-
var name = prefixes[i] + titleCase;
|
|
164
|
-
// e.g. WebkitBorderRadius or webkitBorderRadius
|
|
165
|
-
if (name in style) {
|
|
166
|
-
return name
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
return false
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* Export.
|
|
175
|
-
*/
|
|
176
|
-
|
|
177
|
-
var toNoCase_1 = toNoCase;
|
|
178
|
-
|
|
179
|
-
/**
|
|
180
|
-
* Test whether a string is camel-case.
|
|
181
|
-
*/
|
|
182
|
-
|
|
183
|
-
var hasSpace = /\s/;
|
|
184
|
-
var hasSeparator = /(_|-|\.|:)/;
|
|
185
|
-
var hasCamel = /([a-z][A-Z]|[A-Z][a-z])/;
|
|
186
|
-
|
|
187
|
-
/**
|
|
188
|
-
* Remove any starting case from a `string`, like camel or snake, but keep
|
|
189
|
-
* spaces and punctuation that may be important otherwise.
|
|
190
|
-
*
|
|
191
|
-
* @param {String} string
|
|
192
|
-
* @return {String}
|
|
193
|
-
*/
|
|
194
|
-
|
|
195
|
-
function toNoCase(string) {
|
|
196
|
-
if (hasSpace.test(string)) return string.toLowerCase()
|
|
197
|
-
if (hasSeparator.test(string)) return (unseparate(string) || string).toLowerCase()
|
|
198
|
-
if (hasCamel.test(string)) return uncamelize(string).toLowerCase()
|
|
199
|
-
return string.toLowerCase()
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* Separator splitter.
|
|
204
|
-
*/
|
|
205
|
-
|
|
206
|
-
var separatorSplitter = /[\W_]+(.|$)/g;
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Un-separate a `string`.
|
|
210
|
-
*
|
|
211
|
-
* @param {String} string
|
|
212
|
-
* @return {String}
|
|
213
|
-
*/
|
|
214
|
-
|
|
215
|
-
function unseparate(string) {
|
|
216
|
-
return string.replace(separatorSplitter, function (m, next) {
|
|
217
|
-
return next ? ' ' + next : ''
|
|
218
|
-
})
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Camelcase splitter.
|
|
223
|
-
*/
|
|
224
|
-
|
|
225
|
-
var camelSplitter = /(.)([A-Z]+)/g;
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* Un-camelcase a `string`.
|
|
229
|
-
*
|
|
230
|
-
* @param {String} string
|
|
231
|
-
* @return {String}
|
|
232
|
-
*/
|
|
233
|
-
|
|
234
|
-
function uncamelize(string) {
|
|
235
|
-
return string.replace(camelSplitter, function (m, previous, uppers) {
|
|
236
|
-
return previous + ' ' + uppers.toLowerCase().split('').join(' ')
|
|
237
|
-
})
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
var clean = toNoCase_1;
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Export.
|
|
244
|
-
*/
|
|
245
|
-
|
|
246
|
-
var toSpaceCase_1 = toSpaceCase;
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* Convert a `string` to space case.
|
|
250
|
-
*
|
|
251
|
-
* @param {String} string
|
|
252
|
-
* @return {String}
|
|
253
|
-
*/
|
|
254
|
-
|
|
255
|
-
function toSpaceCase(string) {
|
|
256
|
-
return clean(string).replace(/[\W_]+(.|$)/g, function (matches, match) {
|
|
257
|
-
return match ? ' ' + match : ''
|
|
258
|
-
}).trim()
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
var space = toSpaceCase_1;
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* Export.
|
|
265
|
-
*/
|
|
266
|
-
|
|
267
|
-
var toCamelCase_1 = toCamelCase$1;
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* Convert a `string` to camel case.
|
|
271
|
-
*
|
|
272
|
-
* @param {String} string
|
|
273
|
-
* @return {String}
|
|
274
|
-
*/
|
|
275
|
-
|
|
276
|
-
function toCamelCase$1(string) {
|
|
277
|
-
return space(string).replace(/\s(\w)/g, function (matches, letter) {
|
|
278
|
-
return letter.toUpperCase()
|
|
279
|
-
})
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
/* The following list is defined in React's core */
|
|
283
|
-
|
|
284
|
-
var IS_UNITLESS = {
|
|
285
|
-
animationIterationCount: true,
|
|
286
|
-
boxFlex: true,
|
|
287
|
-
boxFlexGroup: true,
|
|
288
|
-
boxOrdinalGroup: true,
|
|
289
|
-
columnCount: true,
|
|
290
|
-
flex: true,
|
|
291
|
-
flexGrow: true,
|
|
292
|
-
flexPositive: true,
|
|
293
|
-
flexShrink: true,
|
|
294
|
-
flexNegative: true,
|
|
295
|
-
flexOrder: true,
|
|
296
|
-
gridRow: true,
|
|
297
|
-
gridColumn: true,
|
|
298
|
-
fontWeight: true,
|
|
299
|
-
lineClamp: true,
|
|
300
|
-
lineHeight: true,
|
|
301
|
-
opacity: true,
|
|
302
|
-
order: true,
|
|
303
|
-
orphans: true,
|
|
304
|
-
tabSize: true,
|
|
305
|
-
widows: true,
|
|
306
|
-
zIndex: true,
|
|
307
|
-
zoom: true,
|
|
308
|
-
|
|
309
|
-
// SVG-related properties
|
|
310
|
-
fillOpacity: true,
|
|
311
|
-
stopOpacity: true,
|
|
312
|
-
strokeDashoffset: true,
|
|
313
|
-
strokeOpacity: true,
|
|
314
|
-
strokeWidth: true
|
|
315
|
-
};
|
|
316
|
-
|
|
317
|
-
var addPxToStyle$1 = function(name, value) {
|
|
318
|
-
if(typeof value === 'number' && !IS_UNITLESS[ name ]) {
|
|
319
|
-
return value + 'px';
|
|
320
|
-
} else {
|
|
321
|
-
return value;
|
|
322
|
-
}
|
|
323
|
-
};
|
|
324
|
-
|
|
325
|
-
var prefix = prefixStyle;
|
|
326
|
-
var toCamelCase = toCamelCase_1;
|
|
327
|
-
var cache = { 'float': 'cssFloat' };
|
|
328
|
-
var addPxToStyle = addPxToStyle$1;
|
|
329
|
-
|
|
330
|
-
function style (element, property, value) {
|
|
331
|
-
var camel = cache[property];
|
|
332
|
-
if (typeof camel === 'undefined') {
|
|
333
|
-
camel = detect(property);
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
// may be false if CSS prop is unsupported
|
|
337
|
-
if (camel) {
|
|
338
|
-
if (value === undefined) {
|
|
339
|
-
return element.style[camel]
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
element.style[camel] = addPxToStyle(camel, value);
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
function each (element, properties) {
|
|
347
|
-
for (var k in properties) {
|
|
348
|
-
if (properties.hasOwnProperty(k)) {
|
|
349
|
-
style(element, k, properties[k]);
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
function detect (cssProp) {
|
|
355
|
-
var camel = toCamelCase(cssProp);
|
|
356
|
-
var result = prefix(camel);
|
|
357
|
-
cache[camel] = cache[cssProp] = cache[result] = result;
|
|
358
|
-
return result
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
function set () {
|
|
362
|
-
if (arguments.length === 2) {
|
|
363
|
-
if (typeof arguments[1] === 'string') {
|
|
364
|
-
arguments[0].style.cssText = arguments[1];
|
|
365
|
-
} else {
|
|
366
|
-
each(arguments[0], arguments[1]);
|
|
367
|
-
}
|
|
368
|
-
} else {
|
|
369
|
-
style(arguments[0], arguments[1], arguments[2]);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
domCss.exports = set;
|
|
374
|
-
domCssExports.set = set;
|
|
375
|
-
|
|
376
|
-
domCssExports.get = function (element, properties) {
|
|
377
|
-
if (Array.isArray(properties)) {
|
|
378
|
-
return properties.reduce(function (obj, prop) {
|
|
379
|
-
obj[prop] = style(element, prop || '');
|
|
380
|
-
return obj
|
|
381
|
-
}, {})
|
|
382
|
-
} else {
|
|
383
|
-
return style(element, properties || '')
|
|
384
|
-
}
|
|
385
|
-
};
|
|
386
|
-
|
|
387
|
-
var isString = {};
|
|
388
|
-
|
|
389
|
-
(function (exports) {
|
|
390
|
-
|
|
391
|
-
Object.defineProperty(exports, "__esModule", {
|
|
392
|
-
value: true
|
|
393
|
-
});
|
|
394
|
-
exports["default"] = isString;
|
|
395
|
-
function isString(maybe) {
|
|
396
|
-
return typeof maybe === 'string';
|
|
397
|
-
}
|
|
398
|
-
} (isString));
|
|
399
|
-
|
|
400
|
-
var getScrollbarWidth = {};
|
|
401
|
-
|
|
402
|
-
(function (exports) {
|
|
403
|
-
|
|
404
|
-
Object.defineProperty(exports, "__esModule", {
|
|
405
|
-
value: true
|
|
406
|
-
});
|
|
407
|
-
exports["default"] = getScrollbarWidth;
|
|
408
|
-
|
|
409
|
-
var _domCss = domCssExports;
|
|
410
|
-
|
|
411
|
-
var _domCss2 = _interopRequireDefault(_domCss);
|
|
412
|
-
|
|
413
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
414
|
-
|
|
415
|
-
var scrollbarWidth = false;
|
|
416
|
-
|
|
417
|
-
function getScrollbarWidth() {
|
|
418
|
-
if (scrollbarWidth !== false) return scrollbarWidth;
|
|
419
|
-
/* istanbul ignore else */
|
|
420
|
-
if (typeof document !== 'undefined') {
|
|
421
|
-
var div = document.createElement('div');
|
|
422
|
-
(0, _domCss2["default"])(div, {
|
|
423
|
-
width: 100,
|
|
424
|
-
height: 100,
|
|
425
|
-
position: 'absolute',
|
|
426
|
-
top: -9999,
|
|
427
|
-
overflow: 'scroll',
|
|
428
|
-
MsOverflowStyle: 'scrollbar'
|
|
429
|
-
});
|
|
430
|
-
document.body.appendChild(div);
|
|
431
|
-
scrollbarWidth = div.offsetWidth - div.clientWidth;
|
|
432
|
-
document.body.removeChild(div);
|
|
433
|
-
} else {
|
|
434
|
-
scrollbarWidth = 0;
|
|
435
|
-
}
|
|
436
|
-
return scrollbarWidth || 0;
|
|
437
|
-
}
|
|
438
|
-
} (getScrollbarWidth));
|
|
439
|
-
|
|
440
|
-
var returnFalse = {};
|
|
441
|
-
|
|
442
|
-
(function (exports) {
|
|
443
|
-
|
|
444
|
-
Object.defineProperty(exports, "__esModule", {
|
|
445
|
-
value: true
|
|
446
|
-
});
|
|
447
|
-
exports["default"] = returnFalse;
|
|
448
|
-
function returnFalse() {
|
|
449
|
-
return false;
|
|
450
|
-
}
|
|
451
|
-
} (returnFalse));
|
|
452
|
-
|
|
453
|
-
var getInnerWidth = {};
|
|
454
|
-
|
|
455
|
-
(function (exports) {
|
|
456
|
-
|
|
457
|
-
Object.defineProperty(exports, "__esModule", {
|
|
458
|
-
value: true
|
|
459
|
-
});
|
|
460
|
-
exports["default"] = getInnerWidth;
|
|
461
|
-
function getInnerWidth(el) {
|
|
462
|
-
var clientWidth = el.clientWidth;
|
|
463
|
-
|
|
464
|
-
var _getComputedStyle = getComputedStyle(el),
|
|
465
|
-
paddingLeft = _getComputedStyle.paddingLeft,
|
|
466
|
-
paddingRight = _getComputedStyle.paddingRight;
|
|
467
|
-
|
|
468
|
-
return clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
|
|
469
|
-
}
|
|
470
|
-
} (getInnerWidth));
|
|
471
|
-
|
|
472
|
-
var getInnerHeight = {};
|
|
473
|
-
|
|
474
|
-
(function (exports) {
|
|
475
|
-
|
|
476
|
-
Object.defineProperty(exports, "__esModule", {
|
|
477
|
-
value: true
|
|
478
|
-
});
|
|
479
|
-
exports["default"] = getInnerHeight;
|
|
480
|
-
function getInnerHeight(el) {
|
|
481
|
-
var clientHeight = el.clientHeight;
|
|
482
|
-
|
|
483
|
-
var _getComputedStyle = getComputedStyle(el),
|
|
484
|
-
paddingTop = _getComputedStyle.paddingTop,
|
|
485
|
-
paddingBottom = _getComputedStyle.paddingBottom;
|
|
486
|
-
|
|
487
|
-
return clientHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
|
|
488
|
-
}
|
|
489
|
-
} (getInnerHeight));
|
|
490
|
-
|
|
491
|
-
var styles = {};
|
|
492
|
-
|
|
493
|
-
Object.defineProperty(styles, "__esModule", {
|
|
494
|
-
value: true
|
|
495
|
-
});
|
|
496
|
-
styles.containerStyleDefault = {
|
|
497
|
-
position: 'relative',
|
|
498
|
-
overflow: 'hidden',
|
|
499
|
-
width: '100%',
|
|
500
|
-
height: '100%'
|
|
501
|
-
};
|
|
502
|
-
|
|
503
|
-
// Overrides containerStyleDefault properties
|
|
504
|
-
styles.containerStyleAutoHeight = {
|
|
505
|
-
height: 'auto'
|
|
506
|
-
};
|
|
507
|
-
|
|
508
|
-
styles.viewStyleDefault = {
|
|
509
|
-
position: 'absolute',
|
|
510
|
-
top: 0,
|
|
511
|
-
left: 0,
|
|
512
|
-
right: 0,
|
|
513
|
-
bottom: 0,
|
|
514
|
-
overflow: 'scroll',
|
|
515
|
-
WebkitOverflowScrolling: 'touch'
|
|
516
|
-
};
|
|
517
|
-
|
|
518
|
-
// Overrides viewStyleDefault properties
|
|
519
|
-
styles.viewStyleAutoHeight = {
|
|
520
|
-
position: 'relative',
|
|
521
|
-
top: undefined,
|
|
522
|
-
left: undefined,
|
|
523
|
-
right: undefined,
|
|
524
|
-
bottom: undefined
|
|
525
|
-
};
|
|
526
|
-
|
|
527
|
-
styles.viewStyleUniversalInitial = {
|
|
528
|
-
overflow: 'hidden',
|
|
529
|
-
marginRight: 0,
|
|
530
|
-
marginBottom: 0
|
|
531
|
-
};
|
|
532
|
-
|
|
533
|
-
styles.trackHorizontalStyleDefault = {
|
|
534
|
-
position: 'absolute',
|
|
535
|
-
height: 6
|
|
536
|
-
};
|
|
537
|
-
|
|
538
|
-
styles.trackVerticalStyleDefault = {
|
|
539
|
-
position: 'absolute',
|
|
540
|
-
width: 6
|
|
541
|
-
};
|
|
542
|
-
|
|
543
|
-
styles.thumbHorizontalStyleDefault = {
|
|
544
|
-
position: 'relative',
|
|
545
|
-
display: 'block',
|
|
546
|
-
height: '100%'
|
|
547
|
-
};
|
|
548
|
-
|
|
549
|
-
styles.thumbVerticalStyleDefault = {
|
|
550
|
-
position: 'relative',
|
|
551
|
-
display: 'block',
|
|
552
|
-
width: '100%'
|
|
553
|
-
};
|
|
554
|
-
|
|
555
|
-
styles.disableSelectStyle = {
|
|
556
|
-
userSelect: 'none'
|
|
557
|
-
};
|
|
558
|
-
|
|
559
|
-
styles.disableSelectStyleReset = {
|
|
560
|
-
userSelect: ''
|
|
561
|
-
};
|
|
562
|
-
|
|
563
|
-
var defaultRenderElements = {};
|
|
564
|
-
|
|
565
|
-
Object.defineProperty(defaultRenderElements, "__esModule", {
|
|
566
|
-
value: true
|
|
567
|
-
});
|
|
568
|
-
|
|
569
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
570
|
-
|
|
571
|
-
defaultRenderElements.renderViewDefault = renderViewDefault;
|
|
572
|
-
defaultRenderElements.renderTrackHorizontalDefault = renderTrackHorizontalDefault;
|
|
573
|
-
defaultRenderElements.renderTrackVerticalDefault = renderTrackVerticalDefault;
|
|
574
|
-
defaultRenderElements.renderThumbHorizontalDefault = renderThumbHorizontalDefault;
|
|
575
|
-
defaultRenderElements.renderThumbVerticalDefault = renderThumbVerticalDefault;
|
|
576
|
-
|
|
577
|
-
var _react = React__default;
|
|
578
|
-
|
|
579
|
-
var _react2 = _interopRequireDefault(_react);
|
|
580
|
-
|
|
581
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
582
|
-
|
|
583
|
-
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
584
|
-
|
|
585
|
-
/* eslint-disable react/prop-types */
|
|
586
|
-
|
|
587
|
-
function renderViewDefault(props) {
|
|
588
|
-
return _react2["default"].createElement('div', props);
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
function renderTrackHorizontalDefault(_ref) {
|
|
592
|
-
var style = _ref.style,
|
|
593
|
-
props = _objectWithoutProperties(_ref, ['style']);
|
|
594
|
-
|
|
595
|
-
var finalStyle = _extends({}, style, {
|
|
596
|
-
right: 2,
|
|
597
|
-
bottom: 2,
|
|
598
|
-
left: 2,
|
|
599
|
-
borderRadius: 3
|
|
600
|
-
});
|
|
601
|
-
return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
function renderTrackVerticalDefault(_ref2) {
|
|
605
|
-
var style = _ref2.style,
|
|
606
|
-
props = _objectWithoutProperties(_ref2, ['style']);
|
|
607
|
-
|
|
608
|
-
var finalStyle = _extends({}, style, {
|
|
609
|
-
right: 2,
|
|
610
|
-
bottom: 2,
|
|
611
|
-
top: 2,
|
|
612
|
-
borderRadius: 3
|
|
613
|
-
});
|
|
614
|
-
return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
function renderThumbHorizontalDefault(_ref3) {
|
|
618
|
-
var style = _ref3.style,
|
|
619
|
-
props = _objectWithoutProperties(_ref3, ['style']);
|
|
620
|
-
|
|
621
|
-
var finalStyle = _extends({}, style, {
|
|
622
|
-
cursor: 'pointer',
|
|
623
|
-
borderRadius: 'inherit',
|
|
624
|
-
backgroundColor: 'rgba(0,0,0,.2)'
|
|
625
|
-
});
|
|
626
|
-
return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
function renderThumbVerticalDefault(_ref4) {
|
|
630
|
-
var style = _ref4.style,
|
|
631
|
-
props = _objectWithoutProperties(_ref4, ['style']);
|
|
632
|
-
|
|
633
|
-
var finalStyle = _extends({}, style, {
|
|
634
|
-
cursor: 'pointer',
|
|
635
|
-
borderRadius: 'inherit',
|
|
636
|
-
backgroundColor: 'rgba(0,0,0,.2)'
|
|
637
|
-
});
|
|
638
|
-
return _react2["default"].createElement('div', _extends({ style: finalStyle }, props));
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
(function (exports) {
|
|
642
|
-
|
|
643
|
-
Object.defineProperty(exports, "__esModule", {
|
|
644
|
-
value: true
|
|
645
|
-
});
|
|
646
|
-
|
|
647
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
648
|
-
|
|
649
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
650
|
-
|
|
651
|
-
var _raf2 = rafExports;
|
|
652
|
-
|
|
653
|
-
var _raf3 = _interopRequireDefault(_raf2);
|
|
654
|
-
|
|
655
|
-
var _domCss = domCssExports;
|
|
656
|
-
|
|
657
|
-
var _domCss2 = _interopRequireDefault(_domCss);
|
|
658
|
-
|
|
659
|
-
var _react = React__default;
|
|
660
|
-
|
|
661
|
-
var _propTypes = PropTypes;
|
|
662
|
-
|
|
663
|
-
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
664
|
-
|
|
665
|
-
var _isString = isString;
|
|
666
|
-
|
|
667
|
-
var _isString2 = _interopRequireDefault(_isString);
|
|
668
|
-
|
|
669
|
-
var _getScrollbarWidth = getScrollbarWidth;
|
|
670
|
-
|
|
671
|
-
var _getScrollbarWidth2 = _interopRequireDefault(_getScrollbarWidth);
|
|
672
|
-
|
|
673
|
-
var _returnFalse = returnFalse;
|
|
674
|
-
|
|
675
|
-
var _returnFalse2 = _interopRequireDefault(_returnFalse);
|
|
676
|
-
|
|
677
|
-
var _getInnerWidth = getInnerWidth;
|
|
678
|
-
|
|
679
|
-
var _getInnerWidth2 = _interopRequireDefault(_getInnerWidth);
|
|
680
|
-
|
|
681
|
-
var _getInnerHeight = getInnerHeight;
|
|
682
|
-
|
|
683
|
-
var _getInnerHeight2 = _interopRequireDefault(_getInnerHeight);
|
|
684
|
-
|
|
685
|
-
var _styles = styles;
|
|
686
|
-
|
|
687
|
-
var _defaultRenderElements = defaultRenderElements;
|
|
688
|
-
|
|
689
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
690
|
-
|
|
691
|
-
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
692
|
-
|
|
693
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
694
|
-
|
|
695
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
696
|
-
|
|
697
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
698
|
-
|
|
699
|
-
var Scrollbars = function (_Component) {
|
|
700
|
-
_inherits(Scrollbars, _Component);
|
|
701
|
-
|
|
702
|
-
function Scrollbars(props) {
|
|
703
|
-
var _ref;
|
|
704
|
-
|
|
705
|
-
_classCallCheck(this, Scrollbars);
|
|
706
|
-
|
|
707
|
-
for (var _len = arguments.length, rest = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
708
|
-
rest[_key - 1] = arguments[_key];
|
|
709
|
-
}
|
|
710
|
-
|
|
711
|
-
var _this = _possibleConstructorReturn(this, (_ref = Scrollbars.__proto__ || Object.getPrototypeOf(Scrollbars)).call.apply(_ref, [this, props].concat(rest)));
|
|
712
|
-
|
|
713
|
-
_this.getScrollLeft = _this.getScrollLeft.bind(_this);
|
|
714
|
-
_this.getScrollTop = _this.getScrollTop.bind(_this);
|
|
715
|
-
_this.getScrollWidth = _this.getScrollWidth.bind(_this);
|
|
716
|
-
_this.getScrollHeight = _this.getScrollHeight.bind(_this);
|
|
717
|
-
_this.getClientWidth = _this.getClientWidth.bind(_this);
|
|
718
|
-
_this.getClientHeight = _this.getClientHeight.bind(_this);
|
|
719
|
-
_this.getValues = _this.getValues.bind(_this);
|
|
720
|
-
_this.getThumbHorizontalWidth = _this.getThumbHorizontalWidth.bind(_this);
|
|
721
|
-
_this.getThumbVerticalHeight = _this.getThumbVerticalHeight.bind(_this);
|
|
722
|
-
_this.getScrollLeftForOffset = _this.getScrollLeftForOffset.bind(_this);
|
|
723
|
-
_this.getScrollTopForOffset = _this.getScrollTopForOffset.bind(_this);
|
|
724
|
-
|
|
725
|
-
_this.scrollLeft = _this.scrollLeft.bind(_this);
|
|
726
|
-
_this.scrollTop = _this.scrollTop.bind(_this);
|
|
727
|
-
_this.scrollToLeft = _this.scrollToLeft.bind(_this);
|
|
728
|
-
_this.scrollToTop = _this.scrollToTop.bind(_this);
|
|
729
|
-
_this.scrollToRight = _this.scrollToRight.bind(_this);
|
|
730
|
-
_this.scrollToBottom = _this.scrollToBottom.bind(_this);
|
|
731
|
-
|
|
732
|
-
_this.handleTrackMouseEnter = _this.handleTrackMouseEnter.bind(_this);
|
|
733
|
-
_this.handleTrackMouseLeave = _this.handleTrackMouseLeave.bind(_this);
|
|
734
|
-
_this.handleHorizontalTrackMouseDown = _this.handleHorizontalTrackMouseDown.bind(_this);
|
|
735
|
-
_this.handleVerticalTrackMouseDown = _this.handleVerticalTrackMouseDown.bind(_this);
|
|
736
|
-
_this.handleHorizontalThumbMouseDown = _this.handleHorizontalThumbMouseDown.bind(_this);
|
|
737
|
-
_this.handleVerticalThumbMouseDown = _this.handleVerticalThumbMouseDown.bind(_this);
|
|
738
|
-
_this.handleWindowResize = _this.handleWindowResize.bind(_this);
|
|
739
|
-
_this.handleScroll = _this.handleScroll.bind(_this);
|
|
740
|
-
_this.handleDrag = _this.handleDrag.bind(_this);
|
|
741
|
-
_this.handleDragEnd = _this.handleDragEnd.bind(_this);
|
|
742
|
-
|
|
743
|
-
_this.state = {
|
|
744
|
-
didMountUniversal: false
|
|
745
|
-
};
|
|
746
|
-
return _this;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
_createClass(Scrollbars, [{
|
|
750
|
-
key: 'componentDidMount',
|
|
751
|
-
value: function componentDidMount() {
|
|
752
|
-
this.addListeners();
|
|
753
|
-
this.update();
|
|
754
|
-
this.componentDidMountUniversal();
|
|
755
|
-
}
|
|
756
|
-
}, {
|
|
757
|
-
key: 'componentDidMountUniversal',
|
|
758
|
-
value: function componentDidMountUniversal() {
|
|
759
|
-
// eslint-disable-line react/sort-comp
|
|
760
|
-
var universal = this.props.universal;
|
|
761
|
-
|
|
762
|
-
if (!universal) return;
|
|
763
|
-
this.setState({ didMountUniversal: true });
|
|
764
|
-
}
|
|
765
|
-
}, {
|
|
766
|
-
key: 'componentDidUpdate',
|
|
767
|
-
value: function componentDidUpdate() {
|
|
768
|
-
this.update();
|
|
769
|
-
}
|
|
770
|
-
}, {
|
|
771
|
-
key: 'componentWillUnmount',
|
|
772
|
-
value: function componentWillUnmount() {
|
|
773
|
-
this.removeListeners();
|
|
774
|
-
(0, _raf2.cancel)(this.requestFrame);
|
|
775
|
-
clearTimeout(this.hideTracksTimeout);
|
|
776
|
-
clearInterval(this.detectScrollingInterval);
|
|
777
|
-
}
|
|
778
|
-
}, {
|
|
779
|
-
key: 'getScrollLeft',
|
|
780
|
-
value: function getScrollLeft() {
|
|
781
|
-
if (!this.view) return 0;
|
|
782
|
-
return this.view.scrollLeft;
|
|
783
|
-
}
|
|
784
|
-
}, {
|
|
785
|
-
key: 'getScrollTop',
|
|
786
|
-
value: function getScrollTop() {
|
|
787
|
-
if (!this.view) return 0;
|
|
788
|
-
return this.view.scrollTop;
|
|
789
|
-
}
|
|
790
|
-
}, {
|
|
791
|
-
key: 'getScrollWidth',
|
|
792
|
-
value: function getScrollWidth() {
|
|
793
|
-
if (!this.view) return 0;
|
|
794
|
-
return this.view.scrollWidth;
|
|
795
|
-
}
|
|
796
|
-
}, {
|
|
797
|
-
key: 'getScrollHeight',
|
|
798
|
-
value: function getScrollHeight() {
|
|
799
|
-
if (!this.view) return 0;
|
|
800
|
-
return this.view.scrollHeight;
|
|
801
|
-
}
|
|
802
|
-
}, {
|
|
803
|
-
key: 'getClientWidth',
|
|
804
|
-
value: function getClientWidth() {
|
|
805
|
-
if (!this.view) return 0;
|
|
806
|
-
return this.view.clientWidth;
|
|
807
|
-
}
|
|
808
|
-
}, {
|
|
809
|
-
key: 'getClientHeight',
|
|
810
|
-
value: function getClientHeight() {
|
|
811
|
-
if (!this.view) return 0;
|
|
812
|
-
return this.view.clientHeight;
|
|
813
|
-
}
|
|
814
|
-
}, {
|
|
815
|
-
key: 'getValues',
|
|
816
|
-
value: function getValues() {
|
|
817
|
-
var _ref2 = this.view || {},
|
|
818
|
-
_ref2$scrollLeft = _ref2.scrollLeft,
|
|
819
|
-
scrollLeft = _ref2$scrollLeft === undefined ? 0 : _ref2$scrollLeft,
|
|
820
|
-
_ref2$scrollTop = _ref2.scrollTop,
|
|
821
|
-
scrollTop = _ref2$scrollTop === undefined ? 0 : _ref2$scrollTop,
|
|
822
|
-
_ref2$scrollWidth = _ref2.scrollWidth,
|
|
823
|
-
scrollWidth = _ref2$scrollWidth === undefined ? 0 : _ref2$scrollWidth,
|
|
824
|
-
_ref2$scrollHeight = _ref2.scrollHeight,
|
|
825
|
-
scrollHeight = _ref2$scrollHeight === undefined ? 0 : _ref2$scrollHeight,
|
|
826
|
-
_ref2$clientWidth = _ref2.clientWidth,
|
|
827
|
-
clientWidth = _ref2$clientWidth === undefined ? 0 : _ref2$clientWidth,
|
|
828
|
-
_ref2$clientHeight = _ref2.clientHeight,
|
|
829
|
-
clientHeight = _ref2$clientHeight === undefined ? 0 : _ref2$clientHeight;
|
|
830
|
-
|
|
831
|
-
return {
|
|
832
|
-
left: scrollLeft / (scrollWidth - clientWidth) || 0,
|
|
833
|
-
top: scrollTop / (scrollHeight - clientHeight) || 0,
|
|
834
|
-
scrollLeft: scrollLeft,
|
|
835
|
-
scrollTop: scrollTop,
|
|
836
|
-
scrollWidth: scrollWidth,
|
|
837
|
-
scrollHeight: scrollHeight,
|
|
838
|
-
clientWidth: clientWidth,
|
|
839
|
-
clientHeight: clientHeight
|
|
840
|
-
};
|
|
841
|
-
}
|
|
842
|
-
}, {
|
|
843
|
-
key: 'getThumbHorizontalWidth',
|
|
844
|
-
value: function getThumbHorizontalWidth() {
|
|
845
|
-
var _props = this.props,
|
|
846
|
-
thumbSize = _props.thumbSize,
|
|
847
|
-
thumbMinSize = _props.thumbMinSize;
|
|
848
|
-
var _view = this.view,
|
|
849
|
-
scrollWidth = _view.scrollWidth,
|
|
850
|
-
clientWidth = _view.clientWidth;
|
|
851
|
-
|
|
852
|
-
var trackWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
|
|
853
|
-
var width = Math.ceil(clientWidth / scrollWidth * trackWidth);
|
|
854
|
-
if (trackWidth === width) return 0;
|
|
855
|
-
if (thumbSize) return thumbSize;
|
|
856
|
-
return Math.max(width, thumbMinSize);
|
|
857
|
-
}
|
|
858
|
-
}, {
|
|
859
|
-
key: 'getThumbVerticalHeight',
|
|
860
|
-
value: function getThumbVerticalHeight() {
|
|
861
|
-
var _props2 = this.props,
|
|
862
|
-
thumbSize = _props2.thumbSize,
|
|
863
|
-
thumbMinSize = _props2.thumbMinSize;
|
|
864
|
-
var _view2 = this.view,
|
|
865
|
-
scrollHeight = _view2.scrollHeight,
|
|
866
|
-
clientHeight = _view2.clientHeight;
|
|
867
|
-
|
|
868
|
-
var trackHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
|
|
869
|
-
var height = Math.ceil(clientHeight / scrollHeight * trackHeight);
|
|
870
|
-
if (trackHeight === height) return 0;
|
|
871
|
-
if (thumbSize) return thumbSize;
|
|
872
|
-
return Math.max(height, thumbMinSize);
|
|
873
|
-
}
|
|
874
|
-
}, {
|
|
875
|
-
key: 'getScrollLeftForOffset',
|
|
876
|
-
value: function getScrollLeftForOffset(offset) {
|
|
877
|
-
var _view3 = this.view,
|
|
878
|
-
scrollWidth = _view3.scrollWidth,
|
|
879
|
-
clientWidth = _view3.clientWidth;
|
|
880
|
-
|
|
881
|
-
var trackWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
|
|
882
|
-
var thumbWidth = this.getThumbHorizontalWidth();
|
|
883
|
-
return offset / (trackWidth - thumbWidth) * (scrollWidth - clientWidth);
|
|
884
|
-
}
|
|
885
|
-
}, {
|
|
886
|
-
key: 'getScrollTopForOffset',
|
|
887
|
-
value: function getScrollTopForOffset(offset) {
|
|
888
|
-
var _view4 = this.view,
|
|
889
|
-
scrollHeight = _view4.scrollHeight,
|
|
890
|
-
clientHeight = _view4.clientHeight;
|
|
891
|
-
|
|
892
|
-
var trackHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
|
|
893
|
-
var thumbHeight = this.getThumbVerticalHeight();
|
|
894
|
-
return offset / (trackHeight - thumbHeight) * (scrollHeight - clientHeight);
|
|
895
|
-
}
|
|
896
|
-
}, {
|
|
897
|
-
key: 'scrollLeft',
|
|
898
|
-
value: function scrollLeft() {
|
|
899
|
-
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
900
|
-
|
|
901
|
-
if (!this.view) return;
|
|
902
|
-
this.view.scrollLeft = left;
|
|
903
|
-
}
|
|
904
|
-
}, {
|
|
905
|
-
key: 'scrollTop',
|
|
906
|
-
value: function scrollTop() {
|
|
907
|
-
var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
908
|
-
|
|
909
|
-
if (!this.view) return;
|
|
910
|
-
this.view.scrollTop = top;
|
|
911
|
-
}
|
|
912
|
-
}, {
|
|
913
|
-
key: 'scrollToLeft',
|
|
914
|
-
value: function scrollToLeft() {
|
|
915
|
-
if (!this.view) return;
|
|
916
|
-
this.view.scrollLeft = 0;
|
|
917
|
-
}
|
|
918
|
-
}, {
|
|
919
|
-
key: 'scrollToTop',
|
|
920
|
-
value: function scrollToTop() {
|
|
921
|
-
if (!this.view) return;
|
|
922
|
-
this.view.scrollTop = 0;
|
|
923
|
-
}
|
|
924
|
-
}, {
|
|
925
|
-
key: 'scrollToRight',
|
|
926
|
-
value: function scrollToRight() {
|
|
927
|
-
if (!this.view) return;
|
|
928
|
-
this.view.scrollLeft = this.view.scrollWidth;
|
|
929
|
-
}
|
|
930
|
-
}, {
|
|
931
|
-
key: 'scrollToBottom',
|
|
932
|
-
value: function scrollToBottom() {
|
|
933
|
-
if (!this.view) return;
|
|
934
|
-
this.view.scrollTop = this.view.scrollHeight;
|
|
935
|
-
}
|
|
936
|
-
}, {
|
|
937
|
-
key: 'addListeners',
|
|
938
|
-
value: function addListeners() {
|
|
939
|
-
/* istanbul ignore if */
|
|
940
|
-
if (typeof document === 'undefined' || !this.view) return;
|
|
941
|
-
var view = this.view,
|
|
942
|
-
trackHorizontal = this.trackHorizontal,
|
|
943
|
-
trackVertical = this.trackVertical,
|
|
944
|
-
thumbHorizontal = this.thumbHorizontal,
|
|
945
|
-
thumbVertical = this.thumbVertical;
|
|
946
|
-
|
|
947
|
-
view.addEventListener('scroll', this.handleScroll);
|
|
948
|
-
if (!(0, _getScrollbarWidth2["default"])()) return;
|
|
949
|
-
trackHorizontal.addEventListener('mouseenter', this.handleTrackMouseEnter);
|
|
950
|
-
trackHorizontal.addEventListener('mouseleave', this.handleTrackMouseLeave);
|
|
951
|
-
trackHorizontal.addEventListener('mousedown', this.handleHorizontalTrackMouseDown);
|
|
952
|
-
trackVertical.addEventListener('mouseenter', this.handleTrackMouseEnter);
|
|
953
|
-
trackVertical.addEventListener('mouseleave', this.handleTrackMouseLeave);
|
|
954
|
-
trackVertical.addEventListener('mousedown', this.handleVerticalTrackMouseDown);
|
|
955
|
-
thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
|
|
956
|
-
thumbVertical.addEventListener('mousedown', this.handleVerticalThumbMouseDown);
|
|
957
|
-
window.addEventListener('resize', this.handleWindowResize);
|
|
958
|
-
}
|
|
959
|
-
}, {
|
|
960
|
-
key: 'removeListeners',
|
|
961
|
-
value: function removeListeners() {
|
|
962
|
-
/* istanbul ignore if */
|
|
963
|
-
if (typeof document === 'undefined' || !this.view) return;
|
|
964
|
-
var view = this.view,
|
|
965
|
-
trackHorizontal = this.trackHorizontal,
|
|
966
|
-
trackVertical = this.trackVertical,
|
|
967
|
-
thumbHorizontal = this.thumbHorizontal,
|
|
968
|
-
thumbVertical = this.thumbVertical;
|
|
969
|
-
|
|
970
|
-
view.removeEventListener('scroll', this.handleScroll);
|
|
971
|
-
if (!(0, _getScrollbarWidth2["default"])()) return;
|
|
972
|
-
trackHorizontal.removeEventListener('mouseenter', this.handleTrackMouseEnter);
|
|
973
|
-
trackHorizontal.removeEventListener('mouseleave', this.handleTrackMouseLeave);
|
|
974
|
-
trackHorizontal.removeEventListener('mousedown', this.handleHorizontalTrackMouseDown);
|
|
975
|
-
trackVertical.removeEventListener('mouseenter', this.handleTrackMouseEnter);
|
|
976
|
-
trackVertical.removeEventListener('mouseleave', this.handleTrackMouseLeave);
|
|
977
|
-
trackVertical.removeEventListener('mousedown', this.handleVerticalTrackMouseDown);
|
|
978
|
-
thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
|
|
979
|
-
thumbVertical.removeEventListener('mousedown', this.handleVerticalThumbMouseDown);
|
|
980
|
-
window.removeEventListener('resize', this.handleWindowResize);
|
|
981
|
-
// Possibly setup by `handleDragStart`
|
|
982
|
-
this.teardownDragging();
|
|
983
|
-
}
|
|
984
|
-
}, {
|
|
985
|
-
key: 'handleScroll',
|
|
986
|
-
value: function handleScroll(event) {
|
|
987
|
-
var _this2 = this;
|
|
988
|
-
|
|
989
|
-
var _props3 = this.props,
|
|
990
|
-
onScroll = _props3.onScroll,
|
|
991
|
-
onScrollFrame = _props3.onScrollFrame;
|
|
992
|
-
|
|
993
|
-
if (onScroll) onScroll(event);
|
|
994
|
-
this.update(function (values) {
|
|
995
|
-
var scrollLeft = values.scrollLeft,
|
|
996
|
-
scrollTop = values.scrollTop;
|
|
997
|
-
|
|
998
|
-
_this2.viewScrollLeft = scrollLeft;
|
|
999
|
-
_this2.viewScrollTop = scrollTop;
|
|
1000
|
-
if (onScrollFrame) onScrollFrame(values);
|
|
1001
|
-
});
|
|
1002
|
-
this.detectScrolling();
|
|
1003
|
-
}
|
|
1004
|
-
}, {
|
|
1005
|
-
key: 'handleScrollStart',
|
|
1006
|
-
value: function handleScrollStart() {
|
|
1007
|
-
var onScrollStart = this.props.onScrollStart;
|
|
1008
|
-
|
|
1009
|
-
if (onScrollStart) onScrollStart();
|
|
1010
|
-
this.handleScrollStartAutoHide();
|
|
1011
|
-
}
|
|
1012
|
-
}, {
|
|
1013
|
-
key: 'handleScrollStartAutoHide',
|
|
1014
|
-
value: function handleScrollStartAutoHide() {
|
|
1015
|
-
var autoHide = this.props.autoHide;
|
|
1016
|
-
|
|
1017
|
-
if (!autoHide) return;
|
|
1018
|
-
this.showTracks();
|
|
1019
|
-
}
|
|
1020
|
-
}, {
|
|
1021
|
-
key: 'handleScrollStop',
|
|
1022
|
-
value: function handleScrollStop() {
|
|
1023
|
-
var onScrollStop = this.props.onScrollStop;
|
|
1024
|
-
|
|
1025
|
-
if (onScrollStop) onScrollStop();
|
|
1026
|
-
this.handleScrollStopAutoHide();
|
|
1027
|
-
}
|
|
1028
|
-
}, {
|
|
1029
|
-
key: 'handleScrollStopAutoHide',
|
|
1030
|
-
value: function handleScrollStopAutoHide() {
|
|
1031
|
-
var autoHide = this.props.autoHide;
|
|
1032
|
-
|
|
1033
|
-
if (!autoHide) return;
|
|
1034
|
-
this.hideTracks();
|
|
1035
|
-
}
|
|
1036
|
-
}, {
|
|
1037
|
-
key: 'handleWindowResize',
|
|
1038
|
-
value: function handleWindowResize() {
|
|
1039
|
-
this.update();
|
|
1040
|
-
}
|
|
1041
|
-
}, {
|
|
1042
|
-
key: 'handleHorizontalTrackMouseDown',
|
|
1043
|
-
value: function handleHorizontalTrackMouseDown(event) {
|
|
1044
|
-
event.preventDefault();
|
|
1045
|
-
var target = event.target,
|
|
1046
|
-
clientX = event.clientX;
|
|
1047
|
-
|
|
1048
|
-
var _target$getBoundingCl = target.getBoundingClientRect(),
|
|
1049
|
-
targetLeft = _target$getBoundingCl.left;
|
|
1050
|
-
|
|
1051
|
-
var thumbWidth = this.getThumbHorizontalWidth();
|
|
1052
|
-
var offset = Math.abs(targetLeft - clientX) - thumbWidth / 2;
|
|
1053
|
-
this.view.scrollLeft = this.getScrollLeftForOffset(offset);
|
|
1054
|
-
}
|
|
1055
|
-
}, {
|
|
1056
|
-
key: 'handleVerticalTrackMouseDown',
|
|
1057
|
-
value: function handleVerticalTrackMouseDown(event) {
|
|
1058
|
-
event.preventDefault();
|
|
1059
|
-
var target = event.target,
|
|
1060
|
-
clientY = event.clientY;
|
|
1061
|
-
|
|
1062
|
-
var _target$getBoundingCl2 = target.getBoundingClientRect(),
|
|
1063
|
-
targetTop = _target$getBoundingCl2.top;
|
|
1064
|
-
|
|
1065
|
-
var thumbHeight = this.getThumbVerticalHeight();
|
|
1066
|
-
var offset = Math.abs(targetTop - clientY) - thumbHeight / 2;
|
|
1067
|
-
this.view.scrollTop = this.getScrollTopForOffset(offset);
|
|
1068
|
-
}
|
|
1069
|
-
}, {
|
|
1070
|
-
key: 'handleHorizontalThumbMouseDown',
|
|
1071
|
-
value: function handleHorizontalThumbMouseDown(event) {
|
|
1072
|
-
event.preventDefault();
|
|
1073
|
-
this.handleDragStart(event);
|
|
1074
|
-
var target = event.target,
|
|
1075
|
-
clientX = event.clientX;
|
|
1076
|
-
var offsetWidth = target.offsetWidth;
|
|
1077
|
-
|
|
1078
|
-
var _target$getBoundingCl3 = target.getBoundingClientRect(),
|
|
1079
|
-
left = _target$getBoundingCl3.left;
|
|
1080
|
-
|
|
1081
|
-
this.prevPageX = offsetWidth - (clientX - left);
|
|
1082
|
-
}
|
|
1083
|
-
}, {
|
|
1084
|
-
key: 'handleVerticalThumbMouseDown',
|
|
1085
|
-
value: function handleVerticalThumbMouseDown(event) {
|
|
1086
|
-
event.preventDefault();
|
|
1087
|
-
this.handleDragStart(event);
|
|
1088
|
-
var target = event.target,
|
|
1089
|
-
clientY = event.clientY;
|
|
1090
|
-
var offsetHeight = target.offsetHeight;
|
|
1091
|
-
|
|
1092
|
-
var _target$getBoundingCl4 = target.getBoundingClientRect(),
|
|
1093
|
-
top = _target$getBoundingCl4.top;
|
|
1094
|
-
|
|
1095
|
-
this.prevPageY = offsetHeight - (clientY - top);
|
|
1096
|
-
}
|
|
1097
|
-
}, {
|
|
1098
|
-
key: 'setupDragging',
|
|
1099
|
-
value: function setupDragging() {
|
|
1100
|
-
(0, _domCss2["default"])(document.body, _styles.disableSelectStyle);
|
|
1101
|
-
document.addEventListener('mousemove', this.handleDrag);
|
|
1102
|
-
document.addEventListener('mouseup', this.handleDragEnd);
|
|
1103
|
-
document.onselectstart = _returnFalse2["default"];
|
|
1104
|
-
}
|
|
1105
|
-
}, {
|
|
1106
|
-
key: 'teardownDragging',
|
|
1107
|
-
value: function teardownDragging() {
|
|
1108
|
-
(0, _domCss2["default"])(document.body, _styles.disableSelectStyleReset);
|
|
1109
|
-
document.removeEventListener('mousemove', this.handleDrag);
|
|
1110
|
-
document.removeEventListener('mouseup', this.handleDragEnd);
|
|
1111
|
-
document.onselectstart = undefined;
|
|
1112
|
-
}
|
|
1113
|
-
}, {
|
|
1114
|
-
key: 'handleDragStart',
|
|
1115
|
-
value: function handleDragStart(event) {
|
|
1116
|
-
this.dragging = true;
|
|
1117
|
-
event.stopImmediatePropagation();
|
|
1118
|
-
this.setupDragging();
|
|
1119
|
-
}
|
|
1120
|
-
}, {
|
|
1121
|
-
key: 'handleDrag',
|
|
1122
|
-
value: function handleDrag(event) {
|
|
1123
|
-
if (this.prevPageX) {
|
|
1124
|
-
var clientX = event.clientX;
|
|
1125
|
-
|
|
1126
|
-
var _trackHorizontal$getB = this.trackHorizontal.getBoundingClientRect(),
|
|
1127
|
-
trackLeft = _trackHorizontal$getB.left;
|
|
1128
|
-
|
|
1129
|
-
var thumbWidth = this.getThumbHorizontalWidth();
|
|
1130
|
-
var clickPosition = thumbWidth - this.prevPageX;
|
|
1131
|
-
var offset = -trackLeft + clientX - clickPosition;
|
|
1132
|
-
this.view.scrollLeft = this.getScrollLeftForOffset(offset);
|
|
1133
|
-
}
|
|
1134
|
-
if (this.prevPageY) {
|
|
1135
|
-
var clientY = event.clientY;
|
|
1136
|
-
|
|
1137
|
-
var _trackVertical$getBou = this.trackVertical.getBoundingClientRect(),
|
|
1138
|
-
trackTop = _trackVertical$getBou.top;
|
|
1139
|
-
|
|
1140
|
-
var thumbHeight = this.getThumbVerticalHeight();
|
|
1141
|
-
var _clickPosition = thumbHeight - this.prevPageY;
|
|
1142
|
-
var _offset = -trackTop + clientY - _clickPosition;
|
|
1143
|
-
this.view.scrollTop = this.getScrollTopForOffset(_offset);
|
|
1144
|
-
}
|
|
1145
|
-
return false;
|
|
1146
|
-
}
|
|
1147
|
-
}, {
|
|
1148
|
-
key: 'handleDragEnd',
|
|
1149
|
-
value: function handleDragEnd() {
|
|
1150
|
-
this.dragging = false;
|
|
1151
|
-
this.prevPageX = this.prevPageY = 0;
|
|
1152
|
-
this.teardownDragging();
|
|
1153
|
-
this.handleDragEndAutoHide();
|
|
1154
|
-
}
|
|
1155
|
-
}, {
|
|
1156
|
-
key: 'handleDragEndAutoHide',
|
|
1157
|
-
value: function handleDragEndAutoHide() {
|
|
1158
|
-
var autoHide = this.props.autoHide;
|
|
1159
|
-
|
|
1160
|
-
if (!autoHide) return;
|
|
1161
|
-
this.hideTracks();
|
|
1162
|
-
}
|
|
1163
|
-
}, {
|
|
1164
|
-
key: 'handleTrackMouseEnter',
|
|
1165
|
-
value: function handleTrackMouseEnter() {
|
|
1166
|
-
this.trackMouseOver = true;
|
|
1167
|
-
this.handleTrackMouseEnterAutoHide();
|
|
1168
|
-
}
|
|
1169
|
-
}, {
|
|
1170
|
-
key: 'handleTrackMouseEnterAutoHide',
|
|
1171
|
-
value: function handleTrackMouseEnterAutoHide() {
|
|
1172
|
-
var autoHide = this.props.autoHide;
|
|
1173
|
-
|
|
1174
|
-
if (!autoHide) return;
|
|
1175
|
-
this.showTracks();
|
|
1176
|
-
}
|
|
1177
|
-
}, {
|
|
1178
|
-
key: 'handleTrackMouseLeave',
|
|
1179
|
-
value: function handleTrackMouseLeave() {
|
|
1180
|
-
this.trackMouseOver = false;
|
|
1181
|
-
this.handleTrackMouseLeaveAutoHide();
|
|
1182
|
-
}
|
|
1183
|
-
}, {
|
|
1184
|
-
key: 'handleTrackMouseLeaveAutoHide',
|
|
1185
|
-
value: function handleTrackMouseLeaveAutoHide() {
|
|
1186
|
-
var autoHide = this.props.autoHide;
|
|
1187
|
-
|
|
1188
|
-
if (!autoHide) return;
|
|
1189
|
-
this.hideTracks();
|
|
1190
|
-
}
|
|
1191
|
-
}, {
|
|
1192
|
-
key: 'showTracks',
|
|
1193
|
-
value: function showTracks() {
|
|
1194
|
-
clearTimeout(this.hideTracksTimeout);
|
|
1195
|
-
(0, _domCss2["default"])(this.trackHorizontal, { opacity: 1 });
|
|
1196
|
-
(0, _domCss2["default"])(this.trackVertical, { opacity: 1 });
|
|
1197
|
-
}
|
|
1198
|
-
}, {
|
|
1199
|
-
key: 'hideTracks',
|
|
1200
|
-
value: function hideTracks() {
|
|
1201
|
-
var _this3 = this;
|
|
1202
|
-
|
|
1203
|
-
if (this.dragging) return;
|
|
1204
|
-
if (this.scrolling) return;
|
|
1205
|
-
if (this.trackMouseOver) return;
|
|
1206
|
-
var autoHideTimeout = this.props.autoHideTimeout;
|
|
1207
|
-
|
|
1208
|
-
clearTimeout(this.hideTracksTimeout);
|
|
1209
|
-
this.hideTracksTimeout = setTimeout(function () {
|
|
1210
|
-
(0, _domCss2["default"])(_this3.trackHorizontal, { opacity: 0 });
|
|
1211
|
-
(0, _domCss2["default"])(_this3.trackVertical, { opacity: 0 });
|
|
1212
|
-
}, autoHideTimeout);
|
|
1213
|
-
}
|
|
1214
|
-
}, {
|
|
1215
|
-
key: 'detectScrolling',
|
|
1216
|
-
value: function detectScrolling() {
|
|
1217
|
-
var _this4 = this;
|
|
1218
|
-
|
|
1219
|
-
if (this.scrolling) return;
|
|
1220
|
-
this.scrolling = true;
|
|
1221
|
-
this.handleScrollStart();
|
|
1222
|
-
this.detectScrollingInterval = setInterval(function () {
|
|
1223
|
-
if (_this4.lastViewScrollLeft === _this4.viewScrollLeft && _this4.lastViewScrollTop === _this4.viewScrollTop) {
|
|
1224
|
-
clearInterval(_this4.detectScrollingInterval);
|
|
1225
|
-
_this4.scrolling = false;
|
|
1226
|
-
_this4.handleScrollStop();
|
|
1227
|
-
}
|
|
1228
|
-
_this4.lastViewScrollLeft = _this4.viewScrollLeft;
|
|
1229
|
-
_this4.lastViewScrollTop = _this4.viewScrollTop;
|
|
1230
|
-
}, 100);
|
|
1231
|
-
}
|
|
1232
|
-
}, {
|
|
1233
|
-
key: 'raf',
|
|
1234
|
-
value: function raf(callback) {
|
|
1235
|
-
var _this5 = this;
|
|
1236
|
-
|
|
1237
|
-
if (this.requestFrame) _raf3["default"].cancel(this.requestFrame);
|
|
1238
|
-
this.requestFrame = (0, _raf3["default"])(function () {
|
|
1239
|
-
_this5.requestFrame = undefined;
|
|
1240
|
-
callback();
|
|
1241
|
-
});
|
|
1242
|
-
}
|
|
1243
|
-
}, {
|
|
1244
|
-
key: 'update',
|
|
1245
|
-
value: function update(callback) {
|
|
1246
|
-
var _this6 = this;
|
|
1247
|
-
|
|
1248
|
-
this.raf(function () {
|
|
1249
|
-
return _this6._update(callback);
|
|
1250
|
-
});
|
|
1251
|
-
}
|
|
1252
|
-
}, {
|
|
1253
|
-
key: '_update',
|
|
1254
|
-
value: function _update(callback) {
|
|
1255
|
-
var _props4 = this.props,
|
|
1256
|
-
onUpdate = _props4.onUpdate,
|
|
1257
|
-
hideTracksWhenNotNeeded = _props4.hideTracksWhenNotNeeded;
|
|
1258
|
-
|
|
1259
|
-
var values = this.getValues();
|
|
1260
|
-
if ((0, _getScrollbarWidth2["default"])()) {
|
|
1261
|
-
var scrollLeft = values.scrollLeft,
|
|
1262
|
-
clientWidth = values.clientWidth,
|
|
1263
|
-
scrollWidth = values.scrollWidth;
|
|
1264
|
-
|
|
1265
|
-
var trackHorizontalWidth = (0, _getInnerWidth2["default"])(this.trackHorizontal);
|
|
1266
|
-
var thumbHorizontalWidth = this.getThumbHorizontalWidth();
|
|
1267
|
-
var thumbHorizontalX = scrollLeft / (scrollWidth - clientWidth) * (trackHorizontalWidth - thumbHorizontalWidth);
|
|
1268
|
-
var thumbHorizontalStyle = {
|
|
1269
|
-
width: thumbHorizontalWidth,
|
|
1270
|
-
transform: 'translateX(' + thumbHorizontalX + 'px)'
|
|
1271
|
-
};
|
|
1272
|
-
var scrollTop = values.scrollTop,
|
|
1273
|
-
clientHeight = values.clientHeight,
|
|
1274
|
-
scrollHeight = values.scrollHeight;
|
|
1275
|
-
|
|
1276
|
-
var trackVerticalHeight = (0, _getInnerHeight2["default"])(this.trackVertical);
|
|
1277
|
-
var thumbVerticalHeight = this.getThumbVerticalHeight();
|
|
1278
|
-
var thumbVerticalY = scrollTop / (scrollHeight - clientHeight) * (trackVerticalHeight - thumbVerticalHeight);
|
|
1279
|
-
var thumbVerticalStyle = {
|
|
1280
|
-
height: thumbVerticalHeight,
|
|
1281
|
-
transform: 'translateY(' + thumbVerticalY + 'px)'
|
|
1282
|
-
};
|
|
1283
|
-
if (hideTracksWhenNotNeeded) {
|
|
1284
|
-
var trackHorizontalStyle = {
|
|
1285
|
-
visibility: scrollWidth > clientWidth ? 'visible' : 'hidden'
|
|
1286
|
-
};
|
|
1287
|
-
var trackVerticalStyle = {
|
|
1288
|
-
visibility: scrollHeight > clientHeight ? 'visible' : 'hidden'
|
|
1289
|
-
};
|
|
1290
|
-
(0, _domCss2["default"])(this.trackHorizontal, trackHorizontalStyle);
|
|
1291
|
-
(0, _domCss2["default"])(this.trackVertical, trackVerticalStyle);
|
|
1292
|
-
}
|
|
1293
|
-
(0, _domCss2["default"])(this.thumbHorizontal, thumbHorizontalStyle);
|
|
1294
|
-
(0, _domCss2["default"])(this.thumbVertical, thumbVerticalStyle);
|
|
1295
|
-
}
|
|
1296
|
-
if (onUpdate) onUpdate(values);
|
|
1297
|
-
if (typeof callback !== 'function') return;
|
|
1298
|
-
callback(values);
|
|
1299
|
-
}
|
|
1300
|
-
}, {
|
|
1301
|
-
key: 'render',
|
|
1302
|
-
value: function render() {
|
|
1303
|
-
var _this7 = this;
|
|
1304
|
-
|
|
1305
|
-
var scrollbarWidth = (0, _getScrollbarWidth2["default"])();
|
|
1306
|
-
/* eslint-disable no-unused-vars */
|
|
1307
|
-
|
|
1308
|
-
var _props5 = this.props;
|
|
1309
|
-
_props5.onScroll;
|
|
1310
|
-
_props5.onScrollFrame;
|
|
1311
|
-
_props5.onScrollStart;
|
|
1312
|
-
_props5.onScrollStop;
|
|
1313
|
-
_props5.onUpdate;
|
|
1314
|
-
var renderView = _props5.renderView,
|
|
1315
|
-
renderTrackHorizontal = _props5.renderTrackHorizontal,
|
|
1316
|
-
renderTrackVertical = _props5.renderTrackVertical,
|
|
1317
|
-
renderThumbHorizontal = _props5.renderThumbHorizontal,
|
|
1318
|
-
renderThumbVertical = _props5.renderThumbVertical,
|
|
1319
|
-
tagName = _props5.tagName;
|
|
1320
|
-
_props5.hideTracksWhenNotNeeded;
|
|
1321
|
-
var autoHide = _props5.autoHide;
|
|
1322
|
-
_props5.autoHideTimeout;
|
|
1323
|
-
var autoHideDuration = _props5.autoHideDuration;
|
|
1324
|
-
_props5.thumbSize;
|
|
1325
|
-
_props5.thumbMinSize;
|
|
1326
|
-
var universal = _props5.universal,
|
|
1327
|
-
autoHeight = _props5.autoHeight,
|
|
1328
|
-
autoHeightMin = _props5.autoHeightMin,
|
|
1329
|
-
autoHeightMax = _props5.autoHeightMax,
|
|
1330
|
-
style = _props5.style,
|
|
1331
|
-
children = _props5.children,
|
|
1332
|
-
props = _objectWithoutProperties(_props5, ['onScroll', 'onScrollFrame', 'onScrollStart', 'onScrollStop', 'onUpdate', 'renderView', 'renderTrackHorizontal', 'renderTrackVertical', 'renderThumbHorizontal', 'renderThumbVertical', 'tagName', 'hideTracksWhenNotNeeded', 'autoHide', 'autoHideTimeout', 'autoHideDuration', 'thumbSize', 'thumbMinSize', 'universal', 'autoHeight', 'autoHeightMin', 'autoHeightMax', 'style', 'children']);
|
|
1333
|
-
/* eslint-enable no-unused-vars */
|
|
1334
|
-
|
|
1335
|
-
var didMountUniversal = this.state.didMountUniversal;
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
var containerStyle = _extends({}, _styles.containerStyleDefault, autoHeight && _extends({}, _styles.containerStyleAutoHeight, {
|
|
1339
|
-
minHeight: autoHeightMin,
|
|
1340
|
-
maxHeight: autoHeightMax
|
|
1341
|
-
}), style);
|
|
1342
|
-
|
|
1343
|
-
var viewStyle = _extends({}, _styles.viewStyleDefault, {
|
|
1344
|
-
// Hide scrollbars by setting a negative margin
|
|
1345
|
-
marginRight: scrollbarWidth ? -scrollbarWidth : 0,
|
|
1346
|
-
marginBottom: scrollbarWidth ? -scrollbarWidth : 0
|
|
1347
|
-
}, autoHeight && _extends({}, _styles.viewStyleAutoHeight, {
|
|
1348
|
-
// Add scrollbarWidth to autoHeight in order to compensate negative margins
|
|
1349
|
-
minHeight: (0, _isString2["default"])(autoHeightMin) ? 'calc(' + autoHeightMin + ' + ' + scrollbarWidth + 'px)' : autoHeightMin + scrollbarWidth,
|
|
1350
|
-
maxHeight: (0, _isString2["default"])(autoHeightMax) ? 'calc(' + autoHeightMax + ' + ' + scrollbarWidth + 'px)' : autoHeightMax + scrollbarWidth
|
|
1351
|
-
}), autoHeight && universal && !didMountUniversal && {
|
|
1352
|
-
minHeight: autoHeightMin,
|
|
1353
|
-
maxHeight: autoHeightMax
|
|
1354
|
-
}, universal && !didMountUniversal && _styles.viewStyleUniversalInitial);
|
|
1355
|
-
|
|
1356
|
-
var trackAutoHeightStyle = {
|
|
1357
|
-
transition: 'opacity ' + autoHideDuration + 'ms',
|
|
1358
|
-
opacity: 0
|
|
1359
|
-
};
|
|
1360
|
-
|
|
1361
|
-
var trackHorizontalStyle = _extends({}, _styles.trackHorizontalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
|
|
1362
|
-
display: 'none'
|
|
1363
|
-
});
|
|
1364
|
-
|
|
1365
|
-
var trackVerticalStyle = _extends({}, _styles.trackVerticalStyleDefault, autoHide && trackAutoHeightStyle, (!scrollbarWidth || universal && !didMountUniversal) && {
|
|
1366
|
-
display: 'none'
|
|
1367
|
-
});
|
|
1368
|
-
|
|
1369
|
-
return (0, _react.createElement)(tagName, _extends({}, props, { style: containerStyle, ref: function ref(_ref3) {
|
|
1370
|
-
_this7.container = _ref3;
|
|
1371
|
-
} }), [(0, _react.cloneElement)(renderView({ style: viewStyle }), { key: 'view', ref: function ref(_ref4) {
|
|
1372
|
-
_this7.view = _ref4;
|
|
1373
|
-
} }, children), (0, _react.cloneElement)(renderTrackHorizontal({ style: trackHorizontalStyle }), { key: 'trackHorizontal', ref: function ref(_ref5) {
|
|
1374
|
-
_this7.trackHorizontal = _ref5;
|
|
1375
|
-
} }, (0, _react.cloneElement)(renderThumbHorizontal({ style: _styles.thumbHorizontalStyleDefault }), { ref: function ref(_ref6) {
|
|
1376
|
-
_this7.thumbHorizontal = _ref6;
|
|
1377
|
-
} })), (0, _react.cloneElement)(renderTrackVertical({ style: trackVerticalStyle }), { key: 'trackVertical', ref: function ref(_ref7) {
|
|
1378
|
-
_this7.trackVertical = _ref7;
|
|
1379
|
-
} }, (0, _react.cloneElement)(renderThumbVertical({ style: _styles.thumbVerticalStyleDefault }), { ref: function ref(_ref8) {
|
|
1380
|
-
_this7.thumbVertical = _ref8;
|
|
1381
|
-
} }))]);
|
|
1382
|
-
}
|
|
1383
|
-
}]);
|
|
1384
|
-
|
|
1385
|
-
return Scrollbars;
|
|
1386
|
-
}(_react.Component);
|
|
1387
|
-
|
|
1388
|
-
exports["default"] = Scrollbars;
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
Scrollbars.propTypes = {
|
|
1392
|
-
onScroll: _propTypes2["default"].func,
|
|
1393
|
-
onScrollFrame: _propTypes2["default"].func,
|
|
1394
|
-
onScrollStart: _propTypes2["default"].func,
|
|
1395
|
-
onScrollStop: _propTypes2["default"].func,
|
|
1396
|
-
onUpdate: _propTypes2["default"].func,
|
|
1397
|
-
renderView: _propTypes2["default"].func,
|
|
1398
|
-
renderTrackHorizontal: _propTypes2["default"].func,
|
|
1399
|
-
renderTrackVertical: _propTypes2["default"].func,
|
|
1400
|
-
renderThumbHorizontal: _propTypes2["default"].func,
|
|
1401
|
-
renderThumbVertical: _propTypes2["default"].func,
|
|
1402
|
-
tagName: _propTypes2["default"].string,
|
|
1403
|
-
thumbSize: _propTypes2["default"].number,
|
|
1404
|
-
thumbMinSize: _propTypes2["default"].number,
|
|
1405
|
-
hideTracksWhenNotNeeded: _propTypes2["default"].bool,
|
|
1406
|
-
autoHide: _propTypes2["default"].bool,
|
|
1407
|
-
autoHideTimeout: _propTypes2["default"].number,
|
|
1408
|
-
autoHideDuration: _propTypes2["default"].number,
|
|
1409
|
-
autoHeight: _propTypes2["default"].bool,
|
|
1410
|
-
autoHeightMin: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
|
|
1411
|
-
autoHeightMax: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
|
|
1412
|
-
universal: _propTypes2["default"].bool,
|
|
1413
|
-
style: _propTypes2["default"].object,
|
|
1414
|
-
children: _propTypes2["default"].node
|
|
1415
|
-
};
|
|
1416
|
-
|
|
1417
|
-
Scrollbars.defaultProps = {
|
|
1418
|
-
renderView: _defaultRenderElements.renderViewDefault,
|
|
1419
|
-
renderTrackHorizontal: _defaultRenderElements.renderTrackHorizontalDefault,
|
|
1420
|
-
renderTrackVertical: _defaultRenderElements.renderTrackVerticalDefault,
|
|
1421
|
-
renderThumbHorizontal: _defaultRenderElements.renderThumbHorizontalDefault,
|
|
1422
|
-
renderThumbVertical: _defaultRenderElements.renderThumbVerticalDefault,
|
|
1423
|
-
tagName: 'div',
|
|
1424
|
-
thumbMinSize: 30,
|
|
1425
|
-
hideTracksWhenNotNeeded: false,
|
|
1426
|
-
autoHide: false,
|
|
1427
|
-
autoHideTimeout: 1000,
|
|
1428
|
-
autoHideDuration: 200,
|
|
1429
|
-
autoHeight: false,
|
|
1430
|
-
autoHeightMin: 0,
|
|
1431
|
-
autoHeightMax: 200,
|
|
1432
|
-
universal: false
|
|
1433
|
-
};
|
|
1434
|
-
} (Scrollbars));
|
|
1435
|
-
|
|
1436
|
-
(function (exports) {
|
|
1437
|
-
|
|
1438
|
-
Object.defineProperty(exports, "__esModule", {
|
|
1439
|
-
value: true
|
|
1440
|
-
});
|
|
1441
|
-
exports.Scrollbars = undefined;
|
|
1442
|
-
|
|
1443
|
-
var _Scrollbars = Scrollbars;
|
|
1444
|
-
|
|
1445
|
-
var _Scrollbars2 = _interopRequireDefault(_Scrollbars);
|
|
1446
|
-
|
|
1447
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
1448
|
-
|
|
1449
|
-
exports["default"] = _Scrollbars2["default"];
|
|
1450
|
-
exports.Scrollbars = _Scrollbars2["default"];
|
|
1451
|
-
} (lib));
|
|
1452
|
-
|
|
1453
|
-
var css_248z = "[data-gene-ui-version=\"2.16.3\"] .scroll-holder{position:relative}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-thumb{background:rgba(var(--background-sc-rgb),.05);border-radius:var(--scrollbar-size,16px);transition:background .3s,transform .25s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track{cursor:pointer;position:absolute;transition:opacity .3s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track.horizontal{bottom:0;height:var(--scrollbar-size,16px)!important;left:0;padding:var(--scrollbar-space,4px) var(--scrollbar-gutter,10px);width:100%!important}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track.vertical{height:100%!important;padding:var(--scrollbar-gutter,10px) var(--scrollbar-space,4px);top:0;width:var(--scrollbar-size,16px)!important}html:not([dir=rtl]) .scroll-holder .scroll-track.vertical{right:0}html[dir=rtl] .scroll-holder .scroll-track.vertical{left:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track:active .scroll-thumb,[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-track:hover .scroll-thumb{background:rgba(var(--background-sc-rgb),.1);transition:background .3s}[data-gene-ui-version=\"2.16.3\"] .scroll-holder:not(:hover,:active) .scroll-track{opacity:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder .scroll-content{margin-bottom:var(--sb-margin-bottom);margin-inline-end:var(--sb-margin-side);z-index:0}[data-gene-ui-version=\"2.16.3\"] .scroll-holder.s-small{--scrollbar-size:10px;--scrollbar-thumbSize:4px;--scrollbar-gutter:3px;--scrollbar-space:3px}";
|
|
1454
|
-
styleInject(css_248z);
|
|
1455
|
-
|
|
1456
|
-
const easeOutQuad = t => t * (2 - t);
|
|
1457
|
-
const smoothScrollTo = (element, to, duration) => {
|
|
1458
|
-
const start = element.viewScrollTop || 0;
|
|
1459
|
-
const change = to - start;
|
|
1460
|
-
const startTime = performance.now();
|
|
1461
|
-
let animationFrameId;
|
|
1462
|
-
const animateScroll = timestamp => {
|
|
1463
|
-
const elapsed = timestamp - startTime;
|
|
1464
|
-
const progress = Math.min(elapsed / duration, 1);
|
|
1465
|
-
const easeProgress = easeOutQuad(progress);
|
|
1466
|
-
element.scrollTop(start + change * easeProgress);
|
|
1467
|
-
if (progress < 1) {
|
|
1468
|
-
animationFrameId = requestAnimationFrame(animateScroll);
|
|
1469
|
-
}
|
|
1470
|
-
};
|
|
1471
|
-
animationFrameId = requestAnimationFrame(animateScroll);
|
|
1472
|
-
const cancelScroll = () => {
|
|
1473
|
-
if (animationFrameId) {
|
|
1474
|
-
cancelAnimationFrame(animationFrameId);
|
|
1475
|
-
}
|
|
1476
|
-
};
|
|
1477
|
-
return cancelScroll;
|
|
1478
|
-
};
|
|
1479
|
-
const CustomScrollbar = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
1480
|
-
let {
|
|
1481
|
-
children,
|
|
1482
|
-
className,
|
|
1483
|
-
size,
|
|
1484
|
-
scrollTop,
|
|
1485
|
-
withSmoothScroll,
|
|
1486
|
-
...restProps
|
|
1487
|
-
} = _ref;
|
|
1488
|
-
useEffect(() => {
|
|
1489
|
-
const element = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
1490
|
-
if (!element) return;
|
|
1491
|
-
let cancelScroll;
|
|
1492
|
-
if (withSmoothScroll) {
|
|
1493
|
-
cancelScroll = smoothScrollTo(element, scrollTop, 500);
|
|
1494
|
-
} else {
|
|
1495
|
-
element.scrollTop(scrollTop);
|
|
1496
|
-
}
|
|
1497
|
-
|
|
1498
|
-
// Clean up the cancellation function if the component unmounts
|
|
1499
|
-
// or if there's a change in the scroll position
|
|
1500
|
-
return () => {
|
|
1501
|
-
cancelScroll && cancelScroll();
|
|
1502
|
-
};
|
|
1503
|
-
}, [scrollTop]);
|
|
1504
|
-
return /*#__PURE__*/React__default.createElement(lib.Scrollbars, _extends$1({
|
|
1505
|
-
ref: ref,
|
|
1506
|
-
renderView: _ref2 => {
|
|
1507
|
-
let {
|
|
1508
|
-
style,
|
|
1509
|
-
...props
|
|
1510
|
-
} = _ref2;
|
|
1511
|
-
return /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
|
|
1512
|
-
style: {
|
|
1513
|
-
...style,
|
|
1514
|
-
margin: null,
|
|
1515
|
-
'--sb-margin-bottom': "".concat(style.marginBottom, "px"),
|
|
1516
|
-
'--sb-margin-side': "".concat(style.marginRight, "px")
|
|
1517
|
-
/* This change will return the CORE-395 bug due to the fact that we
|
|
1518
|
-
* used a virtualized-list in the ScrollBar everywhere.
|
|
1519
|
-
* ...
|
|
1520
|
-
* overflow: 'auto'
|
|
1521
|
-
*/
|
|
1522
|
-
},
|
|
1523
|
-
className: "scroll-content"
|
|
1524
|
-
}));
|
|
1525
|
-
},
|
|
1526
|
-
renderTrackHorizontal: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
|
|
1527
|
-
className: "scroll-track horizontal"
|
|
1528
|
-
})),
|
|
1529
|
-
renderTrackVertical: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
|
|
1530
|
-
className: "scroll-track vertical"
|
|
1531
|
-
})),
|
|
1532
|
-
renderThumbHorizontal: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
|
|
1533
|
-
className: "scroll-thumb horizontal"
|
|
1534
|
-
})),
|
|
1535
|
-
renderThumbVertical: props => /*#__PURE__*/React__default.createElement("div", _extends$1({}, props, {
|
|
1536
|
-
className: "scroll-thumb vertical"
|
|
1537
|
-
})),
|
|
1538
|
-
className: classnames('scroll-holder', "s-".concat(size), className),
|
|
1539
|
-
thumbMinSize: 0,
|
|
1540
|
-
hideTracksWhenNotNeeded: true
|
|
1541
|
-
}, restProps), children);
|
|
1542
|
-
});
|
|
1543
|
-
CustomScrollbar.propTypes = {
|
|
1544
|
-
/**
|
|
1545
|
-
* Any valid React node
|
|
1546
|
-
*/
|
|
1547
|
-
children: PropTypes.node.isRequired,
|
|
1548
|
-
/**
|
|
1549
|
-
* Enable auto-height mode. When true container grows with content.
|
|
1550
|
-
*/
|
|
1551
|
-
autoHeight: PropTypes.bool,
|
|
1552
|
-
/**
|
|
1553
|
-
* Set a minimum height for auto-height mode.
|
|
1554
|
-
*/
|
|
1555
|
-
autoHeightMin: PropTypes.number,
|
|
1556
|
-
/**
|
|
1557
|
-
* Set a maximum height for auto-height mode
|
|
1558
|
-
*/
|
|
1559
|
-
autoHeightMax: PropTypes.number,
|
|
1560
|
-
/**
|
|
1561
|
-
* Set the size for scrollbar thickness
|
|
1562
|
-
*/
|
|
1563
|
-
size: PropTypes.oneOf(customScrollbarConfig.size),
|
|
1564
|
-
/**
|
|
1565
|
-
* Set scrollbar top position dynamically.
|
|
1566
|
-
* Prop works when ref is provided.
|
|
1567
|
-
*/
|
|
1568
|
-
scrollTop: PropTypes.number,
|
|
1569
|
-
/**
|
|
1570
|
-
* This prop works with `scrollTop` prop
|
|
1571
|
-
* and provide auto scroll type if true
|
|
1572
|
-
* then auto scrolling will be smoother
|
|
1573
|
-
*/
|
|
1574
|
-
withSmoothScroll: PropTypes.bool
|
|
1575
|
-
};
|
|
1576
|
-
CustomScrollbar.defaultProps = {
|
|
1577
|
-
autoHeight: false,
|
|
1578
|
-
autoHeightMin: 0,
|
|
1579
|
-
autoHeightMax: 5000,
|
|
1580
|
-
size: customScrollbarConfig.size[0],
|
|
1581
|
-
scrollTop: 0,
|
|
1582
|
-
withSmoothScroll: false
|
|
1583
|
-
};
|
|
1584
|
-
|
|
1585
|
-
export { CustomScrollbar as default };
|