@yoursurprise/slider 0.0.19 → 0.0.21
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/README.md +9 -5
- package/dist/Slider.d.ts +5 -1
- package/dist/index.css +7 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +88 -19
- package/dist/index.js.map +1 -1
- package/package.json +5 -1
- package/src/Slider.scss +8 -6
- package/src/Slider.test.tsx +55 -29
- package/src/Slider.tsx +58 -48
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ This slider has the following features:
|
|
|
15
15
|
Before using this slider, please consider the following:
|
|
16
16
|
- This project is still being set up, this is an alpha version
|
|
17
17
|
- The slider only contains styling to make it functional
|
|
18
|
-
- There is no configuration of aforementioned features (yet)
|
|
18
|
+
- There is no configuration of most aforementioned features (yet)
|
|
19
19
|
|
|
20
20
|
Todos:
|
|
21
21
|
- ~~Add a demo page~~
|
|
@@ -39,11 +39,13 @@ All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/doc
|
|
|
39
39
|
|
|
40
40
|
### Import the CSS files
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
```javascript
|
|
43
|
+
import "@yoursurprise/slider/dist/index.css";
|
|
44
|
+
```
|
|
43
45
|
|
|
44
46
|
### Implement the Slider
|
|
45
47
|
|
|
46
|
-
```
|
|
48
|
+
```javascript
|
|
47
49
|
import { Slider } from '@yoursurprise/slider';
|
|
48
50
|
import '@yoursurprise/slider/dist/index.css';
|
|
49
51
|
|
|
@@ -59,6 +61,8 @@ export default function YourComponent() {
|
|
|
59
61
|
}
|
|
60
62
|
```
|
|
61
63
|
|
|
64
|
+
### Configuration
|
|
62
65
|
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
| Option | Type | Required | Default | Description |
|
|
67
|
+
|-----------------------|-----------|----------|---------|-------------------------------------|
|
|
68
|
+
| hideNavigationButtons | `boolean` | `false` | `false` | Always hides the navigation buttons |
|
package/dist/Slider.d.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { PropsWithChildren } from 'react';
|
|
3
3
|
import './Slider.scss';
|
|
4
|
-
|
|
4
|
+
interface Settings {
|
|
5
|
+
hideNavigationButtons?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const Slider: React.FC<PropsWithChildren<Settings>>;
|
|
8
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -9,12 +9,18 @@
|
|
|
9
9
|
width: 48px;
|
|
10
10
|
margin: auto 0;
|
|
11
11
|
border-radius: 50%;
|
|
12
|
-
border: 1px solid #C9C9C9;
|
|
13
12
|
background-color: white;
|
|
14
13
|
align-items: center;
|
|
15
14
|
justify-content: center;
|
|
16
15
|
cursor: pointer;
|
|
17
16
|
display: none;
|
|
17
|
+
border: none;
|
|
18
|
+
outline: none;
|
|
19
|
+
box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);
|
|
20
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
21
|
+
}
|
|
22
|
+
.slider__button:hover {
|
|
23
|
+
box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);
|
|
18
24
|
}
|
|
19
25
|
@media (hover: hover) {
|
|
20
26
|
.slider__button {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,
|
|
1
|
+
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,aAAa;EACb,YAAY;EACZ,aAAa;EACb,iDAAiD;EACjD,uCAAuC;AACzC;AACA;EACE,iDAAiD;AACnD;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,UAAU;AACZ;AACA;EACE,SAAS;AACX;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,wBAAwB;AAC1B","file":"index.css","sourcesContent":[".slider {\n position: relative;\n}\n.slider__button {\n position: absolute;\n top: 0;\n bottom: 0;\n height: 48px;\n width: 48px;\n margin: auto 0;\n border-radius: 50%;\n background-color: white;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: none;\n border: none;\n outline: none;\n box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);\n transition: box-shadow 0.2s ease-in-out;\n}\n.slider__button:hover {\n box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);\n}\n@media (hover: hover) {\n .slider__button {\n display: flex;\n }\n}\n.slider__button--hidden {\n display: none;\n}\n.slider__button--next {\n right: 5px;\n}\n.slider__button--prev {\n left: 5px;\n}\n.slider__wrapper {\n overscroll-behavior-x: contain;\n -ms-overflow-style: none;\n scrollbar-width: none;\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n display: none;\n}\n@media (hover: hover) {\n .slider__wrapper {\n scroll-snap-type: initial;\n }\n}\n.slider__wrapper:not(.is-dragging) {\n scroll-behavior: smooth;\n}\n.slider__wrapper.is-scrollable {\n cursor: move;\n}\n.slider__wrapper.is-dragging {\n cursor: grabbing;\n user-select: none;\n}\n.slider__wrapper__slide {\n scroll-snap-align: start;\n}"]}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,71 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useRef, useState, useEffect, useCallback, Children } from 'react';
|
|
3
3
|
|
|
4
|
+
var classnamesExports = {};
|
|
5
|
+
var classnames = {
|
|
6
|
+
get exports(){ return classnamesExports; },
|
|
7
|
+
set exports(v){ classnamesExports = v; },
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
/*!
|
|
11
|
+
Copyright (c) 2018 Jed Watson.
|
|
12
|
+
Licensed under the MIT License (MIT), see
|
|
13
|
+
http://jedwatson.github.io/classnames
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
(function (module) {
|
|
17
|
+
/* global define */
|
|
18
|
+
|
|
19
|
+
(function () {
|
|
20
|
+
|
|
21
|
+
var hasOwn = {}.hasOwnProperty;
|
|
22
|
+
|
|
23
|
+
function classNames() {
|
|
24
|
+
var classes = [];
|
|
25
|
+
|
|
26
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
27
|
+
var arg = arguments[i];
|
|
28
|
+
if (!arg) continue;
|
|
29
|
+
|
|
30
|
+
var argType = typeof arg;
|
|
31
|
+
|
|
32
|
+
if (argType === 'string' || argType === 'number') {
|
|
33
|
+
classes.push(arg);
|
|
34
|
+
} else if (Array.isArray(arg)) {
|
|
35
|
+
if (arg.length) {
|
|
36
|
+
var inner = classNames.apply(null, arg);
|
|
37
|
+
if (inner) {
|
|
38
|
+
classes.push(inner);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
} else if (argType === 'object') {
|
|
42
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
43
|
+
classes.push(arg.toString());
|
|
44
|
+
continue;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
for (var key in arg) {
|
|
48
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
49
|
+
classes.push(key);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return classes.join(' ');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (module.exports) {
|
|
59
|
+
classNames.default = classNames;
|
|
60
|
+
module.exports = classNames;
|
|
61
|
+
} else {
|
|
62
|
+
window.classNames = classNames;
|
|
63
|
+
}
|
|
64
|
+
}());
|
|
65
|
+
} (classnames));
|
|
66
|
+
|
|
67
|
+
var classNames = classnamesExports;
|
|
68
|
+
|
|
4
69
|
var Visbility;
|
|
5
70
|
(function (Visbility) {
|
|
6
71
|
Visbility[Visbility["FULL"] = 0] = "FULL";
|
|
@@ -12,11 +77,13 @@ var NavigationDirection;
|
|
|
12
77
|
NavigationDirection[NavigationDirection["PREV"] = 0] = "PREV";
|
|
13
78
|
NavigationDirection[NavigationDirection["NEXT"] = 1] = "NEXT";
|
|
14
79
|
})(NavigationDirection || (NavigationDirection = {}));
|
|
15
|
-
const Slider = ({ children }) => {
|
|
80
|
+
const Slider = ({ children, hideNavigationButtons = false }) => {
|
|
16
81
|
const slides = useRef([]);
|
|
17
82
|
const wrapper = useRef(null);
|
|
18
83
|
const visibleSlideIndices = useRef([]);
|
|
19
84
|
const partiallyVisibleSlideIndices = useRef([]);
|
|
85
|
+
const [nextArrowVisible, setNextArrowVisible] = useState(false);
|
|
86
|
+
const [prevArrowVisible, setPrevArrowVisible] = useState(false);
|
|
20
87
|
const [isScrollable, setIsScrollable] = useState(false);
|
|
21
88
|
const [isDragging, setIsDragging] = useState(false);
|
|
22
89
|
const [isBlockingClicks, setIsBlockingClicks] = useState(false);
|
|
@@ -31,7 +98,7 @@ const Slider = ({ children }) => {
|
|
|
31
98
|
if (!currentWrapper) {
|
|
32
99
|
return () => { };
|
|
33
100
|
}
|
|
34
|
-
const checkScrollable = () => setIsScrollable(currentWrapper.
|
|
101
|
+
const checkScrollable = () => setIsScrollable(currentWrapper.scrollWidth > currentWrapper.clientWidth);
|
|
35
102
|
window?.addEventListener('resize', checkScrollable);
|
|
36
103
|
checkScrollable();
|
|
37
104
|
return () => {
|
|
@@ -39,10 +106,6 @@ const Slider = ({ children }) => {
|
|
|
39
106
|
};
|
|
40
107
|
}, [wrapper]);
|
|
41
108
|
useEffect(() => {
|
|
42
|
-
wrapper.current?.classList.toggle('is-scrollable', isScrollable);
|
|
43
|
-
}, [isScrollable]);
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
wrapper.current?.classList.toggle('is-dragging', isDragging);
|
|
46
109
|
const onDocumentMouseUp = (event) => {
|
|
47
110
|
event.stopPropagation();
|
|
48
111
|
event.preventDefault();
|
|
@@ -94,14 +157,8 @@ const Slider = ({ children }) => {
|
|
|
94
157
|
?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
|
|
95
158
|
const setControlsVisibility = useCallback(() => {
|
|
96
159
|
const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if (arrowNextRef.current && arrowPrevRef.current) {
|
|
100
|
-
arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
|
|
101
|
-
arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
|
|
102
|
-
arrowPrevRef.current.classList.toggle('slider__button--hidden', previousContentAvailable === false);
|
|
103
|
-
arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
|
|
104
|
-
}
|
|
160
|
+
setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
|
|
161
|
+
setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
|
|
105
162
|
}, [isScrollable]);
|
|
106
163
|
const getVisibilityByIntersectionRatio = (intersectionRatio) => {
|
|
107
164
|
if (intersectionRatio >= 0.9) {
|
|
@@ -116,7 +173,6 @@ const Slider = ({ children }) => {
|
|
|
116
173
|
if (!wrapper.current) {
|
|
117
174
|
return () => { };
|
|
118
175
|
}
|
|
119
|
-
setControlsVisibility();
|
|
120
176
|
const intersectionCallback = (entries) => {
|
|
121
177
|
entries.forEach((entry) => {
|
|
122
178
|
const target = entry.target;
|
|
@@ -136,7 +192,9 @@ const Slider = ({ children }) => {
|
|
|
136
192
|
});
|
|
137
193
|
visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
|
|
138
194
|
partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
|
|
139
|
-
|
|
195
|
+
if (hideNavigationButtons === false) {
|
|
196
|
+
setControlsVisibility();
|
|
197
|
+
}
|
|
140
198
|
};
|
|
141
199
|
const intersectionObserver = new IntersectionObserver(intersectionCallback, {
|
|
142
200
|
root: wrapper.current,
|
|
@@ -144,7 +202,7 @@ const Slider = ({ children }) => {
|
|
|
144
202
|
});
|
|
145
203
|
slides.current.forEach(({ element }) => intersectionObserver.observe(element));
|
|
146
204
|
return () => intersectionObserver.disconnect();
|
|
147
|
-
}, [wrapper, setControlsVisibility]);
|
|
205
|
+
}, [wrapper, setControlsVisibility, hideNavigationButtons]);
|
|
148
206
|
const navigate = (direction) => {
|
|
149
207
|
if (!wrapper.current) {
|
|
150
208
|
return;
|
|
@@ -163,9 +221,20 @@ const Slider = ({ children }) => {
|
|
|
163
221
|
}
|
|
164
222
|
wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
|
|
165
223
|
};
|
|
166
|
-
return (jsxs("div", { className: "slider", children: [jsx("div", {
|
|
224
|
+
return (jsxs("div", { className: "slider", children: [jsx("div", { role: "list", ref: wrapper, onMouseDown: mouseDownHandler, onMouseMove: mouseMoveHandler, onMouseUp: mouseUpHandler, onClickCapture: blockChildClickHandler, className: classNames('slider__wrapper', {
|
|
225
|
+
'is-scrollable': isScrollable,
|
|
226
|
+
'is-dragging': isDragging,
|
|
227
|
+
}), children: Children.map(children, (child, index) => (jsx("div", { className: "slider__wrapper__slide", role: "listitem", "data-slide-index": index, ref: (node) => { if (node) {
|
|
167
228
|
addSlide(node, index);
|
|
168
|
-
} }, children: child }, index))) }), jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef,
|
|
229
|
+
} }, children: child }, index))) }), hideNavigationButtons === false && (jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef, "aria-hidden": prevArrowVisible === false, className: classNames([
|
|
230
|
+
'slider__button',
|
|
231
|
+
'slider__button--prev',
|
|
232
|
+
{ 'slider__button--hidden': prevArrowVisible === false },
|
|
233
|
+
]), children: jsx("svg", { fill: "#554c44", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z" }) }) })), hideNavigationButtons === false && (jsx("button", { "aria-label": "Next slide", type: "button", onClick: () => navigate(NavigationDirection.NEXT), ref: arrowNextRef, "aria-hidden": nextArrowVisible === false, className: classNames([
|
|
234
|
+
'slider__button',
|
|
235
|
+
'slider__button--next',
|
|
236
|
+
{ 'slider__button--hidden': nextArrowVisible === false },
|
|
237
|
+
]), children: jsx("svg", { fill: "#554c44", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z" }) }) }))] }));
|
|
169
238
|
};
|
|
170
239
|
|
|
171
240
|
export { Slider };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/Slider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../src/Slider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n",null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yoursurprise/slider",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "Basic React slider using modern Javascript and CSS",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
"serve": "parcel index.html",
|
|
23
23
|
"deploy-pages": "gh-pages -d dist"
|
|
24
24
|
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"classnames": "^2.3.2"
|
|
27
|
+
},
|
|
25
28
|
"peerDependencies": {
|
|
26
29
|
"react": "^18.2.0",
|
|
27
30
|
"react-dom": "^18.2.0"
|
|
@@ -56,6 +59,7 @@
|
|
|
56
59
|
"npm": "^8.19.3",
|
|
57
60
|
"parcel": "^2.8.3",
|
|
58
61
|
"postcss": "^8.4.18",
|
|
62
|
+
"process": "^0.11.10",
|
|
59
63
|
"react": "^18.2.0",
|
|
60
64
|
"react-dom": "^18.2.0",
|
|
61
65
|
"react-test-renderer": "^18.2.0",
|
package/src/Slider.scss
CHANGED
|
@@ -5,21 +5,23 @@
|
|
|
5
5
|
position: absolute;
|
|
6
6
|
top: 0;
|
|
7
7
|
bottom: 0;
|
|
8
|
-
|
|
9
8
|
height: 48px;
|
|
10
9
|
width: 48px;
|
|
11
10
|
margin: auto 0;
|
|
12
11
|
border-radius: 50%;
|
|
13
|
-
|
|
14
|
-
border: 1px solid #C9C9C9;
|
|
15
12
|
background-color: white;
|
|
16
|
-
|
|
17
13
|
align-items: center;
|
|
18
14
|
justify-content: center;
|
|
19
|
-
|
|
20
15
|
cursor: pointer;
|
|
21
|
-
|
|
22
16
|
display: none;
|
|
17
|
+
border: none;
|
|
18
|
+
outline: none;
|
|
19
|
+
box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .1);
|
|
20
|
+
transition: box-shadow .2s ease-in-out;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .2);
|
|
24
|
+
}
|
|
23
25
|
|
|
24
26
|
@media (hover: hover) {
|
|
25
27
|
display: flex;
|
package/src/Slider.test.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { fireEvent, render, screen } from '@testing-library/react';
|
|
1
|
+
import { act, fireEvent, render, screen } from '@testing-library/react';
|
|
2
2
|
import userEvent from '@testing-library/user-event';
|
|
3
3
|
import '@testing-library/jest-dom';
|
|
4
4
|
import { Slider } from './Slider';
|
|
@@ -89,8 +89,23 @@ describe('UpsellSlider', () => {
|
|
|
89
89
|
const nextButton = screen.getByLabelText('Next slide');
|
|
90
90
|
const prevButton = screen.getByLabelText('Previous slide');
|
|
91
91
|
|
|
92
|
-
expect(prevButton
|
|
93
|
-
expect(nextButton
|
|
92
|
+
expect(prevButton).toHaveAttribute('aria-hidden', 'true');
|
|
93
|
+
expect(nextButton).toHaveAttribute('aria-hidden', 'true');
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
it('does not render controls if disabled', () => {
|
|
97
|
+
render(<Slider hideNavigationButtons={true}>
|
|
98
|
+
<span key={1}/>
|
|
99
|
+
<span key={2}/>
|
|
100
|
+
<span key={3}/>
|
|
101
|
+
<span key={4}/>
|
|
102
|
+
</Slider>);
|
|
103
|
+
|
|
104
|
+
const nextButton = screen.queryByLabelText('Next slide');
|
|
105
|
+
const prevButton = screen.queryByLabelText('Previous slide');
|
|
106
|
+
|
|
107
|
+
expect(prevButton).not.toBeInTheDocument();
|
|
108
|
+
expect(nextButton).not.toBeInTheDocument();
|
|
94
109
|
});
|
|
95
110
|
|
|
96
111
|
it('allows scrolling by dragging with the mouse', () => {
|
|
@@ -164,12 +179,14 @@ describe('UpsellSlider', () => {
|
|
|
164
179
|
Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
|
|
165
180
|
});
|
|
166
181
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
182
|
+
await act(() => {
|
|
183
|
+
intersectionCallback([
|
|
184
|
+
{ intersectionRatio: 1, target: slides[ 0 ] } as unknown as IntersectionObserverEntry,
|
|
185
|
+
{ intersectionRatio: 0.5, target: slides[ 1 ] } as unknown as IntersectionObserverEntry,
|
|
186
|
+
{ intersectionRatio: 0, target: slides[ 2 ] } as unknown as IntersectionObserverEntry,
|
|
187
|
+
{ intersectionRatio: 0, target: slides[ 3 ] } as unknown as IntersectionObserverEntry,
|
|
188
|
+
]);
|
|
189
|
+
});
|
|
173
190
|
|
|
174
191
|
await userEvent.click(nextButton);
|
|
175
192
|
|
|
@@ -191,12 +208,14 @@ describe('UpsellSlider', () => {
|
|
|
191
208
|
Object.defineProperty(child, 'offsetLeft', { value: 100 * (i + 1) });
|
|
192
209
|
});
|
|
193
210
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
211
|
+
await act(() => {
|
|
212
|
+
intersectionCallback([
|
|
213
|
+
{ intersectionRatio: 0, target: slides[ 0 ] } as unknown as IntersectionObserverEntry,
|
|
214
|
+
{ intersectionRatio: 0, target: slides[ 1 ] } as unknown as IntersectionObserverEntry,
|
|
215
|
+
{ intersectionRatio: 1, target: slides[ 2 ] } as unknown as IntersectionObserverEntry,
|
|
216
|
+
{ intersectionRatio: 0.5, target: slides[ 3 ] } as unknown as IntersectionObserverEntry,
|
|
217
|
+
]);
|
|
218
|
+
});
|
|
200
219
|
|
|
201
220
|
await userEvent.click(prevButton);
|
|
202
221
|
|
|
@@ -207,7 +226,7 @@ describe('UpsellSlider', () => {
|
|
|
207
226
|
});
|
|
208
227
|
});
|
|
209
228
|
|
|
210
|
-
it('updates controls visibility', () => {
|
|
229
|
+
it('updates controls visibility', async () => {
|
|
211
230
|
Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 500 });
|
|
212
231
|
Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: 1000 });
|
|
213
232
|
Object.defineProperty(HTMLElement.prototype, 'scrollLeft', { configurable: true, value: 0, writable: true });
|
|
@@ -223,26 +242,33 @@ describe('UpsellSlider', () => {
|
|
|
223
242
|
const nextButton = screen.getByLabelText('Next slide');
|
|
224
243
|
const prevButton = screen.getByLabelText('Previous slide');
|
|
225
244
|
|
|
226
|
-
|
|
245
|
+
const testCases = [
|
|
227
246
|
// All slides are visible
|
|
228
247
|
[[1, 1, 1, 1], true, true],
|
|
229
248
|
// Only the first slide is not visible
|
|
230
249
|
[[0, 1, 1, 1], false, true],
|
|
231
250
|
// Only the last slide is not visible
|
|
232
251
|
[[1, 1, 1, 0], true, false],
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
252
|
+
// Only a single slide is partially visible
|
|
253
|
+
[[0, 0, 0.5, 0], false, false],
|
|
254
|
+
] as Array<[number[], boolean, boolean]>;
|
|
255
|
+
|
|
256
|
+
for (const testCase of testCases) {
|
|
257
|
+
const [intersections, prevButtonHidden, nextButtonHidden] = testCase;
|
|
258
|
+
|
|
259
|
+
// eslint-disable-next-line @typescript-eslint/no-loop-func
|
|
260
|
+
await act(() => {
|
|
261
|
+
intersectionCallback([
|
|
262
|
+
{ intersectionRatio: intersections[0], target: slides[0] } as unknown as IntersectionObserverEntry,
|
|
263
|
+
{ intersectionRatio: intersections[1], target: slides[1] } as unknown as IntersectionObserverEntry,
|
|
264
|
+
{ intersectionRatio: intersections[2], target: slides[2] } as unknown as IntersectionObserverEntry,
|
|
265
|
+
{ intersectionRatio: intersections[3], target: slides[3] } as unknown as IntersectionObserverEntry,
|
|
266
|
+
]);
|
|
267
|
+
});
|
|
242
268
|
|
|
243
|
-
expect(prevButton
|
|
244
|
-
expect(nextButton
|
|
245
|
-
}
|
|
269
|
+
expect(prevButton).toHaveAttribute('aria-hidden', String(prevButtonHidden));
|
|
270
|
+
expect(nextButton).toHaveAttribute('aria-hidden', String(nextButtonHidden));
|
|
271
|
+
}
|
|
246
272
|
});
|
|
247
273
|
});
|
|
248
274
|
});
|
package/src/Slider.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
1
2
|
import type React from 'react';
|
|
2
3
|
import type { MouseEvent as ReactMouseEvent, PropsWithChildren } from 'react';
|
|
3
4
|
import { useRef, useEffect, Children, useCallback, useState } from 'react';
|
|
@@ -19,12 +20,20 @@ interface SlideVisibilityEntry {
|
|
|
19
20
|
visibility: Visbility;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
interface Settings {
|
|
24
|
+
// Sets whether the navigation buttons (next/prev) are no longer rendered
|
|
25
|
+
hideNavigationButtons?: boolean;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNavigationButtons = false }) => {
|
|
23
29
|
const slides = useRef<SlideVisibilityEntry[]>([]);
|
|
24
30
|
const wrapper = useRef<HTMLDivElement>(null);
|
|
25
31
|
const visibleSlideIndices = useRef<number[]>([]);
|
|
26
32
|
const partiallyVisibleSlideIndices = useRef<number[]>([]);
|
|
27
33
|
|
|
34
|
+
const [nextArrowVisible, setNextArrowVisible] = useState<boolean>(false);
|
|
35
|
+
const [prevArrowVisible, setPrevArrowVisible] = useState<boolean>(false);
|
|
36
|
+
|
|
28
37
|
const [isScrollable, setIsScrollable] = useState<boolean>(false);
|
|
29
38
|
const [isDragging, setIsDragging] = useState<boolean>(false);
|
|
30
39
|
const [isBlockingClicks, setIsBlockingClicks] = useState<boolean>(false);
|
|
@@ -43,7 +52,7 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
43
52
|
return () => {};
|
|
44
53
|
}
|
|
45
54
|
|
|
46
|
-
const checkScrollable = () => setIsScrollable(currentWrapper.
|
|
55
|
+
const checkScrollable = () => setIsScrollable(currentWrapper.scrollWidth > currentWrapper.clientWidth);
|
|
47
56
|
|
|
48
57
|
window?.addEventListener('resize', checkScrollable);
|
|
49
58
|
|
|
@@ -55,12 +64,6 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
55
64
|
}, [wrapper]);
|
|
56
65
|
|
|
57
66
|
useEffect(() => {
|
|
58
|
-
wrapper.current?.classList.toggle('is-scrollable', isScrollable);
|
|
59
|
-
}, [isScrollable]);
|
|
60
|
-
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
wrapper.current?.classList.toggle('is-dragging', isDragging);
|
|
63
|
-
|
|
64
67
|
const onDocumentMouseUp = (event: MouseEvent) => {
|
|
65
68
|
event.stopPropagation();
|
|
66
69
|
event.preventDefault();
|
|
@@ -127,16 +130,9 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
127
130
|
|
|
128
131
|
const setControlsVisibility = useCallback(() => {
|
|
129
132
|
const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
|
|
130
|
-
const moreContentAvailable = isScrollable && lastSlideFullyVisible === false;
|
|
131
|
-
const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
|
|
132
|
-
|
|
133
|
-
if (arrowNextRef.current && arrowPrevRef.current) {
|
|
134
|
-
arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
|
|
135
|
-
arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
|
|
136
133
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
134
|
+
setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
|
|
135
|
+
setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
|
|
140
136
|
}, [isScrollable]);
|
|
141
137
|
|
|
142
138
|
const getVisibilityByIntersectionRatio = (intersectionRatio: number) => {
|
|
@@ -156,8 +152,6 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
156
152
|
return () => {};
|
|
157
153
|
}
|
|
158
154
|
|
|
159
|
-
setControlsVisibility();
|
|
160
|
-
|
|
161
155
|
const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
|
|
162
156
|
entries.forEach((entry: IntersectionObserverEntry) => {
|
|
163
157
|
const target = entry.target as HTMLDivElement;
|
|
@@ -180,7 +174,9 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
180
174
|
visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
|
|
181
175
|
partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
|
|
182
176
|
|
|
183
|
-
|
|
177
|
+
if (hideNavigationButtons === false) {
|
|
178
|
+
setControlsVisibility();
|
|
179
|
+
}
|
|
184
180
|
};
|
|
185
181
|
|
|
186
182
|
const intersectionObserver = new IntersectionObserver(intersectionCallback, {
|
|
@@ -191,7 +187,7 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
191
187
|
slides.current.forEach(({ element }) => intersectionObserver.observe(element));
|
|
192
188
|
|
|
193
189
|
return () => intersectionObserver.disconnect();
|
|
194
|
-
}, [wrapper, setControlsVisibility]);
|
|
190
|
+
}, [wrapper, setControlsVisibility, hideNavigationButtons]);
|
|
195
191
|
|
|
196
192
|
const navigate = (direction: NavigationDirection) => {
|
|
197
193
|
if (!wrapper.current) {
|
|
@@ -218,11 +214,15 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
218
214
|
|
|
219
215
|
return (
|
|
220
216
|
<div className="slider">
|
|
221
|
-
<div
|
|
217
|
+
<div role="list" ref={wrapper}
|
|
222
218
|
onMouseDown={mouseDownHandler}
|
|
223
219
|
onMouseMove={mouseMoveHandler}
|
|
224
220
|
onMouseUp={mouseUpHandler}
|
|
225
221
|
onClickCapture={blockChildClickHandler}
|
|
222
|
+
className={classNames('slider__wrapper', {
|
|
223
|
+
'is-scrollable': isScrollable,
|
|
224
|
+
'is-dragging': isDragging,
|
|
225
|
+
})}
|
|
226
226
|
>
|
|
227
227
|
{Children.map(children, (child, index: number) => (
|
|
228
228
|
<div className="slider__wrapper__slide" role="listitem" key={index} data-slide-index={index} ref={(node) => { if (node) { addSlide(node, index); } }}>
|
|
@@ -230,32 +230,42 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
230
230
|
</div>
|
|
231
231
|
))}
|
|
232
232
|
</div>
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
233
|
+
{ hideNavigationButtons === false && (
|
|
234
|
+
<button
|
|
235
|
+
aria-label="Previous slide"
|
|
236
|
+
type="button"
|
|
237
|
+
onClick={() => navigate(NavigationDirection.PREV)}
|
|
238
|
+
ref={arrowPrevRef}
|
|
239
|
+
aria-hidden={prevArrowVisible === false}
|
|
240
|
+
className={classNames([
|
|
241
|
+
'slider__button',
|
|
242
|
+
'slider__button--prev',
|
|
243
|
+
{ 'slider__button--hidden': prevArrowVisible === false },
|
|
244
|
+
])}
|
|
245
|
+
>
|
|
246
|
+
<svg fill="#554c44" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
|
|
247
|
+
<path d="M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z"/>
|
|
248
|
+
</svg>
|
|
249
|
+
</button>
|
|
250
|
+
)}
|
|
251
|
+
{ hideNavigationButtons === false && (
|
|
252
|
+
<button
|
|
253
|
+
aria-label="Next slide"
|
|
254
|
+
type="button"
|
|
255
|
+
onClick={() => navigate(NavigationDirection.NEXT)}
|
|
256
|
+
ref={arrowNextRef}
|
|
257
|
+
aria-hidden={nextArrowVisible === false}
|
|
258
|
+
className={classNames([
|
|
259
|
+
'slider__button',
|
|
260
|
+
'slider__button--next',
|
|
261
|
+
{ 'slider__button--hidden': nextArrowVisible === false },
|
|
262
|
+
])}
|
|
263
|
+
>
|
|
264
|
+
<svg fill="#554c44" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
|
|
265
|
+
<path d="M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z"/>
|
|
266
|
+
</svg>
|
|
267
|
+
</button>
|
|
268
|
+
)}
|
|
259
269
|
</div>
|
|
260
270
|
);
|
|
261
271
|
};
|