Skip to content
GitLab
Commit 177e68aa authored by Moritz Stückler's avatar Moritz Stückler 🤠
Browse files

fix: remove children syntax

parent 9c9d7d2b
Pipeline #2893 passed with stages
in 54 seconds
Hide whitespace changes
Inline Side-by-side
src/components/Carousel.tsx
View file @ 177e68aa
import React, {
useState,
useRef,
useEffect,
Children,
CSSProperties,
} from "react";
import React, { useState, useRef, useEffect, CSSProperties } from "react";
import useMediaQuery from "@hooks/useMediaQuery";
import { ChevronRight } from "@carbon/icons-react";
import { VerticalNewsCard } from "@components/VerticalNewsCard";
import { INewsCard, INews, Color } from "@interfaces/INews";
interface Props {
title?: string;
className?: string;
fluidToTheRight?: boolean;
children: React.ReactNode;
entries: Array<INews | INewsCard>;
customColor?: Color;
textColor?: "dark" | "light";
}
const Carousel: React.FC<Props> = ({
title,
className = "",
fluidToTheRight,
children,
entries,
customColor,
textColor,
}) => {
const sliderRef = useRef<HTMLDivElement>(null);
const itemCount = Children.count(children);
const itemCount = entries.length;
const [scrollX, setScrollX] = useState(0);
const [shouldTranslateSlideContent, setShouldTranslateSlideContent] =
useState(false);
......@@ -93,7 +94,7 @@ const Carousel: React.FC<Props> = ({
className="overflow-x-auto overscroll-x-contain pb-8 no-scrollbar"
>
<div className="align-top inline-flex">
{Children.toArray(children).map((child, i) => (
{entries.map((entry, i) => (
<div key={i} className="inline-block snap-start">
<div
className={`pr-8 ${
......@@ -102,7 +103,19 @@ const Carousel: React.FC<Props> = ({
: ""
}`}
>
{child}
<VerticalNewsCard
key={entry.id}
image={entry.image}
title={entry.title}
description={entry.description}
time={entry.time}
location={entry.location}
category={entry.category}
href={entry.href}
type={entry.type}
customColor={customColor || entry.customColor}
textColor={textColor || entry.textColor}
/>
</div>
</div>
))}
......
src/components/ImageSlider.tsx
View file @ 177e68aa
import React, {
useEffect,
useState,
useRef,
Children,
isValidElement,
Fragment,
} from "react";
import React, { useState, useRef, Fragment } from "react";
import Lightbox from "@components/Lightbox";
import Image from "@components/Image";
import type { ImageProps } from "@components/Image";
......@@ -14,16 +7,15 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
interface Props {
children: React.ReactNode;
images: Array<ImageProps>;
withLightbox?: boolean;
}
export const ImageSlider: React.FC<Props> = ({ children, withLightbox }) => {
export const ImageSlider: React.FC<Props> = ({ images, withLightbox }) => {
const sliderRef = useRef<Slider>(null);
const [isLightboxOpen, setIsLightboxOpen] = useState(false);
const [currentImage, setCurrentImage] = useState(0);
const [slides, setSlides] = useState<ImageProps[]>([]);
const [images, setImages] = useState<string[]>([]);
const settings = {
centerMode: true,
dots: false,
......@@ -36,22 +28,6 @@ export const ImageSlider: React.FC<Props> = ({ children, withLightbox }) => {
beforeChange: (_current: number, next: number) => setCurrentImage(next),
};
useEffect(() => {
const data: ImageProps[] = [];
const images: string[] = [];
Children.forEach(children, (child) => {
if (!isValidElement(child)) return;
data.push({
img: child.props.img,
caption: child.props.caption,
subCaption: child.props.subCaption,
});
images.push(child.props.img);
});
setSlides(data);
setImages(images);
}, []);
const handleFullscreenClick = () => {
if (withLightbox) setIsLightboxOpen(true);
};
......@@ -60,7 +36,7 @@ export const ImageSlider: React.FC<Props> = ({ children, withLightbox }) => {
<Fragment>
<div className="relative overflow-hidden min-h-[312px] sm:min-h-[400px] lg:min-h-[587px]">
<Slider {...settings} className="sliderWrapper" ref={sliderRef}>
{slides.map((slide, index) => (
{images.map((slide, index) => (
<Image
key={index}
img={slide.img}
......@@ -75,7 +51,7 @@ export const ImageSlider: React.FC<Props> = ({ children, withLightbox }) => {
{withLightbox && (
<Lightbox
isOpen={isLightboxOpen}
images={images}
images={images.map((image) => image.img)}
currentImage={currentImage}
onClose={() => setIsLightboxOpen(false)}
/>
......
src/components/VerticalNewsCard.tsx
View file @ 177e68aa
......@@ -16,11 +16,11 @@ export const VerticalNewsCard: React.FC<INewsCard> = ({
type,
className = "",
customColor,
customTextColor,
textColor = "dark",
}) => {
const inlineStyle: CSSProperties = {
backgroundColor: customColor,
};
const inlineStyle: CSSProperties = {};
if (customColor) inlineStyle.backgroundColor = customColor;
const PILL_COLOR_MAPPING: Record<string, PillColor> = {
dark: "white",
light: "dark",
......@@ -69,15 +69,14 @@ export const VerticalNewsCard: React.FC<INewsCard> = ({
"mt-2 md:mt-4 font-plex text-base md:text-lg leading-6 md:leading-7 font-normal text-grey-900",
},
};
const renderCardContent = (type: "article" | "event") => {
if (type === "article") {
return (
<p
className={
customColor
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]][
"paragraph"
]
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[textColor]]["paragraph"]
: TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[type]]["paragraph"]
}
>
......@@ -90,7 +89,7 @@ export const VerticalNewsCard: React.FC<INewsCard> = ({
<div
className={
customColor
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]]["event"]
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[textColor]]["event"]
: TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[type]]["event"]
}
>
......@@ -141,9 +140,7 @@ export const VerticalNewsCard: React.FC<INewsCard> = ({
<h5
className={
customColor
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[customTextColor]][
"heading"
]
? TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[textColor]]["heading"]
: TEXT_STYLE_MAPPING[TEXT_COLOR_MAPPING[type]]["heading"]
}
>
......@@ -155,7 +152,7 @@ export const VerticalNewsCard: React.FC<INewsCard> = ({
<Pill
type={
customColor
? PILL_COLOR_MAPPING[TEXT_COLOR_MAPPING[customTextColor]]
? PILL_COLOR_MAPPING[TEXT_COLOR_MAPPING[textColor]]
: PILL_COLOR_MAPPING[TEXT_COLOR_MAPPING[type]]
}
size="sm"
......
src/interfaces/INews.ts
View file @ 177e68aa
......@@ -9,8 +9,8 @@ export interface INews {
location?: string;
href: string;
type: "article" | "event";
customColor?: string;
customTextColor?: string;
customColor?: Color;
textColor?: "dark" | "light";
}
export interface INewsCategory {
......@@ -47,16 +47,8 @@ type NewsCardBaseProps = {
href: string;
type: "article" | "event";
className?: string;
customColor?: Color;
textColor?: "dark" | "light";
};
type NewsCardCustomColor =
| {
customColor?: Color;
customTextColor: "dark" | "light";
}
| {
customColor?: never;
customTextColor?: never;
};
export type INewsCard = NewsCardBaseProps & NewsCardCustomColor;
export type INewsCard = NewsCardBaseProps;
src/stories/molecules/Carousel.stories.tsx
View file @ 177e68aa
import * as React from "react";
import Carousel from "@components/Carousel";
import { NEWS } from "@common/constants";
import { VerticalNewsCard } from "@components/VerticalNewsCard";
import type { Story } from "@ladle/react";
import { Color } from "@interfaces/INews";
interface CarouselConfigProps {
color: "dark" | "light";
customColor: boolean;
customColorCode: Color;
customTextColor: "dark" | "light";
fluidToTheRight: boolean;
customColor?: Color;
textColor?: "dark" | "light";
fluidToTheRight?: boolean;
}
export const CarouselStory: Story<CarouselConfigProps> = ({
color,
customColor,
customColorCode,
customTextColor,
textColor,
fluidToTheRight,
}: CarouselConfigProps) => {
const MAPPING: Record<string, "article" | "event"> = {
dark: "event",
light: "article",
const commonProps = {
title: "Hamburg Highlights",
fluidToTheRight,
entries: NEWS,
textColor,
customColor,
};
return (
<section className="pt-5">
{fluidToTheRight && (
......@@ -30,58 +30,18 @@ export const CarouselStory: Story<CarouselConfigProps> = ({
<h3>Please test this option in fullscreen mode</h3>
</div>
)}
{customColor ? (
<Carousel title="Hamburg Highlights" fluidToTheRight={fluidToTheRight}>
{NEWS.map((news) => (
<VerticalNewsCard
key={news.id}
image={news.image}
title={news.title}
description={news.description}
time={news.time}
location={news.location}
category={news.category}
href={news.href}
type={MAPPING[color]}
customColor={customColorCode}
customTextColor={customTextColor}
/>
))}
</Carousel>
) : (
<Carousel title="Hamburg Highlights" fluidToTheRight={fluidToTheRight}>
{NEWS.map((news) => (
<VerticalNewsCard
key={news.id}
image={news.image}
title={news.title}
description={news.description}
time={news.time}
location={news.location}
category={news.category}
href={news.href}
type={MAPPING[color]}
/>
))}
</Carousel>
)}
<Carousel {...commonProps} />
</section>
);
};
CarouselStory.args = {
customColor: false,
customColorCode: "#fcba03",
customColor: "",
fluidToTheRight: false,
};
CarouselStory.argTypes = {
color: {
options: ["dark", "light"],
control: { type: "select" },
defaultValue: "dark",
},
customTextColor: {
textColor: {
options: ["dark", "light"],
control: { type: "select" },
defaultValue: "dark",
......
src/stories/molecules/ImageSlider.stories.tsx
View file @ 177e68aa
import * as React from "react";
import { ImageSlider } from "@components/ImageSlider";
import Image from "@components/Image";
import type { Story } from "@ladle/react";
interface SliderConfigProps {
......@@ -64,16 +63,7 @@ const SLIDES = [
export const ImageSliderStory: Story<SliderConfigProps> = ({
lightbox,
}: SliderConfigProps) => (
<ImageSlider withLightbox={lightbox}>
{SLIDES.map((item) => (
<Image
key={item.id}
img={item.img}
subCaption={item.subCaption}
caption={item.caption}
/>
))}
</ImageSlider>
<ImageSlider images={SLIDES} withLightbox={lightbox} />
);
ImageSliderStory.args = {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment