LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): don't propagate click events to children of inactive slides

This commit is contained in:
Michał Leszczyk 2022-03-02 11:58:35 +01:00
parent 527ec5acbf
commit 67cd527e1a
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dashboard-v2/src/components/Slider/Slider.js
View File

@ -1,7 +1,6 @@
import * as React from "react"; import * as React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import theme from "../../lib/theme";
import useActiveBreakpoint from "./useActiveBreakpoint"; import useActiveBreakpoint from "./useActiveBreakpoint";
import Bullets from "./Bullets"; import Bullets from "./Bullets";
@ -32,7 +31,9 @@ const Slider = ({ slides, breakpoints }) => {
const { visibleSlides, scrollable } = useActiveBreakpoint(breakpoints); const { visibleSlides, scrollable } = useActiveBreakpoint(breakpoints);
const [activeIndex, setActiveIndex] = React.useState(0); const [activeIndex, setActiveIndex] = React.useState(0);
const changeSlide = React.useCallback( const changeSlide = React.useCallback(
(index) => { (event, index) => {
event.preventDefault();
event.stopPropagation();
setActiveIndex(Math.min(index, slides.length - visibleSlides)); // Don't let it scroll too far setActiveIndex(Math.min(index, slides.length - visibleSlides)); // Don't let it scroll too far
}, },
[slides, visibleSlides, setActiveIndex] [slides, visibleSlides, setActiveIndex]
@ -62,7 +63,7 @@ const Slider = ({ slides, breakpoints }) => {
<div key={`slide-${index}`}> <div key={`slide-${index}`}>
<Slide <Slide
isVisible={isVisible || !scrollable} isVisible={isVisible || !scrollable}
onClick={scrollable && !isVisible ? () => changeSlide(index) : null} onClickCapture={scrollable && !isVisible ? (event) => changeSlide(event, index) : null}
> >
{slide} {slide}
</Slide> </Slide>