doc: modify doc for tabs, radio, tooltip, typograph

AElfProject · Mar 14, 2024 · 973dedf · 973dedf
1 parent 438c141
commit 973dedf
Show file tree

Hide file tree

Showing 19 changed files with 307 additions and 123 deletions.
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -39,29 +39,28 @@
     "build": "father build"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.18.2",
     "@aelf-design/common": "workspace:*",
     "@aelf-design/internal-icons": "workspace:*",
+    "@ant-design/cssinjs": "^1.18.2",
     "@ctrl/tinycolor": "^4.0.2",
     "antd": "^5.12.4",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
-    "swiper": "^11.0.5",
     "dayjs": "^1.11.10",
-    "ahooks": "^3.7.10",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
+    "@aws-sdk/client-cognito-identity": "^3.410.0",
+    "@aws-sdk/client-s3": "^3.410.0",
+    "@aws-sdk/credential-provider-cognito-identity": "^3.410.0",
+    "@aws-sdk/lib-storage": "^3.412.0",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
-    "father": "^4.3.8",
-    "typescript": "^5.3.3",
     "antd-mobile": "^5.34.0",
     "antd-style": "^3.5.2",
-    "@aws-sdk/client-cognito-identity": "^3.410.0",
-    "@aws-sdk/client-s3": "^3.410.0",
-    "@aws-sdk/credential-provider-cognito-identity": "^3.410.0",
-    "@aws-sdk/lib-storage": "^3.412.0"
+    "father": "^4.3.8",
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "antd": ">=5.0.0",

diff --git a/packages/component/src/Address/index.md b/packages/component/src/Address/index.md
@@ -51,14 +51,14 @@ group:
 ## API
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- | --- |
-| address | hash地址 | `string` | - | `1.0.0` |
+| --- | --- | --- | --- | --- |
+| address | hash地址 | `string` | - | `1.0.0`&nbsp; |
 | chain | 主侧链信息 | `AELF \| tDVV \| tDVW` | `AELF` | `1.0.0` |
 | preLen | ...之前保留多少位 | `number` | `0` | `1.0.0` |
 | endLen | ...之后保留多少位 | `number` | `0` | `1.0.0` |
 | hasCopy | 是否展示复制按钮 | `boolean` | `true` | `1.0.0` |
 | addressClickCallback | 点击hash地址回调函数 | `(originAddress?: string,finalAddress?: string,e?: React.MouseEvent<HTMLElement>) => void` | - | `1.0.0` |
 | className | 设置最外层样式 | `string` | - | `1.0.0` |
-| size | 设置元素大小 | `small \| default \| large \| ultra` <br/>`small`: font-size:12px <br/>`default`: font-size:14px <br/>`large`: font-size:16px <br/>`ultra`: font-size:20px | `default` | - | `1.0.0` |
+| size | 设置元素大小 | `small \| default \| large \| ultra` <br/>`small`: font-size:12px <br/>`default`: font-size:14px <br/>`large`: font-size:16px <br/>`ultra`: font-size:20px | `default`&nbsp; | `1.0.0` |
 | ignorePrefixSuffix | 忽略添加前后缀 | `boolean` | `false` | `1.0.0` |
 | ignoreEvent | 忽略绑定点击事件 | `boolean` | `false` | `1.0.0` |
diff --git a/packages/component/src/Carousel/index.md b/packages/component/src/Carousel/index.md
@@ -18,7 +18,7 @@ group:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| data | 轮播图数据，URL是必传的 | `ICarouselSlideItem { url: string [key: string]: any}[]` | `{ headClip: 6, tailClip: 4 }` | `1.0.0` |
+| data | 轮播图数据，URL是必传的 | `ICarouselSlideItem { url: string [key: string]: any}[]` | `{ headClip: 6, tailClip: 4 }` | `1.0.0`&nbsp; |
 | 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` |
diff --git a/packages/component/src/Loading/demos/basic.tsx b/packages/component/src/Loading/demos/basic.tsx
@@ -14,10 +14,7 @@ export default function LoadingExample() {
   return (
     <>
       <Button onClick={onClickHandler}>open loading</Button>
-      <Loading
-        open={openLoading}
-        content={<div className="flex items-center justify-center">I am loading...</div>}
-      />
+      <Loading open={openLoading} content={<div>I am loading......</div>} />
     </>
   );
 }
diff --git a/packages/component/src/Pagination/demos/basic.tsx b/packages/component/src/Pagination/demos/basic.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Pagination } from 'aelf-design';
-import { Row, Space } from 'antd';
+import { Space } from 'antd';
 
 function Demo() {
   return (

diff --git a/packages/component/src/Pagination/index.md b/packages/component/src/Pagination/index.md
@@ -7,36 +7,36 @@ group:
 
 # Pagination
 
-1. 调整了样式
-2. 定制了 上一页/上一页 icon
-3. 固定文案：Records 10 Records、First、Last
+<Badge type='success'>aelf-design</Badge> aelf-design own component
 
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## 组件 Token
-
-customToken
-
-```json
-customPagination: {
-  colorTextSecondary: isDarkMode ? '#8C8C8C' : '#808080',
-  colorBgHover: isDarkMode ? '#212121' : '#F8F8F8',
-  colorDownArrow: isDarkMode ? '#FFFFFF' : '#101114',
-},
+## Token
+
+```js
+<AELFDProvider
+  customToken={{
+    customAddress:{
+      colorTextSecondary: isDarkMode ? '#8C8C8C' : '#808080',
+      colorBgHover: isDarkMode ? '#212121' : '#F8F8F8',
+      colorDownArrow: isDarkMode ? '#FFFFFF' : '#101114',
+    }
+  }}
+>
 ```
 
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| current | 当前页数 | number | - | - |
-| pageSize | 每页条数 | number | 10 | - |
-| defaultCurrent | 默认的当前页数 | number | 1 | - |
-| defaultPageSize | 默认的每页条数 | number | 10 | - |
-| hideOnSinglePage | 只有一页时是否隐藏分页器。根据options最小值判断 | Boolean | false | - |
-| total | 数据总数 | number | - | - |
-| showSizeChanger | 是否显示pageSize切换 | Boolean | true | - |
-| pageChange | 页码改变的回调，参数是改变后的页码 | function(page) | - | - |
-| pageSizeChange | pageSize 改变的回调，参数是改变后的页码及每页条数。因为这里默认处理当sizeChange的时候，页码重置为1，所以一起返回了 | function(current, size) | - | - |
+| current | 当前页数 | `number` | - | `1.0.0` |
+| 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` |
+| pageChange | 页码改变的回调，参数是改变后的页码 | `function(page)` | - | `1.0.0` |
+| pageSizeChange | pageSize 改变的回调，参数是改变后的页码及每页条数。因为这里默认处理当sizeChange的时候，页码重置为1，所以一起返回了 | `function(current, size)` | - | `1.0.0`&nbsp; |
diff --git a/packages/component/src/Radio/index.md b/packages/component/src/Radio/index.md
@@ -7,21 +7,27 @@ group:
 
 # Radio
 
-1. 定制了样式
-2. 可自定义 圆点样式
-
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## 组件 token
-
-```json
-customRadio: {
-  dotColor: isDarkMode ? '#1A1A1A' : '#FFFFFF',
-},
+## Token
+
+```js
+<AELFDProvider
+  customToken={{
+    customRadio:{
+      // background color of dot
+      dotColor: isDarkMode ? '#1A1A1A' : '#FFFFFF',
+    }
+  }}
+>
 ```
 
-## API
+## Supported Token
+
+refer to [Radio Token](https://ant.design/components/radio-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+
+## Supported API
 
-参考 antd
+refer to [Radio API](https://ant.design/components/radio-cn#api)
diff --git a/packages/component/src/RichProgress/index.tsx b/packages/component/src/RichProgress/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { ProgressErrorIcon, ProgressSuccessIcon } from '@aelf-design/internal-icons';
-import { useResponsive } from 'ahooks/es/useResponsive';
+import { useResponsive } from 'antd-style';
 
 import Progress from '../Progress';
 import useStyles from './style';

diff --git a/packages/component/src/Search/index.md b/packages/component/src/Search/index.md
@@ -33,7 +33,7 @@ group:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| inputSize | 设置搜索框大小 | `small \| middle` | `middle` | `1.0.0` |
+| inputSize | 设置搜索框大小 | `small \| middle` | `middle` | `1.0.0`&nbsp; |
 | dropdownSize | 设置搜索框下拉筛选菜单大小 | `small \| medium \| default \| large` | `default` | `1.0.0` |
 | filterItems | 下拉筛选菜单内容 | [FilterItemType[]](#filteritemtype) | - | `1.0.0` |
 | prefixWidth | 筛选区域元素宽度 | `string \| number` | `auto` | `1.0.0` |

diff --git a/packages/component/src/Tabs/demos/basic.tsx b/packages/component/src/Tabs/demos/basic.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { DownArrowIcon } from '@aelf-design/internal-icons';
-import { AndroidOutlined, SearchOutlined } from '@ant-design/icons';
 import { Tabs } from 'aelf-design';
 import { Space } from 'antd';
 
@@ -9,7 +8,7 @@ const tabItems = [
     key: '1',
     label: 'Tab 1',
     children: 'Content of Tab Pane 1',
-    icon: <SearchOutlined />,
+    icon: <DownArrowIcon />,
   },
   {
     key: '2',
@@ -21,7 +20,7 @@ const tabItems = [
     key: '3',
     label: 'Tabxxxxxx 3',
     children: 'Content of Tab Pane 3',
-    icon: <SearchOutlined />,
+    icon: <DownArrowIcon />,
   },
 ];
 const App: React.FC = () => {
@@ -30,9 +29,9 @@ const App: React.FC = () => {
       <Tabs defaultActiveKey="1" items={tabItems} />
       <Tabs
         size="small"
-        defaultActiveKey="1"
+        defaultActiveKey="3"
         items={tabItems}
-        indicatorSize={(origin) => origin - 26}
+        indicator={{ size: (origin) => origin - 20 }}
       />
     </Space>
   );

diff --git a/packages/component/src/Tabs/index.md b/packages/component/src/Tabs/index.md
@@ -7,27 +7,39 @@ group:
 
 # Tabs
 
-1. 调整了样式
-2. 修改 size props, 提供middle 和small 两种大小
-3. 删除 tabBarGutter： tabs 之间的间隙
+1. customize style
+2. delete `size` props, and provide `middle`,`small` size
+3. delete `tabBarGutter`: gap between tabs
 
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## 组件 token
-
-```json
-Tabs: {
-    // 标准大小横向标签页标签内间距
-    horizontalItemPadding: '17px 16px',
-    // 小号横向标签页标签内间距
-    horizontalItemPaddingSM: '13px 10px',
- },
+## Token
+
+```js
+<AELFDProvider theme={{
+  components:{
+    Tabs: {
+      // padding of standard tabs
+      horizontalItemPadding: '17px 16px',
+      // padding of small tabs
+      horizontalItemPaddingSM: '13px 10px',
+    },
+  }
+}}>
 ```
 
+## Supported Token
+
+refer to [Tabs Token](https://ant.design/components/tabs-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token)
+
 ## API
 
-| Property | Description                   | Type              | Default  | Version |
-| -------- | ----------------------------- | ----------------- | -------- | ------- |
-| size     | 提供 middle 和 small 两种大小 | `middle \| small` | `middle` | -       |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| size<Badge type='warning'>修改</Badge> | 提供 middle 和 small 两种大小 | `middle \| small` | `middle` | `1.0.0` |
+
+## Supported API
+
+refer to [Tabs API](https://ant.design/components/tabs-cn#api)
diff --git a/packages/component/src/ToolTip/demos/basic.tsx b/packages/component/src/ToolTip/demos/basic.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Button, ToolTip } from 'aelf-design';
-import { Space } from 'antd';
 
 const text = (
   <span>
@@ -9,9 +8,24 @@ const text = (
   </span>
 );
 
-function Demo() {
-  return (
-    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+const buttonWidth = 100;
+
+const App: React.FC = () => (
+  <div
+    className="demo"
+    style={{
+      padding: 200,
+    }}
+  >
+    <div
+      style={{
+        width: buttonWidth,
+        marginInlineStart: buttonWidth,
+        display: 'flex',
+        gap: 10,
+        whiteSpace: 'nowrap',
+      }}
+    >
       <ToolTip placement="topLeft" open={true} title={text}>
         <Button>TL</Button>
       </ToolTip>
@@ -21,8 +35,66 @@ function Demo() {
       <ToolTip placement="topRight" title={text}>
         <Button>TR</Button>
       </ToolTip>
-    </Space>
-  );
-}
+    </div>
+    <div
+      style={{
+        width: buttonWidth,
+        display: 'flex',
+        gap: 10,
+        flexDirection: 'column',
+        float: 'inline-start',
+      }}
+    >
+      <ToolTip placement="leftTop" title={text}>
+        <Button>LT</Button>
+      </ToolTip>
+      <ToolTip placement="left" title={text}>
+        <Button>Left</Button>
+      </ToolTip>
+      <ToolTip placement="leftBottom" title={text}>
+        <Button>LB</Button>
+      </ToolTip>
+    </div>
+    <div
+      style={{
+        width: buttonWidth,
+        display: 'flex',
+        gap: 10,
+        flexDirection: 'column',
+        marginInlineStart: buttonWidth * 4 + 24,
+      }}
+    >
+      <ToolTip placement="rightTop" open={true} title={text}>
+        <Button>RT</Button>
+      </ToolTip>
+      <ToolTip placement="right" title={text}>
+        <Button>Right</Button>
+      </ToolTip>
+      <ToolTip placement="rightBottom" title={text}>
+        <Button>RB</Button>
+      </ToolTip>
+    </div>
+    <div
+      style={{
+        marginInlineStart: buttonWidth,
+        clear: 'both',
+        width: buttonWidth,
+        display: 'flex',
+        gap: 10,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <ToolTip placement="bottomLeft" title={text}>
+        <Button>BL</Button>
+      </ToolTip>
+      <ToolTip placement="bottom" title={text}>
+        <Button>Bottom</Button>
+      </ToolTip>
+      <ToolTip placement="bottomRight" title={text}>
+        <Button>BR</Button>
+      </ToolTip>
+    </div>
+  </div>
+);
 
-export default Demo;
+export default App;