@nutui/nutui-react 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/es/packages/popup/style-jrkf/style.css

@@ -129,12 +129,6 @@
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, 12px) var(--nutui-popup-border-radius, 12px);
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -191,6 +185,9 @@
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -218,6 +215,9 @@
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -245,6 +245,9 @@
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -272,6 +275,9 @@
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/es/packages/pulltorefresh/pulltorefresh.js

@@ -29,7 +29,37 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     onRefresh: function onRefresh() {}
 });
 export var PullToRefresh = function PullToRefresh(p) {
-    var doRefresh = function doRefresh() {
+    var classPrefix = 'nut-pulltorefresh';
+    var locale = useConfig().locale;
+    var props = _object_spread({}, defaultProps, p, {
+        pullingText: p.pullingText || locale.pullToRefresh.pullingText,
+        canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
+        refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
+        completeText: p.completeText || locale.pullToRefresh.completeText
+    });
+    var classes = classNames(classPrefix, props.className, "".concat(classPrefix, "-").concat(props.type));
+    var headHeight = props.headHeight;
+    var threshold = props.threshold;
+    var _useState = _sliced_to_array(useState('pulling'), 2), status = _useState[0], setStatus = _useState[1];
+    var _useSpring = _sliced_to_array(useSpring(function() {
+        return {
+            from: {
+                height: 0
+            },
+            config: {
+                tension: 300,
+                friction: 30,
+                clamp: true
+            }
+        };
+    }), 2), springStyles = _useSpring[0], api = _useSpring[1];
+    var elementRef = useRef(null);
+    var pullingRef = useRef(false);
+    useEffect(function() {
+        var _elementRef_current;
+        (_elementRef_current = elementRef.current) === null || _elementRef_current === void 0 ? void 0 : _elementRef_current.addEventListener('touchmove', function() {});
+    }, []);
+    function doRefresh() {
         return _async_to_generator(function() {
             var e;
             return _ts_generator(this, function(_state) {
@@ -126,41 +156,8 @@ export var PullToRefresh = function PullToRefresh(p) {
                 }
             });
         })();
-    };
-    var classPrefix = 'nut-pulltorefresh';
-    var locale = useConfig().locale;
-    var props = _object_spread({}, defaultProps, p, {
-        pullingText: p.pullingText || locale.pullToRefresh.pullingText,
-        canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
-        refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
-        completeText: p.completeText || locale.pullToRefresh.completeText
-    });
-    var classes = classNames(classPrefix, props.className, "".concat(classPrefix, "-").concat(props.type));
-    var headHeight = props.headHeight;
-    var threshold = props.threshold;
-    var _useState = _sliced_to_array(useState('pulling'), 2), status = _useState[0], setStatus = _useState[1];
-    var _useSpring = _sliced_to_array(useSpring(function() {
-        return {
-            from: {
-                height: 0
-            },
-            config: {
-                tension: 300,
-                friction: 30,
-                clamp: true
-            }
-        };
-    }), 2), springStyles = _useSpring[0], api = _useSpring[1];
-    var elementRef = useRef(null);
-    var pullingRef = useRef(false);
-    useEffect(function() {
-        var _elementRef_current;
-        (_elementRef_current = elementRef.current) === null || _elementRef_current === void 0 ? void 0 : _elementRef_current.addEventListener('touchmove', function() {});
-    }, []);
+    }
     useDrag(function(state) {
-        var getScrollTop = function getScrollTop(element) {
-            return 'scrollTop' in element ? element.scrollTop : element.scrollY;
-        };
         if (status === 'refreshing' || status === 'complete') return;
         var event = state.event;
         // 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
@@ -175,6 +172,9 @@ export var PullToRefresh = function PullToRefresh(p) {
             }
             return;
         }
+        function getScrollTop(element) {
+            return 'scrollTop' in element ? element.scrollTop : element.scrollY;
+        }
         // 手指位置
         var _state_movement = _sliced_to_array(state.movement, 2), y = _state_movement[1];
         // 第一个事件，并且手指位置大于0

package/dist/es/packages/skeleton/skeleton.js

@@ -14,21 +14,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     duration: 0.6
 });
 export var Skeleton = function Skeleton(props) {
-    var shapeStyle = function shapeStyle() {
-        if (shape === 'circle') return {
-            borderRadius: '50%'
-        };
-        if (shape === 'square') return {
-            borderRadius: '0'
-        };
-        return {};
-    };
-    var durationStyle = function durationStyle() {
-        if (typeof duration !== 'undefined') return {
-            animationDuration: "".concat(duration, "s")
-        };
-        return {};
-    };
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, width = _$_object_spread.width, height = _$_object_spread.height, shape = _$_object_spread.shape, animated = _$_object_spread.animated, rows = _$_object_spread.rows, visible = _$_object_spread.visible, size = _$_object_spread.size, duration = _$_object_spread.duration, children = _$_object_spread.children, rest = _object_without_properties(_$_object_spread, [
         "className",
         "width",
@@ -50,6 +35,21 @@ export var Skeleton = function Skeleton(props) {
             return i;
         });
     };
+    function shapeStyle() {
+        if (shape === 'circle') return {
+            borderRadius: '50%'
+        };
+        if (shape === 'square') return {
+            borderRadius: '0'
+        };
+        return {};
+    }
+    function durationStyle() {
+        if (typeof duration !== 'undefined') return {
+            animationDuration: "".concat(duration, "s")
+        };
+        return {};
+    }
     var _useState = _sliced_to_array(useState(false), 2), animate = _useState[0], setAnimate = _useState[1];
     var playAnimation = function playAnimation() {
         setAnimate(false); // 首先将 animate 设置为 false

package/dist/es/packages/swiper/swiper.js

@@ -20,17 +20,6 @@ var defaultProps = {
     effect: undefined
 };
 export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var boundIndex = function boundIndex(current) {
-        var min = 0;
-        var max = count - 1;
-        if (current === max && !loop && props.slideSize) {
-            var slideSize = props.slideSize;
-            var swiperSize = getSwiperSize();
-            var ratio = (swiperSize - slideSize) / slideSize;
-            return bound(current, min, max - ratio);
-        }
-        return current;
-    };
     var classPrefix = 'nut-swiper';
     var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, direction = _$_object_spread.direction, indicator = _$_object_spread.indicator, loop = _$_object_spread.loop, effect = _$_object_spread.effect, autoplay = _$_object_spread.autoplay, touchable = _$_object_spread.touchable, defaultValue = _$_object_spread.defaultValue, duration = _$_object_spread.duration, style = _$_object_spread.style, className = _$_object_spread.className;
     var isVertical = direction === 'vertical';
@@ -125,6 +114,17 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         count,
         runTimeSwiper
     ]);
+    function boundIndex(current) {
+        var min = 0;
+        var max = count - 1;
+        if (current === max && !loop && props.slideSize) {
+            var slideSize = props.slideSize;
+            var swiperSize = getSwiperSize();
+            var ratio = (swiperSize - slideSize) / slideSize;
+            return bound(current, min, max - ratio);
+        }
+        return current;
+    }
     var to = function to(index) {
         var immediate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
         var _props_onChange;

package/dist/es/packages/toast/Notification.js

@@ -147,7 +147,13 @@ var Notification = /*#__PURE__*/ function(_superClass) {
 _define_property(Notification, "newInstance", void 0);
 export { Notification as default };
 Notification.newInstance = function(properties, callback) {
-    var ref = function ref(instance) {
+    var element = document.createElement('div');
+    var id = properties.id ? properties.id : "".concat(Date.now());
+    element.id = id;
+    properties.id = id;
+    document.body.appendChild(element);
+    var called = false;
+    function ref(instance) {
         if (called) {
             return;
         }
@@ -159,13 +165,7 @@ Notification.newInstance = function(properties, callback) {
                 element && element.parentNode && element.parentNode.removeChild(element);
             }
         });
-    };
-    var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(Date.now());
-    element.id = id;
-    properties.id = id;
-    document.body.appendChild(element);
-    var called = false;
+    }
     render(/*#__PURE__*/ React.createElement(Notification, _object_spread_props(_object_spread({}, properties), {
         ref: ref
     })), element);

package/dist/es/packages/tour/tour.js

@@ -147,7 +147,7 @@ export var Tour = function Tour(props) {
                 0,
                 12
             ],
-            arrowOffset: item.arrowOffset || 0
+            arrowOffset: item.arrowOffset || 20
         }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'step' && /*#__PURE__*/ React.createElement("div", {
             className: "nut-tour-content"
         }, title && /*#__PURE__*/ React.createElement("div", {

package/dist/es/types/spec/noticebar/base.d.ts

@@ -31,14 +31,30 @@ export interface BaseNoticeBar extends BaseProps {
     */
     leftIcon: ReactNode
     /**
-    * 右边的 icon，在 closeable 模式下默认为 <Close />
+    * 右边的 icon，在 closeable 模式下默认为 <MaskClose />
     */
     rightIcon: ReactNode
     /**
-    * 区别于rightIcon，为右边自定义区域，仅用于 direction='horizontal' 模式
+    * ~~已废弃，建议使用 action 替代~~ 右边自定义区域，仅用于 direction='horizontal' 模式
     */
     right: ReactNode
     /**
+    * 副文本内容，显示在主文本下方
+    */
+    description: ReactNode
+    /**
+    * 信息标图标，显示在文案右侧，尺寸 12×12
+    */
+    tag: ReactNode
+    /**
+    * 操作按钮区域，支持弱行动（文字链接）和强行动（按钮），最大宽度 99px
+    */
+    action: ReactNode
+    /**
+    * 自动关闭延时（毫秒），0 或不传为手动关闭
+    */
+    autoClose: number
+    /**
     * 延时多少秒
     */
     delay: string | number
@@ -55,7 +71,7 @@ export interface BaseNoticeBar extends BaseProps {
     /**
     * 关闭通知栏时触发
     */
-    onClose?: (event: any) => void
+    onClose?: (event?: any) => void
     /**
     * 外层点击事件回调
     */

package/dist/es/types/spec/popover/base.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps } from '../../base/props';
 import { FullPosition, SimpleValues, UITheme } from '../../base/atoms';
+export type PopoverType = 'status' | 'description';
 export interface PopoverList {
     key?: string;
     name: string;
@@ -20,7 +21,14 @@ export interface WrapperPosition {
     right: number;
 }
 export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
-    theme: UITheme;
+    /**
+    * 气泡类型，status 状态型（图标+文案+关闭），description 说明型（仅文案）
+    */
+    type: PopoverType
+    /**
+    * 主题风格，默认 dark 为设计规范深色气泡；light 为明亮风格（白底深字）
+    */
+    theme: UITheme
     /**
     * 弹出位置，里面具体的参数值可以参考上面的位置自定义例子
     */
@@ -57,6 +65,14 @@ export type BasePopover<POPUP_PROPS> = POPUP_PROPS & BaseProps & {
     * 是否在点击选项后关闭
     */
     closeOnActionClick: boolean
+    /**
+    * 是否自动弹出，需配合 onOpen 更新 visible
+    */
+    autoShow: boolean
+    /**
+    * 自动关闭时长（ms），0 表示不自动关闭
+    */
+    duration: number
     children?: ReactNode;
     /**
     * 点击切换 popover 展示状态

package/dist/es/utils/render.js

@@ -1,7 +1,7 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
 import * as ReactDOM from "react-dom";
 // Let compiler not to search module usage
 var fullClone = _object_spread({}, ReactDOM);