add swipe capability to carousels

This commit is contained in:
lingdocs 2021-04-17 19:46:06 +03:00
parent ef51c34eb1
commit ccf03aaa6b
3 changed files with 12 additions and 1 deletions

View File

@ -22,6 +22,7 @@
"react-scripts": "3.4.3", "react-scripts": "3.4.3",
"react-scrollspy": "^3.4.3", "react-scrollspy": "^3.4.3",
"react-smooth-collapse": "^2.1.0", "react-smooth-collapse": "^2.1.0",
"react-swipeable": "^6.1.0",
"typescript": "^4.2.3" "typescript": "^4.2.3"
}, },
"scripts": { "scripts": {

View File

@ -7,6 +7,7 @@
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import { useSwipeable } from "react-swipeable";
import leftChevron from "./chevron_left-24px.svg"; import leftChevron from "./chevron_left-24px.svg";
import rightChevron from "./chevron_right-24px.svg"; import rightChevron from "./chevron_right-24px.svg";
@ -19,6 +20,10 @@ export default function(props) {
// console.log("pppp"); // console.log("pppp");
// console.log(props.items); // console.log(props.items);
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const swipeHandlers = useSwipeable({
onSwipedLeft: () => forward(),
onSwipedRight: () => back(),
});
function forward() { function forward() {
setCurrent( setCurrent(
(current + 1) % props.items.length (current + 1) % props.items.length
@ -35,7 +40,7 @@ export default function(props) {
return <div>EMPTY</div>; return <div>EMPTY</div>;
} }
return ( return (
<div className="mb-3"> <div className="mb-3" {...swipeHandlers}>
<div className="d-flex flex-row justify-content-between align-items-center"> <div className="d-flex flex-row justify-content-between align-items-center">
<img <img
src={leftChevron} src={leftChevron}

View File

@ -9776,6 +9776,11 @@ react-smooth-collapse@^2.1.0:
"@babel/runtime" "^7.0.0" "@babel/runtime" "^7.0.0"
prop-types "^15.6.0" prop-types "^15.6.0"
react-swipeable@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-6.1.0.tgz#558b08a797a749a33e98492af84f2ca84a23d146"
integrity sha512-vB6+bv1I5L9nfuM7quu41o/kK1f3a7cTQ3NHNWkOltg5uhBpnH6xvkQJeoPfKQ6K4pnifELXY65wzWwWBa+zGg==
react-transition-group@^4.4.1: react-transition-group@^4.4.1:
version "4.4.1" version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"