@nutui/nutui-react 3.0.5 → 3.0.7

package/dist/cjs/packages/dialog/dialog.js

@@ -14,20 +14,26 @@ var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _reacttransitiongroup = require("react-transition-group");
 var _iconsreact = require("@nutui/icons-react");
 var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
 var _confirm = /*#__PURE__*/ _interop_require_default._(require("./confirm"));
-var _dialogwrap = require("./dialogwrap");
+var _overlay = /*#__PURE__*/ _interop_require_default._(require("../overlay"));
+var _content = require("./content");
+var _overlay1 = require("../overlay/overlay");
 var _configprovider = require("../configprovider");
-var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _dialogwrap.defaultDialogWrapProps), {
+var _mergeprops = require("../../utils/merge-props");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay1.defaultOverlayProps, _content.defaultContentProps), {
+    title: '',
+    content: '',
+    header: '',
+    footer: '',
     confirmText: '',
     cancelText: '',
-    overlay: true,
     closeOnOverlayClick: true,
     hideConfirmButton: false,
     hideCancelButton: false,
@@ -36,36 +42,26 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _dialog
     lockScroll: true,
     closeIconPosition: 'bottom',
     closeIcon: false,
+    overlay: true,
+    overlayStyle: {},
+    overlayClassName: 'nut-dialog-overlay',
     zIndex: 1200,
     beforeCancel: function beforeCancel() {
         return true;
     },
     beforeClose: function beforeClose() {
         return true;
+    },
+    onCancel: function onCancel() {},
+    onClose: function onClose() {},
+    onOverlayClick: function onOverlayClick() {
+        return true;
     }
 });
 var BaseDialog = function BaseDialog(props, ref) {
-    var locale = (0, _configprovider.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), visible = _ref.visible, footer = _ref.footer, hideConfirmButton = _ref.hideConfirmButton, hideCancelButton = _ref.hideCancelButton, lockScroll = _ref.lockScroll, disableConfirmButton = _ref.disableConfirmButton, closeOnOverlayClick = _ref.closeOnOverlayClick, confirmText = _ref.confirmText, cancelText = _ref.cancelText, closeIconPosition = _ref.closeIconPosition, closeIcon = _ref.closeIcon, footerDirection = _ref.footerDirection, onClose = _ref.onClose, onCancel = _ref.onCancel, onConfirm = _ref.onConfirm, beforeCancel = _ref.beforeCancel, beforeClose = _ref.beforeClose, restProps = (0, _object_without_properties._)(_ref, [
-        "visible",
-        "footer",
-        "hideConfirmButton",
-        "hideCancelButton",
-        "lockScroll",
-        "disableConfirmButton",
-        "closeOnOverlayClick",
-        "confirmText",
-        "cancelText",
-        "closeIconPosition",
-        "closeIcon",
-        "footerDirection",
-        "onClose",
-        "onCancel",
-        "onConfirm",
-        "beforeCancel",
-        "beforeClose"
-    ]);
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, children = _mergeProps.children, className = _mergeProps.className, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, content = _mergeProps.content, disableConfirmButton = _mergeProps.disableConfirmButton, footer = _mergeProps.footer, footerDirection = _mergeProps.footerDirection, header = _mergeProps.header, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, style = _mergeProps.style, title = _mergeProps.title, visible = _mergeProps.visible, zIndex = _mergeProps.zIndex, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, onOverlayClick = _mergeProps.onOverlayClick;
     var classPrefix = 'nut-dialog';
+    var locale = (0, _configprovider.useConfig)().locale;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), loading = _useState[0], setLoading = _useState[1];
     var renderFooter = function renderFooter() {
         if (footer === null) return '';
@@ -73,8 +69,8 @@ var BaseDialog = function BaseDialog(props, ref) {
             e.stopPropagation();
             if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
             if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            onClose();
+            onCancel();
         };
         var handleOk = /*#__PURE__*/ function() {
             var _ref = (0, _async_to_generator._)(function(e) {
@@ -99,7 +95,7 @@ var BaseDialog = function BaseDialog(props, ref) {
                         case 2:
                             _state.sent();
                             setLoading(false);
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                            onClose();
                             return [
                                 3,
                                 4
@@ -123,41 +119,50 @@ var BaseDialog = function BaseDialog(props, ref) {
             };
         }();
         var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix, "-footer-block") : '';
-        return footer || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !hideCancelButton && (footerDirection === 'vertical' ? /*#__PURE__*/ _react.default.createElement("div", {
-            style: {
-                order: 2
-            },
-            className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
-            onClick: function onClick(e) {
-                return handleCancel(e);
-            }
-        }, cancelText || locale.cancel) : /*#__PURE__*/ _react.default.createElement(_button.default, {
-            type: "default",
-            size: "large",
-            className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
-            onClick: function onClick(e) {
-                return handleCancel(e);
-            }
-        }, cancelText || locale.cancel)), !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
-            type: "primary",
-            size: "large",
-            className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
-                disabled: disableConfirmButton
-            }),
-            disabled: disableConfirmButton,
-            onClick: function onClick(e) {
-                return handleOk(e);
-            },
-            loading: loading
-        }, confirmText || locale.confirm));
+        var renderCancelOfVertical = function renderCancelOfVertical() {
+            return !hideCancelButton && /*#__PURE__*/ _react.default.createElement("div", {
+                style: {
+                    order: 2
+                },
+                className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
+                onClick: function onClick(e) {
+                    return handleCancel(e);
+                }
+            }, cancelText || locale.cancel);
+        };
+        var renderCancel = function renderCancel() {
+            return !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
+                type: "default",
+                size: "large",
+                className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
+                onClick: function onClick(e) {
+                    return handleCancel(e);
+                }
+            }, cancelText || locale.cancel);
+        };
+        var renderConfirm = function renderConfirm() {
+            return !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
+                type: "primary",
+                size: "large",
+                className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
+                    disabled: disableConfirmButton
+                }),
+                disabled: disableConfirmButton,
+                onClick: function onClick(e) {
+                    return handleOk(e);
+                },
+                loading: loading
+            }, confirmText || locale.confirm);
+        };
+        return footer || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, footerDirection === 'vertical' ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderCancel(), renderConfirm()));
     };
     var renderCloseIcon = function renderCloseIcon() {
         if (!closeIcon) return null;
         var handleCancel = function handleCancel() {
             if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
             if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            onClose();
+            onCancel();
         };
         var _obj;
         var closeClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-close"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
@@ -167,19 +172,46 @@ var BaseDialog = function BaseDialog(props, ref) {
             onClick: handleCancel
         }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
+    var onHandleClickOverlay = function onHandleClickOverlay(e) {
+        if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
+            var closed = onOverlayClick && onOverlayClick(e);
+            closed && onClose();
+            closed && onCancel();
+        }
+    };
+    var renderContent = function renderContent() {
+        return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+            in: visible,
+            timeout: 300,
+            classNames: "fadeDialog",
+            unmountOnExit: true,
+            appear: true
+        }, /*#__PURE__*/ _react.default.createElement(_content.Content, {
+            className: className,
+            style: (0, _object_spread._)({
+                zIndex: zIndex
+            }, style),
+            title: title,
+            header: header,
+            close: renderCloseIcon(),
+            footer: renderFooter(),
+            footerDirection: footerDirection,
+            visible: visible
+        }, content || children));
+    };
     return /*#__PURE__*/ _react.default.createElement("div", {
         style: {
             display: visible ? 'block' : 'none'
         }
-    }, /*#__PURE__*/ _react.default.createElement(_dialogwrap.DialogWrap, (0, _object_spread_props._)((0, _object_spread._)({}, restProps), {
+    }, overlay && /*#__PURE__*/ _react.default.createElement(_overlay.default, {
+        zIndex: zIndex,
         visible: visible,
+        style: overlayStyle,
+        className: overlayClassName,
+        closeOnOverlayClick: closeOnOverlayClick,
         lockScroll: lockScroll,
-        footer: renderFooter(),
-        footerDirection: footerDirection,
-        close: renderCloseIcon(),
-        onClose: onClose,
-        onCancel: onCancel
-    })));
+        onClick: onHandleClickOverlay
+    }), renderContent());
 };
 var Dialog = /*#__PURE__*/ (0, _react.forwardRef)(BaseDialog);
 Dialog.confirm = function(props) {
@@ -187,13 +219,10 @@ Dialog.confirm = function(props) {
 };
 [
     'alert'
-].forEach(function(type) {
+].forEach(function() {
     ;
-    Dialog[type] = function(props) {
-        return (0, _confirm.default)((0, _object_spread_props._)((0, _object_spread._)({}, props), {
-            isNotice: false,
-            noticeType: type
-        }));
+    Dialog.alert = function(props) {
+        return (0, _confirm.default)((0, _object_spread._)({}, props));
     };
 });
 Dialog.displayName = 'NutDialog';

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

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

package/dist/cjs/packages/dialog/style/style.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge {
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
-}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -131,7 +119,7 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));

package/dist/cjs/packages/empty/style/style.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge {
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
-}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -131,7 +119,7 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));

package/dist/cjs/packages/fixednav/style/style.css

@@ -107,6 +107,9 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
 }
@@ -132,14 +135,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;

package/dist/cjs/packages/imagepreview/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/indicator/indicator.js

@@ -24,7 +24,7 @@ var defaultProps = {
 var classPrefix = "nut-indicator";
 var Indicator = function Indicator(props) {
     var maybeFixedWidth = function maybeFixedWidth() {
-        if (total === 2 || type === 'slide') {
+        if (type === 'dualScreen' || type === 'slide') {
             return "".concat(classPrefix, "-fixed-width");
         }
         return '';

package/dist/cjs/packages/lottie/index.d.ts

@@ -1,3 +1,3 @@
-import { Lottie } from './web';
+import { Lottie } from './lottie';
 export type { WebLottieProps as LottieProps } from "../../types";
 export default Lottie;

package/dist/cjs/packages/lottie/index.js

@@ -8,5 +8,5 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
-var _web = require("./web");
-var _default = _web.Lottie;
+var _lottie = require("./lottie");
+var _default = _lottie.Lottie;

package/dist/cjs/packages/notify/Notification.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface NotificationProps extends BasicComponent {
-    id: string;
-    message: string | React.ReactNode;
-    duration: number;
-    type: string;
-    position: string;
-    onClose: () => void;
-    onClick: () => void;
+import { WebNotifyProps } from "../../types";
+export interface NotificationProps extends WebNotifyProps {
+    message: React.ReactNode;
 }
 interface State {
     show: boolean;

package/dist/cjs/packages/notify/Notification.js

@@ -20,6 +20,7 @@ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _reacttransitiongroup = require("react-transition-group");
+var _iconsreact = require("@nutui/icons-react");
 var _render = require("../../utils/render");
 var classPrefix = 'nut-notify';
 var _React_PureComponent;
@@ -45,6 +46,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
         {
             key: "close",
             value: function close() {
+                var _this_props;
                 this.setState({
                     show: false
                 });
@@ -53,7 +55,7 @@ var Notification = /*#__PURE__*/ function(_superClass) {
                     var element = document.getElementById(this.props.id);
                     element && element.parentNode && element.parentNode.removeChild(element);
                 }
-                this.props.onClose();
+                (_this_props = this.props) === null || _this_props === void 0 ? void 0 : _this_props.onClose();
             }
         },
         {
@@ -98,22 +100,40 @@ var Notification = /*#__PURE__*/ function(_superClass) {
         {
             key: "render",
             value: function render() {
-                var _this_props = this.props, style = _this_props.style, message = _this_props.message, type = _this_props.type, className = _this_props.className, position = _this_props.position;
+                var _this_props = this.props, id = _this_props.id, style = _this_props.style, message = _this_props.message, leftIcon = _this_props.leftIcon, rightIcon = _this_props.rightIcon, closeable = _this_props.closeable, className = _this_props.className, position = _this_props.position, distance = _this_props.distance, navHeight = _this_props.navHeight;
                 var show = this.state.show;
+                var classes = (0, _classnames.default)(classPrefix, className);
+                var getDistance = function getDistance() {
+                    if (position === 'top') {
+                        return {
+                            top: "".concat(distance + navHeight, "px")
+                        };
+                    }
+                    return {
+                        bottom: "".concat(distance, "px")
+                    };
+                };
                 var _obj;
-                var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), (0, _define_property._)(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
                 return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_reacttransitiongroup.CSSTransition, {
                     in: show,
                     timeout: 300,
                     classNames: "fade",
                     unmountOnExit: true,
                     appear: true,
-                    position: position
+                    position: position,
+                    id: id
                 }, /*#__PURE__*/ _react.createElement("div", {
-                    className: "".concat(classes, " ").concat(className),
-                    style: style,
+                    className: classes,
+                    style: (0, _object_spread._)({}, style, getDistance()),
                     onClick: this.clickCover
-                }, message)));
+                }, leftIcon ? /*#__PURE__*/ _react.createElement("div", {
+                    className: "".concat(classPrefix, "-left-icon")
+                }, leftIcon) : null, /*#__PURE__*/ _react.createElement("div", {
+                    className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), (0, _define_property._)(_obj, "".concat(classPrefix, "-layout-left"), leftIcon || rightIcon), _obj))
+                }, message), rightIcon || closeable ? /*#__PURE__*/ _react.createElement("div", {
+                    className: "".concat(classPrefix, "-right-icon"),
+                    onClick: this.close
+                }, rightIcon || (closeable ? /*#__PURE__*/ _react.createElement(_iconsreact.Close, null) : null)) : null)));
             }
         }
     ]);

package/dist/cjs/packages/notify/notify.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 declare const _default: {
     text(message: string | React.ReactNode, option?: {}): void;
-    success(message: string | React.ReactNode, option?: {}): void;
-    primary(message: string | React.ReactNode, option?: {}): void;
-    danger(message: string | React.ReactNode, option?: {}): void;
-    warn(message: string | React.ReactNode, option?: {}): void;
     hide(): void;
 };
 export default _default;

package/dist/cjs/packages/notify/notify.js

@@ -18,9 +18,13 @@ var _typings = require("../../utils/typings");
 var messageInstance = null;
 var options = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     id: '',
-    duration: 3000,
-    type: 'danger',
     position: 'top',
+    distance: 8,
+    navHeight: 57,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3000,
     onClose: function onClose() {},
     onClick: function onClick() {}
 });
@@ -53,38 +57,6 @@ var _default = {
             type: 'base'
         }, option));
     },
-    success: function success(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice((0, _object_spread._)({
-            message: message,
-            type: 'success'
-        }, option));
-    },
-    primary: function primary(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice((0, _object_spread._)({
-            message: message,
-            type: 'primary'
-        }, option));
-    },
-    danger: function danger(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice((0, _object_spread._)({
-            message: message,
-            type: 'danger'
-        }, option));
-    },
-    warn: function warn(message) {
-        var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-        errorMsg(message);
-        return notice((0, _object_spread._)({
-            message: message,
-            type: 'warning'
-        }, option));
-    },
     hide: function hide() {
         if (messageInstance) {
             messageInstance.destroy();