Merge branch 'main' of https://github.com/AElf-devops/aelf-design int…

…o feat/css-export
AElfProject · Mar 18, 2024 · d970298 · d970298
2 parents b24d34e + 4a4586b
commit d970298
Show file tree

Hide file tree

Showing 18 changed files with 122 additions and 80 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -22,7 +22,7 @@ const alias = pkgList.reduce(
 );
 
 export default defineConfig({
-  title: 'AELF Design',
+  title: 'Aelf Design',
   headScripts: [
     {
       src: 'https://www.googletagmanager.com/gtag/js?id=G-C31HWEY1D4',
@@ -41,12 +41,12 @@ export default defineConfig({
   metas: [
     {
       name: 'keywords',
-      content: 'web3, AELF, dapp, frontend, components, AELF Design',
+      content: 'web3, AELF, dapp, frontend, components, Aelf Design',
     },
     { name: 'description', content: 'A Components for Web3, Based on Ant Design,' },
     {
       property: 'og:site_name',
-      content: 'AELF Design',
+      content: 'Aelf Design',
     },
     {
       'data-rh': 'keywords',
@@ -56,7 +56,7 @@ export default defineConfig({
     {
       property: 'og:description',
       content:
-        'AELF Design is a React component library based on Ant Design. It provides a series of components that can help you quickly build decentralized applications（DApp）',
+        'Aelf Design is a React component library based on Ant Design. It provides a series of components that can help you quickly build decentralized applications（DApp）',
     },
     {
       name: 'apple-mobile-web-app-capable',
@@ -95,13 +95,13 @@ export default defineConfig({
   publicPath: process.env.PUBLIC_PATH || '/',
   base: process.env.BASE || '/',
   themeConfig: {
-    name: 'AELF Design',
-    logo: 'https://img2.imgtp.com/2024/03/01/EXKVhuMo.svg',
+    name: 'Aelf Design',
+    logo: 'https://ipfs.io/ipfs/QmWtjvb47DU1EQ4MpridFY1ow4214aAWCkhGu3ZF4xvRSY/',
     socialLinks: {
       github: 'https://github.com/AElf-devops/aelf-design',
     },
   },
-  favicons: ['https://img2.imgtp.com/2024/03/01/EXKVhuMo.svg'],
+  favicons: ['https://ipfs.io/ipfs/QmWtjvb47DU1EQ4MpridFY1ow4214aAWCkhGu3ZF4xvRSY/'],
   locales: [{ id: 'zh-CN', name: '中文' }],
   extraBabelPlugins: [
     [

diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 <div align="center">
 
-<img height="180" src="https://img2.imgtp.com/2024/03/01/EXKVhuMo.svg">
+<img height="180" src="https://ipfs.io/ipfs/QmWtjvb47DU1EQ4MpridFY1ow4214aAWCkhGu3ZF4xvRSY/">
 
-<h1 align="center">AELF Design</h1>
+<h1 align="center">Aelf Design</h1>
 </div>
 
 ## develop

diff --git a/docs/home/components/ShowCase/index.tsx b/docs/home/components/ShowCase/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { useIntl } from 'dumi';
 
-import Address from './Address';
 // import Connect from './Connect';
 // import ConnectButton from './ConnectButton';
 import styles from './index.module.less';
-import NFTCard from './NFTCard';
 
 export default function ShowCase() {
   const intl = useIntl();
@@ -14,7 +12,7 @@ export default function ShowCase() {
     <div className={styles.container}>
       <div className={styles.footer}>
         <div className={styles.footerText}>Made with ❤ by</div>
-        <div className={styles.footerDesc}>AELF DESIGN</div>
+        <div className={styles.footerDesc}>Aelf Design</div>
       </div>
     </div>
   );

diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,5 @@
 ---
-title: AELF Design
+title: Aelf Design
 ---
 
 <code src="./home/index" inline><code>
diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
@@ -1,5 +1,5 @@
 ---
-title: AELF Design
+title: Aelf Design
 ---
 
 <code src="./home/index" inline><code>
diff --git a/packages/component/src/Button/index.md b/packages/component/src/Button/index.md
@@ -22,7 +22,7 @@ group:
 
 <code src="./demos/type.tsx"></code>
 
-## debounce button
+## Debounce button
 
 <code src="./demos/debounce.tsx"></code>
 

diff --git a/packages/component/src/Modal/index.md b/packages/component/src/Modal/index.md
@@ -42,9 +42,9 @@ refer to [Modal Token](https://ant.design/components/modal-cn#%E4%B8%BB%E9%A2%98
 ## API
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | width<Badge type='warning'>修改</Badge> | 设置宽度 | `string \| number` | `438` | `1.0.0` |
-| closeIcon<Badge type='warning'>修改</Badge> | 关闭icon，`false`时不显示，非`false`展示默认 | - | `ReactNode` | - | `1.0.0` |
+| closeIcon<Badge type='warning'>修改</Badge> | 关闭icon，`false`时不显示，非`false`展示默认 | `ReactNode \| boolean` | `true` | `1.0.0` |
 
 ## Supported API
 

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,32 @@ 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 +44,17 @@ 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
 
+:::warning由于重写了分页器，这个onChange不会触发分页.使用分页组件的onChange :::
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| pagination <Badge type='warning'>修改</Badge> | [分页组件api](/components/pagination) |  |  | `1.0.0` |
+| onChange <Badge type='warning'>修改</Badge> | 分页变化不会触发这个api |  |  | `1.0.0` |
+
 ## Supported API
 
 refer to [Table API](https://ant.design/components/table-cn#table)