forked from DataLinkDC/dinky
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Doc] support doc home page Carousel component (DataLinkDC#3328)
- Loading branch information
Showing
7 changed files
with
329 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| .container { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .inner { | ||
| white-space: nowrap; | ||
| transition: transform 0.3s; | ||
| } | ||
|
|
||
| .carousel_item { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 200px; | ||
| color: #fff; | ||
| background-color: #312520; | ||
| } | ||
|
|
||
| .loading { | ||
| position: absolute; | ||
| bottom: -25px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-bottom: 10px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .indicator_outer { | ||
| width: 90px; | ||
| height: 7px; | ||
| background-color: #0000001a; | ||
| margin-left: 20px; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .indicator_inside { | ||
| height: 100%; | ||
| border-radius: 5px; | ||
| animation-fill-mode: forwards; | ||
| animation-name: progressBar; | ||
| animation-iteration-count: infinite; | ||
| } | ||
|
|
||
| @keyframes progressBar { | ||
| 0% { | ||
| width: 0; | ||
| } | ||
| 100% { | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| import React, {useEffect, useState} from "react"; | ||
| import style from "./carousel.module.css"; | ||
| import {CarouselItemInfo} from "../CarouselList"; | ||
|
|
||
| /** | ||
| * @param {children} children ReactNode | ||
| * @param {width} width 宽度 | ||
| * @param {height} height 高度 | ||
| * @param {styles} styles 样式 | ||
| * @returns 轮播图 单项 | ||
| */ | ||
| type CarouselItemProps = { | ||
| children: React.ReactNode; | ||
| width?: string | number; | ||
| height?: string | number; | ||
| styles?: React.CSSProperties; | ||
| } | ||
| export const CarouselItem = (props: CarouselItemProps) => { | ||
| const {children, width = "100%", height = "100%", styles = {}} = props; | ||
| return ( | ||
| <div | ||
| className={style.carousel_item} | ||
| style={{width: width, height: height, ...styles}} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * @returns 轮播图 主体 | ||
| * @param props | ||
| */ | ||
| export const CarouselInfo: React.FC<CarouselItemInfo> = (props: { item: CarouselItemInfo; }) => { | ||
| const {item} = props; | ||
| return ( | ||
| <div className="carousel_info_container"> | ||
| {/*<div className="carousel_info_info">*/} | ||
| {/* <h1>{item.title}</h1>*/} | ||
| {/* <span>{item.describe}</span>*/} | ||
| {/*</div>*/} | ||
| <div className="carousel_info_image_container"> | ||
| <img src={item.image} alt="Jay" className="carousel_info_image"/> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * @param {children} children ReactNode | ||
| * @param {switchingTime} switchingTime 间隔时间 默认3秒 以毫秒为单位 3000ms = 3s | ||
| * @returns 轮播图 容器 | ||
| */ | ||
| const Carousel = ({ | ||
| children = React.createElement("div"), | ||
| switchingTime = 3000, | ||
| }) => { | ||
| const time = ((switchingTime % 60000) / 1000).toFixed(0); // 将毫秒转换为秒 | ||
| const [activeIndex, setActiveIndex] = useState(0); // 对应索引 | ||
|
|
||
| /** | ||
| * 更新索引 | ||
| * @param {newIndex} newIndex 更新索引 | ||
| */ | ||
| const onUpdateIndex = (newIndex: React.SetStateAction<number>) => { | ||
| if (newIndex < 0) { | ||
| newIndex = React.Children.count(children) - 1; | ||
| } else if (newIndex >= React.Children.count(children)) { | ||
| newIndex = 0; | ||
| } | ||
| setActiveIndex(newIndex); | ||
| replayAnimations(); | ||
| }; | ||
|
|
||
| /** | ||
| * 重置动画 | ||
| */ | ||
| const replayAnimations = () => { | ||
| document.getAnimations().forEach((anim) => { | ||
| anim.cancel(); | ||
| anim.play(); | ||
| }); | ||
| }; | ||
|
|
||
| /** | ||
| * 底部加载条点击事件 | ||
| * @param {index} index 跳转索引 | ||
| */ | ||
| const onClickCarouselIndex = (index: React.SetStateAction<number>) => { | ||
| onUpdateIndex(index); | ||
| replayAnimations(); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| onUpdateIndex(activeIndex + 1); | ||
| }, switchingTime); | ||
|
|
||
| return () => { | ||
| if (interval) { | ||
| clearInterval(interval); | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| /** | ||
| * Renders the children elements with specific styles and transformations. | ||
| * | ||
| * @return {JSX.Element} The rendered JSX elements with modified styles. | ||
| */ | ||
| const renderChildren = () => { | ||
| return ( | ||
| <div | ||
| className={style.inner} | ||
| style={{transform: `translateX(-${activeIndex * 100}%)`}} | ||
| > | ||
| {React.Children.map(children, (child) => { | ||
| return React.cloneElement(child, {width: "100%", height: "100%"}); | ||
| })} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| /** | ||
| * Function to render loading indicators for each child component. | ||
| * | ||
| * @return {JSX.Element} The loading indicators JSX element | ||
| */ | ||
| const renderLoading = () => { | ||
| return ( | ||
| <div className={style.loading}> | ||
| {React.Children.map(children, (child, index) => { | ||
| return ( | ||
| <div | ||
| className={style.indicator_outer} | ||
| onClick={() => onClickCarouselIndex(index)} | ||
| > | ||
| <div | ||
| className={style.indicator_inside} | ||
| style={{ | ||
| animationDuration: index === activeIndex ? `${time}s` : "0s", | ||
| backgroundColor: index === activeIndex ? "#041d81" : null, | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return ( | ||
| <div className={style.container}> | ||
| {renderChildren()} | ||
| {renderLoading()} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Carousel; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import Carousel, {CarouselInfo, CarouselItem} from "../Carousel"; | ||
| import React from "react"; | ||
|
|
||
|
|
||
| /** | ||
| * @param {id} id 轮播图id | ||
| * @param {title} title 标题 | ||
| * @param {describe} describe 描述 | ||
| * @param {image} image 图片 | ||
| * @param {imageWidth} imageWidth 图片宽度 | ||
| * @param {imageHeight} imageHeight 图片高度 | ||
| * @param {backgroundColor} backgroundColor 背景颜色 | ||
| * @param {jumpUrl} jumpUrl 跳转链接 | ||
| * @returns 轮播图信息 | ||
| * @constructor | ||
| */ | ||
| export interface CarouselItemInfo { | ||
| id: number; | ||
| title?: string; | ||
| describe?: string; | ||
| image: string | React.ReactNode; | ||
| imageWidth?: string | number; | ||
| imageHeight?: string | number; | ||
| backgroundColor?: string; | ||
| jumpUrl?: string; | ||
| } | ||
|
|
||
| /** | ||
| * @param {items} items 轮播图列表 | ||
| */ | ||
| type CarouselItemProps = { | ||
| items: CarouselItemInfo[]; | ||
| } | ||
|
|
||
| /** | ||
| * @returns 轮播图列表 | ||
| * @param props | ||
| * @constructor | ||
| */ | ||
| const CarouselList:React.FC<CarouselItemProps> = (props: { items: CarouselItemInfo[]; }) => { | ||
|
|
||
| const {items} = props | ||
|
|
||
| return ( | ||
| <Carousel> | ||
| {items?.map((item :CarouselItemInfo)=> { | ||
| return ( | ||
| <CarouselItem | ||
| key={item.id} | ||
| width={item.imageWidth} | ||
| height={item.imageHeight} | ||
| // styles={{ backgroundColor: item.backgroundColor }} | ||
| > | ||
| <CarouselInfo item={item}/> | ||
| </CarouselItem> | ||
| ); | ||
| })} | ||
| </Carousel> | ||
| ); | ||
| }; | ||
|
|
||
| export default CarouselList; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters