feat(dialog): support bottom close button

src/packages/dialog/config.ts

@@ -7,7 +7,7 @@ export type DialogConfigType = {
   simple?: boolean
 }
 
-export type DialogCloseIconPositionType = 'top-right' | 'top-left'
+export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom'
 
 export interface DialogBasicProps extends BasicComponent {
   visible?: boolean
@@ -24,7 +24,7 @@ export interface DialogBasicProps extends BasicComponent {
   closeOnOverlayClick?: boolean
   footerDirection?: string
   lockScroll?: boolean
-  closeIconPosition?: DialogCloseIconPositionType
+  closeIconPosition?: DialogCloseIconPosition
   closeIcon?: boolean | ReactNode
   beforeClose?: () => boolean
   beforeCancel?: () => boolean

src/packages/dialog/demo.taro.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
-import { ArrowCornerLeft } from '@nutui/icons-react-taro'
+import { Close } from '@nutui/icons-react-taro'
 import { Dialog, Cell, Image } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
@@ -44,7 +44,7 @@ const DialogDemo = () => {
       cancelText: '取消',
       header: '顶部带插图',
       closeIcon: '顶部带关闭按钮',
-      customClose: '自定义顶部关闭按钮',
+      customClose: '自定义底部关闭按钮',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -64,7 +64,7 @@ const DialogDemo = () => {
       cancelText: 'cancel',
       header: 'Top with illustration',
       closeIcon: 'Top with close button',
-      customClose: 'Customize the top close button',
+      customClose: 'Customize the bottom close button',
     },
   })
 
@@ -227,14 +227,12 @@ const DialogDemo = () => {
           className="test-dialog"
           title={translated.customClose}
           visible={visible10}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible10(false)}
           onCancel={() => setVisible10(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}

src/packages/dialog/demo.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ArrowCornerLeft } from '@nutui/icons-react'
+import { Close } from '@nutui/icons-react'
 import { Dialog } from './dialog'
 import Cell from '../cell'
 import { useTranslate } from '@/sites/assets/locale'
@@ -46,7 +46,7 @@ const DialogDemo = () => {
       cancelText: '取消',
       header: '顶部带插图',
       closeIcon: '顶部带关闭按钮',
-      customClose: '自定义顶部关闭按钮',
+      customClose: '自定义底部关闭按钮',
     },
     'en-US': {
       funUse: 'Function use',
@@ -67,7 +67,7 @@ const DialogDemo = () => {
       cancelText: 'cancel',
       header: 'Top with illustration',
       closeIcon: 'Top with close button',
-      customClose: 'Customize the top close button',
+      customClose: 'Customize the bottom close button',
     },
   })
 
@@ -299,14 +299,12 @@ const DialogDemo = () => {
           className="test-dialog"
           title={translated.customClose}
           visible={visible9}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible9(false)}
           onCancel={() => setVisible9(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}

src/packages/dialog/dialog.scss

@@ -19,7 +19,6 @@
   &-outer {
     position: fixed;
     max-height: 100%;
-    overflow-y: auto;
     background-color: $white;
     transition:
       transform 0.2s,
@@ -54,6 +53,13 @@
       left: $dialog-close-left;
     }
 
+    &-bottom {
+      top: initial;
+      bottom: -56px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
     &:active {
       opacity: 0.7;
     }
@@ -79,6 +85,7 @@
     word-break: break-all;
     white-space: pre-wrap;
     text-align: $dialog-content-text-align;
+    overflow-y: auto;
   }
 
   &-footer {

src/packages/dialog/doc.en-US.md

@@ -94,7 +94,7 @@ export default App;
 ```tsx
 import React, {useState} from "react";
 import { Cell,Dialog,Image } from '@nutui/nutui-react';
-import { ArrowCornerLeft } from '@nutui/icons-react'
+import { Close } from '@nutui/icons-react'
 
 const App = () => {
   const [visible1, setVisible1] = useState(false);
@@ -174,23 +174,21 @@ const App = () => {
           {translated.content}
         </Dialog>
         <Cell
-          title="Customize the top close button"
+          title="Customize the bottom close button"
           onClick={() => {
             setVisible9(true)
           }}
         />
         <Dialog
           className="test-dialog"
-          title="Customize the top close button"
+          title="Customize the bottom close button"
           visible={visible9}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible9(false)}
           onCancel={() => setVisible9(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}
@@ -221,7 +219,7 @@ export default App;
 | hideCancelButton | Whether to hide the cancel button | `boolean` | `false` |
 | disableConfirmButton | Disable the OK button | `boolean` | `false` |
 | closeIcon | Close button | `boolean` \| `ReactNode` | `false` |
-| closeIconPosition | Close button position | `top-left` \| `top-right` | `top-right` |
+| closeIconPosition | Close button position | `top-left` \| `top-right` \| `bottom` | `top-right` |
 | closeOnOverlayClick | Click on whether to close the dialog box | `boolean` | `true` |
 | footerDirection | Use horizontal and vertical direction value selection horizontal、vertical | `string` | `horizontal` |
 | lockScroll | Whether the background is locked | `boolean` | `true` |

src/packages/dialog/doc.md

@@ -97,7 +97,7 @@ export default App;
 ```tsx
 import React, {useState} from "react";
 import { Cell,Dialog,Image } from '@nutui/nutui-react';
-import { ArrowCornerLeft } from '@nutui/icons-react'
+import { Close } from '@nutui/icons-react'
 
 const App = () => {
   const [visible1, setVisible1] = useState(false);
@@ -200,23 +200,21 @@ const App = () => {
           {translated.content}
         </Dialog>
         <Cell
-          title="自定义顶部关闭按钮"
+          title="自定义底部关闭按钮"
           onClick={() => {
             setVisible9(true)
           }}
         />
         <Dialog
           className="test-dialog"
-          title="自定义顶部关闭按钮"
+          title="自定义底部关闭按钮"
           visible={visible9}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible9(false)}
           onCancel={() => setVisible9(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}
@@ -247,7 +245,7 @@ export default App;
 | hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
 | disableConfirmButton | 禁用确定按钮 | `boolean` | `false` |
 | closeIcon | 关闭按钮 | `boolean` \| `ReactNode` | `false` |
-| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` |
+| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
 | closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | `true` |
 | footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | `horizontal` |
 | lockScroll | 背景是否锁定 | `boolean` | `true` |

src/packages/dialog/doc.taro.md

@@ -57,7 +57,7 @@ export default App;
 ```tsx
 import React, {useState} from "react";
 import { Cell,Dialog,Image } from '@nutui/nutui-react-taro';
-import { ArrowCornerLeft } from '@nutui/icons-react-taro'
+import { Close } from '@nutui/icons-react-taro'
 
 const App = () => {
   const [visible1, setVisible1] = useState(false)
@@ -186,23 +186,21 @@ const App = () => {
           {translated.content}
         </Dialog>
         <Cell
-          title="自定义顶部关闭按钮"
+          title="自定义底部关闭按钮"
           onClick={() => {
             setVisible9(true)
           }}
         />
         <Dialog
           className="test-dialog"
-          title="自定义顶部关闭按钮"
+          title="自定义底部关闭按钮"
           visible={visible9}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible9(false)}
           onCancel={() => setVisible9(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}
@@ -233,7 +231,7 @@ export default App;
 | hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
 | disableConfirmButton | 禁用确定按钮 | `boolean` | `false` |
 | closeIcon | 关闭按钮 | `boolean` \| `ReactNode` | `false` |
-| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` |
+| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
 | closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | `true` |
 | footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | `horizontal` |
 | lockScroll | 背景是否锁定 | `boolean` | `false` |

src/packages/dialog/doc.zh-TW.md

@@ -97,7 +97,7 @@ export default App;
 ```tsx
 import React, {useState} from "react";
 import { Cell,Dialog,Image } from '@nutui/nutui-react';
-import { ArrowCornerLeft } from '@nutui/icons-react'
+import { Close } from '@nutui/icons-react'
 
 const App = () => {
   const [visible1, setVisible1] = useState(false);
@@ -200,23 +200,21 @@ const App = () => {
           {translated.content}
         </Dialog>
         <Cell
-          title="自定義頂部關閉按鈕"
+          title="自定義底部關閉按鈕"
           onClick={() => {
             setVisible9(true)
           }}
         />
         <Dialog
           className="test-dialog"
-          title="自定義頂部關閉按鈕"
+          title="自定義底部關閉按鈕"
           visible={visible9}
-          closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
-          closeIconPosition="top-left"
+          closeIcon={<Close width="24px" height="24px" />}
+          closeIconPosition="bottom"
           onConfirm={() => setVisible9(false)}
           onCancel={() => setVisible9(false)}
           style={{
-            '--nutui-dialog-close-top': '10px',
-            '--nutui-dialog-close-left': '10px',
-            '--nutui-dialog-close-color': 'red',
+            '--nutui-dialog-close-color': '#FFFFFF',
           }}
         >
           {translated.content}
@@ -247,7 +245,7 @@ export default App;
 | hideCancelButton | 是否隱藏取消按鈕 | `boolean` | `false` |
 | disableConfirmButton | 禁用確定按鈕 | `boolean` | `false` |
 | closeIcon | 關閉按鈕 | `boolean` \| `ReactNode` | `false` |
-| closeIconPosition | 關閉按鈕位置 | `top-left` \| `top-right` | `top-right` |
+| closeIconPosition | 關閉按鈕位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
 | closeOnOverlayClick | 點擊蒙層是否關閉對話框 | `boolean` | `true` |
 | footerDirection | 使用橫縱方向 可選值 horizontal、vertical | `string` | `horizontal` |
 | lockScroll | 背景是否鎖定 | `boolean` | `true` |

src/packages/dialog/index.ts

@@ -2,7 +2,7 @@ import { Dialog } from './dialog'
 
 export type {
   DialogConfigType,
-  DialogCloseIconPositionType,
+  DialogCloseIconPosition,
   DialogBasicProps,
   DialogConfirmProps,
   DialogReturnProps,