diff --git a/packages/bui-core/src/Dialog/Dialog.tsx b/packages/bui-core/src/Dialog/Dialog.tsx index 2bd57bcd..ce763e5d 100644 --- a/packages/bui-core/src/Dialog/Dialog.tsx +++ b/packages/bui-core/src/Dialog/Dialog.tsx @@ -20,6 +20,7 @@ const Dialog = React.forwardRef((props, ref) => { type, confirmText, cancelText, + showCancel = true, placeholder, InputProps, className, @@ -40,13 +41,15 @@ const Dialog = React.forwardRef((props, ref) => { }); const footerNode = (
- + {showCancel ? ( + + ) : null} + ); }; @@ -69,7 +72,7 @@ export default () => { const theme = useTheme(); const [dialog, contextHolder] = Dialog.useDialog(); - const handleClickConfirm = async () => { + const handleClickConfirm = async (showCancel) => { const res = await dialog({ header: '标题', message: '这是描述内容', @@ -97,6 +100,9 @@ export default () => { confirm + ); @@ -218,6 +224,16 @@ export default () => { > 自定义确认按钮文本 + ); @@ -278,14 +294,15 @@ export default () => { #### DialogOptions -| attribute | explain | type | Default value | -| ----------- | ----------------------- | ----------------------------------------- | ------------- | -| header | custom header | `React.ReactNode` | - | -| message | Custom message | `React.ReactNode` | - | -| confirmText | Confirm button copy | `React.ReactNode` | confirm | -| cancelText | Cancel button text | `React.ReactNode` | cancel | -| onConfirm | Confirm button callback | `(val?: string) => void \|Promise;` | - | -| onCancel | Cancel button callback | `() =>void \|Promise` | - | +| attribute | explain | type | Default value | +| ----------- | ------------------------------------ | ----------------------------------------- | ------------- | +| header | custom header | `React.ReactNode` | - | +| message | Custom message | `React.ReactNode` | - | +| confirmText | Confirm button copy | `React.ReactNode` | confirm | +| cancelText | Cancel button text | `React.ReactNode` | cancel | +| onConfirm | Confirm button callback | `(val?: string) => void \|Promise;` | - | +| onCancel | Cancel button callback | `() =>void \|Promise` | - | +| showCancel | Whether to display the cancel button | boolean | true | The value of ConfirmOptions is the same as that of DialogOptions diff --git a/packages/bui-core/src/Dialog/index.zh-CN.md b/packages/bui-core/src/Dialog/index.zh-CN.md index 57fc486f..4d5b9b5e 100644 --- a/packages/bui-core/src/Dialog/index.zh-CN.md +++ b/packages/bui-core/src/Dialog/index.zh-CN.md @@ -21,10 +21,11 @@ import { Stack, Button, Dialog, Toast } from '@bifrostui/react'; import React from 'react'; export default () => { - const handleClickConfirm = async () => { + const handleClickConfirm = async (showCancel) => { const res = await Dialog({ header: '标题', message: '这是描述内容', + showCancel, }); if (res) { Toast({ message: '点击了确认', position: 'bottom' }); @@ -47,6 +48,9 @@ export default () => { confirm + ); }; @@ -69,10 +73,11 @@ export default () => { const theme = useTheme(); const [dialog, contextHolder] = Dialog.useDialog(); - const handleClickConfirm = async () => { + const handleClickConfirm = async (showCancel) => { const res = await dialog({ header: '标题', message: '这是描述内容', + showCancel, }); if (res) { Toast({ message: '点击了确认', position: 'bottom' }); @@ -97,6 +102,9 @@ export default () => { confirm + ); @@ -218,6 +226,16 @@ export default () => { > 自定义确认按钮文本 + ); @@ -278,14 +296,15 @@ export default () => { #### DialogOptions -| 属性 | 说明 | 类型 | 默认值 | -| ----------- | ------------ | ------------------------------------------ | ------ | -| header | 自定义页头 | `React.ReactNode` | - | -| message | 自定义消息 | `React.ReactNode` | - | -| confirmText | 确认按钮文案 | `React.ReactNode` | 确认 | -| cancelText | 取消按钮文案 | `React.ReactNode` | 取消 | -| onConfirm | 确定按钮回调 | `(val?: string) => void \| Promise;` | - | -| onCancel | 取消按钮回调 | `() =>void \| Promise` | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----------- | ---------------- | ------------------------------------------ | ------ | +| header | 自定义页头 | `React.ReactNode` | - | +| message | 自定义消息 | `React.ReactNode` | - | +| confirmText | 确认按钮文案 | `React.ReactNode` | 确认 | +| cancelText | 取消按钮文案 | `React.ReactNode` | 取消 | +| onConfirm | 确定按钮回调 | `(val?: string) => void \| Promise;` | - | +| onCancel | 取消按钮回调 | `() =>void \| Promise` | - | +| showCancel | 是否展示取消按钮 | boolean | true | `ConfirmOptions`的取值同`DialogOptions`