From 278ab698c27389f6e8170285c4b285feb6fa8e27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Sat, 26 Feb 2022 12:48:24 +0100 Subject: [PATCH] refactor(dashboard-v2): use breakpoint names instead of minWidth in Slider props --- .../src/components/Slider/Slider.js | 19 +++++++++++++++---- .../components/Slider/useActiveBreakpoint.js | 19 +++++++++++++++++-- 2 files changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js index 6e194436..1a04485d 100644 --- a/packages/dashboard-v2/src/components/Slider/Slider.js +++ b/packages/dashboard-v2/src/components/Slider/Slider.js @@ -86,8 +86,20 @@ Slider.propTypes = { slides: PropTypes.arrayOf(PropTypes.node.isRequired), breakpoints: PropTypes.arrayOf( PropTypes.shape({ - minWidth: PropTypes.number.isRequired, + /** + * Breakpoint name as defined in Tailwind config. If not defined, config + * will be applied to all non-configured screen sizes. + */ + name: PropTypes.string, + /** + * Number of slides visible for a given breakpoint. + */ visibleSlides: PropTypes.number.isRequired, + /** + * Whether or not the list should be scrollable horizontally at the given breakpoint. + * If set to false, all slides will be visible & rendered in a column. + */ + scrollable: PropTypes.bool.isRequired, }) ), }; @@ -95,18 +107,17 @@ Slider.propTypes = { Slider.defaultProps = { breakpoints: [ { - minWidth: parseInt(theme.screens.xl), + name: "xl", scrollable: true, visibleSlides: 3, }, { - minWidth: parseInt(theme.screens.md, 10), + name: "md", scrollable: true, visibleSlides: 2, }, { // For the smallest screens, we won't scroll but instead stack the slides vertically. - minWidth: -Infinity, scrollable: false, visibleSlides: 1, }, diff --git a/packages/dashboard-v2/src/components/Slider/useActiveBreakpoint.js b/packages/dashboard-v2/src/components/Slider/useActiveBreakpoint.js index e35e1f19..4b891ba7 100644 --- a/packages/dashboard-v2/src/components/Slider/useActiveBreakpoint.js +++ b/packages/dashboard-v2/src/components/Slider/useActiveBreakpoint.js @@ -1,11 +1,26 @@ import { useEffect, useMemo, useCallback, useState } from "react"; import { useWindowSize } from "react-use"; +import theme from "../../lib/theme"; + +const { screens } = theme; + export default function useActiveBreakpoint(breakpoints) { const { width: windowWidth } = useWindowSize(); - // Since our breakpoints are setup with min-width rule, we need to sort them from largest to smallest const monitoredBreakpoints = useMemo( - () => breakpoints.slice().sort(({ minWidth: widthA }, { minWidth: widthB }) => widthB - widthA), + () => + breakpoints + .slice() + // Map breakpoint names to their min-width configured in Tailwind + .map(({ name, ...config }) => { + // If breakpoint name is not configured, + // we'll apply this config to all unmatched breakpoints. + const minWidth = screens[name] ? parseInt(screens[name], 10) : -Infinity; + + return { minWidth, ...config }; + }) + // Since our breakpoints are setup with min-width rule, we need to sort them from largest to smallest + .sort(({ minWidth: widthA }, { minWidth: widthB }) => widthB - widthA), [breakpoints] ); const findActiveBreakpoint = useCallback(