@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/src/Tabs/hooks/useNavListMove.ts

@@ -9,6 +9,7 @@ interface UseNavListMoveOptions {
   direction: 'horizontal' | 'vertical';
   activeKey: string | number;
   enabled: boolean;
+  align?: 'auto' | 'center';
   activetab: React.RefObject<HTMLElement | null>;
   navList: React.RefObject<HTMLDivElement | null>;
   navContainer: React.RefObject<HTMLDivElement | null>;
@@ -19,6 +20,7 @@ export function useNavListMove({
   direction,
   activeKey,
   enabled,
+  align = 'auto',
   activetab,
   navList,
   navContainer,
@@ -33,29 +35,64 @@ export function useNavListMove({
       return;
     }
 
-    const [isVisible] = isInContainer(direction, tab, list, container);
-    if (isVisible) return;
+    // 'auto': keep as-is when the active tab is already fully visible.
+    // 'center': always re-center, even for tabs already visible on the header.
+    if (align !== 'center') {
+      const [isVisible] = isInContainer(direction, tab, list, container);
+      if (isVisible) return;
+    }
+
+    let moved = false;
 
     if (direction === 'horizontal') {
-      const [x] = getEleTranslate(list);
-      const tabLeft = tab.offsetLeft;
-      const tabWidth = tab.offsetWidth;
-      const containerWidth = container.clientWidth;
+      if (align === 'center') {
+        const containerWidth = container.clientWidth;
+        const maxOffset = list.scrollWidth - containerWidth;
+        const tabCenter = tab.offsetLeft + tab.offsetWidth / 2;
 
-      let newX = x;
+        let newX = Math.round(containerWidth / 2 - tabCenter);
+        newX = Math.max(-maxOffset, Math.min(0, newX));
 
-      // Tab overflows on the right side
-      if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
-        const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
-        newX = x - overflow;
-      }
-      // Tab overflows on the left side
-      else if (tabLeft < Math.abs(x)) {
-        const overflow = Math.abs(x) - tabLeft;
-        newX = x + overflow;
+        const [x] = getEleTranslate(list);
+        if (Math.abs(newX - x) > 0.5) {
+          setEleTranslate(list, newX);
+          moved = true;
+        }
+      } else {
+        const [x] = getEleTranslate(list);
+        const tabLeft = tab.offsetLeft;
+        const tabWidth = tab.offsetWidth;
+        const containerWidth = container.clientWidth;
+
+        let newX = x;
+
+        // Tab overflows on the right side
+        if (tabLeft + tabWidth - Math.abs(x) > containerWidth) {
+          const overflow = tabLeft + tabWidth - Math.abs(x) - containerWidth;
+          newX = x - overflow;
+        }
+        // Tab overflows on the left side
+        else if (tabLeft < Math.abs(x)) {
+          const overflow = Math.abs(x) - tabLeft;
+          newX = x + overflow;
+        }
+
+        setEleTranslate(list, newX);
+        moved = true;
       }
+    } else if (align === 'center') {
+      const containerHeight = container.clientHeight;
+      const maxOffset = container.scrollHeight - containerHeight;
+      const tabCenter = tab.offsetTop + tab.offsetHeight / 2;
 
-      setEleTranslate(list, newX);
+      const newScrollTop = Math.max(
+        0,
+        Math.min(maxOffset, Math.round(tabCenter - containerHeight / 2)),
+      );
+      if (Math.abs(newScrollTop - container.scrollTop) > 0.5) {
+        container.scrollTop = newScrollTop;
+        moved = true;
+      }
     } else {
       const tabTop = tab.offsetTop;
       const tabHeight = tab.offsetHeight;
@@ -66,19 +103,24 @@ export function useNavListMove({
       if (tabTop + tabHeight - scrollTop >= containerHeight) {
         const overflow = tabTop + tabHeight - scrollTop - containerHeight;
         container.scrollTop = scrollTop + overflow;
+        moved = true;
       }
       // Tab overflows above
       else if (tabTop < scrollTop) {
         const overflow = scrollTop - tabTop;
         container.scrollTop = scrollTop - overflow;
+        moved = true;
       }
     }
 
-    onMoved?.();
+    if (moved) {
+      onMoved?.();
+    }
   }, [
     activeKey,
     enabled,
     direction,
+    align,
     activetab,
     navList,
     navContainer,

package/src/Tabs/hooks/useTabScroll.ts

@@ -43,6 +43,12 @@ export function useTabScroll({
 
   const debouncedUpdateShadow = useDebounceFunction(updateShadow, 200);
 
+  // Refresh dropdown range and shadows after the nav list is moved programmatically
+  const refresh = useCallback(() => {
+    setRefreshKey((prev) => prev + 1);
+    debouncedUpdateShadow();
+  }, [debouncedUpdateShadow]);
+
   useEffect(() => {
     const container = navContainer.current;
     const list = navList.current;
@@ -99,5 +105,5 @@ export function useTabScroll({
     updateShadow,
   ]);
 
-  return { refreshKey, updateShadow: debouncedUpdateShadow };
+  return { refreshKey, refresh, updateShadow: debouncedUpdateShadow };
 }

package/src/Tabs/index.en-US.md

@@ -19,43 +19,45 @@ Tabs make it easy to switch between different views.
 <code src="./demo/type.tsx" title="Type" description="Different types of tabs"></code>
 <code src="./demo/editable.tsx" title="Editable" description="Add and remove tabs"></code>
 <code src="./demo/extra.tsx" title="Extra Content" description="Extra content in tabs"></code>
+<code src="./demo/overflow-center.tsx" title="Center Active Tab on Overflow" description="When tabs overflow into a dropdown, activeAlign=&quot;center&quot; scrolls the tab selected from the dropdown to the middle of the header"></code>
 <code src="./demo/controlled.tsx" title="Controlled" description="Controlled tabs"></code>
 
 ## API
 
 ### TabsProps
 
-| Property | Type | Description | Default |
-| --- | --- | --- | --- |
-| prefixCls | `string` | Custom class name prefix | - |
-| className | `string` | Custom root class name | - |
-| style | `React.CSSProperties` | Custom root style | - |
-| classNames | `Partial<Record<SemanticDOM, string>>` | Custom structure class names | - |
-| styles | `Partial<Record<SemanticDOM, React.CSSProperties>>` | Custom structure styles | - |
-| type | `'card' \| 'editable-card'` | Tab style | - |
-| activeKey | `string \| number` | Current active tab key | - |
-| defaultActiveKey | `string \| number` | Default active tab key | - |
-| items | `Array<TabItemType>` | Tab items | - |
-| position | `'top' \| 'bottom' \| 'left' \| 'right'` | Tab position | `top` |
-| headerExtra | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | Extra content in tab bar | - |
-| children | `Array<React.ReactElement>` | Children elements | - |
-| lazy | `boolean` | Lazy load content | - |
-| fixedHeader | `boolean` | Whether to fix header area | `false` |
-| onEdit | `(type: 'add' \| 'remove', key?: number \| string) => void` | Edit callback | - |
-| onChange | `(key: string \| number) => void` | Change callback | - |
-| onTabClick | `(key: string \| number) => void \| boolean` | Tab click callback | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+| Property         | Type                                                                                                           | Description                                                                                                                                                                                                                                      | Default                                                        |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- |
+| prefixCls        | `string`                                                                                                       | Custom class name prefix                                                                                                                                                                                                                         | -                                                              |
+| className        | `string`                                                                                                       | Custom root class name                                                                                                                                                                                                                           | -                                                              |
+| style            | `React.CSSProperties`                                                                                          | Custom root style                                                                                                                                                                                                                                | -                                                              |
+| classNames       | `Partial<Record<SemanticDOM, string>>`                                                                         | Custom structure class names                                                                                                                                                                                                                     | -                                                              |
+| styles           | `Partial<Record<SemanticDOM, React.CSSProperties>>`                                                            | Custom structure styles                                                                                                                                                                                                                          | -                                                              |
+| type             | `'card' \| 'editable-card'`                                                                                    | Tab style                                                                                                                                                                                                                                        | -                                                              |
+| activeKey        | `string \| number`                                                                                             | Current active tab key                                                                                                                                                                                                                           | -                                                              |
+| defaultActiveKey | `string \| number`                                                                                             | Default active tab key                                                                                                                                                                                                                           | -                                                              |
+| items            | `Array<TabItemType>`                                                                                           | Tab items                                                                                                                                                                                                                                        | -                                                              |
+| position         | `'top' \| 'bottom' \| 'left' \| 'right'`                                                                       | Tab position                                                                                                                                                                                                                                     | `top`                                                          |
+| headerExtra      | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | Extra content in tab bar                                                                                                                                                                                                                         | -                                                              |
+| children         | `Array<React.ReactElement>`                                                                                    | Children elements                                                                                                                                                                                                                                | -                                                              |
+| lazy             | `boolean`                                                                                                      | Lazy load content                                                                                                                                                                                                                                | -                                                              |
+| fixedHeader      | `boolean`                                                                                                      | Whether to fix header area                                                                                                                                                                                                                       | `false`                                                        |
+| activeAlign      | `'auto' \| 'center'`                                                                                           | How the active tab is aligned when the tab list overflows: `auto` scrolls minimally to the edge (no scrolling when already fully visible); `center` always scrolls it to the middle of the header, including tabs clicked directly on the header | `auto`                                                         |
+| onEdit           | `(type: 'add' \| 'remove', key?: number \| string) => void`                                                    | Edit callback                                                                                                                                                                                                                                    | -                                                              |
+| onChange         | `(key: string \| number) => void`                                                                              | Change callback                                                                                                                                                                                                                                  | -                                                              |
+| onTabClick       | `(key: string \| number) => void \| boolean`                                                                   | Tab click callback                                                                                                                                                                                                                               | -                                                              |
+| data-\*          | `string`                                                                                                       | -                                                                                                                                                                                                                                                | Supports all data-\* attributes, forwarded to root DOM element |
 
 ### TabItemType
 
-| Property | Type | Description | Default |
-| --- | --- | --- | --- |
-| key | `string \| number` | Unique key | - |
-| label | `React.ReactNode` | Tab label | - |
-| icon | `React.ReactNode` | Tab icon | - |
-| disabled | `boolean` | Disabled state | - |
-| closable | `boolean` | Whether closable (effective when type="editable-card") | `true` |
-| badge | `number` | Badge number | - |
-| items | `Array<TabItemType>` | Sub tabs | - |
-| children | `React.ReactNode` | Tab content | - |
-| data-* | `string` | - | Supports all data-* attributes, forwarded to root DOM element |
+| Property | Type                 | Description                                            | Default                                                        |
+| -------- | -------------------- | ------------------------------------------------------ | -------------------------------------------------------------- |
+| key      | `string \| number`   | Unique key                                             | -                                                              |
+| label    | `React.ReactNode`    | Tab label                                              | -                                                              |
+| icon     | `React.ReactNode`    | Tab icon                                               | -                                                              |
+| disabled | `boolean`            | Disabled state                                         | -                                                              |
+| closable | `boolean`            | Whether closable (effective when type="editable-card") | `true`                                                         |
+| badge    | `number`             | Badge number                                           | -                                                              |
+| items    | `Array<TabItemType>` | Sub tabs                                               | -                                                              |
+| children | `React.ReactNode`    | Tab content                                            | -                                                              |
+| data-\*  | `string`             | -                                                      | Supports all data-\* attributes, forwarded to root DOM element |

package/src/Tabs/index.zh-CN.md

@@ -19,43 +19,45 @@ toc: 'content'
 <code src="./demo/type.tsx" title="类型" description="不同类型的标签页"></code>
 <code src="./demo/editable.tsx" title="可编辑" description="可添加和删除标签页"></code>
 <code src="./demo/extra.tsx" title="额外内容" description="标签页中的额外内容"></code>
+<code src="./demo/overflow-center.tsx" title="溢出时激活Tab居中" description="Tab较多出现下拉时，activeAlign=&quot;center&quot; 让从下拉选中的Tab滚动到Header中间"></code>
 <code src="./demo/controlled.tsx" title="受控" description="受控的标签页"></code>
 
 ## API
 
 ### TabsProps
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| prefixCls | `string` | 自定义类名前缀 | - |
-| className | `string` | 自定义根类名 | - |
-| style | `React.CSSProperties` | 自定义根行内样式 | - |
-| classNames | `Partial<Record<SemanticDOM, string>>` | 自定义结构化类名 | - |
-| styles | `Partial<Record<SemanticDOM, React.CSSProperties>>` | 自定义结构化样式 | - |
-| type | `'card' \| 'editable-card'` | 页签样式 | - |
-| activeKey | `string \| number` | 当前激活tab面板的key | - |
-| defaultActiveKey | `string \| number` | 默认激活的tab面板的key | - |
-| items | `Array<TabItemType>` | tab选项卡内容 | - |
-| position | `'top' \| 'bottom' \| 'left' \| 'right'` | 页签位置 | `top` |
-| headerExtra | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | tab额外内容 | - |
-| children | `Array<React.ReactElement>` | 子元素 | - |
-| lazy | `boolean` | 是否懒加载，只有当切换到该tab时才将对应的content加载到dom中 | - |
-| fixedHeader | `boolean` | 是否固定Header区域 | `false` |
-| onEdit | `(type: 'add' \| 'remove', key?: number \| string) => void` | 编辑Tab时的回调 | - |
-| onChange | `(key: string \| number) => void` | Tab改变时的回调 | - |
-| onTabClick | `(key: string \| number) => void \| boolean` | 点击Tab时的回调，当返回false时，不会切换Tab, 不会触发onChange | - |
-| data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
+| 属性名           | 类型                                                                                                           | 描述                                                                                                                                  | 默认值                                       |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| prefixCls        | `string`                                                                                                       | 自定义类名前缀                                                                                                                        | -                                            |
+| className        | `string`                                                                                                       | 自定义根类名                                                                                                                          | -                                            |
+| style            | `React.CSSProperties`                                                                                          | 自定义根行内样式                                                                                                                      | -                                            |
+| classNames       | `Partial<Record<SemanticDOM, string>>`                                                                         | 自定义结构化类名                                                                                                                      | -                                            |
+| styles           | `Partial<Record<SemanticDOM, React.CSSProperties>>`                                                            | 自定义结构化样式                                                                                                                      | -                                            |
+| type             | `'card' \| 'editable-card'`                                                                                    | 页签样式                                                                                                                              | -                                            |
+| activeKey        | `string \| number`                                                                                             | 当前激活tab面板的key                                                                                                                  | -                                            |
+| defaultActiveKey | `string \| number`                                                                                             | 默认激活的tab面板的key                                                                                                                | -                                            |
+| items            | `Array<TabItemType>`                                                                                           | tab选项卡内容                                                                                                                         | -                                            |
+| position         | `'top' \| 'bottom' \| 'left' \| 'right'`                                                                       | 页签位置                                                                                                                              | `top`                                        |
+| headerExtra      | `{ prefix?: React.ReactNode \| (() => React.ReactNode); suffix?: React.ReactNode \| (() => React.ReactNode) }` | tab额外内容                                                                                                                           | -                                            |
+| children         | `Array<React.ReactElement>`                                                                                    | 子元素                                                                                                                                | -                                            |
+| lazy             | `boolean`                                                                                                      | 是否懒加载，只有当切换到该tab时才将对应的content加载到dom中                                                                           | -                                            |
+| fixedHeader      | `boolean`                                                                                                      | 是否固定Header区域                                                                                                                    | `false`                                      |
+| activeAlign      | `'auto' \| 'center'`                                                                                           | Tab溢出时激活tab的对齐方式：`auto` 贴边最小滚动（完全可见时不滚动）；`center` 始终滚动到header中间居中，包括直接点击header上可见的tab | `auto`                                       |
+| onEdit           | `(type: 'add' \| 'remove', key?: number \| string) => void`                                                    | 编辑Tab时的回调                                                                                                                       | -                                            |
+| onChange         | `(key: string \| number) => void`                                                                              | Tab改变时的回调                                                                                                                       | -                                            |
+| onTabClick       | `(key: string \| number) => void \| boolean`                                                                   | 点击Tab时的回调，当返回false时，不会切换Tab, 不会触发onChange                                                                         | -                                            |
+| data-\*          | `string`                                                                                                       | -                                                                                                                                     | 支持所有 data-\* 属性，透传到组件根 DOM 元素 |
 
 ### TabItemType
 
-| 属性名 | 类型 | 描述 | 默认值 |
-| --- | --- | --- | --- |
-| key | `string \| number` | 唯一key对应activeKey | - |
-| label | `React.ReactNode` | 选项卡显示内容 | - |
-| icon | `React.ReactNode` | 选项卡显示图标 | - |
-| disabled | `boolean` | 是否禁用 | - |
-| closable | `boolean` | 是否可关闭，当type="editable-card"时生效 | `true` |
-| badge | `number` | 角标 | - |
-| items | `Array<TabItemType>` | 子tab | - |
-| children | `React.ReactNode` | 显示内容 | - |
-| data-* | `string` | - | 支持所有 data-* 属性，透传到组件根 DOM 元素 |
+| 属性名   | 类型                 | 描述                                     | 默认值                                       |
+| -------- | -------------------- | ---------------------------------------- | -------------------------------------------- |
+| key      | `string \| number`   | 唯一key对应activeKey                     | -                                            |
+| label    | `React.ReactNode`    | 选项卡显示内容                           | -                                            |
+| icon     | `React.ReactNode`    | 选项卡显示图标                           | -                                            |
+| disabled | `boolean`            | 是否禁用                                 | -                                            |
+| closable | `boolean`            | 是否可关闭，当type="editable-card"时生效 | `true`                                       |
+| badge    | `number`             | 角标                                     | -                                            |
+| items    | `Array<TabItemType>` | 子tab                                    | -                                            |
+| children | `React.ReactNode`    | 显示内容                                 | -                                            |
+| data-\*  | `string`             | -                                        | 支持所有 data-\* 属性，透传到组件根 DOM 元素 |

package/src/Tabs/interface.ts

@@ -1,6 +1,6 @@
 import type { DataAttributeProps } from '../utils/types';
 
-type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar' | 'more';
 
 export type TabItemType = {
   /**
@@ -124,4 +124,13 @@ export interface TabsProps extends DataAttributeProps {
    * @default false
    */
   fixedHeader?: boolean;
+  /**
+   * How the active tab is aligned when the tab list overflows
+   * - 'auto': scroll minimally so the active tab is visible at the edge;
+   *   no scrolling when it is already fully visible
+   * - 'center': always scroll so the active tab is centered in the header,
+   *   including tabs clicked directly on the header
+   * @default 'auto'
+   */
+  activeAlign?: 'auto' | 'center';
 }

package/src/Tabs/style/index.less

@@ -439,6 +439,10 @@
   height: var(--yee-tabs-nav-operations-height);
 }
 
+@{pls}-nav-more {
+  margin-left: 4px;
+}
+
 // 下拉框
 @{pls}-operation-container {
   max-height: var(--yee-tabs-operation-container-max-height);
@@ -452,6 +456,7 @@
 
   @{pls}-tab {
     height: var(--yee-tabs-operation-tab-height);
+    margin: 0;
     padding: var(--yee-tabs-operation-tab-padding);
     cursor: pointer;
 

package/src/Tabs/tab-header/index.tsx

@@ -38,6 +38,7 @@ export interface TabHeaderProps {
   prefixCls: string;
   type?: 'card' | 'editable-card';
   position?: 'top' | 'bottom' | 'left' | 'right';
+  activeAlign?: 'auto' | 'center';
   headerExtra?: {
     prefix?: React.ReactNode | (() => React.ReactNode);
     suffix?: React.ReactNode | (() => React.ReactNode);
@@ -53,6 +54,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
     prefixCls,
     type,
     position = 'top',
+    activeAlign = 'auto',
     headerExtra,
     classNames,
     styles,
@@ -80,7 +82,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   });
 
   // Scroll handling
-  const { refreshKey } = useTabScroll({
+  const { refreshKey, refresh: refreshNav } = useTabScroll({
     direction,
     navContainer,
     navList,
@@ -97,15 +99,22 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
     enabled: !type, // Only show active bar for non-card types
   });
 
+  // Recompute dropdown visibility, dropdown range and shadows after the list is moved
+  const handleNavMoved = useCallback(() => {
+    checkVisibility();
+    refreshNav();
+  }, [checkVisibility, refreshNav]);
+
   // Navigation list movement
   useNavListMove({
     direction,
     activeKey,
     enabled: moreOpen,
+    align: activeAlign,
     activetab,
     navList,
     navContainer,
-    onMoved: checkVisibility,
+    onMoved: handleNavMoved,
   });
 
   // Listen for container size changes
@@ -212,7 +221,9 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
         {moreOpen && (
           <DropDownTabs visible={moreOpen} items={items || []} range={range}>
             <Button
-              className={`${prefixCls}-nav-more`}
+              className={clsx(`${prefixCls}-nav-more`, classNames?.more)}
+              style={styles?.more}
+              size="small"
               icon={<Ellipsis size={14} strokeWidth={1.5} />}
               type="text"
               aria-label="More tabs"

package/src/Tabs/tabs.tsx

@@ -39,6 +39,7 @@ const Tabs: FC<TabsProps> = (baseprops) => {
     activeKey,
     defaultActiveKey,
     fixedHeader,
+    activeAlign,
     onChange,
     onEdit,
     onTabClick,
@@ -117,6 +118,7 @@ const Tabs: FC<TabsProps> = (baseprops) => {
         <TabHeader
           {...omit(props, ['children', 'className', 'style'])}
           prefixCls={prefixCls}
+          activeAlign={activeAlign}
         />
         <TabContent
           prefixCls={prefixCls}

package/src/Upload/demo/auto-upload.tsx

@@ -0,0 +1,35 @@
+import {
+  Button,
+  Upload,
+  type UploadFile,
+  type UploadInstance,
+} from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const uploadRef = useRef<UploadInstance>(null);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
+  const readyCount = fileList.filter((file) => file.status === 'ready').length;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Upload
+        ref={uploadRef}
+        autoUpload={false}
+        multiple
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        fileList={fileList}
+        onChange={({ fileList: nextFileList }) => setFileList(nextFileList)}
+      />
+      <div>
+        <Button
+          type="primary"
+          disabled={readyCount === 0}
+          onClick={() => uploadRef.current?.upload()}
+        >
+          Start upload ({readyCount})
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/Upload/demo/basic.tsx

@@ -1,11 +1,10 @@
-import { Button, Upload } from '@rainbow-oh/yee-c';
+import { Button, Upload, type UploadProps } from '@rainbow-oh/yee-c';
 import React from 'react';
-import type { UploadFile } from '../interface';
 
 export default () => {
-  const props = {
+  const props: UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-    onChange({ file, fileList }: { file: UploadFile; fileList: UploadFile[] }) {
+    onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
       }
@@ -14,26 +13,23 @@ export default () => {
       {
         uid: '1',
         name: 'xxx.png',
-        status: 'done',
-        raw: {} as File,
+        status: 'success',
         size: 123,
-        percent: 0,
+        percent: 100,
         type: 'image/png',
       },
       {
         uid: '2',
         name: 'yyy.png',
-        status: 'done',
-        raw: {} as File,
+        status: 'success',
         size: 123,
-        percent: 0,
+        percent: 100,
         type: 'image/png',
       },
     ],
   };
 
   return (
-    // @ts-ignore
     <Upload {...props}>
       <Button>Upload</Button>
     </Upload>

package/src/Upload/demo/controlled.tsx

@@ -1,21 +1,25 @@
-import { Button, Upload } from '@rainbow-oh/yee-c';
+import {
+  Button,
+  Upload,
+  type UploadFile,
+  type UploadProps,
+} from '@rainbow-oh/yee-c';
 import React, { useState } from 'react';
-import type { UploadFile } from '../interface';
 
 export default () => {
   const [fileList, setFileList] = useState<UploadFile[]>([]);
 
-  const props = {
+  const props: UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
     fileList,
-    onChange({ file, fileList }: { file: UploadFile; fileList: UploadFile[] }) {
-      setFileList(fileList);
+    onChange({ file, fileList: nextFileList }) {
+      setFileList(nextFileList);
       if (file.status !== 'uploading') {
-        console.log(file, fileList);
+        console.log(file, nextFileList);
       }
     },
-    onRemove(file: UploadFile) {
-      setFileList(fileList.filter((item) => item.uid !== file.uid));
+    onRemove(file) {
+      setFileList((current) => current.filter((item) => item.uid !== file.uid));
       return true;
     },
   };

package/src/Upload/demo/directory.tsx

@@ -1,12 +1,11 @@
-import { Button, Upload } from '@rainbow-oh/yee-c';
+import { Button, Upload, type UploadProps } from '@rainbow-oh/yee-c';
 import React from 'react';
-import type { UploadFile } from '../interface';
 
 export default () => {
-  const props = {
+  const props: UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
     directory: true,
-    onChange({ file, fileList }: { file: UploadFile; fileList: UploadFile[] }) {
+    onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
       }

package/src/Upload/demo/drag.tsx

@@ -1,23 +1,16 @@
-import { Upload } from '@rainbow-oh/yee-c';
+import { Upload, type UploadProps } from '@rainbow-oh/yee-c';
 import React from 'react';
-import type { UploadFile } from '../interface';
 
 export default () => {
-  const props = {
+  const props: UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
-    type: 'drag' as const,
-    onChange({ file, fileList }: { file: UploadFile; fileList: UploadFile[] }) {
+    type: 'drag',
+    onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
       }
     },
   };
 
-  return (
-    <Upload.Dragger {...props}>
-      {/* <div style={{ padding: '20px', border: '1px dashed #ccc' }}>
-        <p>Click or drag file to this area to upload</p>
-      </div> */}
-    </Upload.Dragger>
-  );
+  return <Upload.Dragger {...props} />;
 };

package/src/Upload/demo/multiple.tsx

@@ -1,12 +1,11 @@
-import { Button, Upload } from '@rainbow-oh/yee-c';
+import { Button, Upload, type UploadProps } from '@rainbow-oh/yee-c';
 import React from 'react';
-import type { UploadFile } from '../interface';
 
 export default () => {
-  const props = {
+  const props: UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
     multiple: true,
-    onChange({ file, fileList }: { file: UploadFile; fileList: UploadFile[] }) {
+    onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
       }