Dev bqx (#35)

* feat(table): 完成样式封装 * fix(carousel): 完善轮播图功能
NJUPT-SAST · Apr 23, 2024 · ea11828 · ea11828
1 parent b9164f5
commit ea11828
Show file tree

Hide file tree

Showing 6 changed files with 196 additions and 263 deletions.
diff --git a/packages/ui-react/lib/Carousel/Carousel.tsx b/packages/ui-react/lib/Carousel/Carousel.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
-import { Button, type CarouselItemProps, CarouselItem } from '..';
+import { type CarouselItemProps, CarouselItem } from '..';
 import classNames from 'classnames';
 import styles from './Carousel.module.scss';
 
@@ -28,6 +28,10 @@ export interface CarouselProps {
    * select of the Carousel
    */
   selected?: number;
+  /**
+   * isSliding
+   */
+  isSliding?: boolean;
 }
 
 interface ContentProps {
@@ -36,7 +40,15 @@ interface ContentProps {
 
 export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   (
-    { width = 400, CarouselItems = undefined, height, onChange, defaultSelected, selected },
+    {
+      width = 400,
+      CarouselItems = undefined,
+      height,
+      onChange,
+      defaultSelected,
+      selected,
+      isSliding = true,
+    },
     ref,
   ) => {
     // The definition judgment of this rotating chart is determined by two factors,
@@ -55,15 +67,8 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     const divRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-      selected && setSelect(selected);
+      selected !== undefined && setSelect(selected);
     }, [selected]);
-    const pre = () => {
-      select !== 0 && setSelect(select - 1);
-    };
-
-    const next = () => {
-      select !== itemsNumber - 1 && setSelect(select + 1);
-    };
 
     const handleMouseDown = (e: React.MouseEvent) => {
       setStartX(e.clientX);
@@ -100,12 +105,10 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       if (Math.abs(difference) >= width / 2 && difference > 0 && select !== itemsNumber - 1) {
         setSelect(select + 1);
         setIsChanged(true);
-      }
-      if (Math.abs(difference) >= width / 2 && difference < 0 && select !== 0) {
+      } else if (Math.abs(difference) >= width / 2 && difference < 0 && select !== 0) {
         setSelect(select - 1);
         setIsChanged(true);
-      }
-      if (
+      } else if (
         Math.abs(difference) < width / 2 &&
         divRef.current &&
         select === itemsNumber - 1 &&
@@ -160,40 +163,22 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     });
 
     return (
-      <>
+      <div
+        className={carouselClass}
+        ref={ref}
+        style={{ width: `${width}px`, height: `${height}px` }}
+      >
         <div
-          style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}
+          className={styles['carouselAll']}
+          ref={divRef}
+          onMouseDown={() => isSliding && handleMouseDown}
+          onMouseMove={() => isSliding && handleMouseMove}
+          onMouseUp={() => isSliding && handleMouseUp}
+          style={{ width: `${width}px`, height: `${height}px` }}
         >
-          <Button
-            onClick={pre}
-            color="ghost"
-          >
-            Pre
-          </Button>
-          <div
-            className={carouselClass}
-            ref={ref}
-            style={{ width: `${width}px`, height: `${height}px` }}
-          >
-            <div
-              className={styles['carouselAll']}
-              ref={divRef}
-              onMouseDown={handleMouseDown}
-              onMouseMove={handleMouseMove}
-              onMouseUp={handleMouseUp}
-              style={{ width: `${width}px`, height: `${height}px` }}
-            >
-              {CarouselItems && <Content CarouselItems={CarouselItems}></Content>}
-            </div>
-          </div>
-          <Button
-            onClick={next}
-            color="ghost"
-          >
-            Next
-          </Button>
+          {CarouselItems && <Content CarouselItems={CarouselItems}></Content>}
         </div>
-      </>
+      </div>
     );
   },
 );

diff --git a/packages/ui-react/lib/Table/Table.module.scss b/packages/ui-react/lib/Table/Table.module.scss
@@ -9,28 +9,28 @@
     text-align: start;
   }
   .thead {
-    tr {
-      th {
+    .tr {
+      .th {
         text-align: start;
         background-color: $title-bg-color;
         color: $gray-color;
         padding: 10px 30px;
-      }
-      th:first-child {
-        border-radius: 5px 0 0 5px;
-      }
-      th:last-child {
-        border-radius: 0 5px 5px 0;
+        &:first-child {
+          border-radius: 5px 0 0 5px;
+        }
+        &:last-child {
+          border-radius: 0 5px 5px 0;
+        }
       }
     }
   }
   .tbody {
-    tr {
+    .tr {
       &:hover {
         transition: all 300ms $cubic-bezier;
         background-color: $pale-white-color;
       }
-      td {
+      .td {
         border-style: solid;
         border-width: 0px 0px 1px 0px;
         border-color: $border-white-color;

diff --git a/packages/ui-react/lib/Table/Table.stories.ts b/packages/ui-react/lib/Table/Table.stories.ts
@@ -17,58 +17,28 @@ type Story = StoryObj<typeof meta>;
 
 const defaultProps: TableProps = {
   pageSize: 3,
-  columns: [
-    {
-      title: 'Title',
-      dataIndex: 'name',
-      width: 400,
-    },
-    { title: 'Size', dataIndex: 'size' },
-    { title: 'Owner', dataIndex: 'owner', width: 150 },
-    { title: 'Update-Time', dataIndex: 'time', width: 150 },
-  ],
-  dataSource: [
+  data: [
     {
-      key: '1',
-      name: 'Semi Design 设计稿.fig',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: 'hello',
+      col1: 'Hello',
+      col2: 'World',
     },
     {
-      key: '2',
-      name: 'Semi Design 分享演示文稿',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: '2020-02-02 05:12',
+      col1: 'react-table',
+      col2: 'rocks',
     },
     {
-      key: '3',
-      name: '设计文档',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: '2020-01-26 11:01',
-    },
-    {
-      key: '4',
-      name: 'Semi Design 2 设计稿.fig',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: '2020-02-02 05:18',
+      col1: 'whatever',
+      col2: 'you want',
     },
+  ],
+  columns: [
     {
-      key: '5',
-      name: 'Semi Design 2 分享演示文稿',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: '2020-02-02 05:12',
+      Header: 'Column 1',
+      accessor: 'col1', // accessor is the "key" in the data
     },
     {
-      key: '6',
-      name: '设计文档 2',
-      size: '2M ',
-      owner: '姜鹏志',
-      time: '2020-01-26 11:01',
+      Header: 'Column 2',
+      accessor: 'col2',
     },
   ],
 };