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

feat: Improve documentation
AElfProject · Mar 15, 2024 · 3671801 · 3671801
2 parents 3608328 + e4c85de
commit 3671801
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 65 deletions.
diff --git a/packages/component/src/Pagination/demos/basic.tsx b/packages/component/src/Pagination/demos/basic.tsx
@@ -5,8 +5,13 @@ import { Space } from 'antd';
 function Demo() {
   return (
     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-      <Pagination total={100}></Pagination>
-      <Pagination total={100} showSizeChanger={false}></Pagination>
+      <Pagination
+        total={100}
+        onChange={(page, pagesize) => {
+          console.log(page, pagesize);
+        }}
+      ></Pagination>
+      <Pagination total={100} showSizeChange={false}></Pagination>
     </Space>
   );
 }

diff --git a/packages/component/src/Pagination/index.md b/packages/component/src/Pagination/index.md
@@ -31,12 +31,14 @@ group:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| current | 当前页数 | `number` | - | `1.0.0` |
+| current | 当前页数 | `number` | - | `1.0.0`&nbsp; |
 | pageSize | 每页条数 | `number` | `10` | `1.0.0` |
 | defaultCurrent | 默认的当前页数 | `number` | `1` | `1.0.0` |
 | defaultPageSize | 默认的每页条数 | `number` | `10` | `1.0.0` |
-| hideOnSinglePage | 只有一页时是否隐藏分页器。根据options最小值判断 | `boolean` | `false`&nbsp; | `1.0.0` |
-| total | 数据总数 | `number` | - | `1.0.0` |
-| showSizeChanger | 是否显示pageSize切换 | `boolean` | `true` | `1.0.0` |
+| hideOnSinglePage | 只有一页时是否隐藏分页器。根据options最小值判断 | `boolean` | `false` | `1.0.0` |
+| total | 数据总数 | `number` | - | - |
+| showSizeChange | 是否显示pageSize切换 | `boolean` | `true` | `1.0.0` |
+| options | 指定每页可以显示多少条 | `number[]` | `[10, 20, 50]` | `1.0.0` |
+| onChange | 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 | `function(page, pageSize)` | - | `1.0.0` |
 | pageChange | 页码改变的回调，参数是改变后的页码 | `function(page)` | - | `1.0.0` |
-| pageSizeChange | pageSize 改变的回调，参数是改变后的页码及每页条数。因为这里默认处理当sizeChange的时候，页码重置为1，所以一起返回了 | `function(current, size)` | - | `1.0.0`&nbsp; |
+| pageSizeChange | pageSize 改变的回调，参数是改变后的页码及每页条数。因为这里默认处理当sizeChange的时候，页码重置为1，所以一起返回了 | `function(current, size)` | - | `1.0.0` |
diff --git a/packages/component/src/Pagination/index.tsx b/packages/component/src/Pagination/index.tsx
@@ -15,8 +15,10 @@ export interface IPaginationProps {
   defaultCurrent?: number;
   total: number;
   defaultPageSize?: number;
+  showSizeChange?: boolean;
   showSizeChanger?: boolean;
   pageChange?: (page: number, pageSize?: number) => void;
+  onChange?: (page: number, pageSize: number) => void;
   pageSizeChange?: (page: number, pageSize: number) => void;
   options?: Options;
 }
@@ -27,11 +29,13 @@ export default function Pagination({
   defaultCurrent = 1,
   defaultPageSize = 10,
   total,
+  showSizeChange = true,
   showSizeChanger = true,
-  pageChange,
   hideOnSinglePage,
-  pageSizeChange,
   options = [10, 20, 50],
+  pageChange,
+  onChange,
+  pageSizeChange,
 }: IPaginationProps) {
   // Component state
   const [pageNum, setPageNum] = useState<number>(defaultCurrent);
@@ -62,6 +66,7 @@ export default function Pagination({
     const page = pageNum === 1 ? pageNum : pageNum - 1;
     setPageNum(page);
     pageChange?.(page);
+    onChange?.(page, pageSizeValue);
   };
   const runPrevChange = debounce(prevChange, 300, {
     leading: true,
@@ -72,6 +77,7 @@ export default function Pagination({
     const page = pageNum === totalPage ? totalPage : pageNum + 1;
     setPageNum(page);
     pageChange?.(page);
+    onChange?.(page, pageSizeValue);
   };
   const runNextChange = debounce(nextChange, 300, {
     leading: true,
@@ -80,7 +86,8 @@ export default function Pagination({
 
   const jumpFirst = () => {
     setPageNum(1);
-    pageChange?.(1, pageSize);
+    pageChange?.(1, pageSizeValue);
+    onChange?.(1, pageSizeValue);
   };
   const debounceJumpFirst = debounce(jumpFirst, 300, {
     leading: true,
@@ -89,7 +96,8 @@ export default function Pagination({
 
   const jumpLast = () => {
     setPageNum(totalPage);
-    pageChange?.(totalPage, pageSize);
+    pageChange?.(totalPage, pageSizeValue);
+    onChange?.(totalPage, pageSizeValue);
   };
   const debounceJumpLast = debounce(jumpLast, 300, {
     leading: true,
@@ -100,6 +108,7 @@ export default function Pagination({
     setPageNum(1);
     setPageSizeValue(value);
     pageSizeChange?.(1, value);
+    onChange?.(1, value);
   };
 
   const pagesizeOptions = useMemo(() => {
@@ -116,11 +125,12 @@ export default function Pagination({
   return (
     <div className={cx(styles.paginationContainer, prefixCls + '-pagination-container')}>
       <div>
-        {showSizeChanger && (
+        {showSizeChange && showSizeChanger && (
           <>
             <span className={cx(styles.pagesizeLabel, prefixCls + '-pagesize-label')}>Show：</span>
             <Select
               defaultValue={pageSizeValue}
+              value={pageSizeValue}
               className={styles.pagesizeSelect}
               popupClassName={styles.pageSizePopup}
               popupMatchSelectWidth={false}

diff --git a/packages/component/src/Table/demos/basic.tsx b/packages/component/src/Table/demos/basic.tsx
@@ -58,16 +58,7 @@ export default function TableExample() {
     setLoading(false);
   };
 
-  const pageChange = (page: number) => {
-    setTableParams({
-      pagination: {
-        ...tableParams.pagination,
-        current: page,
-      },
-    });
-  };
-
-  const pageSizeChange = (page: number, pageSize: number) => {
+  const onChange = (page: number, pageSize: number) => {
     setTableParams({
       pagination: {
         ...tableParams.pagination,
@@ -82,11 +73,13 @@ export default function TableExample() {
   }, [tableParams]);
 
   return (
-    <Table
-      columns={columns}
-      loading={loading}
-      pagination={{ ...tableParams.pagination, pageChange, pageSizeChange }}
-      dataSource={dataSource}
-    ></Table>
+    <div>
+      <Table
+        columns={columns}
+        loading={loading}
+        pagination={{ ...tableParams.pagination, onChange }}
+        dataSource={dataSource}
+      ></Table>
+    </div>
   );
 }
diff --git a/packages/component/src/Table/index.md b/packages/component/src/Table/index.md
@@ -10,19 +10,34 @@ group:
 1. customize pagination
 2. customize table header
 
+:::warning
+由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange 
+:::
+
 ## Basic Table
 
 <code src="./demos/basic.tsx"></code>
 
 ## Token
 
 ```js
-<AELFDProvider theme={{
+<AELFDProvider
+  customTokens={
+    customTable: {
+      // 表格头部圆角
+      headerBorderRadius: 6,
+    },
+  }
+ theme={{
   components:{
     Table: {
+      // 表头背景
       headerBg: appearance === 'dark' ? '#353535' : '#F0F0F0',
+      // 表格行悬浮背景色
       rowHoverBg: appearance === 'dark' ? '#212121' : '#F8F8F8',
+      // 表头文字颜色
       headerColor: appearance === 'dark' ? '#8C8C8C' : '#808080',
+      // 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细,这里设置改变了表头的字体粗细
       fontWeightStrong: 500,
     }
   }
@@ -31,10 +46,16 @@ group:
 
 ## Supported Token
 
-refer to [Table Token](https://ant.design/components/table-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+refer to[Table Token](https://ant.design/components/table-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
 
 ## API
 
-## Supported API
+:::warning由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange :::
 
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| pagination <Badge type="info">change</Badge> | [分页组件api](/components/pagination) |  |  |  |
+| onChange <Badge type="info">change</Badge> | 分页变化不会触发这个api |  |  | - |
+
+## Supported API
 refer to [Table API](https://ant.design/components/table-cn#table)
diff --git a/packages/component/src/Table/index.tsx b/packages/component/src/Table/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
+import { IPaginationProps, Pagination } from 'aelf-design';
 import { Table as AntdTable, TableProps } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
 
-import Pagination, { IPaginationProps } from '../Pagination';
 import useStyles from './style';
 
 export interface ITableProps<T> extends Omit<TableProps<T>, 'pagination'> {

diff --git a/packages/component/src/ToolTip/demos/basic.tsx b/packages/component/src/ToolTip/demos/basic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ToolTip } from 'aelf-design';
+import { Button, Tooltip } from 'aelf-design';
 
 const text = (
   <span>
@@ -26,15 +26,15 @@ const App: React.FC = () => (
         whiteSpace: 'nowrap',
       }}
     >
-      <ToolTip placement="topLeft" open={true} title={text}>
+      <Tooltip placement="topLeft" open={true} title={text}>
         <Button>TL</Button>
-      </ToolTip>
-      <ToolTip placement="top" title={text}>
+      </Tooltip>
+      <Tooltip placement="top" title={text}>
         <Button>Top</Button>
-      </ToolTip>
-      <ToolTip placement="topRight" title={text}>
+      </Tooltip>
+      <Tooltip placement="topRight" title={text}>
         <Button>TR</Button>
-      </ToolTip>
+      </Tooltip>
     </div>
     <div
       style={{
@@ -45,15 +45,15 @@ const App: React.FC = () => (
         float: 'inline-start',
       }}
     >
-      <ToolTip placement="leftTop" title={text}>
+      <Tooltip placement="leftTop" title={text}>
         <Button>LT</Button>
-      </ToolTip>
-      <ToolTip placement="left" title={text}>
+      </Tooltip>
+      <Tooltip placement="left" title={text}>
         <Button>Left</Button>
-      </ToolTip>
-      <ToolTip placement="leftBottom" title={text}>
+      </Tooltip>
+      <Tooltip placement="leftBottom" title={text}>
         <Button>LB</Button>
-      </ToolTip>
+      </Tooltip>
     </div>
     <div
       style={{
@@ -64,15 +64,15 @@ const App: React.FC = () => (
         marginInlineStart: buttonWidth * 4 + 24,
       }}
     >
-      <ToolTip placement="rightTop" open={true} title={text}>
+      <Tooltip placement="rightTop" open={true} title={text}>
         <Button>RT</Button>
-      </ToolTip>
-      <ToolTip placement="right" title={text}>
+      </Tooltip>
+      <Tooltip placement="right" title={text}>
         <Button>Right</Button>
-      </ToolTip>
-      <ToolTip placement="rightBottom" title={text}>
+      </Tooltip>
+      <Tooltip placement="rightBottom" title={text}>
         <Button>RB</Button>
-      </ToolTip>
+      </Tooltip>
     </div>
     <div
       style={{
@@ -84,15 +84,15 @@ const App: React.FC = () => (
         whiteSpace: 'nowrap',
       }}
     >
-      <ToolTip placement="bottomLeft" title={text}>
+      <Tooltip placement="bottomLeft" title={text}>
         <Button>BL</Button>
-      </ToolTip>
-      <ToolTip placement="bottom" title={text}>
+      </Tooltip>
+      <Tooltip placement="bottom" title={text}>
         <Button>Bottom</Button>
-      </ToolTip>
-      <ToolTip placement="bottomRight" title={text}>
+      </Tooltip>
+      <Tooltip placement="bottomRight" title={text}>
         <Button>BR</Button>
-      </ToolTip>
+      </Tooltip>
     </div>
   </div>
 );

diff --git a/packages/component/src/ToolTip/index.tsx b/packages/component/src/ToolTip/index.tsx
@@ -5,7 +5,7 @@ import useStyles from './style';
 
 export type ITooltipProps = AntdTooltipProps;
 
-export default function ToolTip(props: ITooltipProps) {
+export default function Tooltip(props: ITooltipProps) {
   const { styles, cx, prefixCls } = useStyles();
   const { children } = props;
   return (

diff --git a/packages/component/src/Upload/index.md b/packages/component/src/Upload/index.md
@@ -46,11 +46,25 @@ Please fill in your AWS configuration before trying to upload
 
 ### Component Token
 
-| Token 名称       | 描述               | 类型     | 默认值                              |
-| ---------------- | ------------------ | -------- | ----------------------------------- |
-| colorMessageText | 提示文本的字体颜色 | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
-| borderColor      | 边框颜色           | `string` | 暗黑模式：#484848 日间模式：#E0E0E0 |
-| containerBg      | 上传区域背景颜色   | `string` | 暗黑模式：#8C8C8C 日间模式：#808080 |
+```js
+<AELFDProvider
+  customTokens={
+    customUpload: {
+      borderColor: isDarkMode ? '#484848' : '#E0E0E0',
+      containerBg: isDarkMode ? '#212121' : '#F8F8F8',
+      colorFileText: isDarkMode ? '#fff' : '#070A26',
+      colorMessageText: isDarkMode ? '#8C8C8C' : '#808080',
+    },
+  }
+ />
+```
+
+| Token 名称       | 描述                     | 类型     | 默认值 |
+| ---------------- | ------------------------ | -------- | ------ |
+| colorMessageText | 提示文本的字体颜色       | `string` |        |
+| borderColor      | 边框颜色                 | `string` |        |
+| containerBg      | 上传区域背景颜色         | `string` |        |
+| colorFileText    | 文件预览tips文案字体颜色 | `string` |        |
 
 ### Supported API
 

diff --git a/packages/component/src/index.tsx b/packages/component/src/index.tsx
@@ -19,8 +19,8 @@ export { default as Table } from './Table';
 export type { ITableProps } from './Table';
 export { default as Tabs } from './Tabs';
 export type { ITabsProps } from './Tabs';
-export { default as ToolTip } from './ToolTip';
-export type { ITooltipProps } from './ToolTip';
+export { default as Tooltip } from './Tooltip';
+export type { ITooltipProps } from './Tooltip';
 export { default as Typography, FontWeightEnum } from './Typography';
 export type { ITextProps } from './Typography/Text';
 export type { IAelfdTitleProps } from './Typography/Title';