From 455ac0be03d58b3dcb0f3e8060c2751f0494f3ab Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 27 Mar 2025 15:28:28 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20popover=20=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E6=B6=88=E5=A4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popover/demos/h5/demo4.tsx | 22 ++++----- src/packages/popover/popover.scss | 64 ++++++++++++------------- src/packages/popover/popover.tsx | 30 +++++------- src/packages/popup/popup.scss | 6 +-- src/styles/variables.scss | 7 +-- 5 files changed, 61 insertions(+), 68 deletions(-) diff --git a/src/packages/popover/demos/h5/demo4.tsx b/src/packages/popover/demos/h5/demo4.tsx index d75b9bb232..6a5780e4b7 100644 --- a/src/packages/popover/demos/h5/demo4.tsx +++ b/src/packages/popover/demos/h5/demo4.tsx @@ -4,28 +4,28 @@ import { Cell, Picker, PickerOnChangeCallbackParameter, + FullPosition, } from '@nutui/nutui-react' const Demo4 = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) - const [curPostion, setCurPostion] = useState('') + const [curPostion, setCurPostion] = useState('left') const columns = [ [ - { label: 'top', value: 'top' }, - { label: 'top-start', value: 'top-start' }, - { label: 'top-end', value: 'top-end' }, + { label: 'top-left', value: 'top-left' }, + { label: 'top-right', value: 'top-right' }, { label: 'right', value: 'right' }, - { label: 'right-start', value: 'right-start' }, - { label: 'right-end', value: 'right-end' }, + { label: 'right-top', value: 'right-top' }, + { label: 'right-bottom', value: 'right-bottom' }, { label: 'bottom', value: 'bottom' }, - { label: 'bottom-start', value: 'bottom-start' }, - { label: 'bottom-end', value: 'bottom-end' }, + { label: 'bottom-left', value: 'bottom-left' }, + { label: 'bottom-right', value: 'bottom-right' }, { label: 'left', value: 'left' }, - { label: 'left-start', value: 'left-start' }, - { label: 'left-end', value: 'left-end' }, + { label: 'left-top', value: 'left-top' }, + { label: 'left-bottom', value: 'left-bottom' }, ], ] const positionList = [ @@ -62,7 +62,7 @@ const Demo4 = () => { }} onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => { if (selectedOptions[0]?.value) { - setCurPostion(selectedOptions[0].value as string) + setCurPostion(selectedOptions[0].value as FullPosition) } }} onClose={() => { diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 5b597c97a7..744225ca60 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -32,13 +32,13 @@ transform: rotate(90deg) translateY(-50%); } - &.nut-popover-arrow-left-start { + &.nut-popover-arrow-left-top { top: 16px; right: -8px; transform: rotate(90deg) translateY(0%); } - &.nut-popover-arrow-left-end { + &.nut-popover-arrow-left-bottom { bottom: 16px; right: -8px; transform: rotate(90deg) translateY(0%); @@ -53,13 +53,13 @@ transform: rotate(-90deg) translateY(-50%); } - &.nut-popover-arrow-right-start { + &.nut-popover-arrow-right-top { top: 16px; left: -8px; transform: rotate(-90deg) translateY(0%); } - &.nut-popover-arrow-right-end { + &.nut-popover-arrow-right-bottom { bottom: 16px; left: -8px; transform: rotate(-90deg) translateY(0%); @@ -77,13 +77,13 @@ max-height: initial; overflow-y: initial; - .nut-popover-menu-item { + .nut-popover-item { display: flex; align-items: center; justify-content: center; - padding: 0 $popover-menu-item-padding; + padding: 0 $popover-item-padding; border-bottom: 1px solid $popover-divider-color; - max-width: $popover-menu-item-width; + max-width: $popover-item-width; word-wrap: break-word; &:last-child { @@ -127,12 +127,12 @@ } } - &.nut-popover-menu-disabled { + &.nut-popover-item-disabled { color: $popover-disable-color; cursor: not-allowed; } - &.nut-popover-menu-taroitem { + &.nut-popover-item-taroitem { display: flex; } } @@ -145,18 +145,18 @@ } } - &-top-end { + &-top-right { right: 0; - .nut-popover-arrow-top-end { + .nut-popover-arrow-top-right { right: 16px; bottom: -3.5px; transform: rotate(180deg) translateX(0%); } } - &-top-start { + &-top-left { left: 0; - .nut-popover-arrow-top-start { + .nut-popover-arrow-top-left { left: 16px; bottom: -3.5px; transform: rotate(180deg) translateX(0%); @@ -170,35 +170,35 @@ } } - &-bottom-end { + &-bottom-right { right: 0; - .nut-popover-arrow-bottom-end { + .nut-popover-arrow-bottom-right { right: 16px; transform: translateX(0%); } } - &-bottom-start { + &-bottom-left { left: 0; - .nut-popover-arrow-bottom-start { + .nut-popover-arrow-bottom-left { left: 16px; transform: translateX(0%); } } - &-left-end { + &-left-bottom { bottom: 0; } - &-left-start { + &-left-top { top: 0; } - &-right-end { + &-right-bottom { bottom: 0; } - &-right-start { + &-right-top { top: 0; } } @@ -217,7 +217,7 @@ .nut-popover-content { background: $popover-text-color !important; color: $popover-content-background-color !important; - .nut-popover-menu-item { + .nut-popover-item { &-action-icon { color: rgba(255, 255, 255, 0.8); } @@ -228,7 +228,7 @@ [dir='rtl'] .nut-popover, .nut-rtl .nut-popover { .nut-popover-content { - .nut-popover-menu-item { + .nut-popover-item { &-name { margin-left: 0; margin-right: 4px; @@ -236,7 +236,7 @@ &-action-icon { right: auto; - left: $popover-menu-item-padding; + left: $popover-item-padding; } } &-top { @@ -246,21 +246,21 @@ transform: translateX(50%); } } - &-top-end { + &-top-right { right: auto; left: 0; - .nut-popover-arrow-top-end { + .nut-popover-arrow-top-right { right: auto; left: 16px; } } - &-top-start { + &-top-left { left: auto; right: 0; - .nut-popover-arrow-top-start { + .nut-popover-arrow-top-left { left: auto; right: 16px; } @@ -273,22 +273,22 @@ transform: translateX(50%); } } - &-bottom-end { + &-bottom-right { right: auto; left: 0; - .nut-popover-arrow-bottom-end { + .nut-popover-arrow-bottom-right { right: auto; left: 16px; } } - &-bottom-start { + &-bottom-left { left: auto; right: 0; - .nut-popover-arrow-bottom-start { + .nut-popover-arrow-bottom-left { left: auto; right: 16px; } diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 6f194dc6a4..2e86036d70 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -184,10 +184,10 @@ export const Popover: FunctionComponent< styles[dir] = `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px` } - if (skew === 'start') { + if (skew === 'left') { styles.left = `${left + parallel}px` } - if (skew === 'end') { + if (skew === 'right') { styles.left = `${right + parallel}px` } } @@ -200,10 +200,10 @@ export const Popover: FunctionComponent< top - contentHeight / 2 + height / 2 - 4 + parallel }px` } - if (skew === 'start') { + if (skew === 'top') { styles.top = `${top + parallel}px` } - if (skew === 'end') { + if (skew === 'bottom') { styles.top = `${top + height + parallel}px` } } @@ -224,10 +224,10 @@ export const Popover: FunctionComponent< if (!skew) { styles[dir] = `calc(50% + ${arrowOffset}px)` } - if (skew === 'start') { + if (skew === 'left') { styles[dir] = `${base + arrowOffset}px` } - if (skew === 'end') { + if (skew === 'right') { styles[dir2] = `${base - arrowOffset}px` } } @@ -236,10 +236,10 @@ export const Popover: FunctionComponent< if (!skew) { styles.top = `calc(50% - ${arrowOffset}px)` } - if (skew === 'start') { + if (skew === 'top') { styles.top = `${base - arrowOffset}px` } - if (skew === 'end') { + if (skew === 'bottom') { styles.bottom = `${base + arrowOffset}px` } } @@ -301,8 +301,8 @@ export const Popover: FunctionComponent<
handleSelect(item, index)} > {item.icon && ( -
- {item.icon} -
+
{item.icon}
)} -
- {item.name} -
+
{item.name}
{item.action && item.action.icon && (
item.action?.onClick?.(e)} > {item.action.icon} diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index 51a352ad8a..1dd8ed0577 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -160,13 +160,13 @@ } } - &-default-enter-active { + &-none-enter-active { animation-fill-mode: both; animation-name: popup-scale-fade-in; animation-duration: $popup-animation-duration; } - &-default-exit-active { + &-none-exit-active { animation-fill-mode: both; animation-name: popup-scale-fade-out; animation-duration: $popup-animation-duration; @@ -323,7 +323,7 @@ animation-duration: $popup-animation-duration; } - &-default-exit-done, + &-none-exit-done, &-center-exit-done, &-left-exit-done, &-right-exit-done, diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 2f41f49198..b8764c91de 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1658,11 +1658,8 @@ $popover-divider-color: var( --nutui-popover-divider-color, $color-border ) !default; -$popover-menu-item-padding: var( - --nutui-popover-menu-item-padding, - 8px -) !default; -$popover-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !default; +$popover-item-padding: var(--nutui-popover-item-padding, 8px) !default; +$popover-item-width: var(--nutui-popover-item-width, 160px) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; From f6afee82fdc8ebe831175b1ec41925aa0139df97 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 20:03:13 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(dialog):=20=E5=87=BD=E6=95=B0=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=97=B6hidecancel=E5=BC=82=E5=B8=B8?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/dialog/confirm.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/packages/dialog/confirm.tsx b/src/packages/dialog/confirm.tsx index 66c0cfafea..f358b3057c 100644 --- a/src/packages/dialog/confirm.tsx +++ b/src/packages/dialog/confirm.tsx @@ -8,14 +8,6 @@ function ConfirmDialog(props: DialogConfirmNativeProps) { return {props.content} } -// 如果是消息提示型弹出框，那么只有确认按钮 -export const normalizeConfig = ( - config: DialogConfirmNativeProps -): DialogConfirmNativeProps => { - config.hideCancelButton = config.isNotice - return config -} - const confirm = ( config: DialogConfirmNativeProps, renderFunc?: (props: DialogConfirmNativeProps) => void @@ -57,7 +49,6 @@ const confirm = ( // 如果是promise，那么处理loading和加载完成关闭 dialogConfig.onConfirm = onConfirm - dialogConfig = normalizeConfig(dialogConfig) dialogConfig.visible = true renderFunction(dialogConfig) @@ -91,7 +82,6 @@ const confirm = ( ...dialogConfig, ...newConfig, } - dialogConfig = normalizeConfig(dialogConfig) renderFunction(dialogConfig) } From e1e0c55d0ec031f4348258e01324821e1b7f5bf1 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 20:56:41 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/dialog/dialog.tsx | 6 ++---- src/packages/dialog/types.ts | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/packages/dialog/dialog.tsx b/src/packages/dialog/dialog.tsx index e1bb241f5d..6f7df114ba 100644 --- a/src/packages/dialog/dialog.tsx +++ b/src/packages/dialog/dialog.tsx @@ -169,12 +169,10 @@ export const Dialog: DialogComponent = forwardRef(BaseDialog) as DialogComponent Dialog.confirm = (props: Partial): DialogReturnProps => { return confirm(props) } -;['alert'].forEach((type) => { - ;(Dialog as any)[type] = (props: Partial) => { +;['alert'].forEach(() => { + ;(Dialog as any).alert = (props: Partial) => { return confirm({ ...props, - isNotice: false, - noticeType: type, }) } }) diff --git a/src/packages/dialog/types.ts b/src/packages/dialog/types.ts index cb1c697a0a..3e94cb0abf 100644 --- a/src/packages/dialog/types.ts +++ b/src/packages/dialog/types.ts @@ -47,8 +47,6 @@ export interface DialogBasicProps extends DialogWrapProps { export interface DialogConfirmProps extends DialogBasicProps { content: ReactNode - isNotice: boolean - noticeType: string } export type DialogReturnProps = { From 666a08e0bbc625cce04db9ea7192025c22664b56 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 3 Apr 2025 11:10:51 +0800 Subject: [PATCH 4/4] =?UTF-8?q?refactor(dialog):=20=E6=8B=86=E5=88=86type,?= =?UTF-8?q?=E5=8E=BB=E6=8E=89web=20h5=20=E7=9A=84wrap=E5=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/dialog/confirm.tsx | 4 +- src/packages/dialog/content.taro.tsx | 14 +- src/packages/dialog/content.tsx | 10 +- src/packages/dialog/dialog.taro.tsx | 78 +++++---- src/packages/dialog/dialog.tsx | 238 ++++++++++++++++++--------- src/packages/dialog/dialogwrap.tsx | 70 -------- src/packages/dialog/index.taro.ts | 7 +- src/packages/dialog/index.ts | 7 +- src/packages/dialog/types.taro.ts | 27 --- src/packages/dialog/types.ts | 67 -------- src/types/spec/dialog/base.ts | 61 ++++++- src/types/spec/dialog/h5.ts | 5 +- src/types/spec/dialog/taro.ts | 13 +- 13 files changed, 294 insertions(+), 307 deletions(-) delete mode 100644 src/packages/dialog/dialogwrap.tsx delete mode 100644 src/packages/dialog/types.taro.ts delete mode 100644 src/packages/dialog/types.ts diff --git a/src/packages/dialog/confirm.tsx b/src/packages/dialog/confirm.tsx index f358b3057c..a466a09d86 100644 --- a/src/packages/dialog/confirm.tsx +++ b/src/packages/dialog/confirm.tsx @@ -1,9 +1,9 @@ import React from 'react' import { Dialog } from './dialog' -import { destroyList, DialogConfirmProps, DialogReturnProps } from './types' +import { destroyList, BaseDialog, DialogReturnProps } from '@/types' import { render as reactRender, unmount } from '@/utils/render' -type DialogConfirmNativeProps = Partial +type DialogConfirmNativeProps = Partial function ConfirmDialog(props: DialogConfirmNativeProps) { return {props.content} } diff --git a/src/packages/dialog/content.taro.tsx b/src/packages/dialog/content.taro.tsx index c065a72777..864e82d97a 100644 --- a/src/packages/dialog/content.taro.tsx +++ b/src/packages/dialog/content.taro.tsx @@ -1,9 +1,9 @@ import React, { FunctionComponent, HTMLAttributes } from 'react' import classNames from 'classnames' import { View, ITouchEvent } from '@tarojs/components' -import { ContentProps } from './types.taro' +import { TaroContentProps } from '@/types' -export const defaultContentProps: ContentProps = { +export const defaultContentProps = { visible: false, title: '', header: '', @@ -14,7 +14,7 @@ export const defaultContentProps: ContentProps = { } export const Content: FunctionComponent< - Partial & + Partial & Omit, 'onClick' | 'title'> > = (props) => { const { @@ -25,6 +25,8 @@ export const Content: FunctionComponent< close, footerDirection, children, + style, + className, onClick, } = { ...defaultContentProps, ...props } @@ -49,13 +51,13 @@ export const Content: FunctionComponent< } const handleClick = (e: ITouchEvent) => { - onClick && onClick(e) + onClick(e) } return ( handleClick(e)} > {close} diff --git a/src/packages/dialog/content.tsx b/src/packages/dialog/content.tsx index 4e07c57543..8944de22ff 100644 --- a/src/packages/dialog/content.tsx +++ b/src/packages/dialog/content.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent, HTMLAttributes } from 'react' +import React, { FunctionComponent, HTMLAttributes, MouseEvent } from 'react' import classNames from 'classnames' -import { ContentProps } from './types' +import { WebContentProps } from '@/types' -export const defaultContentProps: ContentProps = { +export const defaultContentProps = { visible: false, title: '', header: '', @@ -13,7 +13,7 @@ export const defaultContentProps: ContentProps = { } export const Content: FunctionComponent< - Partial & + Partial & Omit, 'title' | 'content'> > = (props) => { const { @@ -49,7 +49,7 @@ export const Content: FunctionComponent< ) } - const handleClick = (e: React.MouseEvent) => { + const handleClick = (e: MouseEvent) => { onClick && onClick(e) } diff --git a/src/packages/dialog/dialog.taro.tsx b/src/packages/dialog/dialog.taro.tsx index e5c26ac1e0..84a95da84e 100644 --- a/src/packages/dialog/dialog.taro.tsx +++ b/src/packages/dialog/dialog.taro.tsx @@ -1,13 +1,14 @@ -import React, { FunctionComponent, useState } from 'react' +import React, { FunctionComponent, useState, MouseEvent } from 'react' import classNames from 'classnames' import { CSSTransition } from 'react-transition-group' import { View, ITouchEvent } from '@tarojs/components' import { Failure, Close } from '@nutui/icons-react-taro' import Button from '@/packages/button/index.taro' -import { DialogBasicProps } from './types.taro' +import { TaroDialogProps } from '@/types' import { Content, defaultContentProps } from './content.taro' import { useConfig } from '@/packages/configprovider/configprovider.taro' import Overlay from '@/packages/overlay/index.taro' +import { defaultOverlayProps } from '@/packages/overlay/overlay.taro' import { customEvents, useCustomEvent, @@ -16,10 +17,9 @@ import { } from '@/hooks/use-custom-event' import { useLockScrollTaro } from '@/hooks/use-lock-scoll-taro' import { mergeProps } from '@/utils/merge-props' -import { defaultOverlayProps } from '@/packages/overlay/overlay.taro' import { harmony } from '@/utils/platform-taro' -const defaultProps: DialogBasicProps = { +const defaultProps = { ...defaultOverlayProps, ...defaultContentProps, title: '', @@ -28,55 +28,52 @@ const defaultProps: DialogBasicProps = { footer: '', confirmText: '', cancelText: '', - overlay: true, - overlayStyle: {}, - overlayClassName: 'nut-dialog-overlay', hideConfirmButton: false, hideCancelButton: false, disableConfirmButton: false, footerDirection: 'horizontal', closeIconPosition: 'bottom', closeIcon: false, + overlay: true, + overlayStyle: {}, + overlayClassName: 'nut-dialog-overlay', zIndex: 1200, beforeCancel: () => true, beforeClose: () => true, onCancel: () => {}, onClose: () => {}, + onConfirm: () => {}, onOverlayClick: () => true, } -export const BaseDialog: FunctionComponent> & { +export const BaseDialog: FunctionComponent> & { open: typeof open close: typeof close } = (props) => { - const classPrefix = 'nut-dialog' - const { locale } = useConfig() - const [loading, setLoading] = useState(false) - const { params: { id, + closeOnOverlayClick, + confirmText, + cancelText, + children, className, - style, - visible, - footer, - title, - header, + closeIconPosition, + closeIcon, content, - children, + disableConfirmButton, + footer, footerDirection, + header, hideConfirmButton, hideCancelButton, lockScroll, - disableConfirmButton, - closeOnOverlayClick, - confirmText, - cancelText, overlay, overlayStyle, overlayClassName, - closeIconPosition, - closeIcon, + style, + title, + visible, zIndex, beforeCancel, beforeClose, @@ -87,6 +84,9 @@ export const BaseDialog: FunctionComponent> & { }, setParams, } = useParams(mergeProps(defaultProps, props)) + const classPrefix = 'nut-dialog' + const { locale } = useConfig() + const [loading, setLoading] = useState(false) useCustomEvent( id as string, @@ -98,23 +98,21 @@ export const BaseDialog: FunctionComponent> & { const renderFooter = () => { if (footer === null) return '' - const handleCancel = ( - e: ITouchEvent | React.MouseEvent - ) => { + const handleCancel = (e: ITouchEvent | MouseEvent) => { e.stopPropagation() if (!beforeCancel?.()) return if (!beforeClose?.()) return - onClose?.() - onCancel?.() + onClose() + onCancel() } - const handleOk = async (e: React.MouseEvent) => { + const handleOk = async (e: MouseEvent) => { e.stopPropagation() setLoading(true) try { await onConfirm?.(e) setLoading(false) - onClose?.() + onClose() } catch { setLoading(false) } @@ -128,7 +126,7 @@ export const BaseDialog: FunctionComponent> & { !hideCancelButton && ( handleCancel(e)} + onClick={(e) => handleCancel(e)} > {cancelText || locale.cancel} @@ -143,9 +141,7 @@ export const BaseDialog: FunctionComponent> & { type="default" size="large" className={`${classPrefix}-footer-cancel ${btnClass}`} - onClick={(e: React.MouseEvent) => - handleCancel(e) - } + onClick={(e) => handleCancel(e)} > {cancelText || locale.cancel} @@ -157,13 +153,13 @@ export const BaseDialog: FunctionComponent> & { return ( !hideConfirmButton && ( + ) + ) + } + + const renderConfirm = () => { + return ( + !hideConfirmButton && ( + + ) + ) + } + return ( footer || ( <> - {!hideCancelButton && - (footerDirection === 'vertical' ? ( -
handleCancel(e)} - > - {cancelText || locale.cancel} -
- ) : ( - - ))} - {!hideConfirmButton && ( - + {footerDirection === 'vertical' ? ( + <> + {renderConfirm()} + {renderCancelOfVertical()} + + ) : ( + <> + {renderCancel()} + {renderConfirm()} + )} ) @@ -133,8 +182,8 @@ const BaseDialog: ForwardRefRenderFunction< const handleCancel = () => { if (!beforeCancel?.()) return if (!beforeClose?.()) return - onClose?.() - onCancel?.() + onClose() + onCancel() } const closeClasses = classNames({ [`${classPrefix}-close`]: true, @@ -148,29 +197,64 @@ const BaseDialog: ForwardRefRenderFunction< ) } + const onHandleClickOverlay = (e: MouseEvent) => { + if (closeOnOverlayClick && visible && e.target === e.currentTarget) { + const closed = onOverlayClick && onOverlayClick(e) + closed && onClose() + closed && onCancel() + } + } + + const renderContent = () => { + return ( + + + {content || children} + + + ) + } + return (
- + {overlay && ( + + )} + {renderContent()}
) } export const Dialog: DialogComponent = forwardRef(BaseDialog) as DialogComponent -Dialog.confirm = (props: Partial): DialogReturnProps => { +Dialog.confirm = (props: Partial): DialogReturnProps => { return confirm(props) } ;['alert'].forEach(() => { - ;(Dialog as any).alert = (props: Partial) => { + ;(Dialog as any).alert = (props: Partial) => { return confirm({ ...props, }) diff --git a/src/packages/dialog/dialogwrap.tsx b/src/packages/dialog/dialogwrap.tsx deleted file mode 100644 index ff911faa19..0000000000 --- a/src/packages/dialog/dialogwrap.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { FunctionComponent, HTMLAttributes } from 'react' -import { CSSTransition } from 'react-transition-group' -import { Content, defaultContentProps } from './content' -import { defaultOverlayProps } from '@/packages/overlay/overlay' -import Overlay from '@/packages/overlay' -import { DialogWrapProps } from './types' - -export const defaultDialogWrapProps: DialogWrapProps = { - ...defaultOverlayProps, - ...defaultContentProps, - overlay: true, - overlayStyle: {}, - overlayClassName: 'nut-dialog-overlay', - onCancel: () => {}, - onClose: () => {}, - onOverlayClick: () => true, -} - -export const DialogWrap: FunctionComponent< - Partial & - Omit, 'title' | 'content'> -> = (props) => { - const { - visible, - overlay, - overlayStyle, - overlayClassName, - closeOnOverlayClick, - lockScroll, - zIndex, - onClose, - onCancel, - onOverlayClick, - ...restProps - } = { ...defaultDialogWrapProps, ...props } - - const onHandleClickOverlay = (e: React.MouseEvent) => { - if (closeOnOverlayClick && visible && e.target === e.currentTarget) { - const closed = onOverlayClick && onOverlayClick(e) - closed && onClose?.() - closed && onCancel?.() - } - } - return ( - <> - {overlay && ( - - )} - - - - - - ) -} -DialogWrap.displayName = 'NutDialogWrap' diff --git a/src/packages/dialog/index.taro.ts b/src/packages/dialog/index.taro.ts index 5cb92e397a..45349e2e70 100644 --- a/src/packages/dialog/index.taro.ts +++ b/src/packages/dialog/index.taro.ts @@ -4,11 +4,10 @@ export type { DialogConfigType, DialogCloseIconPosition, DialogFooterDirection, - ContentProps, + TaroContentProps as ContentProps, DialogWrapProps, - DialogBasicProps, - DialogConfirmProps, + TaroDialogProps as DialogProps, DialogReturnProps, -} from './types.taro' +} from '@/types' export default BaseDialog diff --git a/src/packages/dialog/index.ts b/src/packages/dialog/index.ts index c5c9160314..2b65c703e3 100644 --- a/src/packages/dialog/index.ts +++ b/src/packages/dialog/index.ts @@ -4,11 +4,10 @@ export type { DialogConfigType, DialogCloseIconPosition, DialogFooterDirection, - ContentProps, + WebContentProps as ContentProps, DialogWrapProps, - DialogBasicProps, - DialogConfirmProps, + WebDialogProps as DialogProps, DialogReturnProps, -} from './types' +} from '@/types' export default Dialog diff --git a/src/packages/dialog/types.taro.ts b/src/packages/dialog/types.taro.ts deleted file mode 100644 index 291824a145..0000000000 --- a/src/packages/dialog/types.taro.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ITouchEvent } from '@tarojs/components' - -import { - ContentProps as ContentWebProps, - DialogBasicProps as DialogBasicWebProps, -} from './types' - -export type { - DialogConfigType, - DialogCloseIconPosition, - DialogFooterDirection, - DialogWrapProps, - DialogConfirmProps, - DialogReturnProps, -} from './types' - -export type ContentProps = Omit & { - onClick: (event: ITouchEvent) => void -} - -export type DialogBasicProps = Omit< - DialogBasicWebProps, - 'onOverlayClick' | 'onClick' -> & { - onClick: (event: ITouchEvent) => void - onOverlayClick: (event: ITouchEvent) => boolean | void -} diff --git a/src/packages/dialog/types.ts b/src/packages/dialog/types.ts deleted file mode 100644 index 3e94cb0abf..0000000000 --- a/src/packages/dialog/types.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react' -import type { MouseEvent, CSSProperties } from 'react' -import { WebOverlayProps } from '@/types' -import { BasicComponent } from '@/utils/typings' - -export type DialogConfigType = { - prefixCls?: string - simple?: boolean -} - -export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom' -export type DialogFooterDirection = 'horizontal' | 'vertical' -export interface ContentProps extends BasicComponent { - visible: boolean - title: ReactNode - header: ReactNode - footer: ReactNode - close: ReactNode - footerDirection: DialogFooterDirection - onClick: (event: MouseEvent) => void -} -export interface DialogWrapProps - extends WebOverlayProps, - Omit { - visible: boolean - overlay: boolean - overlayStyle: CSSProperties - overlayClassName: string - onCancel: () => void - onClose: () => void - onOverlayClick: (e: MouseEvent) => boolean | void -} - -export interface DialogBasicProps extends DialogWrapProps { - content?: ReactNode - confirmText?: ReactNode - cancelText?: ReactNode - hideConfirmButton?: boolean - hideCancelButton?: boolean - disableConfirmButton?: boolean - closeIconPosition?: DialogCloseIconPosition - closeIcon?: boolean | ReactNode - beforeClose?: () => boolean - beforeCancel?: () => boolean - onConfirm?: (e?: MouseEvent) => PromiseLike | void -} - -export interface DialogConfirmProps extends DialogBasicProps { - content: ReactNode -} - -export type DialogReturnProps = { - update: (newConfig: Partial) => void - close: () => void -} - -export interface DialogComponent - extends ForwardRefExoticComponent< - PropsWithChildren> - > { - confirm: (props: Partial) => DialogReturnProps - alert: (props: Partial) => DialogReturnProps - config: (config: DialogConfigType) => void - destroyAll: () => void -} - -export const destroyList: Array<() => void> = [] diff --git a/src/types/spec/dialog/base.ts b/src/types/spec/dialog/base.ts index a21fb9bbea..2410a2c3f6 100644 --- a/src/types/spec/dialog/base.ts +++ b/src/types/spec/dialog/base.ts @@ -1 +1,60 @@ -export interface BaseDialog {} +import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react' +import type { MouseEvent, CSSProperties } from 'react' +import { WebOverlayProps } from '@/types' +import { BasicComponent } from '@/utils/typings' + +export type DialogConfigType = { + prefixCls?: string + simple?: boolean +} + +export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom' +export type DialogFooterDirection = 'horizontal' | 'vertical' +export interface BaseContentProps extends BasicComponent { + visible: boolean + title: ReactNode + header: ReactNode + footer: ReactNode + close: ReactNode + footerDirection: DialogFooterDirection +} +export interface DialogWrapProps + extends WebOverlayProps, + Omit { + visible: boolean + overlay: boolean + overlayStyle: CSSProperties + overlayClassName: string + onCancel: () => void + onClose: () => void + onOverlayClick: (e: MouseEvent) => boolean | void +} + +export interface BaseDialog extends DialogWrapProps { + content: ReactNode + confirmText: ReactNode + cancelText: ReactNode + hideConfirmButton: boolean + hideCancelButton: boolean + disableConfirmButton: boolean + closeIconPosition: DialogCloseIconPosition + closeIcon: boolean | ReactNode + beforeClose: () => boolean + beforeCancel: () => boolean + onConfirm: (e?: MouseEvent) => PromiseLike | void +} + +export type DialogReturnProps = { + update: (newConfig: Partial) => void + close: () => void +} + +export interface DialogComponent + extends ForwardRefExoticComponent>> { + confirm: (props: Partial) => DialogReturnProps + alert: (props: Partial) => DialogReturnProps + config: (config: DialogConfigType) => void + destroyAll: () => void +} + +export const destroyList: Array<() => void> = [] diff --git a/src/types/spec/dialog/h5.ts b/src/types/spec/dialog/h5.ts index cdf8e570d1..be472031f9 100644 --- a/src/types/spec/dialog/h5.ts +++ b/src/types/spec/dialog/h5.ts @@ -1,3 +1,6 @@ -import { BaseDialog } from './base' +import { BaseDialog, BaseContentProps } from './base' +export interface WebContentProps extends BaseContentProps { + onClick: (event: MouseEvent) => void +} export interface WebDialogProps extends BaseDialog {} diff --git a/src/types/spec/dialog/taro.ts b/src/types/spec/dialog/taro.ts index fdfbdf9793..c5c3ed579d 100644 --- a/src/types/spec/dialog/taro.ts +++ b/src/types/spec/dialog/taro.ts @@ -1,3 +1,12 @@ -import { BaseDialog } from './base' +import { ITouchEvent } from '@tarojs/components' +import { BaseDialog, BaseContentProps } from './base' -export interface TaroDialogProps extends BaseDialog {} +export interface TaroContentProps extends BaseContentProps { + onClick: (event: ITouchEvent) => void +} + +export interface TaroDialogProps + extends Omit { + onClick: (event: ITouchEvent) => void + onOverlayClick: (event: ITouchEvent) => boolean | void +}