docs:Add connectModal API title and onCancel explain (#492)

* feat: add connectModal API explain * feat: add onCancel type * feat: modify changeset * feat: modify translate * feat: specification content * feat: modify content * Update interface.ts --------- Co-authored-by: thinkasany <[email protected]>
ant-design · Jan 16, 2024 · 0eadb8b · 0eadb8b
1 parent 8e5f8b9
commit 0eadb8b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/hip-bags-listen.md b/.changeset/hip-bags-listen.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+docs：Add connectModal API `title` and `onCancel` explain
diff --git a/packages/web3/src/connect-modal/index.md b/packages/web3/src/connect-modal/index.md
@@ -40,7 +40,9 @@ The connection wallet popup, used with [ConnectButton](../connect-button/index.m
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| title | Custom connect modal title | `React.ReactNode` | - | - |
 | onWalletSelected | Callback when the wallet is selected | `(wallet: Wallet) => void` | - | - |
+| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | `(e:React.SyntheticEvent) => void` | - | - |
 | footer | Custom footer | `React.ReactNode` | - | - |
 | walletList | Wallet list | `Wallet[]` | - | - |
 | groupOrder | Wallet group sorting function | `(a: string, b: string) => number` | - | - |

diff --git a/packages/web3/src/connect-modal/index.tsx b/packages/web3/src/connect-modal/index.tsx
@@ -14,7 +14,7 @@ export const ConnectModal: React.FC<ConnectModalProps> & {
   ModalPanel: typeof ModalPanel;
 } = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
-  const { title, open, footer, onWalletSelected, className, mode, ...restProps } = props;
+  const { title, footer, open, className, mode, rootClassName, onCancel, ...restProps } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const { isSimple } = useMode(mode);
@@ -29,10 +29,10 @@ export const ConnectModal: React.FC<ConnectModalProps> & {
       width={isSimple ? 380 : 737}
       {...restProps}
       className={classNames(prefixCls, className, hashId)}
-      rootClassName={classNames(`${prefixCls}-root`, props?.rootClassName)}
+      rootClassName={classNames(`${prefixCls}-root`, rootClassName)}
       open={open}
       onCancel={(e) => {
-        props?.onCancel?.(e);
+        onCancel?.(e);
       }}
     >
       <ModalPanel {...props} />

diff --git a/packages/web3/src/connect-modal/index.zh-CN.md b/packages/web3/src/connect-modal/index.zh-CN.md
@@ -40,7 +40,9 @@ order: 2
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| title | 自定义连接弹窗标题 | `React.ReactNode` | - | - |
 | onWalletSelected | 选中钱包回调 | `(wallet: Wallet) => void` | - | - |
+| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | `(e:React.SyntheticEvent) => void` | - | - |
 | footer | 自定义 footer | `React.ReactNode` | - | - |
 | walletList | 钱包列表 | [Wallet](./types#wallet)\[\] | - | - |
 | groupOrder | 钱包分组排序函数 | `(a: string, b: string) => number` | - | - |