From 4ca672e746ad9aca2e57914d8cf27ed6f8872dbb Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 4 Mar 2024 18:30:12 +0800 Subject: [PATCH 1/3] feat(dialog): support bottom close button --- src/packages/dialog/config.ts | 4 ++-- src/packages/dialog/demo.taro.tsx | 16 +++++++--------- src/packages/dialog/demo.tsx | 14 ++++++-------- src/packages/dialog/dialog.scss | 9 ++++++++- src/packages/dialog/doc.en-US.md | 16 ++++++++-------- src/packages/dialog/doc.md | 16 ++++++++-------- src/packages/dialog/doc.taro.md | 16 ++++++++-------- src/packages/dialog/doc.zh-TW.md | 14 ++++++-------- src/packages/dialog/index.ts | 2 +- 9 files changed, 54 insertions(+), 53 deletions(-) diff --git a/src/packages/dialog/config.ts b/src/packages/dialog/config.ts index 71e2bcfe30..a9400fb481 100644 --- a/src/packages/dialog/config.ts +++ b/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 diff --git a/src/packages/dialog/demo.taro.tsx b/src/packages/dialog/demo.taro.tsx index 9161d84089..34d2e5d669 100644 --- a/src/packages/dialog/demo.taro.tsx +++ b/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', }, }) @@ -226,15 +226,13 @@ const DialogDemo = () => { } - closeIconPosition="top-left" + visible={visible9} + closeIcon={} + 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} diff --git a/src/packages/dialog/demo.tsx b/src/packages/dialog/demo.tsx index a83959f7a7..0ffe1fe556 100644 --- a/src/packages/dialog/demo.tsx +++ b/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={} - closeIconPosition="top-left" + closeIcon={} + 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} diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss index f5d0a9fd70..d1d53d44af 100644 --- a/src/packages/dialog/dialog.scss +++ b/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 { diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md index 3958ed1dca..0141223915 100644 --- a/src/packages/dialog/doc.en-US.md +++ b/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} { setVisible9(true) }} /> } - closeIconPosition="top-left" + closeIcon={} + 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} @@ -232,6 +230,8 @@ export default App; | onClose | Turn off the callback, and the pop -up window will be triggered in any case | `() => void` | `-` | | onClick | Click yourself to call back | `() => void` | `-` | | onOverlayClick | Click Overlay | `() => void` | `-` | +| closeIconPosition | Close button position | `top-left` \| `top-right` | `top-right` | +| closeIcon | Close button | `boolean \| ReactNode` | `false` | It should be noted that for the Dialog created by instructive, ** will not perceive the re-rendering of the parent component and the update of the state in it**, so the following writing is completely wrong: diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md index d5c08d0e7e..4058ddf8ce 100644 --- a/src/packages/dialog/doc.md +++ b/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} { setVisible9(true) }} /> } - closeIconPosition="top-left" + closeIcon={} + 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} @@ -258,6 +256,8 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | +| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` | +| closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | 对于**指令式**创建出来的 Dialog，**并不会感知父组件的重渲染和其中 state 的更新**，因此下面这种写法是错误的： diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md index cf9be852d2..7a516e3e3e 100644 --- a/src/packages/dialog/doc.taro.md +++ b/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} { setVisible9(true) }} /> } - closeIconPosition="top-left" + closeIcon={} + 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} @@ -244,6 +242,8 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | +| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` | +| closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | ### Methods | 方法名 | 说明 | 类型 | diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md index fdeb06c506..df3931a649 100644 --- a/src/packages/dialog/doc.zh-TW.md +++ b/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} { setVisible9(true) }} /> } - closeIconPosition="top-left" + closeIcon={} + 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} diff --git a/src/packages/dialog/index.ts b/src/packages/dialog/index.ts index 0980b83a1c..d0a4c4a1ef 100644 --- a/src/packages/dialog/index.ts +++ b/src/packages/dialog/index.ts @@ -2,7 +2,7 @@ import { Dialog } from './dialog' export type { DialogConfigType, - DialogCloseIconPositionType, + DialogCloseIconPosition, DialogBasicProps, DialogConfirmProps, DialogReturnProps, From 09cc6b7b143d87b352884750e0eb37f1299751c4 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 4 Mar 2024 20:10:09 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(dialog):=20=E6=96=87=E6=A1=A3=E5=92=8C?= =?UTF-8?q?demo=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/dialog/demo.taro.tsx | 2 +- src/packages/dialog/doc.en-US.md | 2 +- src/packages/dialog/doc.md | 2 +- src/packages/dialog/doc.taro.md | 2 +- src/packages/dialog/doc.zh-TW.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/packages/dialog/demo.taro.tsx b/src/packages/dialog/demo.taro.tsx index 34d2e5d669..5c76d1dfa7 100644 --- a/src/packages/dialog/demo.taro.tsx +++ b/src/packages/dialog/demo.taro.tsx @@ -226,7 +226,7 @@ const DialogDemo = () => { } closeIconPosition="bottom" onConfirm={() => setVisible10(false)} diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md index 0141223915..608648dbc9 100644 --- a/src/packages/dialog/doc.en-US.md +++ b/src/packages/dialog/doc.en-US.md @@ -219,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` | diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md index 4058ddf8ce..68c75ac0b8 100644 --- a/src/packages/dialog/doc.md +++ b/src/packages/dialog/doc.md @@ -256,7 +256,7 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | -| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` | +| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` | | closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | 对于**指令式**创建出来的 Dialog，**并不会感知父组件的重渲染和其中 state 的更新**，因此下面这种写法是错误的： diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md index 7a516e3e3e..c797c42ad1 100644 --- a/src/packages/dialog/doc.taro.md +++ b/src/packages/dialog/doc.taro.md @@ -242,7 +242,7 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | -| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` | `top-right` | +| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` | | closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | ### Methods diff --git a/src/packages/dialog/doc.zh-TW.md b/src/packages/dialog/doc.zh-TW.md index df3931a649..6d474ef477 100644 --- a/src/packages/dialog/doc.zh-TW.md +++ b/src/packages/dialog/doc.zh-TW.md @@ -245,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` | From 7116b3fd18a884fd7eddfb8e4e5267cbf3b6358a Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 4 Mar 2024 20:13:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs(dialog):=20=E6=96=87=E6=A1=A3=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/dialog/doc.en-US.md | 2 -- src/packages/dialog/doc.md | 4 +--- src/packages/dialog/doc.taro.md | 4 +--- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/packages/dialog/doc.en-US.md b/src/packages/dialog/doc.en-US.md index 608648dbc9..94d603031f 100644 --- a/src/packages/dialog/doc.en-US.md +++ b/src/packages/dialog/doc.en-US.md @@ -230,8 +230,6 @@ export default App; | onClose | Turn off the callback, and the pop -up window will be triggered in any case | `() => void` | `-` | | onClick | Click yourself to call back | `() => void` | `-` | | onOverlayClick | Click Overlay | `() => void` | `-` | -| closeIconPosition | Close button position | `top-left` \| `top-right` | `top-right` | -| closeIcon | Close button | `boolean \| ReactNode` | `false` | It should be noted that for the Dialog created by instructive, ** will not perceive the re-rendering of the parent component and the update of the state in it**, so the following writing is completely wrong: diff --git a/src/packages/dialog/doc.md b/src/packages/dialog/doc.md index 68c75ac0b8..2644edeaef 100644 --- a/src/packages/dialog/doc.md +++ b/src/packages/dialog/doc.md @@ -245,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` | @@ -256,8 +256,6 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | -| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` | -| closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | 对于**指令式**创建出来的 Dialog，**并不会感知父组件的重渲染和其中 state 的更新**，因此下面这种写法是错误的： diff --git a/src/packages/dialog/doc.taro.md b/src/packages/dialog/doc.taro.md index c797c42ad1..1a501a340a 100644 --- a/src/packages/dialog/doc.taro.md +++ b/src/packages/dialog/doc.taro.md @@ -231,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` | @@ -242,8 +242,6 @@ export default App; | onClose | 关闭回调，任何情况关闭弹窗都会触发 | `() => void` | `-` | | onClick | 点击自身回调 | `() => void` | `-` | | onOverlayClick | 点击蒙层触发 | `() => void` | `-` | -| closeIconPosition | 关闭按钮位置 | `top-left` \| `top-right` \| `bottom` | `top-right` | -| closeIcon | 关闭按钮 | `boolean \| ReactNode` | `false` | ### Methods | 方法名 | 说明 | 类型 |