fix(dashboard-v2): allow passing additional classnames to Panels + ensure all slides are equal height

This commit is contained in:
Michał Leszczyk 2022-04-15 16:12:42 +02:00
parent b9d9059de4
commit 525583af88
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
3 changed files with 9 additions and 4 deletions

View File

@ -14,8 +14,8 @@ const PanelTitle = styled.h6.attrs({
* *
* These additional props will be rendered onto the panel's body element. * These additional props will be rendered onto the panel's body element.
*/ */
export const Panel = ({ title, ...props }) => ( export const Panel = ({ title, wrapperClassName, ...props }) => (
<div> <div className={wrapperClassName}>
{title && <PanelTitle>{title}</PanelTitle>} {title && <PanelTitle>{title}</PanelTitle>}
<PanelBody {...props} /> <PanelBody {...props} />
</div> </div>
@ -26,8 +26,13 @@ Panel.propTypes = {
* Label of the panel * Label of the panel
*/ */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* CSS class to be applied to the external container
*/
wrapperClassName: PropTypes.string,
}; };
Panel.defaultProps = { Panel.defaultProps = {
title: "", title: "",
wrapperClassName: "",
}; };

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 select-none"}`, className: `slider-slide transition-opacity h-full ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
}))``; }))``;
Slide.propTypes = { Slide.propTypes = {

View File

@ -62,7 +62,7 @@ const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
const isVisible = index >= activeIndex && index < activeIndex + visibleSlides; const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
return ( return (
<div key={`slide-${index}`}> <div key={`slide-${index}`} className="h-full">
<Slide <Slide
isVisible={isVisible || !scrollable} isVisible={isVisible || !scrollable}
onClickCapture={ onClickCapture={