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

fix(dashboard-v2): styling fixes for Slider component

This commit is contained in:
Michał Leszczyk 2022-03-22 13:46:04 +01:00
parent 34fa1d1106
commit 3e2f7eab3b
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
3 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ export default function Bullets({ visibleSlides, activeIndex, allSlides, changeS
} }
return ( return (
<div className="flex gap-3 pt-6"> <div className="flex gap-3 pt-6 justify-center sm:justify-start">
{Array(allSlides - visibleSlides + 1) {Array(allSlides - visibleSlides + 1)
.fill(null) .fill(null)
.map((_, index) => ( .map((_, index) => (

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

@ -2,7 +2,7 @@ import styled from "styled-components";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const Slide = styled.div.attrs(({ isVisible }) => ({ const Slide = styled.div.attrs(({ isVisible }) => ({
className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer"}`, className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
}))``; }))``;
Slide.propTypes = { Slide.propTypes = {

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

@ -22,12 +22,12 @@ const scrollableStyles = css`
`; `;
const Scroller = styled.div.attrs({ const Scroller = styled.div.attrs({
className: "slider-scroller grid gap-4 transition-transform", className: "slider-scroller grid transition-transform",
})` })`
${({ $scrollable }) => ($scrollable ? scrollableStyles : "")} ${({ $scrollable }) => ($scrollable ? scrollableStyles : "")}
`; `;
const Slider = ({ slides, breakpoints }) => { const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
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(
@ -49,12 +49,13 @@ const Slider = ({ slides, breakpoints }) => {
}, [slides.length, visibleSlides, activeIndex]); }, [slides.length, visibleSlides, activeIndex]);
return ( return (
<Container> <Container className={className}>
<Scroller <Scroller
$visibleSlides={visibleSlides} $visibleSlides={visibleSlides}
$allSlides={slides.length} $allSlides={slides.length}
$activeIndex={activeIndex} $activeIndex={activeIndex}
$scrollable={scrollable} $scrollable={scrollable}
className={scrollerClassName}
> >
{slides.map((slide, index) => { {slides.map((slide, index) => {
const isVisible = index >= activeIndex && index < activeIndex + visibleSlides; const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
@ -63,7 +64,11 @@ const Slider = ({ slides, breakpoints }) => {
<div key={`slide-${index}`}> <div key={`slide-${index}`}>
<Slide <Slide
isVisible={isVisible || !scrollable} isVisible={isVisible || !scrollable}
onClickCapture={scrollable && !isVisible ? (event) => changeSlide(event, index) : null} onClickCapture={
scrollable && !isVisible
? (event) => changeSlide(event, index > activeIndex ? activeIndex + 1 : activeIndex - 1)
: null
}
> >
{slide} {slide}
</Slide> </Slide>
@ -101,6 +106,14 @@ Slider.propTypes = {
* If set to false, all slides will be visible & rendered in a column. * If set to false, all slides will be visible & rendered in a column.
*/ */
scrollable: PropTypes.bool.isRequired, scrollable: PropTypes.bool.isRequired,
/**
* Additional class names to apply to the <Scroller /> element.
*/
scrollerClassName: PropTypes.string,
/**
* Additional class names to apply to the <Container /> element.
*/
className: PropTypes.string,
}) })
), ),
}; };
@ -123,6 +136,8 @@ Slider.defaultProps = {
visibleSlides: 1, visibleSlides: 1,
}, },
], ],
scrollerClassName: "gap-4",
className: "",
}; };
export default Slider; export default Slider;