yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-10-31 10:39:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Carousal bug fixed (#464)

Browse Source 
* added whats new feature

* added Changes log feature in whats new modal

* small fix

* samll fixe

* fixed parsing error issue and carousal dots issue

* excluded node_modules from parsing in webpack

* add support for video and make change log data optional

* carousal bug fix

* change setTimeout to 200ms
This commit is contained in:
Shailesh Parmar 2021-09-13 10:40:03 +05:30 committed by GitHub
parent b7adb5dc6b
commit 229795514e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
catalog-rest-service/src/main/resources/ui/src/components/Modals/WhatsNewModal/FeaturesCarousel.tsx
View File

@ -21,17 +21,19 @@ import { uniqueId } from 'lodash';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import Slider from 'react-slick'; import Slider from 'react-slick';
type CarousalData = {
title: string;
description: string;
isImage: boolean;
path: string;
};
type Props = { type Props = {
data: { data: CarousalData[];
title: string;
description: string;
isImage: boolean;
path: string;
}[];
}; };
const FeaturesCarousel = ({ data }: Props) => { const FeaturesCarousel = ({ data }: Props) => {
const [currentSlide, setCurrentSlide] = useState(0); const [isDataChange, setIsDataChange] = useState(false);
const sliderRef = useRef<typeof Slider | null>(null); const sliderRef = useRef<typeof Slider | null>(null);
const settings = { const settings = {
@ -41,41 +43,48 @@ const FeaturesCarousel = ({ data }: Props) => {
speed: 500, speed: 500,
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
initialSlide: 0, beforeChange: (current: number) => {
afterChange: (currentSlide: number) => setCurrentSlide(currentSlide), if (current >= data.length) {
setIsDataChange(true);
} else {
setIsDataChange(false);
}
},
onReInit: () => {
if (isDataChange) {
setTimeout(() => {
sliderRef?.current?.slickGoTo(0);
}, 200);
}
},
}; };
useEffect(() => { useEffect(() => {
if (currentSlide > 0 && sliderRef.current) { setIsDataChange(true);
sliderRef.current.slickGoTo(0, true);
setCurrentSlide(0);
}
}, [data]); }, [data]);
return ( return (
<> <Slider ref={sliderRef} {...settings}>
<Slider ref={sliderRef} {...settings}> {data.map((d) => (
{data.map((d) => ( <div className="tw-px-1" key={uniqueId()}>
<div className="tw-px-1" key={uniqueId()}> <p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p>
<p className="tw-text-sm tw-font-medium tw-mb-2">{d.title}</p> <p className="tw-text-sm tw-mb-3">{d.description}</p>
<p className="tw-text-sm tw-mb-3">{d.description}</p> <div className="tw-max-w-3xl">
<div className="tw-max-w-3xl"> {d.isImage ? (
{d.isImage ? ( <img alt="feature" className="tw-w-full" src={d.path} />
<img alt="feature" className="tw-w-full" src={d.path} /> ) : (
) : ( <iframe
<iframe allowFullScreen
allowFullScreen className="tw-w-full"
className="tw-w-full" frameBorder={0}
frameBorder={0} height={278}
height={278} src={`https://www.youtube.com/embed/${d.path}`}
src={`https://www.youtube.com/embed/${d.path}`} />
/> )}
)}
</div>
</div> </div>
))} </div>
</Slider> ))}
</> </Slider>
); );
}; };