Skip to content

Commit 85df8ae

Browse files
irisSongirisSong
authored
feat(dialog): support bottom close button (#1978)
* feat(dialog): support bottom close button * feat(dialog): 文档和demo更新 * docs(dialog): 文档更新
1 parent 10af427 commit 85df8ae

9 files changed

Lines changed: 51 additions & 56 deletions

File tree

‎src/packages/dialog/config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export type DialogConfigType = {
77
simple?: boolean
88
}
99

10-
export type DialogCloseIconPositionType = 'top-right' | 'top-left'
10+
export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom'
1111

1212
export interface DialogBasicProps extends BasicComponent {
1313
visible?: boolean
@@ -24,7 +24,7 @@ export interface DialogBasicProps extends BasicComponent {
2424
closeOnOverlayClick?: boolean
2525
footerDirection?: string
2626
lockScroll?: boolean
27-
closeIconPosition?: DialogCloseIconPositionType
27+
closeIconPosition?: DialogCloseIconPosition
2828
closeIcon?: boolean | ReactNode
2929
beforeClose?: () => boolean
3030
beforeCancel?: () => boolean

‎src/packages/dialog/demo.taro.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22
import Taro from '@tarojs/taro'
3-
import { ArrowCornerLeft } from '@nutui/icons-react-taro'
3+
import { Close } from '@nutui/icons-react-taro'
44
import { Dialog, Cell, Image } from '@/packages/nutui.react.taro'
55
import { useTranslate } from '@/sites/assets/locale/taro'
66
import Header from '@/sites/components/header'
@@ -44,7 +44,7 @@ const DialogDemo = () => {
4444
cancelText: '取消',
4545
header: '顶部带插图',
4646
closeIcon: '顶部带关闭按钮',
47-
customClose: '自定义顶部关闭按钮',
47+
customClose: '自定义底部关闭按钮',
4848
},
4949
'en-US': {
5050
basic: 'Basic Usage',
@@ -64,7 +64,7 @@ const DialogDemo = () => {
6464
cancelText: 'cancel',
6565
header: 'Top with illustration',
6666
closeIcon: 'Top with close button',
67-
customClose: 'Customize the top close button',
67+
customClose: 'Customize the bottom close button',
6868
},
6969
})
7070

@@ -227,14 +227,12 @@ const DialogDemo = () => {
227227
className="test-dialog"
228228
title={translated.customClose}
229229
visible={visible10}
230-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
231-
closeIconPosition="top-left"
230+
closeIcon={<Close width="24px" height="24px" />}
231+
closeIconPosition="bottom"
232232
onConfirm={() => setVisible10(false)}
233233
onCancel={() => setVisible10(false)}
234234
style={{
235-
'--nutui-dialog-close-top': '10px',
236-
'--nutui-dialog-close-left': '10px',
237-
'--nutui-dialog-close-color': 'red',
235+
'--nutui-dialog-close-color': '#FFFFFF',
238236
}}
239237
>
240238
{translated.content}

‎src/packages/dialog/demo.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react'
2-
import { ArrowCornerLeft } from '@nutui/icons-react'
2+
import { Close } from '@nutui/icons-react'
33
import { Dialog } from './dialog'
44
import Cell from '../cell'
55
import { useTranslate } from '@/sites/assets/locale'
@@ -46,7 +46,7 @@ const DialogDemo = () => {
4646
cancelText: '取消',
4747
header: '顶部带插图',
4848
closeIcon: '顶部带关闭按钮',
49-
customClose: '自定义顶部关闭按钮',
49+
customClose: '自定义底部关闭按钮',
5050
},
5151
'en-US': {
5252
funUse: 'Function use',
@@ -67,7 +67,7 @@ const DialogDemo = () => {
6767
cancelText: 'cancel',
6868
header: 'Top with illustration',
6969
closeIcon: 'Top with close button',
70-
customClose: 'Customize the top close button',
70+
customClose: 'Customize the bottom close button',
7171
},
7272
})
7373

@@ -299,14 +299,12 @@ const DialogDemo = () => {
299299
className="test-dialog"
300300
title={translated.customClose}
301301
visible={visible9}
302-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
303-
closeIconPosition="top-left"
302+
closeIcon={<Close width="24px" height="24px" />}
303+
closeIconPosition="bottom"
304304
onConfirm={() => setVisible9(false)}
305305
onCancel={() => setVisible9(false)}
306306
style={{
307-
'--nutui-dialog-close-top': '10px',
308-
'--nutui-dialog-close-left': '10px',
309-
'--nutui-dialog-close-color': 'red',
307+
'--nutui-dialog-close-color': '#FFFFFF',
310308
}}
311309
>
312310
{translated.content}

‎src/packages/dialog/dialog.scss‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
&-outer {
2020
position: fixed;
2121
max-height: 100%;
22-
overflow-y: auto;
2322
background-color: $white;
2423
transition:
2524
transform 0.2s,
@@ -54,6 +53,13 @@
5453
left: $dialog-close-left;
5554
}
5655

56+
&-bottom {
57+
top: initial;
58+
bottom: -56px;
59+
left: 50%;
60+
transform: translate(-50%);
61+
}
62+
5763
&:active {
5864
opacity: 0.7;
5965
}
@@ -79,6 +85,7 @@
7985
word-break: break-all;
8086
white-space: pre-wrap;
8187
text-align: $dialog-content-text-align;
88+
overflow-y: auto;
8289
}
8390

8491
&-footer {

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default App;
9494
```tsx
9595
import React, {useState} from "react";
9696
import { Cell,Dialog,Image } from '@nutui/nutui-react';
97-
import { ArrowCornerLeft } from '@nutui/icons-react'
97+
import { Close } from '@nutui/icons-react'
9898

9999
const App = () => {
100100
const [visible1, setVisible1] = useState(false);
@@ -174,23 +174,21 @@ const App = () => {
174174
{translated.content}
175175
</Dialog>
176176
<Cell
177-
title="Customize the top close button"
177+
title="Customize the bottom close button"
178178
onClick={() => {
179179
setVisible9(true)
180180
}}
181181
/>
182182
<Dialog
183183
className="test-dialog"
184-
title="Customize the top close button"
184+
title="Customize the bottom close button"
185185
visible={visible9}
186-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
187-
closeIconPosition="top-left"
186+
closeIcon={<Close width="24px" height="24px" />}
187+
closeIconPosition="bottom"
188188
onConfirm={() => setVisible9(false)}
189189
onCancel={() => setVisible9(false)}
190190
style={{
191-
'--nutui-dialog-close-top': '10px',
192-
'--nutui-dialog-close-left': '10px',
193-
'--nutui-dialog-close-color': 'red',
191+
'--nutui-dialog-close-color': '#FFFFFF',
194192
}}
195193
>
196194
{translated.content}
@@ -221,7 +219,7 @@ export default App;
221219
| hideCancelButton | Whether to hide the cancel button | `boolean` | `false` |
222220
| disableConfirmButton | Disable the OK button | `boolean` | `false` |
223221
| closeIcon | Close button | `boolean` \| `ReactNode` | `false` |
224-
| closeIconPosition | Close button position | `top-left` \| `top-right` | `top-right` |
222+
| closeIconPosition | Close button position | `top-left` \| `top-right` \| `bottom` | `top-right` |
225223
| closeOnOverlayClick | Click on whether to close the dialog box | `boolean` | `true` |
226224
| footerDirection | Use horizontal and vertical direction value selection horizontal、vertical | `string` | `horizontal` |
227225
| lockScroll | Whether the background is locked | `boolean` | `true` |

‎src/packages/dialog/doc.md‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default App;
9797
```tsx
9898
import React, {useState} from "react";
9999
import { Cell,Dialog,Image } from '@nutui/nutui-react';
100-
import { ArrowCornerLeft } from '@nutui/icons-react'
100+
import { Close } from '@nutui/icons-react'
101101

102102
const App = () => {
103103
const [visible1, setVisible1] = useState(false);
@@ -200,23 +200,21 @@ const App = () => {
200200
{translated.content}
201201
</Dialog>
202202
<Cell
203-
title="自定义顶部关闭按钮"
203+
title="自定义底部关闭按钮"
204204
onClick={() => {
205205
setVisible9(true)
206206
}}
207207
/>
208208
<Dialog
209209
className="test-dialog"
210-
title="自定义顶部关闭按钮"
210+
title="自定义底部关闭按钮"
211211
visible={visible9}
212-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
213-
closeIconPosition="top-left"
212+
closeIcon={<Close width="24px" height="24px" />}
213+
closeIconPosition="bottom"
214214
onConfirm={() => setVisible9(false)}
215215
onCancel={() => setVisible9(false)}
216216
style={{
217-
'--nutui-dialog-close-top': '10px',
218-
'--nutui-dialog-close-left': '10px',
219-
'--nutui-dialog-close-color': 'red',
217+
'--nutui-dialog-close-color': '#FFFFFF',
220218
}}
221219
>
222220
{translated.content}
@@ -247,7 +245,7 @@ export default App;
247245
| hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
248246
| disableConfirmButton | 禁用确定按钮 | `boolean` | `false` |
249247
| closeIcon | 关闭按钮 | `boolean` \| `ReactNode` | `false` |
250-
| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` |
248+
| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
251249
| closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | `true` |
252250
| footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | `horizontal` |
253251
| lockScroll | 背景是否锁定 | `boolean` | `true` |

‎src/packages/dialog/doc.taro.md‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default App;
5757
```tsx
5858
import React, {useState} from "react";
5959
import { Cell,Dialog,Image } from '@nutui/nutui-react-taro';
60-
import { ArrowCornerLeft } from '@nutui/icons-react-taro'
60+
import { Close } from '@nutui/icons-react-taro'
6161

6262
const App = () => {
6363
const [visible1, setVisible1] = useState(false)
@@ -186,23 +186,21 @@ const App = () => {
186186
{translated.content}
187187
</Dialog>
188188
<Cell
189-
title="自定义顶部关闭按钮"
189+
title="自定义底部关闭按钮"
190190
onClick={() => {
191191
setVisible9(true)
192192
}}
193193
/>
194194
<Dialog
195195
className="test-dialog"
196-
title="自定义顶部关闭按钮"
196+
title="自定义底部关闭按钮"
197197
visible={visible9}
198-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
199-
closeIconPosition="top-left"
198+
closeIcon={<Close width="24px" height="24px" />}
199+
closeIconPosition="bottom"
200200
onConfirm={() => setVisible9(false)}
201201
onCancel={() => setVisible9(false)}
202202
style={{
203-
'--nutui-dialog-close-top': '10px',
204-
'--nutui-dialog-close-left': '10px',
205-
'--nutui-dialog-close-color': 'red',
203+
'--nutui-dialog-close-color': '#FFFFFF',
206204
}}
207205
>
208206
{translated.content}
@@ -233,7 +231,7 @@ export default App;
233231
| hideCancelButton | 是否隐藏取消按钮 | `boolean` | `false` |
234232
| disableConfirmButton | 禁用确定按钮 | `boolean` | `false` |
235233
| closeIcon | 关闭按钮 | `boolean` \| `ReactNode` | `false` |
236-
| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` |
234+
| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
237235
| closeOnOverlayClick | 点击蒙层是否关闭对话框 | `boolean` | `true` |
238236
| footerDirection | 使用横纵方向 可选值 horizontal、vertical | `string` | `horizontal` |
239237
| lockScroll | 背景是否锁定 | `boolean` | `false` |

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default App;
9797
```tsx
9898
import React, {useState} from "react";
9999
import { Cell,Dialog,Image } from '@nutui/nutui-react';
100-
import { ArrowCornerLeft } from '@nutui/icons-react'
100+
import { Close } from '@nutui/icons-react'
101101

102102
const App = () => {
103103
const [visible1, setVisible1] = useState(false);
@@ -200,23 +200,21 @@ const App = () => {
200200
{translated.content}
201201
</Dialog>
202202
<Cell
203-
title="自定義頂部關閉按鈕"
203+
title="自定義底部關閉按鈕"
204204
onClick={() => {
205205
setVisible9(true)
206206
}}
207207
/>
208208
<Dialog
209209
className="test-dialog"
210-
title="自定義頂部關閉按鈕"
210+
title="自定義底部關閉按鈕"
211211
visible={visible9}
212-
closeIcon={<ArrowCornerLeft width="16px" height="16px" />}
213-
closeIconPosition="top-left"
212+
closeIcon={<Close width="24px" height="24px" />}
213+
closeIconPosition="bottom"
214214
onConfirm={() => setVisible9(false)}
215215
onCancel={() => setVisible9(false)}
216216
style={{
217-
'--nutui-dialog-close-top': '10px',
218-
'--nutui-dialog-close-left': '10px',
219-
'--nutui-dialog-close-color': 'red',
217+
'--nutui-dialog-close-color': '#FFFFFF',
220218
}}
221219
>
222220
{translated.content}
@@ -247,7 +245,7 @@ export default App;
247245
| hideCancelButton | 是否隱藏取消按鈕 | `boolean` | `false` |
248246
| disableConfirmButton | 禁用確定按鈕 | `boolean` | `false` |
249247
| closeIcon | 關閉按鈕 | `boolean` \| `ReactNode` | `false` |
250-
| closeIconPosition | 關閉按鈕位置 | `top-left` \| `top-right` | `top-right` |
248+
| closeIconPosition | 關閉按鈕位置 | `top-left` \| `top-right` \| `bottom` | `top-right` |
251249
| closeOnOverlayClick | 點擊蒙層是否關閉對話框 | `boolean` | `true` |
252250
| footerDirection | 使用橫縱方向 可選值 horizontal、vertical | `string` | `horizontal` |
253251
| lockScroll | 背景是否鎖定 | `boolean` | `true` |

‎src/packages/dialog/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Dialog } from './dialog'
22

33
export type {
44
DialogConfigType,
5-
DialogCloseIconPositionType,
5+
DialogCloseIconPosition,
66
DialogBasicProps,
77
DialogConfirmProps,
88
DialogReturnProps,

0 commit comments

Comments
 (0)