setScrollContainer(ref)}/>
8 | )}
9 |
10 | );
--------------------------------------------------------------------------------
/src/StrollableContainer.tsx:
--------------------------------------------------------------------------------
1 | import {IContainerProps, Strollable, strollerStyle} from "./Container";
2 | import {Stroller, IStrollerProps} from "./Stroller";
3 | import * as React from "react";
4 | import {StrollCaptor} from "./StrollCaptor";
5 |
6 | export type Props = IContainerProps & IStrollerProps;
7 |
8 | export const StrollableContainer: React.SFC
= (
9 | {
10 | children,
11 | className,
12 |
13 | axis,
14 | bar,
15 | inBetween,
16 |
17 | scrollBar,
18 | oppositePosition,
19 | draggable,
20 |
21 | barSizeFunction,
22 | barClassName,
23 | SideBar,
24 |
25 | overrideLocation,
26 | targetAxis,
27 |
28 | overscroll,
29 | containerStyles,
30 | minScrollbarWidth,
31 |
32 | scrollKey,
33 | gap,
34 |
35 | onScroll
36 | }
37 | ) => (
38 |
39 |
60 |
68 |
69 | {children}
70 |
71 |
72 |
73 | )
--------------------------------------------------------------------------------
/src/Stroller.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {supportsPassiveEvents} from 'detect-passive-events';
3 |
4 | import {axisToProps, axisTypes, extractValues, findScrollableParent} from "./utils";
5 | import {BarLocation, BarSizeFunction, BarView, StollerBar, IStrollerBarProps, ISideBar} from "./Bar";
6 | import {DragMachine} from "./DragEngine";
7 |
8 | import {StrollerProvider, StrollerStateProvider} from './context';
9 | import {strollerStyle} from "./Container";
10 |
11 | export interface IStrollerProps {
12 | axis?: axisTypes;
13 | targetAxis?: axisTypes;
14 |
15 | inBetween?: React.ReactNode;
16 | bar?: BarView,
17 | scrollBar?: React.ComponentType;
18 | barSizeFunction?: BarSizeFunction;
19 | barClassName?: string,
20 | SideBar?: ISideBar;
21 |
22 | oppositePosition?: boolean,
23 | draggable?: boolean
24 |
25 | overrideLocation?: BarLocation;
26 |
27 | scrollKey?: any;
28 |
29 | passive?: boolean;
30 |
31 | onScroll?: (e: Event) => void;
32 | }
33 |
34 | export interface IComponentState {
35 | scrollWidth: number;
36 | scrollHeight: number;
37 |
38 | clientWidth: number;
39 | clientHeight: number;
40 |
41 | targetWidth?: number;
42 | targetHeight?: number;
43 |
44 | scrollLeft: number;
45 | scrollTop: number;
46 |
47 | hasScroll: boolean,
48 |
49 | dragPhase: string;
50 | mousePosition: number[];
51 | scrollPosition: number[];
52 |
53 | barLocation: BarLocation;
54 | }
55 |
56 | export class Stroller extends React.Component {
57 |
58 | state = {
59 | scrollWidth: 0,
60 | scrollHeight: 0,
61 | clientWidth: 0,
62 | clientHeight: 0,
63 | targetWidth: 0,
64 | targetHeight: 0,
65 | scrollLeft: 0,
66 | scrollTop: 0,
67 | dragPhase: 'idle',
68 | mousePosition: [0, 0],
69 | scrollPosition: [0, 0],
70 | barLocation: 'inside' as BarLocation,
71 | hasScroll: false,
72 | };
73 |
74 | private dragMachine = DragMachine.create();
75 |
76 | private topNode: HTMLElement | undefined = undefined;
77 | private scrollableParent: HTMLElement | undefined = undefined;
78 | private scrollContainer: HTMLElement | null = null;
79 | private barRef: HTMLElement | undefined = undefined;
80 | private dettachParentCallback: null | (() => void) = null;
81 |
82 | componentDidMount() {
83 | this.scrollableParent = findScrollableParent(this.scrollContainer || this.topNode!, this.props.axis);
84 | const scrollableParent: any = this.scrollableParent;
85 |
86 | const barLocation = this.props.overrideLocation || this.scrollableParent === document.body
87 | ? 'fixed'
88 | : (
89 | (this.scrollContainer ? !this.topNode!.contains(this.scrollableParent) : true)
90 | ? 'inside'
91 | : 'outside'
92 | );
93 |
94 | this.setState({
95 | barLocation
96 | });
97 |
98 | this.attach(barLocation === 'fixed' ? window : this.scrollableParent);
99 |
100 | this.onContainerScroll();
101 |
102 | (this.dragMachine as any)._id = this;
103 |
104 | this.dragMachine
105 | .attrs({enabled: this.props.draggable})
106 | .observe((dragPhase: string) => this.setState({dragPhase}))
107 | .connect((message: string, coords: number[]) => {
108 | if (message === 'down') {
109 | this.setState({
110 | mousePosition: coords,
111 | scrollPosition:
112 | this.state.barLocation === 'fixed'
113 | ? [window.scrollX, window.scrollY]
114 | : [scrollableParent.scrollLeft, scrollableParent.scrollTop]
115 | })
116 | }
117 | if (message === 'move') {
118 | const {axis = 'vertical', targetAxis: pTargetAxis} = this.props;
119 | const {mousePosition} = this.state;
120 |
121 | const targetAxis = pTargetAxis || axis;
122 | const axScroll = axisToProps[axis];
123 | const axTarget = axisToProps[targetAxis];
124 |
125 | const delta = [mousePosition[0] - coords[0], mousePosition[1] - coords[1]];
126 |
127 | const st: any = this.state;
128 |
129 | const {space: axisSpace, scrollSpace: axisScrollSpace} = extractValues(st, axis);
130 | const {scrollSpace, targetSpace} = extractValues(st, targetAxis);
131 |
132 | const scrollFactor =
133 | axis === targetAxis
134 | ? scrollSpace / targetSpace
135 | : (axisScrollSpace - axisSpace) / targetSpace;
136 |
137 | const barPosition: any = scrollableParent.getBoundingClientRect();
138 | if (this.state.barLocation === 'fixed') {
139 | const X = axis === 'vertical' ? st.scrollPosition[0] : st.scrollPosition[0] - delta[axTarget.coord] * scrollFactor;
140 | const Y = axis !== 'vertical' ? st.scrollPosition[1] : st.scrollPosition[1] - delta[axTarget.coord] * scrollFactor;
141 | window.scrollTo(X, Y);
142 | } else if (barPosition[axTarget.start] < coords[axTarget.coord] && barPosition[axTarget.end] > coords[axTarget.coord]) {
143 | scrollableParent[axScroll.scroll] = st.scrollPosition[axScroll.coord] - delta[axTarget.coord] * scrollFactor;
144 | }
145 |
146 | }
147 | })
148 | .start('init')
149 | }
150 |
151 | componentWillUnmount() {
152 | this.dragMachine.destroy();
153 | this.dettach();
154 | }
155 |
156 | componentDidUpdate(prevProps: IStrollerProps) {
157 | this.dragMachine.attrs({enabled: this.props.draggable});
158 | this.dragMachine.put('check');
159 | if (this.props.scrollKey !== prevProps.scrollKey) {
160 | this.onContainerScroll();
161 | }
162 | }
163 |
164 | private onContainerScroll = (e?: Event) => {
165 | const topNode = this.scrollableParent as any;
166 |
167 | const scrollLeft = topNode.scrollLeft;
168 | const scrollTop = topNode.scrollTop;
169 |
170 | const scrollWidth = topNode.scrollWidth;
171 | const scrollHeight = topNode.scrollHeight;
172 |
173 | const targetWidth = this.topNode?.clientWidth;
174 | const targetHeight = this.topNode?.clientHeight;
175 |
176 | const clientWidth = topNode.clientWidth;
177 | const clientHeight = topNode.clientHeight;
178 |
179 |
180 | const isFixed = this.state.barLocation === 'fixed';
181 |
182 | const st: any = this.state;
183 |
184 | const {axis = 'vertical', onScroll } = this.props;
185 |
186 | const mainScroll = extractValues(st, axis);
187 |
188 | this.setState({
189 | scrollWidth,
190 | scrollHeight,
191 |
192 | targetWidth,
193 | targetHeight,
194 |
195 | clientWidth: isFixed ? window.innerWidth : clientWidth,
196 | clientHeight: isFixed ? window.innerHeight : clientHeight,
197 |
198 | scrollLeft: isFixed ? window.scrollX : scrollLeft,
199 | scrollTop: isFixed ? window.scrollY : scrollTop,
200 |
201 | hasScroll: mainScroll.scrollSpace > mainScroll.space,
202 | });
203 |
204 | if (onScroll && e) {
205 | onScroll(e);
206 | }
207 | };
208 |
209 | private attach(parent: HTMLElement | Window) {
210 | this.dettach();
211 | const {passive} = this.props;
212 | const options: any = passive && supportsPassiveEvents ? {passive: true} : undefined;
213 | parent.addEventListener('scroll', this.onContainerScroll, options);
214 | this.dettachParentCallback = () => {
215 | parent.removeEventListener('scroll', this.onContainerScroll, options);
216 | };
217 | }
218 |
219 | private dettach() {
220 | if (this.dettachParentCallback) {
221 | this.dettachParentCallback();
222 | this.dettachParentCallback = null;
223 | }
224 | }
225 |
226 | private setScrollContainer = (ref: HTMLElement | null) => this.scrollContainer = ref;
227 |
228 | private setTopNode = (topNode: HTMLElement) => this.topNode = topNode;
229 |
230 | private setBarRef = (barRef: HTMLElement) => {
231 | this.barRef = barRef;
232 | this.dragMachine
233 | .attrs({node: this.barRef})
234 | .put('check');
235 | };
236 |
237 | private strollerProviderValue = {
238 | setScrollContainer: this.setScrollContainer
239 | };
240 |
241 | render() {
242 | const {
243 | children,
244 | bar,
245 | inBetween,
246 | axis = 'vertical',
247 | targetAxis,
248 | oppositePosition = false,
249 | draggable = false,
250 | barSizeFunction,
251 | barClassName,
252 | SideBar,
253 | } = this.props;
254 |
255 | const {dragPhase} = this.state;
256 | const st: any = this.state;
257 |
258 | const ax = axisToProps[axis];
259 |
260 | const scrollSpace: number = st[ax.scrollSpace];
261 |
262 | const Bar = this.props.scrollBar || StollerBar;
263 |
264 | return (
265 |
266 |
267 |
268 | {children}
269 |
270 |
271 | {inBetween}
272 |
273 | {scrollSpace
274 | ? (
275 |
295 | )
296 | : null
297 | }
298 |
7 |
8 |
9 |
10 | 
11 |
12 |
13 |