@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

package/dist/es/packages/dialog/dialog.js

@@ -8,15 +8,17 @@ import React, { useState } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { View } from "@tarojs/components";
-import { Close } from "@nutui/icons-react-taro";
+import { Failure, Close } from "@nutui/icons-react-taro";
 import Button from "../button/index";
-import { Content } from "./content";
+import { Content, defaultContentProps } from "./content";
 import { useConfig } from "../configprovider/configprovider";
 import Overlay from "../overlay/index";
-import { customEvents, useCustomEvent, useCustomEventsPath, useParams } from "../../utils/use-custom-event";
-import { useLockScrollTaro } from "../../utils/use-lock-scoll-taro";
+import { customEvents, useCustomEvent, useCustomEventsPath, useParams } from "../../hooks/use-custom-event";
+import { useLockScrollTaro } from "../../hooks/use-lock-scoll-taro";
 import { mergeProps } from "../../utils/merge-props";
-var defaultProps = {
+import { defaultOverlayProps } from "../overlay/overlay";
+import { harmony } from "../../utils/platform-taro";
+var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps, defaultContentProps), {
     title: '',
     content: '',
     header: '',
@@ -24,40 +26,37 @@ var defaultProps = {
     confirmText: '',
     cancelText: '',
     overlay: true,
-    closeOnOverlayClick: true,
+    overlayStyle: {},
+    overlayClassName: 'nut-dialog-overlay',
     hideConfirmButton: false,
     hideCancelButton: false,
     disableConfirmButton: false,
     footerDirection: 'horizontal',
-    lockScroll: true,
     closeIconPosition: 'bottom',
     closeIcon: false,
+    zIndex: 1200,
     beforeCancel: function() {
         return true;
     },
     beforeClose: function() {
         return true;
     },
+    onCancel: function() {},
+    onClose: function() {},
     onOverlayClick: function() {
         return true;
     }
-};
+});
 export var BaseDialog = function(props) {
     var classPrefix = 'nut-dialog';
     var locale = useConfig().locale;
     var _useState = _sliced_to_array(useState(false), 2), loading = _useState[0], setLoading = _useState[1];
-    var _useParams = useParams(mergeProps(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, className = _useParams_params.className, style = _useParams_params.style, visible = _useParams_params.visible, footer = _useParams_params.footer, title = _useParams_params.title, header = _useParams_params.header, content = _useParams_params.content, children = _useParams_params.children, footerDirection = _useParams_params.footerDirection, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, disableConfirmButton = _useParams_params.disableConfirmButton, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, onOverlayClick = _useParams_params.onOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, overlay = _useParams_params.overlay, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, onClose = _useParams_params.onClose, onCancel = _useParams_params.onCancel, onConfirm = _useParams_params.onConfirm, beforeCancel = _useParams_params.beforeCancel, beforeClose = _useParams_params.beforeClose, setParams = _useParams.setParams;
+    var _useParams = useParams(mergeProps(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, className = _useParams_params.className, style = _useParams_params.style, visible = _useParams_params.visible, footer = _useParams_params.footer, title = _useParams_params.title, header = _useParams_params.header, content = _useParams_params.content, children = _useParams_params.children, footerDirection = _useParams_params.footerDirection, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, disableConfirmButton = _useParams_params.disableConfirmButton, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, overlay = _useParams_params.overlay, overlayStyle = _useParams_params.overlayStyle, overlayClassName = _useParams_params.overlayClassName, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, zIndex = _useParams_params.zIndex, beforeCancel = _useParams_params.beforeCancel, beforeClose = _useParams_params.beforeClose, onClose = _useParams_params.onClose, onCancel = _useParams_params.onCancel, onConfirm = _useParams_params.onConfirm, onOverlayClick = _useParams_params.onOverlayClick, setParams = _useParams.setParams;
     useCustomEvent(id, function(param) {
         var status = param.status, options = param.options;
-        if (status) {
-            setParams(_object_spread_props(_object_spread({}, options), {
-                visible: true
-            }));
-        } else {
-            setParams(_object_spread_props(_object_spread({}, options), {
-                visible: false
-            }));
-        }
+        setParams(_object_spread_props(_object_spread({}, options), {
+            visible: status
+        }));
     });
     var refObject = useLockScrollTaro(!!(visible && lockScroll));
     var renderFooter = function() {
@@ -115,23 +114,40 @@ export var BaseDialog = function(props) {
                 return _ref.apply(this, arguments);
             };
         }();
-        return footer || /*#__PURE__*/ React.createElement(React.Fragment, null, !hideCancelButton && /*#__PURE__*/ React.createElement(Button, {
-            type: "default",
-            className: "".concat(classPrefix, "-footer-cancel"),
-            onClick: function(e) {
-                return handleCancel(e);
-            }
-        }, cancelText || locale.cancel), !hideConfirmButton && /*#__PURE__*/ React.createElement(Button, {
-            type: "primary",
-            className: classNames("".concat(classPrefix, "-footer-ok"), {
-                disabled: disableConfirmButton
-            }),
-            disabled: disableConfirmButton,
-            onClick: function(e) {
-                return handleOk(e);
-            },
-            loading: loading
-        }, confirmText || locale.confirm));
+        var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix, "-footer-block") : '';
+        var renderCancelOfVertical = function() {
+            return !hideCancelButton && /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
+                onClick: function(e) {
+                    return handleCancel(e);
+                }
+            }, cancelText || locale.cancel);
+        };
+        var renderCancel = function() {
+            return !hideCancelButton && /*#__PURE__*/ React.createElement(Button, {
+                type: "default",
+                size: "large",
+                className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
+                onClick: function(e) {
+                    return handleCancel(e);
+                }
+            }, cancelText || locale.cancel);
+        };
+        var renderConfirm = function() {
+            return !hideConfirmButton && /*#__PURE__*/ React.createElement(Button, {
+                size: "large",
+                type: "primary",
+                className: classNames("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
+                    disabled: disableConfirmButton
+                }),
+                disabled: disableConfirmButton,
+                onClick: function(e) {
+                    return handleOk(e);
+                },
+                loading: loading
+            }, confirmText || locale.confirm);
+        };
+        return footer || /*#__PURE__*/ React.createElement(React.Fragment, null, footerDirection === 'vertical' ? /*#__PURE__*/ React.createElement(React.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /*#__PURE__*/ React.createElement(React.Fragment, null, renderCancel(), renderConfirm()));
     };
     var renderCloseIcon = function() {
         if (!closeIcon) return null;
@@ -143,46 +159,56 @@ export var BaseDialog = function(props) {
         };
         var _obj;
         var closeClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-close"), true), _define_property(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
+        var systomIcon = closeIconPosition !== 'bottom' ? /*#__PURE__*/ React.createElement(Close, null) : /*#__PURE__*/ React.createElement(Failure, null);
         return /*#__PURE__*/ React.createElement(View, {
             className: closeClasses,
             onClick: handleCancel
-        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ React.createElement(Close, null));
+        }, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
     var onHandleClickOverlay = function(e) {
         if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
-            var closed = onOverlayClick && onOverlayClick();
-            closed && (onClose === null || onClose === void 0 ? void 0 : onClose());
-            closed && (onCancel === null || onCancel === void 0 ? void 0 : onCancel());
+            var closed = onOverlayClick && onOverlayClick(e);
+            closed && onClose && onClose();
+            closed && onCancel && onCancel();
         }
     };
+    var renderContent = function() {
+        var contentZIndex = harmony() ? zIndex + 1 : zIndex // 解决harmony层级问题
+        ;
+        return /*#__PURE__*/ React.createElement(CSSTransition, {
+            in: visible,
+            timeout: 300,
+            classNames: "fadeDialog",
+            unmountOnExit: true,
+            appear: true
+        }, /*#__PURE__*/ React.createElement(Content, {
+            className: className,
+            style: _object_spread({
+                zIndex: contentZIndex
+            }, style),
+            title: title,
+            header: header,
+            close: renderCloseIcon(),
+            footer: renderFooter(),
+            footerDirection: footerDirection,
+            visible: visible
+        }, content || children));
+    };
     return /*#__PURE__*/ React.createElement(View, {
         style: {
             display: visible ? 'block' : 'none'
         },
         ref: refObject,
         catchMove: lockScroll
-    }, /*#__PURE__*/ React.createElement(React.Fragment, null, overlay ? /*#__PURE__*/ React.createElement(Overlay, {
+    }, overlay && /*#__PURE__*/ React.createElement(Overlay, {
+        zIndex: zIndex,
         visible: visible,
+        style: overlayStyle,
+        className: overlayClassName,
         closeOnOverlayClick: closeOnOverlayClick,
         lockScroll: lockScroll,
-        onClick: onHandleClickOverlay,
-        className: classNames('nut-dialog-overlay')
-    }) : null, /*#__PURE__*/ React.createElement(CSSTransition, {
-        in: visible,
-        timeout: 300,
-        classNames: "fadeDialog",
-        unmountOnExit: true,
-        appear: true
-    }, /*#__PURE__*/ React.createElement(Content, {
-        className: className,
-        style: style,
-        title: title,
-        header: header,
-        close: renderCloseIcon(),
-        footer: renderFooter(),
-        footerDirection: footerDirection,
-        visible: visible
-    }, content || children))));
+        onClick: onHandleClickOverlay
+    }), renderContent());
 };
 export function open(selector, options) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/es/packages/dialog/index.d.ts

@@ -1,3 +1,3 @@
 import { BaseDialog } from "./dialog";
-export type { DialogProps } from "./dialog";
+export type { DialogConfigType, DialogCloseIconPosition, DialogFooterDirection, ContentProps, DialogWrapProps, DialogBasicProps, DialogConfirmProps, DialogReturnProps, } from './types.taro';
 export default BaseDialog;

package/dist/es/packages/dialog/style/dialog.scss

@@ -5,15 +5,14 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  // max-height: 67%;
+  min-width: $dialog-min-width;
+  /* #ifndef harmony*/
+  max-height: 67%;
+  /* #endif */
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
 
-  &-overlay {
-    --nutui-overlay-zIndex: 1200;
-  }
-
   &-outer {
     position: fixed;
     max-height: 100%;
@@ -27,7 +26,6 @@
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: $dialog-border-radius;
-    z-index: $dialog-z-index;
     animation-duration: 0.3s;
   }
 
@@ -58,11 +56,17 @@
     }
 
     &-bottom {
-      bottom: -56px;
+      bottom: -64px;
+      width: $dialog-bottom-close-icon-size;
+      height: $dialog-bottom-close-icon-size;
       left: 50%;
-      transform: translateY(-50%);
+      transform: translateX(-50%);
       .nut-icon {
-        color: $dialog-close-color;
+        color: $color-text-disabled;
+        background-color: $color-mask-part;
+        border-radius: 50%;
+        width: $dialog-bottom-close-icon-size;
+        height: $dialog-bottom-close-icon-size;
       }
     }
 
@@ -86,7 +90,7 @@
     max-height: $dialog-content-max-height;
     line-height: $dialog-content-line-height;
     font-size: $font-size-base;
-    color: $color-text;
+    color: $color-title;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
@@ -105,20 +109,15 @@
 
       .nut-button {
         min-width: 100%;
-        margin: 0;
+      }
 
-        &.nut-dialog-footer-ok {
-          order: 1;
-        }
-
-        &.nut-dialog-footer-cancel {
-          border: 0;
-          color: $color-text;
-          order: 2;
-          display: flex;
-          align-items: flex-end;
-          margin-top: $dialog-vertical-footer-ok-margin-top;
-        }
+      .nut-dialog-footer-cancel {
+        margin: 0;
+        color: $color-text;
+        font-size: $font-size-base;
+        display: flex;
+        justify-content: center;
+        margin-top: $dialog-vertical-footer-ok-margin-top;
       }
     }
 
@@ -132,6 +131,12 @@
 
     &-ok {
       max-width: $dialog-footer-ok-max-width;
+      font-weight: $font-weight-bold;
+    }
+    &-block {
+      &.nut-button {
+        min-width: 100%;
+      }
     }
   }
 }