1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
4 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
11 | var React = _interopRequireWildcard(require("react"));
|
12 | var _classnames = _interopRequireDefault(require("classnames"));
|
13 | var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
|
14 | function getPageXY(e, horizontal) {
|
15 | var obj = 'touches' in e ? e.touches[0] : e;
|
16 | return obj[horizontal ? 'pageX' : 'pageY'];
|
17 | }
|
18 | var ScrollBar = React.forwardRef(function (props, ref) {
|
19 | var _classNames;
|
20 | var prefixCls = props.prefixCls,
|
21 | rtl = props.rtl,
|
22 | scrollOffset = props.scrollOffset,
|
23 | scrollRange = props.scrollRange,
|
24 | onStartMove = props.onStartMove,
|
25 | onStopMove = props.onStopMove,
|
26 | onScroll = props.onScroll,
|
27 | horizontal = props.horizontal,
|
28 | spinSize = props.spinSize,
|
29 | containerSize = props.containerSize;
|
30 | var _React$useState = React.useState(false),
|
31 | _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
32 | dragging = _React$useState2[0],
|
33 | setDragging = _React$useState2[1];
|
34 | var _React$useState3 = React.useState(null),
|
35 | _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
|
36 | pageXY = _React$useState4[0],
|
37 | setPageXY = _React$useState4[1];
|
38 | var _React$useState5 = React.useState(null),
|
39 | _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
|
40 | startTop = _React$useState6[0],
|
41 | setStartTop = _React$useState6[1];
|
42 | var isLTR = !rtl;
|
43 |
|
44 | var scrollbarRef = React.useRef();
|
45 | var thumbRef = React.useRef();
|
46 |
|
47 | var _React$useState7 = React.useState(false),
|
48 | _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
|
49 | visible = _React$useState8[0],
|
50 | setVisible = _React$useState8[1];
|
51 | var visibleTimeoutRef = React.useRef();
|
52 | var delayHidden = function delayHidden() {
|
53 | clearTimeout(visibleTimeoutRef.current);
|
54 | setVisible(true);
|
55 | visibleTimeoutRef.current = setTimeout(function () {
|
56 | setVisible(false);
|
57 | }, 3000);
|
58 | };
|
59 |
|
60 | var enableScrollRange = scrollRange - containerSize || 0;
|
61 | var enableOffsetRange = containerSize - spinSize || 0;
|
62 |
|
63 | var canScroll = enableScrollRange > 0;
|
64 |
|
65 | var top = React.useMemo(function () {
|
66 | if (scrollOffset === 0 || enableScrollRange === 0) {
|
67 | return 0;
|
68 | }
|
69 | var ptg = scrollOffset / enableScrollRange;
|
70 | return ptg * enableOffsetRange;
|
71 | }, [scrollOffset, enableScrollRange, enableOffsetRange]);
|
72 |
|
73 | var onContainerMouseDown = function onContainerMouseDown(e) {
|
74 | e.stopPropagation();
|
75 | e.preventDefault();
|
76 | };
|
77 |
|
78 | var stateRef = React.useRef({
|
79 | top: top,
|
80 | dragging: dragging,
|
81 | pageY: pageXY,
|
82 | startTop: startTop
|
83 | });
|
84 | stateRef.current = {
|
85 | top: top,
|
86 | dragging: dragging,
|
87 | pageY: pageXY,
|
88 | startTop: startTop
|
89 | };
|
90 | var onThumbMouseDown = function onThumbMouseDown(e) {
|
91 | setDragging(true);
|
92 | setPageXY(getPageXY(e, horizontal));
|
93 | setStartTop(stateRef.current.top);
|
94 | onStartMove();
|
95 | e.stopPropagation();
|
96 | e.preventDefault();
|
97 | };
|
98 |
|
99 |
|
100 |
|
101 |
|
102 | React.useEffect(function () {
|
103 | var onScrollbarTouchStart = function onScrollbarTouchStart(e) {
|
104 | e.preventDefault();
|
105 | };
|
106 | var scrollbarEle = scrollbarRef.current;
|
107 | var thumbEle = thumbRef.current;
|
108 | scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart);
|
109 | thumbEle.addEventListener('touchstart', onThumbMouseDown);
|
110 | return function () {
|
111 | scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
|
112 | thumbEle.removeEventListener('touchstart', onThumbMouseDown);
|
113 | };
|
114 | }, []);
|
115 | React.useEffect(function () {
|
116 | if (dragging) {
|
117 | var moveRafId;
|
118 | var onMouseMove = function onMouseMove(e) {
|
119 | var _stateRef$current = stateRef.current,
|
120 | stateDragging = _stateRef$current.dragging,
|
121 | statePageY = _stateRef$current.pageY,
|
122 | stateStartTop = _stateRef$current.startTop;
|
123 | _raf.default.cancel(moveRafId);
|
124 | if (stateDragging) {
|
125 | var offset = getPageXY(e, horizontal) - statePageY;
|
126 | var newTop = stateStartTop;
|
127 | if (!isLTR && horizontal) {
|
128 | newTop -= offset;
|
129 | } else {
|
130 | newTop += offset;
|
131 | }
|
132 | var ptg = enableOffsetRange ? newTop / enableOffsetRange : 0;
|
133 | var newScrollTop = Math.ceil(ptg * enableScrollRange);
|
134 | newScrollTop = Math.max(newScrollTop, 0);
|
135 | newScrollTop = Math.min(newScrollTop, enableScrollRange);
|
136 | moveRafId = (0, _raf.default)(function () {
|
137 | onScroll(newScrollTop, horizontal);
|
138 | });
|
139 | }
|
140 | };
|
141 | var onMouseUp = function onMouseUp() {
|
142 | setDragging(false);
|
143 | onStopMove();
|
144 | };
|
145 | window.addEventListener('mousemove', onMouseMove);
|
146 | window.addEventListener('touchmove', onMouseMove);
|
147 | window.addEventListener('mouseup', onMouseUp);
|
148 | window.addEventListener('touchend', onMouseUp);
|
149 | return function () {
|
150 | window.removeEventListener('mousemove', onMouseMove);
|
151 | window.removeEventListener('touchmove', onMouseMove);
|
152 | window.removeEventListener('mouseup', onMouseUp);
|
153 | window.removeEventListener('touchend', onMouseUp);
|
154 | _raf.default.cancel(moveRafId);
|
155 | };
|
156 | }
|
157 | }, [dragging]);
|
158 | React.useEffect(function () {
|
159 | delayHidden();
|
160 | }, [scrollOffset]);
|
161 |
|
162 | React.useImperativeHandle(ref, function () {
|
163 | return {
|
164 | delayHidden: delayHidden
|
165 | };
|
166 | });
|
167 |
|
168 | var scrollbarPrefixCls = "".concat(prefixCls, "-scrollbar");
|
169 | var containerStyle = {
|
170 | position: 'absolute',
|
171 | visibility: visible && canScroll ? null : 'hidden'
|
172 | };
|
173 | var thumbStyle = {
|
174 | position: 'absolute',
|
175 | background: 'rgba(0, 0, 0, 0.5)',
|
176 | borderRadius: 99,
|
177 | cursor: 'pointer',
|
178 | userSelect: 'none'
|
179 | };
|
180 | if (horizontal) {
|
181 |
|
182 | containerStyle.height = 8;
|
183 | containerStyle.left = 0;
|
184 | containerStyle.right = 0;
|
185 | containerStyle.bottom = 0;
|
186 |
|
187 | thumbStyle.height = '100%';
|
188 | thumbStyle.width = spinSize;
|
189 | if (isLTR) {
|
190 | thumbStyle.left = top;
|
191 | } else {
|
192 | thumbStyle.right = top;
|
193 | }
|
194 | } else {
|
195 |
|
196 | containerStyle.width = 8;
|
197 | containerStyle.top = 0;
|
198 | containerStyle.bottom = 0;
|
199 | if (isLTR) {
|
200 | containerStyle.right = 0;
|
201 | } else {
|
202 | containerStyle.left = 0;
|
203 | }
|
204 |
|
205 | thumbStyle.width = '100%';
|
206 | thumbStyle.height = spinSize;
|
207 | thumbStyle.top = top;
|
208 | }
|
209 | return React.createElement("div", {
|
210 | ref: scrollbarRef,
|
211 | className: (0, _classnames.default)(scrollbarPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(scrollbarPrefixCls, "-horizontal"), horizontal), (0, _defineProperty2.default)(_classNames, "".concat(scrollbarPrefixCls, "-vertical"), !horizontal), (0, _defineProperty2.default)(_classNames, "".concat(scrollbarPrefixCls, "-visible"), visible), _classNames)),
|
212 | style: containerStyle,
|
213 | onMouseDown: onContainerMouseDown,
|
214 | onMouseMove: delayHidden
|
215 | }, React.createElement("div", {
|
216 | ref: thumbRef,
|
217 | className: (0, _classnames.default)("".concat(scrollbarPrefixCls, "-thumb"), (0, _defineProperty2.default)({}, "".concat(scrollbarPrefixCls, "-thumb-moving"), dragging)),
|
218 | style: thumbStyle,
|
219 | onMouseDown: onThumbMouseDown
|
220 | }));
|
221 | });
|
222 | if (process.env.NODE_ENV !== 'production') {
|
223 | ScrollBar.displayName = 'ScrollBar';
|
224 | }
|
225 | var _default = ScrollBar;
|
226 | exports.default = _default; |
\ | No newline at end of file |