Skip to content

Commit 1a671cc

Browse files
Leandro SoaresSoaresMG
Leandro Soares
authored and
SoaresMG
committed
feat: add containers ref on context - containerRef
1 parent 77a1dbc commit 1a671cc

33 files changed

Lines changed: 2982 additions & 2706 deletions

‎babel.config.json‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
{
2-
"presets": ["@babel/preset-react"],
3-
"plugins": [
4-
["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
5-
["module-resolver", {
6-
"alias": {
7-
"#components": "./src/components",
8-
"#components/**": "./src/components/**",
9-
"#containers": "./src/containers",
10-
"#context": "./src/context",
11-
"#utils": "./src/utils"
12-
}
13-
}]
14-
],
15-
"env": {
16-
"test": {
17-
"presets": ["@babel/preset-env"]
18-
},
19-
"cjs": {
20-
"plugins": ["add-module-exports"],
21-
"presets": ["@babel/preset-env"]
22-
},
23-
"es": {
24-
"presets": [["@babel/preset-env", { "modules": false }]]
25-
}
26-
}
27-
}
1+
{
2+
"presets": ["@babel/preset-react"],
3+
"plugins": [
4+
["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
5+
["module-resolver", {
6+
"alias": {
7+
"#components": "./src/components",
8+
"#components/**": "./src/components/**",
9+
"#containers": "./src/containers",
10+
"#context": "./src/context",
11+
"#utils": "./src/utils",
12+
"#hooks": "./src/hooks"
13+
}
14+
}]
15+
],
16+
"env": {
17+
"test": {
18+
"presets": ["@babel/preset-env"]
19+
},
20+
"cjs": {
21+
"plugins": ["add-module-exports"],
22+
"presets": ["@babel/preset-env"]
23+
},
24+
"es": {
25+
"presets": [["@babel/preset-env", { "modules": false }]]
26+
}
27+
}
28+
}

‎jsconfig.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"#components": ["./src/components"],
88
"#containers": ["./src/containers"],
99
"#context": ["./src/context"],
10-
"#utils": ["./src/utils"]
10+
"#utils": ["./src/utils"],
11+
"#hooks": ["./src/hooks"]
1112
}
1213
},
1314
"include": ["./src/**/*"],
@@ -16,4 +17,4 @@
1617
"es",
1718
"lib"
1819
]
19-
}
20+
}

‎src/components/Bullets.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,12 @@ class Bullets extends PureComponent {
7979
}
8080

8181
getTranslationValue() {
82-
const { translationValue, maxBullets, bullets, activeBullet } =
83-
this.state;
82+
const {
83+
translationValue,
84+
maxBullets,
85+
bullets,
86+
activeBullet,
87+
} = this.state;
8488

8589
// If active slide is in first, second or third position translation doesn't happen
8690
if (bullets <= maxBullets || activeBullet <= 2) {

‎src/components/Carousel.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CarouselProvider } from '#context';
22
import PropTypes from 'prop-types';
3-
import React, { Component } from 'react';
3+
import React, { Component, forwardRef } from 'react';
44
import cx from 'classnames';
55

66
class Carousel extends Component {
@@ -14,6 +14,7 @@ class Carousel extends Component {
1414
itemsToScroll,
1515
onAfterChange,
1616
startItem,
17+
innerRef,
1718
...otherProps
1819
} = this.props;
1920

@@ -28,7 +29,11 @@ class Carousel extends Component {
2829

2930
return (
3031
<CarouselProvider {...providerProps}>
31-
<div className={cx('wrapper', className)} {...otherProps}>
32+
<div
33+
ref={innerRef}
34+
className={cx('wrapper', className)}
35+
{...otherProps}
36+
>
3237
{children}
3338
</div>
3439
</CarouselProvider>
@@ -45,10 +50,16 @@ Carousel.propTypes = {
4550
onAfterChange: PropTypes.func,
4651
itemsToScroll: PropTypes.number,
4752
startItem: PropTypes.number,
53+
innerRef: PropTypes.oneOfType([
54+
PropTypes.func,
55+
PropTypes.shape({ current: PropTypes.elementType }),
56+
]),
4857
};
4958

5059
Carousel.defaultProps = {
5160
itemsToScroll: 1,
5261
};
5362

54-
export default Carousel;
63+
export default forwardRef(function CarouselForwardingRef(props, ref) {
64+
return <Carousel innerRef={ref} {...props} />;
65+
});

‎src/components/ScrollSlider.js‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { animateScroll, renderSlides } from '#utils';
22
import PropTypes from 'prop-types';
3-
import React, { Children, Component, createRef } from 'react';
3+
import React, { Children, Component, forwardRef } from 'react';
44
import cx from 'classnames';
55
import debounce from 'lodash/debounce';
66

7-
class ScrollSlider extends Component {
7+
export class ScrollSlider extends Component {
88
constructor(props) {
99
super(props);
1010
this._verifyActiveItemDebounce = debounce(this._verifyActiveItem, 25);
@@ -13,7 +13,6 @@ class ScrollSlider extends Component {
1313
this.activeItem = 0;
1414
this.shouldMoveToItem = false;
1515
this.isPreventingScroll = false;
16-
this.containerRef = createRef();
1716
}
1817

1918
componentDidMount() {
@@ -36,6 +35,7 @@ class ScrollSlider extends Component {
3635
itemsToShow,
3736
limitScroll,
3837
setItemsLength,
38+
containerRef,
3939
...othersProps
4040
} = this.props;
4141

@@ -52,7 +52,7 @@ class ScrollSlider extends Component {
5252

5353
return (
5454
<div
55-
ref={this.containerRef}
55+
ref={containerRef}
5656
className={cx('slider', 'scrollSliderContainer', className)}
5757
onScroll={this._handleScroll}
5858
{...othersProps}
@@ -63,14 +63,14 @@ class ScrollSlider extends Component {
6363
}
6464

6565
_moveToItem() {
66-
const el = this.containerRef.current;
66+
const { activeItem, itemsToShow, isRTL, containerRef } = this.props;
67+
const el = containerRef.current;
6768

6869
if (!el) {
6970
return null;
7071
}
7172

7273
const { offsetWidth } = el;
73-
const { activeItem, itemsToShow, isRTL } = this.props;
7474

7575
const itemToMoveTo = isRTL
7676
? this.itemsLength - 2 - activeItem
@@ -84,7 +84,7 @@ class ScrollSlider extends Component {
8484

8585
/* Don't work on Chrome, but work on iOS */
8686
_forceScrollSnapStop(newPosition, newIndex) {
87-
const el = this.containerRef.current;
87+
const el = this.props.containerRef.current;
8888

8989
if (!el) {
9090
return null;
@@ -103,8 +103,8 @@ class ScrollSlider extends Component {
103103
}
104104

105105
_verifyActiveItem() {
106-
const { goTo, itemsToShow, isRTL } = this.props;
107-
const { offsetWidth, scrollLeft } = this.containerRef.current;
106+
const { goTo, itemsToShow, isRTL, containerRef } = this.props;
107+
const { offsetWidth, scrollLeft } = containerRef.current;
108108

109109
const activeFraction =
110110
Math.round((scrollLeft / offsetWidth) * 100) / 100;
@@ -135,10 +135,10 @@ class ScrollSlider extends Component {
135135
return null;
136136
}
137137

138-
const { limitScroll, itemsToShow } = this.props;
138+
const { limitScroll, itemsToShow, containerRef } = this.props;
139139

140140
if (limitScroll) {
141-
const { offsetWidth, scrollLeft } = this.containerRef.current;
141+
const { offsetWidth, scrollLeft } = containerRef.current;
142142

143143
// When scrolling too fast, we want to prevent scrolling 2 slides at once...
144144
const newPrevIndex = this.activeItem - 1;
@@ -167,6 +167,12 @@ ScrollSlider.propTypes = {
167167
setItemsLength: PropTypes.func.isRequired,
168168
goTo: PropTypes.func.isRequired,
169169
limitScroll: PropTypes.bool,
170+
containerRef: PropTypes.oneOfType([
171+
PropTypes.func,
172+
PropTypes.shape({ current: PropTypes.elementType }),
173+
]),
170174
};
171175

172-
export default ScrollSlider;
176+
export default forwardRef(function ScrollSliderForwardingRef(props, ref) {
177+
return <ScrollSlider containerRef={ref} {...props} />;
178+
});

‎src/components/SnapSlider.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ScrollSlider, SwipeSlider } from '#containers';
22
import { checkSnapSupport } from '#utils';
33
import PropTypes from 'prop-types';
4-
import React, { Component } from 'react';
4+
import React, { Component, forwardRef } from 'react';
55
import cx from 'classnames';
66

7-
class SnapSlider extends Component {
7+
export class SnapSlider extends Component {
88
constructor(props) {
99
super(props);
1010

@@ -21,22 +21,25 @@ class SnapSlider extends Component {
2121
}
2222

2323
render() {
24+
const { limitScroll, containerRef, ...otherProps } = this.props;
25+
2426
if (!this.state.isMounted || checkSnapSupport()) {
2527
return (
2628
<ScrollSlider
27-
{...this.props}
29+
{...otherProps}
30+
limitScroll={limitScroll}
31+
ref={containerRef}
2832
className={cx(this.props.className, 'snapSliderContainer')}
2933
/>
3034
);
3135
}
3236

33-
const { limitScroll, ...otherProps } = this.props;
34-
3537
return (
3638
<SwipeSlider
3739
{...otherProps}
3840
disableSwipe={false}
3941
hasKeysNavigation={false}
42+
ref={containerRef}
4043
/>
4144
);
4245
}
@@ -50,6 +53,12 @@ SnapSlider.propTypes = {
5053
children: PropTypes.node.isRequired,
5154
className: PropTypes.string,
5255
limitScroll: PropTypes.bool,
56+
containerRef: PropTypes.oneOfType([
57+
PropTypes.func,
58+
PropTypes.shape({ current: PropTypes.elementType }),
59+
]),
5360
};
5461

55-
export default SnapSlider;
62+
export default forwardRef(function SnapSliderForwardingRef(props, ref) {
63+
return <SnapSlider containerRef={ref} {...props} />;
64+
});

‎src/components/SwipeSlider.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { cloneSlide, renderSlides } from '#utils';
22
import PropTypes from 'prop-types';
3-
import React, { Children, Component } from 'react';
3+
import React, { Children, Component, forwardRef } from 'react';
44
import ReactSwipeEvents from 'react-swipe-events';
55
import cx from 'classnames';
66

77
const LEFT_KEY_CODE = 37;
88
const RIGHT_KEY_CODE = 39;
99

10-
class SwipeSlider extends Component {
10+
export class SwipeSlider extends Component {
1111
static getDerivedStateFromProps(props, state) {
1212
const {
1313
children,
@@ -128,6 +128,7 @@ class SwipeSlider extends Component {
128128
isMovementBlocked,
129129
setItemsLength,
130130
setIsMovementBlocked,
131+
containerRef,
131132
...otherProps
132133
} = this.props;
133134
const { hasEnoughChildren } = this.state;
@@ -143,6 +144,7 @@ class SwipeSlider extends Component {
143144
return (
144145
<ReactSwipeEvents {...onSwiping}>
145146
<div
147+
ref={containerRef}
146148
className={cx('slider', className)}
147149
style={this.sliderInfinityStyles()}
148150
onTransitionEnd={this._handleTransitionEnd}
@@ -272,6 +274,12 @@ SwipeSlider.propTypes = {
272274
setIsMovementBlocked: PropTypes.func.isRequired,
273275
isMovementBlocked: PropTypes.bool,
274276
direction: PropTypes.string,
277+
containerRef: PropTypes.oneOfType([
278+
PropTypes.func,
279+
PropTypes.shape({ current: PropTypes.elementType }),
280+
]),
275281
};
276282

277-
export default SwipeSlider;
283+
export default forwardRef(function SwipeSliderForwardingRef(props, ref) {
284+
return <SwipeSlider containerRef={ref} {...props} />;
285+
});

‎src/components/UnevenItemsScrollSlider.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { animateScroll, infiniteScroll, renderSlides } from '#utils';
22
import PropTypes from 'prop-types';
3-
import React, { useCallback, useEffect, useRef } from 'react';
3+
import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
44
import ResizeObserver from 'resize-observer-polyfill';
55
import cx from 'classnames';
66
import debounce from 'lodash/debounce';
@@ -138,10 +138,10 @@ const UnevenItemsScrollSlider = (props) => {
138138
setItemsLength,
139139
isInfinite,
140140
direction,
141+
containerRef,
141142
...otherProps
142143
} = props;
143144

144-
const containerRef = useRef(null);
145145
const wrapperRef = useRef(null);
146146

147147
useEffect(() => {
@@ -155,7 +155,7 @@ const UnevenItemsScrollSlider = (props) => {
155155
if (itemsLength !== newItemsLength) {
156156
setItemsLength(newItemsLength);
157157
}
158-
}, [isInfinite, itemsLength, ratioToScroll, setItemsLength]);
158+
}, [isInfinite, itemsLength, ratioToScroll, setItemsLength, containerRef]);
159159

160160
useUpdateEffect(() => {
161161
const displayedActiveItem = calculateActiveItem(
@@ -237,6 +237,7 @@ const UnevenItemsScrollSlider = (props) => {
237237
goTo,
238238
goToOnSizeChange,
239239
setItemsLength,
240+
containerRef,
240241
]);
241242

242243
const handleResize = useCallback(
@@ -325,10 +326,16 @@ UnevenItemsScrollSlider.propTypes = {
325326
ratioToScroll: PropTypes.number,
326327
isInfinite: PropTypes.bool,
327328
direction: PropTypes.string,
329+
containerRef: PropTypes.oneOfType([
330+
PropTypes.func,
331+
PropTypes.shape({ current: PropTypes.elementType }),
332+
]),
328333
};
329334

330335
UnevenItemsScrollSlider.defaultProps = {
331336
ratioToScroll: 1,
332337
};
333338

334-
export default UnevenItemsScrollSlider;
339+
export default forwardRef(function UnevenForwardingRef(props, ref) {
340+
return <UnevenItemsScrollSlider containerRef={ref} {...props} />;
341+
});

0 commit comments

Comments
 (0)