Merge pull request #82 from AElf-devops/feature/doc-upload

feat: add carousel dark
AElfProject · Mar 19, 2024 · 4e3ef8a · 4e3ef8a
2 parents b91958d + dcdf5fc
commit 4e3ef8a
Show file tree

Hide file tree

Showing 9 changed files with 2,879 additions and 1,819 deletions.
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aelf-design",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "type": "module",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

diff --git a/packages/component/src/Carousel/index.md b/packages/component/src/Carousel/index.md
@@ -22,3 +22,18 @@ group:
 | galleryObjectFit | gallery图片展示规则 | `fill \| contain \| cover \| none \| scale-down` | `cover` | `1.0.0` |
 | thumbsSlidesPerView | thumbs一页展示多少条 | `number` | `5` | `1.0.0` |
 | onSlideClick | 点击轮播图片触发事件，返回值是当前点击的图片ICarouselSlideItem对象 | `(value: ICarouselSlideItem) => void` | - | `1.0.0` |
+
+## Token
+
+```js
+<AELFDProvider
+  customToken={{
+    customCarousel:{
+      colorNavigation: isDarkMode ? '#E8E8E8' : '#070A26',
+      colorNavigationHover: isDarkMode ? '#fff' : '#22253E',
+      colorNavigationActive: isDarkMode ? '#8C8C8C' : '#131631',
+      colorMask: isDarkMode ? '#000000cc' : '#ffffffcc',
+    }
+  }}
+>
+```
diff --git a/packages/component/src/Carousel/index.tsx b/packages/component/src/Carousel/index.tsx
@@ -1,6 +1,6 @@
 import React, { SetStateAction, useState } from 'react';
 import { NextButtonIcon, PrevButtonIcon } from '@aelf-design/internal-icons';
-import { useResponsive } from 'antd-style';
+import { useResponsive, useTheme } from 'antd-style';
 import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
@@ -43,6 +43,8 @@ export default function Carousel(props: ICarouselProps) {
     galleryObjectFit: galleryObjectFit || 'cover',
   });
   const responsive = useResponsive();
+
+  const token = useTheme();
   return (
     <div className={cx(st.Carousel, prefixCls + 'carousel', className)}>
       <Swiper
@@ -77,19 +79,19 @@ export default function Carousel(props: ICarouselProps) {
         <div className="swiper-button-next">
           <NextButtonIcon
             className="navigation-button"
-            color="#070A26"
-            hoverColor="#22253E"
-            activeColor="#131631"
+            color={token.customCarousel?.colorNavigation}
+            hoverColor={token.customCarousel?.colorNavigationHover}
+            activeColor={token.customCarousel?.colorNavigationActive}
             width={16}
             height={60}
           />
         </div>
         <div className="swiper-button-prev">
           <PrevButtonIcon
             className="navigation-button"
-            color="#070A26"
-            hoverColor="#22253E"
-            activeColor="#131631"
+            color={token.customCarousel?.colorNavigation}
+            hoverColor={token.customCarousel?.colorNavigationHover}
+            activeColor={token.customCarousel?.colorNavigationActive}
             width={16}
             height={60}
           />

diff --git a/packages/component/src/Carousel/styles.ts b/packages/component/src/Carousel/styles.ts
@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(
   (
-    { responsive, css },
+    { responsive, css, token },
     props: {
       thumbsSwiperWidth: number;
       galleryObjectFit: string;
@@ -75,7 +75,7 @@ const useStyles = createStyles(
               position: absolute;
               cursor: pointer;
               inset: 0;
-              background-color: #ffffffcc;
+              background-color: ${token.customCarousel?.colorMask};
             }
           }
           .mobile-thumbs-slide {

diff --git a/packages/component/src/RichProgress/index.tsx b/packages/component/src/RichProgress/index.tsx
@@ -42,10 +42,10 @@ const StepItemIcon = ({
   const responsive = useResponsive();
   const { styles, cx } = useStyles();
   if (status === 'exception') {
-    return errorIcon || <ProgressErrorIcon className={cx(styles.errorIcon)} />;
+    return <>{errorIcon}</> || <ProgressErrorIcon className={cx(styles.errorIcon)} />;
   }
   if (percent === 100) {
-    return successIcon || <ProgressSuccessIcon className={cx(styles.successIcon)} />;
+    return <>{successIcon}</> || <ProgressSuccessIcon className={cx(styles.successIcon)} />;
   }
   return (
     <Progress

diff --git a/packages/component/src/Table/index.md b/packages/component/src/Table/index.md
@@ -10,7 +10,10 @@ group:
 1. customize pagination
 2. customize table header
 
-:::warning由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange :::
+<!-- prettier-ignore -->
+:::warning
+由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange
+:::
 
 ## Basic Table
 
@@ -48,7 +51,10 @@ refer to[Table Token](https://ant.design/components/table-cn#%E4%B8%BB%E9%A2%98%
 
 ## API
 
-:::warning由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange :::
+<!-- prettier-ignore -->
+:::warning
+由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange 
+:::
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |

diff --git a/packages/component/src/Upload/index.tsx b/packages/component/src/Upload/index.tsx
@@ -26,7 +26,7 @@ function UploadItemRender({
   const { styles, cx } = useStyles();
   const token = useTheme();
   return file.url || file.thumbUrl ? (
-    file.status === 'done' && (
+    (file.status === 'done' && (
       <div className={cx(styles.previewContainer)}>
         <Image
           height={202}
@@ -53,7 +53,8 @@ function UploadItemRender({
           </div>
         </div>
       </div>
-    )
+    )) ||
+      null
   ) : (
     <div className={cx(styles.FilePreviewContainer)}>
       <div className="file-icon-container">

diff --git a/packages/component/src/provider.tsx b/packages/component/src/provider.tsx
@@ -47,6 +47,12 @@ export interface IAelfdCustomToken {
   customRadio?: {
     dotColor?: string;
   };
+  customCarousel?: {
+    colorNavigation?: string;
+    colorNavigationHover?: string;
+    colorNavigationActive?: string;
+    colorMask?: string;
+  };
 }
 
 declare module 'antd-style' {
@@ -102,9 +108,16 @@ const AELFDProvider = (props: IAelfdThemeProviderProps) => {
             ...props.customToken?.customRichProgress,
           },
           customRadio: {
-            dotColor: isDarkMode ? '#1A1A1A' : '#FFFFFF',
+            dotColor: isDarkMode ? '#d07171' : '#FFFFFF',
             ...props.customToken?.customRadio,
           },
+          customCarousel: {
+            colorNavigation: isDarkMode ? '#E8E8E8' : '#070A26',
+            colorNavigationHover: isDarkMode ? '#fff' : '#22253E',
+            colorNavigationActive: isDarkMode ? '#8C8C8C' : '#131631',
+            colorMask: isDarkMode ? '#000000cc' : '#ffffffcc',
+            ...props.customToken?.customCarousel,
+          },
         };
       }}
       theme={(appearance: ThemeAppearance) => {