@nutui/nutui-react-taro 3.0.5 → 3.0.7

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

@@ -1,7 +1,42 @@
-import { FunctionComponent } from 'react';
-import { DialogBasicProps } from './types.taro';
-declare const defaultProps: DialogBasicProps;
-export declare const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
+import React, { FunctionComponent } from 'react';
+import { TaroDialogProps } from "../../types";
+declare const defaultProps: {
+    title: string;
+    content: string;
+    header: string;
+    footer: string;
+    confirmText: string;
+    cancelText: string;
+    hideConfirmButton: boolean;
+    hideCancelButton: boolean;
+    disableConfirmButton: boolean;
+    footerDirection: string;
+    closeIconPosition: string;
+    closeIcon: boolean;
+    overlay: boolean;
+    overlayStyle: {};
+    overlayClassName: string;
+    zIndex: number;
+    beforeCancel: () => boolean;
+    beforeClose: () => boolean;
+    onCancel: () => void;
+    onClose: () => void;
+    onConfirm: () => void;
+    onOverlayClick: () => boolean;
+    visible: boolean;
+    close: string;
+    onClick: () => void;
+    className?: string | undefined;
+    id?: string | undefined;
+    children?: React.ReactNode;
+    style?: React.CSSProperties | undefined;
+    duration: number;
+    closeOnOverlayClick: boolean;
+    lockScroll: boolean;
+    afterShow: () => void;
+    afterClose: () => void;
+};
+export declare const BaseDialog: FunctionComponent<Partial<TaroDialogProps>> & {
     open: typeof open;
     close: typeof close;
 };

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

@@ -36,10 +36,10 @@ var _index = /*#__PURE__*/ _interop_require_default._(require("../button/index")
 var _content = require("./content");
 var _configprovider = require("../configprovider/configprovider");
 var _index1 = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
+var _overlay = require("../overlay/overlay");
 var _usecustomevent = require("../../hooks/use-custom-event");
 var _uselockscolltaro = require("../../hooks/use-lock-scoll-taro");
 var _mergeprops = require("../../utils/merge-props");
-var _overlay = require("../overlay/overlay");
 var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps, _content.defaultContentProps), {
     title: '',
@@ -48,15 +48,15 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     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: function beforeCancel() {
         return true;
@@ -66,15 +66,16 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     },
     onCancel: function onCancel() {},
     onClose: function onClose() {},
+    onConfirm: function onConfirm() {},
     onOverlayClick: function onOverlayClick() {
         return true;
     }
 });
 var BaseDialog = function BaseDialog(props) {
+    var _useParams = (0, _usecustomevent.useParams)((0, _mergeprops.mergeProps)(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, children = _useParams_params.children, className = _useParams_params.className, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, content = _useParams_params.content, disableConfirmButton = _useParams_params.disableConfirmButton, footer = _useParams_params.footer, footerDirection = _useParams_params.footerDirection, header = _useParams_params.header, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, overlay = _useParams_params.overlay, overlayStyle = _useParams_params.overlayStyle, overlayClassName = _useParams_params.overlayClassName, style = _useParams_params.style, title = _useParams_params.title, visible = _useParams_params.visible, 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;
     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 _useParams = (0, _usecustomevent.useParams)((0, _mergeprops.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;
     (0, _usecustomevent.useCustomEvent)(id, function(param) {
         var status = param.status, options = param.options;
         setParams((0, _object_spread_props._)((0, _object_spread._)({}, options), {
@@ -88,8 +89,8 @@ var BaseDialog = function BaseDialog(props) {
             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) {
@@ -114,7 +115,7 @@ var BaseDialog = function BaseDialog(props) {
                         case 2:
                             _state.sent();
                             setLoading(false);
-                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                            onClose();
                             return [
                                 3,
                                 4
@@ -158,8 +159,8 @@ var BaseDialog = function BaseDialog(props) {
         };
         var renderConfirm = function renderConfirm() {
             return !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_index.default, {
-                size: "large",
                 type: "primary",
+                size: "large",
                 className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
                     disabled: disableConfirmButton
                 }),
@@ -177,8 +178,8 @@ var BaseDialog = function BaseDialog(props) {
         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));
@@ -191,8 +192,8 @@ var BaseDialog = function BaseDialog(props) {
     var onHandleClickOverlay = function onHandleClickOverlay(e) {
         if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
             var closed = onOverlayClick && onOverlayClick(e);
-            closed && onClose && onClose();
-            closed && onCancel && onCancel();
+            closed && onClose();
+            closed && onCancel();
         }
     };
     var renderContent = function renderContent() {

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

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

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

@@ -26,7 +26,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.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
-var _web = require("./web");
-var _mp = require("./mp");
+var _lottieweb = require("./lottieweb");
+var _lottiemp = require("./lottiemp");
 var implementation;
 if (process.env.TARO_ENV === 'h5') {
     // @ts-ignore
-    implementation = _web.Lottie;
-} else if (process.env.TARO_ENV === 'weapp') {
+    implementation = _lottieweb.Lottie;
+} else if (process.env.TARO_ENV === 'weapp' || process.env.TARO_ENV === 'jd') {
     // @ts-ignore
-    implementation = _mp.Lottie;
+    implementation = _lottiemp.Lottie;
 } else {
     // throw new Error(`不支持的 TARO_ENV: ${process.env.TARO_ENV}`)
     implementation = function implementation(props) {

package/dist/cjs/packages/lottie/{mp.js → lottiemp.js}

@@ -12,7 +12,7 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _taro = require("@tarojs/taro");
-var _lottieminiprogram = /*#__PURE__*/ _interop_require_default._(require("lottie-miniprogram"));
+var _lottieminiprogram = /*#__PURE__*/ _interop_require_default._(require("@nutui/lottie-miniprogram"));
 var _getsysteminfo = require("../../utils/get-system-info");
 var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
 var Lottie = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {

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

@@ -29,27 +29,33 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _reacttransitiongroup = require("react-transition-group");
 var _components = require("@tarojs/components");
+var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _platformtaro = require("../../utils/platform-taro");
+var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
 var _typings = require("../../utils/typings");
 var _usecustomevent = require("../../hooks/use-custom-event");
 var _mergeprops = require("../../utils/merge-props");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     id: '',
-    duration: 3000,
-    type: 'danger',
+    distance: 8,
+    navHeight: 57,
     position: 'top',
     visible: false,
+    closeable: false,
+    leftIcon: null,
+    rightIcon: null,
+    duration: 3000,
     onClose: function onClose() {},
     onClick: function onClick() {}
 });
 var classPrefix = 'nut-notify';
 var Notify = function Notify(props) {
-    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), id = _mergeProps.id, children = _mergeProps.children, style = _mergeProps.style, type = _mergeProps.type, className = _mergeProps.className, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), id = _mergeProps.id, style = _mergeProps.style, children = _mergeProps.children, distance = _mergeProps.distance, navHeight = _mergeProps.navHeight, closeable = _mergeProps.closeable, leftIcon = _mergeProps.leftIcon, rightIcon = _mergeProps.rightIcon, position = _mergeProps.position, visible = _mergeProps.visible, duration = _mergeProps.duration, className = _mergeProps.className, onClose = _mergeProps.onClose, onClick = _mergeProps.onClick;
     (0, _usecustomevent.useCustomEvent)(id, function(status) {
         status ? show() : hide();
     });
     var timer;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), showNotify = _useState[0], setShowNotify = _useState[1];
-    var cssRef = (0, _react.useRef)(null);
     (0, _react.useEffect)(function() {
         if (visible) {
             show();
@@ -59,9 +65,6 @@ var Notify = function Notify(props) {
     }, [
         visible
     ]);
-    var clickHandle = function clickHandle() {
-        onClick();
-    };
     var show = function show() {
         setShowNotify(true);
         clearTimer();
@@ -81,10 +84,29 @@ var Notify = function Notify(props) {
         setShowNotify(false);
         onClose();
     };
+    var getDistance = (0, _react.useMemo)(function() {
+        if (position === 'top') {
+            return {
+                top: (0, _pxtransform.default)((0, _platformtaro.web)() ? Number(distance) + navHeight : Number(distance))
+            };
+        }
+        return {
+            bottom: (0, _pxtransform.default)(Number(distance))
+        };
+    }, [
+        distance,
+        position
+    ]);
     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));
+    var classes = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix), true), (0, _define_property._)(_obj, "".concat(className), true), _obj));
+    var handleClick = function handleClick() {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleClickIcon = function handleClickIcon() {
+        hide();
+    };
+    var _obj1;
     return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
-        nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
         classNames: "fade",
@@ -93,10 +115,19 @@ var Notify = function Notify(props) {
         position: position,
         id: id
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classes, " ").concat(className),
-        style: style,
-        onClick: clickHandle
-    }, children));
+        className: classes,
+        style: (0, _object_spread._)({}, style, getDistance),
+        onClick: handleClick
+    }, leftIcon ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-left-icon")
+    }, leftIcon) : null, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: (0, _classnames.default)((_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-content"), true), (0, _define_property._)(_obj1, "".concat(classPrefix, "-ellipsis"), closeable || rightIcon), (0, _define_property._)(_obj1, "".concat(classPrefix, "-layout-left"), leftIcon || rightIcon), _obj1))
+    }, children), rightIcon || closeable ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-right-icon"),
+        onClick: handleClickIcon
+    }, rightIcon || (closeable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, {
+        size: 12
+    }) : null)) : null));
 };
 function open(selector) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/cjs/packages/notify/style/notify.scss

@@ -6,7 +6,7 @@
 /*入场动画过程*/
 .fade-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-in;
 }
 
 /*入场动画结束*/
@@ -22,7 +22,7 @@
 /*离场动画过程*/
 .fade-exit-active {
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-out;
 }
 
 /*离场动画结束*/
@@ -38,56 +38,59 @@
 /*页面第一次加载时的动画过程*/
 .fade-appear-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms;
 }
 
 .nut-notify {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  z-index: $notify-z-index;
   display: flex;
-  justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: $notify-padding;
-  color: $notify-text-color;
-  font-size: $notify-font-size;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   height: $notify-height;
-
-  &-popup-top,
-  &-popup-bottom {
-    position: fixed;
-    left: 0;
-    right: 0;
-    overflow-y: auto;
-    transition: transform 0.3s;
-    z-index: 9999;
-  }
-
-  &-popup-top {
-    top: 0;
-  }
-
-  &-popup-bottom {
-    bottom: 0;
+  padding: $notify-padding;
+  border-radius: $notify-border-radius;
+  box-shadow: $notify-box-shadow;
+  background-color: $notify-background-color;
+
+  &-content {
+    flex: 1;
+    text-align: center;
+    min-width: 0;
+    font-size: $notify-font-size;
+    color: $notify-text-color;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
-  &-base {
-    background: $notify-base-background-color;
+  &-ellipsis {
+    text-overflow: ellipsis;
   }
 
-  &-primary {
-    background: $notify-primary-background-color;
+  &-layout-left {
+    text-align: left;
   }
 
-  &-success {
-    background: $notify-success-background-color;
+  &-left-icon,
+  &-right-icon {
+    display: inline-flex;
   }
 
-  &-danger {
-    background: $notify-danger-background-color;
+  &-left-icon {
+    margin-right: 6px;
+    .nut-icon {
+      height: 16px;
+      width: 16px;
+    }
   }
 
-  &-warning {
-    background: $notify-warning-background-color;
+  &-right-icon {
+    margin-left: 6px;
+    .nut-icon {
+      height: 12px;
+      width: 12px;
+    }
   }
 }