From d55228ec17cc1fdda57ab1a0a0a7953df6d7e06c Mon Sep 17 00:00:00 2001 From: aelf-lxy Date: Fri, 8 Mar 2024 18:12:31 +0800 Subject: [PATCH] doc: modify doc for button, collapse --- .eslintrc | 5 +- packages/component/src/Button/demos/basic.tsx | 30 +-------- .../component/src/Button/demos/debounce.tsx | 11 ++-- packages/component/src/Button/demos/size.tsx | 20 ++++++ packages/component/src/Button/demos/type.tsx | 65 +++++++++++++++++++ packages/component/src/Button/index.md | 40 ++++++++---- packages/component/src/Button/index.tsx | 10 +-- packages/component/src/Collapse/index.md | 47 ++++++++++---- 8 files changed, 160 insertions(+), 68 deletions(-) create mode 100644 packages/component/src/Button/demos/size.tsx create mode 100644 packages/component/src/Button/demos/type.tsx diff --git a/.eslintrc b/.eslintrc index 1d027c0..03f44b0 100755 --- a/.eslintrc +++ b/.eslintrc @@ -34,9 +34,6 @@ "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/no-unused-vars": "warn", - "@typescript-eslint/no-explicit-any": "off", - "tailwindcss/classnames-order": "warn", - "tailwindcss/no-custom-classname": "warn", - "tailwindcss/no-contradicting-classname": "error" + "@typescript-eslint/no-explicit-any": "off" } } diff --git a/packages/component/src/Button/demos/basic.tsx b/packages/component/src/Button/demos/basic.tsx index 5fd422b..0f64eb8 100644 --- a/packages/component/src/Button/demos/basic.tsx +++ b/packages/component/src/Button/demos/basic.tsx @@ -1,38 +1,10 @@ import React from 'react'; import { Button } from 'aelf-design'; -import { Space } from 'antd'; const App: React.FC = () => { return (
- - - - - - - - +
); }; diff --git a/packages/component/src/Button/demos/debounce.tsx b/packages/component/src/Button/demos/debounce.tsx index 7104da5..6da2250 100644 --- a/packages/component/src/Button/demos/debounce.tsx +++ b/packages/component/src/Button/demos/debounce.tsx @@ -1,19 +1,22 @@ -import React from 'react'; +import React, { useCallback, useState } from 'react'; import { Button } from 'aelf-design'; const App: React.FC = () => { + const [count, setCount] = useState(0); + return (
+

current count: {count}

); }; diff --git a/packages/component/src/Button/demos/size.tsx b/packages/component/src/Button/demos/size.tsx new file mode 100644 index 0000000..25c6643 --- /dev/null +++ b/packages/component/src/Button/demos/size.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Button } from 'aelf-design'; +import { Space } from 'antd'; + +const App: React.FC = () => { + return ( +
+ + + + + + + + +
+ ); +}; + +export default App; diff --git a/packages/component/src/Button/demos/type.tsx b/packages/component/src/Button/demos/type.tsx new file mode 100644 index 0000000..b2f63e3 --- /dev/null +++ b/packages/component/src/Button/demos/type.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { QueryIcon } from '@aelf-design/internal-icons'; +import { Button } from 'aelf-design'; +import { Space } from 'antd'; + +const App: React.FC = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default App; diff --git a/packages/component/src/Button/index.md b/packages/component/src/Button/index.md index 73a60f1..b11ada1 100644 --- a/packages/component/src/Button/index.md +++ b/packages/component/src/Button/index.md @@ -7,31 +7,47 @@ group: # Button -1. 调整 size props -2. 新增 millisecondOfThrottle props +1. adjust props: **size** +2. add new props: **millisecondOfDebounce** ## Basic Usage +## Size + + + +## Type + + + ## debounce button -## 组件 Token - -customToken +## Token -```json -customButton: { - borderRadiusDefault?: string // 'mini' | 'small' 号按钮的圆角值 - borderRadiusLarge?: string // 'medium' | 'large' | 'ultra'号按钮的圆角值 -} +```js + ``` +## Supported Token + +refer to [Button Token](https://ant.design/components/button-cn/#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token) + ## API | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| size | 设置按钮 height | `mini \| small \| medium \| large \| ultra` | large | - | -| millisecondOfThrottle | 等待时间，单位为毫秒 | number | 0 | - | +| size修改 | 设置按钮 height | `mini \| small \| medium \| large \| ultra` | `large` | `1.0.0` | +| millisecondOfDebounce新增 | 等待时间，单位为毫秒 | `number` | `0` | `1.0.0` | + +## Supported API + +refer to [Button API](https://ant.design/components/button-cn#api) diff --git a/packages/component/src/Button/index.tsx b/packages/component/src/Button/index.tsx index b4488cd..451c293 100644 --- a/packages/component/src/Button/index.tsx +++ b/packages/component/src/Button/index.tsx @@ -8,10 +8,10 @@ export type ButtonSizeType = 'mini' | 'small' | 'medium' | 'large' | 'ultra'; export interface IButtonProps extends Omit { size?: ButtonSizeType; onClick?: React.MouseEventHandler; - millisecondOfThrottle?: number; + millisecondOfDebounce?: number; } -function Button({ size = 'large', className, millisecondOfThrottle = 0, ...rest }: IButtonProps) { +function Button({ size = 'large', className, millisecondOfDebounce = 0, ...rest }: IButtonProps) { const { styles: st, cx } = useStyles({ size }); const buttonClickHandler = debounce( @@ -20,10 +20,10 @@ function Button({ size = 'large', className, millisecondOfThrottle = 0, ...rest rest.onClick(e); } }, - millisecondOfThrottle, + millisecondOfDebounce, { - leading: true, - trailing: false, + leading: false, + trailing: true, }, ); return ( diff --git a/packages/component/src/Collapse/index.md b/packages/component/src/Collapse/index.md index 72066a0..7edca7b 100644 --- a/packages/component/src/Collapse/index.md +++ b/packages/component/src/Collapse/index.md @@ -7,27 +7,46 @@ group: # Collapse -1. 定制了 expandIcon props -2. 定制了 expandIconPosition props +1. customize expandIcon props +2. customize expandIconPosition props ## Basic Usage -## 组件 Token - -```json -Collapse: { - // 折叠面板头部背景 - headerBg: appearance === 'dark' ? '#1A1A1A' : '#FFFFFF', - // 折叠面板内容内部边距 - contentPadding: '16px 24px', - // 折叠面板头部内边距 - headerPadding: '16px 24px', - }, +## Token + +```js + ``` +## Supported Token + +refer to [Collapse Token](https://ant.design/components/collapse-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-token) + ## API | Property | Description | Type | Default | Version | -| -------- | ----------- | ---- | ------- | ------- | +| --- | --- | --- | --- | --- | +| expandIcon删除 | 自定义切换图标 | `(panelProps) => ReactNode` | `1.0.0` | +| expandIconPosition删除 | 设置图标位置 | `number` | `start \| end` | `1.0.0` | + +## Supported API + +refer to [Collapse API](https://ant.design/components/collapse-cn#api)