@nutui/nutui-react 2.3.12-beta.0 → 2.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/esm/ActionSheet.js +30 -76
- package/dist/esm/Address.js +80 -171
- package/dist/esm/Animate.js +21 -49
- package/dist/esm/AnimatingNumbers.js +47 -120
- package/dist/esm/Audio.js +88 -159
- package/dist/esm/Avatar.js +44 -91
- package/dist/esm/AvatarCropper.js +149 -268
- package/dist/esm/AvatarGroup.js +13 -44
- package/dist/esm/BackTop.js +34 -75
- package/dist/esm/Barrage.js +49 -83
- package/dist/esm/Calendar.js +27 -119
- package/dist/esm/CalendarCard.js +180 -291
- package/dist/esm/CalendarItem.js +253 -314
- package/dist/esm/Card.js +38 -72
- package/dist/esm/Cell.js +27 -62
- package/dist/esm/CellGroup.js +16 -45
- package/dist/esm/CheckboxGroup.js +49 -85
- package/dist/esm/CircleProgress.js +42 -93
- package/dist/esm/Col.js +17 -48
- package/dist/esm/Collapse.js +18 -49
- package/dist/esm/ConfigProvider.js +3 -2
- package/dist/esm/CountDown.js +62 -101
- package/dist/esm/DatePicker.js +87 -127
- package/dist/esm/Dialog.js +116 -196
- package/dist/esm/Divider.js +16 -36
- package/dist/esm/Drag.js +32 -76
- package/dist/esm/Elevator.js +93 -133
- package/dist/esm/Ellipsis.js +71 -92
- package/dist/esm/Empty.js +31 -70
- package/dist/esm/FixedNav.js +32 -81
- package/dist/esm/Form.js +28 -61
- package/dist/esm/Grid.js +27 -51
- package/dist/esm/Image.js +47 -102
- package/dist/esm/ImagePreview.js +82 -135
- package/dist/esm/InfiniteLoading.js +77 -159
- package/dist/esm/Input.js +57 -125
- package/dist/esm/InputNumber.js +66 -96
- package/dist/esm/Layout.js +4 -28
- package/dist/esm/Loading.js +13 -40
- package/dist/esm/Menu.js +51 -105
- package/dist/esm/NavBar.js +46 -85
- package/dist/esm/NoticeBar.js +153 -226
- package/dist/esm/Notify.js +87 -178
- package/dist/esm/NumberKeyboard.js +84 -150
- package/dist/esm/Pagination.js +58 -97
- package/dist/esm/Picker.js +215 -276
- package/dist/esm/Popover.js +111 -159
- package/dist/esm/Price.js +23 -60
- package/dist/esm/Progress.js +47 -77
- package/dist/esm/PullToRefresh.js +94 -201
- package/dist/esm/RadioGroup.js +23 -53
- package/dist/esm/Range.js +113 -177
- package/dist/esm/Rate.js +48 -95
- package/dist/esm/Row.js +19 -43
- package/dist/esm/SearchBar.js +52 -119
- package/dist/esm/ShortPassword.js +58 -106
- package/dist/esm/SideNavBar.js +34 -59
- package/dist/esm/SideNavBarItem.js +7 -36
- package/dist/esm/Signature.js +49 -84
- package/dist/esm/Skeleton.js +31 -68
- package/dist/esm/Space.js +7 -34
- package/dist/esm/Step.js +35 -64
- package/dist/esm/Steps.js +16 -40
- package/dist/esm/Sticky.js +64 -108
- package/dist/esm/SubSideNavBar.js +42 -71
- package/dist/esm/Swipe.js +79 -143
- package/dist/esm/Swiper.js +136 -183
- package/dist/esm/SwiperItem.js +13 -38
- package/dist/esm/Switch.js +20 -53
- package/dist/esm/TabPane.js +6 -30
- package/dist/esm/Tabbar.js +29 -59
- package/dist/esm/Table.js +92 -141
- package/dist/esm/Tag.js +30 -74
- package/dist/esm/TextArea.js +37 -82
- package/dist/esm/TimeDetail.js +20 -58
- package/dist/esm/TimeSelect.js +57 -95
- package/dist/esm/Toast.js +110 -197
- package/dist/esm/Tour.js +88 -132
- package/dist/esm/TrendArrow.js +32 -74
- package/dist/esm/Uploader.js +226 -346
- package/dist/esm/UserContext.js +1 -1
- package/dist/esm/Video.js +34 -67
- package/dist/esm/VirtualList.js +127 -160
- package/dist/esm/WaterMark.js +24 -68
- package/dist/esm/badge2.js +23 -53
- package/dist/esm/button2.js +30 -63
- package/dist/esm/can-use-dom.js +1 -1
- package/dist/esm/cascader2.js +307 -536
- package/dist/esm/checkbox2.js +59 -96
- package/dist/esm/collapseitem2.js +48 -86
- package/dist/esm/configprovider2.js +43 -1003
- package/dist/esm/context.js +1 -1
- package/dist/esm/context2.js +1 -1
- package/dist/esm/context3.js +1 -1
- package/dist/esm/context4.js +1 -1
- package/dist/esm/context5.js +8 -8
- package/dist/esm/date.js +88 -66
- package/dist/esm/formitem2.js +236 -1510
- package/dist/esm/get-scroll-parent.js +8 -10
- package/dist/esm/griditem2.js +34 -52
- package/dist/esm/index.js +5 -12
- package/dist/esm/indicator2.js +13 -42
- package/dist/esm/menuitem2.js +81 -124
- package/dist/esm/overlay2.js +39 -78
- package/dist/esm/pad-zero.js +3 -4
- package/dist/esm/popup2.js +79 -124
- package/dist/esm/px-check.js +2 -2
- package/dist/esm/radio2.js +48 -79
- package/dist/esm/raf.js +5 -3
- package/dist/esm/render.js +17 -54
- package/dist/esm/safearea2.js +3 -5
- package/dist/esm/supports-passive.js +3 -3
- package/dist/esm/tabbaritem2.js +42 -58
- package/dist/esm/tabs2.js +82 -120
- package/dist/esm/tslib.es6.js +47 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo1.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo2.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo3.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo4.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo5.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo6.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo7.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo8.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/h5/demo9.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo1.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo10.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo2.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo3.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo4.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo5.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo6.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo7.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo8.d.ts +3 -0
- package/dist/esm/types/src/packages/button/demos/taro/demo9.d.ts +3 -0
- package/dist/esm/types/src/packages/configprovider/configprovider.d.ts +1 -0
- package/dist/esm/types/src/packages/configprovider/configprovider.taro.d.ts +1 -0
- package/dist/esm/types/src/packages/configprovider/index.d.ts +2 -2
- package/dist/esm/types/src/packages/configprovider/index.taro.d.ts +2 -2
- package/dist/esm/types/src/packages/inputnumber/inputnumber.taro.d.ts +2 -0
- package/dist/esm/typings.js +1 -1
- package/dist/esm/use-click-away.js +9 -13
- package/dist/esm/use-client-rect.js +4 -4
- package/dist/esm/use-props-value.js +10 -15
- package/dist/esm/use-refs.js +5 -7
- package/dist/esm/use-touch.js +16 -20
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +1 -1
- package/dist/locales/id-ID.js +1 -1
- package/dist/locales/tr-TR.js +1 -1
- package/dist/locales/zh-CN.js +1 -1
- package/dist/locales/zh-TW.js +1 -1
- package/dist/locales/zh-UG.js +1 -1
- package/dist/nutui.react.es.js +242 -284
- package/dist/nutui.react.umd.js +239 -281
- package/dist/style.mjs +1 -1
- package/dist/styles/variables-jmapp.scss +4 -0
- package/dist/types/packages/button/demos/h5/demo1.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo2.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo3.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo4.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo5.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo6.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo7.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo8.d.ts +3 -0
- package/dist/types/packages/button/demos/h5/demo9.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo1.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo10.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo2.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo3.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo4.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo5.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo6.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo7.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo8.d.ts +3 -0
- package/dist/types/packages/button/demos/taro/demo9.d.ts +3 -0
- package/dist/types/packages/configprovider/configprovider.d.ts +1 -0
- package/dist/types/packages/configprovider/configprovider.taro.d.ts +1 -0
- package/dist/types/packages/configprovider/index.d.ts +2 -2
- package/dist/types/packages/configprovider/index.taro.d.ts +2 -2
- package/dist/types/packages/empty/empty.d.ts +15 -3
- package/dist/types/packages/inputnumber/inputnumber.taro.d.ts +2 -0
- package/dist/types/packages/rate/rate.d.ts +1 -1
- package/package.json +5 -1
package/dist/esm/NoticeBar.js
CHANGED
|
@@ -1,70 +1,31 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
function ownKeys(e, r) {
|
|
4
|
-
var t = Object.keys(e);
|
|
5
|
-
if (Object.getOwnPropertySymbols) {
|
|
6
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
7
|
-
r && (o = o.filter(function(r2) {
|
|
8
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
9
|
-
})), t.push.apply(t, o);
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
}
|
|
13
|
-
function _objectSpread(e) {
|
|
14
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
15
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
16
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
17
|
-
_defineProperty(e, r2, t[r2]);
|
|
18
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
19
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
return e;
|
|
23
|
-
}
|
|
24
1
|
import React__default, { useRef, useState, useMemo, useEffect } from "react";
|
|
25
2
|
import { Notice, Close } from "@nutui/icons-react";
|
|
26
3
|
import classNames from "classnames";
|
|
27
4
|
import { g as getRect } from "./use-client-rect.js";
|
|
28
5
|
import { C as ComponentDefaults } from "./typings.js";
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
list
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
var scrollList = useRef([]);
|
|
53
|
-
var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), wrapWidth = _useState4[0], SetWrapWidth = _useState4[1];
|
|
54
|
-
var _useState5 = useState(true), _useState6 = _slicedToArray(_useState5, 2), firstRound = _useState6[0], SetFirstRound = _useState6[1];
|
|
55
|
-
var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), animationDuration = _useState8[0], SetAnimationDuration = _useState8[1];
|
|
56
|
-
var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), offsetWidth = _useState10[0], SetOffsetW = _useState10[1];
|
|
57
|
-
var _useState11 = useState(""), _useState12 = _slicedToArray(_useState11, 2), animationClass = _useState12[0], SetAnimationClass = _useState12[1];
|
|
58
|
-
var _useState13 = useState(false), _useState14 = _slicedToArray(_useState13, 2), animate = _useState14[0], SetAnimate = _useState14[1];
|
|
59
|
-
var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), timer = _useState16[0], SetTimer = _useState16[1];
|
|
60
|
-
var _useState17 = useState(null), _useState18 = _slicedToArray(_useState17, 2), isCanScroll = _useState18[0], SetIsCanScroll = _useState18[1];
|
|
61
|
-
var isVertical = direction === "vertical";
|
|
62
|
-
var _useState19 = useState(null), _useState20 = _slicedToArray(_useState19, 2), rect = _useState20[0], setRect = _useState20[1];
|
|
63
|
-
var active = 0;
|
|
64
|
-
var _useState21 = useState(false), _useState22 = _slicedToArray(_useState21, 2), ready = _useState22[0], setReady = _useState22[1];
|
|
65
|
-
var container = useRef(null);
|
|
66
|
-
var innerRef = useRef(null);
|
|
67
|
-
var swiperRef = useRef({
|
|
6
|
+
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { direction: "horizontal", list: [], duration: 1e3, height: 40, content: "", closeable: false, wrap: false, leftIcon: React__default.createElement(Notice, { width: 16, height: 16 }), rightIcon: null, delay: 1, scrollable: null, speed: 50 });
|
|
7
|
+
const NoticeBar = (props) => {
|
|
8
|
+
const { children, className, style, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, delay, scrollable, speed, close, click, onClose, onClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
|
|
9
|
+
const classPrefix = "nut-noticebar";
|
|
10
|
+
const wrapRef = useRef(null);
|
|
11
|
+
const contentRef = useRef(null);
|
|
12
|
+
const [showNoticeBar, SetShowNoticeBar] = useState(true);
|
|
13
|
+
const scrollList = useRef([]);
|
|
14
|
+
const [wrapWidth, SetWrapWidth] = useState(0);
|
|
15
|
+
const [firstRound, SetFirstRound] = useState(true);
|
|
16
|
+
const [animationDuration, SetAnimationDuration] = useState(0);
|
|
17
|
+
const [offsetWidth, SetOffsetW] = useState(0);
|
|
18
|
+
const [animationClass, SetAnimationClass] = useState("");
|
|
19
|
+
const [animate, SetAnimate] = useState(false);
|
|
20
|
+
const [timer, SetTimer] = useState(0);
|
|
21
|
+
const [isCanScroll, SetIsCanScroll] = useState(null);
|
|
22
|
+
const isVertical = direction === "vertical";
|
|
23
|
+
const [rect, setRect] = useState(null);
|
|
24
|
+
let active = 0;
|
|
25
|
+
const [ready, setReady] = useState(false);
|
|
26
|
+
const container = useRef(null);
|
|
27
|
+
const innerRef = useRef(null);
|
|
28
|
+
const swiperRef = useRef({
|
|
68
29
|
moving: false,
|
|
69
30
|
autoplayTimer: null,
|
|
70
31
|
width: 0,
|
|
@@ -72,11 +33,11 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
72
33
|
offset: 0,
|
|
73
34
|
size: 0
|
|
74
35
|
});
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
36
|
+
const [childOffset, setChildOffset] = useState([]);
|
|
37
|
+
const [offset, setOffset] = useState(0);
|
|
38
|
+
const { childs, childCount } = useMemo(() => {
|
|
39
|
+
let childCount2 = 0;
|
|
40
|
+
const childs2 = React__default.Children.map(children, (child) => {
|
|
80
41
|
if (!React__default.isValidElement(child))
|
|
81
42
|
return null;
|
|
82
43
|
childCount2++;
|
|
@@ -86,16 +47,16 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
86
47
|
childs: childs2,
|
|
87
48
|
childCount: childCount2
|
|
88
49
|
};
|
|
89
|
-
}, [children])
|
|
90
|
-
|
|
91
|
-
|
|
50
|
+
}, [children]);
|
|
51
|
+
let trackSize = childCount * Number(height);
|
|
52
|
+
const minOffset = (() => {
|
|
92
53
|
if (rect) {
|
|
93
|
-
|
|
54
|
+
const base = isVertical ? rect.height : rect.width;
|
|
94
55
|
return base - Number(height) * childCount;
|
|
95
56
|
}
|
|
96
57
|
return 0;
|
|
97
|
-
}();
|
|
98
|
-
useEffect(
|
|
58
|
+
})();
|
|
59
|
+
useEffect(() => {
|
|
99
60
|
if (isVertical) {
|
|
100
61
|
if (children) {
|
|
101
62
|
scrollList.current = [].concat(childs);
|
|
@@ -106,29 +67,29 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
106
67
|
} else {
|
|
107
68
|
initScrollWrap();
|
|
108
69
|
}
|
|
109
|
-
return
|
|
70
|
+
return () => {
|
|
110
71
|
clearInterval(timer);
|
|
111
72
|
};
|
|
112
73
|
}, []);
|
|
113
|
-
useEffect(
|
|
74
|
+
useEffect(() => {
|
|
114
75
|
initScrollWrap();
|
|
115
76
|
}, [content]);
|
|
116
|
-
useEffect(
|
|
77
|
+
useEffect(() => {
|
|
117
78
|
if (list && list.length) {
|
|
118
79
|
scrollList.current = [].concat(list);
|
|
119
80
|
}
|
|
120
81
|
}, [list]);
|
|
121
|
-
|
|
82
|
+
const initScrollWrap = (value) => {
|
|
122
83
|
if (showNoticeBar === false) {
|
|
123
84
|
return;
|
|
124
85
|
}
|
|
125
|
-
setTimeout(
|
|
86
|
+
setTimeout(() => {
|
|
126
87
|
if (!wrapRef.current || !contentRef.current) {
|
|
127
88
|
return;
|
|
128
89
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
90
|
+
const wrapW = getRect(wrapRef.current).width;
|
|
91
|
+
const offsetW = getRect(contentRef.current).width;
|
|
92
|
+
const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
|
|
132
93
|
SetIsCanScroll(canScroll);
|
|
133
94
|
if (canScroll) {
|
|
134
95
|
SetWrapWidth(wrapW);
|
|
@@ -140,70 +101,69 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
140
101
|
}
|
|
141
102
|
}, 0);
|
|
142
103
|
};
|
|
143
|
-
|
|
104
|
+
const handleClick = (event) => {
|
|
144
105
|
click && click(event);
|
|
145
106
|
onClick && onClick(event);
|
|
146
107
|
};
|
|
147
|
-
|
|
108
|
+
const onClickIcon = (event) => {
|
|
148
109
|
event.stopPropagation();
|
|
149
110
|
SetShowNoticeBar(!closeable);
|
|
150
111
|
close && close(event);
|
|
151
112
|
onClose && onClose(event);
|
|
152
113
|
};
|
|
153
|
-
|
|
114
|
+
const onAnimationEnd = () => {
|
|
154
115
|
SetFirstRound(false);
|
|
155
|
-
setTimeout(
|
|
116
|
+
setTimeout(() => {
|
|
156
117
|
SetAnimationDuration((offsetWidth + wrapWidth) / speed);
|
|
157
118
|
SetAnimationClass("play-infinite");
|
|
158
119
|
}, 0);
|
|
159
120
|
};
|
|
160
|
-
|
|
161
|
-
|
|
121
|
+
const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
|
|
122
|
+
const startRollEasy = () => {
|
|
162
123
|
showhorseLamp();
|
|
163
|
-
|
|
124
|
+
const timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
|
|
164
125
|
SetTimer(timerCurr);
|
|
165
126
|
};
|
|
166
|
-
|
|
127
|
+
const showhorseLamp = () => {
|
|
167
128
|
SetAnimate(true);
|
|
168
|
-
setTimeout(
|
|
129
|
+
setTimeout(() => {
|
|
169
130
|
scrollList.current.push(scrollList.current[0]);
|
|
170
131
|
scrollList.current.shift();
|
|
171
132
|
SetAnimate(false);
|
|
172
133
|
}, time);
|
|
173
134
|
};
|
|
174
|
-
|
|
135
|
+
const handleClickIcon = (event) => {
|
|
175
136
|
event.stopPropagation();
|
|
176
137
|
SetShowNoticeBar(!closeable);
|
|
177
138
|
close && close(event);
|
|
178
139
|
onClose && onClose(event);
|
|
179
140
|
};
|
|
180
|
-
|
|
141
|
+
const isEllipsis = () => {
|
|
181
142
|
if (isCanScroll == null) {
|
|
182
143
|
return wrap;
|
|
183
144
|
}
|
|
184
145
|
return !isCanScroll && !wrap;
|
|
185
146
|
};
|
|
186
|
-
|
|
187
|
-
animationDelay:
|
|
188
|
-
animationDuration:
|
|
189
|
-
transform:
|
|
147
|
+
const contentStyle = {
|
|
148
|
+
animationDelay: `${firstRound ? delay : 0}s`,
|
|
149
|
+
animationDuration: `${animationDuration}s`,
|
|
150
|
+
transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
|
|
190
151
|
};
|
|
191
|
-
|
|
192
|
-
height: isVertical ?
|
|
152
|
+
const barStyle = {
|
|
153
|
+
height: isVertical ? `${height}px` : ""
|
|
193
154
|
};
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
transition: animate ?
|
|
198
|
-
marginTop: animate ?
|
|
155
|
+
const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
|
|
156
|
+
const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
|
|
157
|
+
const horseLampStyle = {
|
|
158
|
+
transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
|
|
159
|
+
marginTop: animate ? `-${height}px` : ""
|
|
199
160
|
};
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
var _height = rects.height;
|
|
161
|
+
const init = (active2 = 0) => {
|
|
162
|
+
const rects = getRect(container === null || container === void 0 ? void 0 : container.current);
|
|
163
|
+
const _active = Math.max(Math.min(childCount - 1, active2), 0);
|
|
164
|
+
const _height = rects.height;
|
|
205
165
|
trackSize = childCount * Number(_height);
|
|
206
|
-
|
|
166
|
+
const targetOffset = getOffset(_active);
|
|
207
167
|
swiperRef.current.moving = true;
|
|
208
168
|
if (ready) {
|
|
209
169
|
swiperRef.current.moving = false;
|
|
@@ -213,47 +173,46 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
213
173
|
setOffset(targetOffset);
|
|
214
174
|
setReady(true);
|
|
215
175
|
};
|
|
216
|
-
useEffect(
|
|
176
|
+
useEffect(() => {
|
|
217
177
|
if (ready) {
|
|
218
178
|
stopAutoPlay();
|
|
219
179
|
autoplay();
|
|
220
180
|
}
|
|
221
|
-
return
|
|
181
|
+
return () => {
|
|
222
182
|
setReady(false);
|
|
223
183
|
};
|
|
224
184
|
}, [ready]);
|
|
225
|
-
useEffect(
|
|
185
|
+
useEffect(() => {
|
|
226
186
|
if (isVertical && children) {
|
|
227
187
|
init();
|
|
228
188
|
stopAutoPlay();
|
|
229
189
|
autoplay();
|
|
230
190
|
}
|
|
231
191
|
}, [children, container === null || container === void 0 ? void 0 : container.current]);
|
|
232
|
-
|
|
192
|
+
const stopAutoPlay = () => {
|
|
233
193
|
clearTimeout(swiperRef.current.autoplayTimer);
|
|
234
194
|
swiperRef.current.autoplayTimer = null;
|
|
235
195
|
};
|
|
236
|
-
|
|
196
|
+
const autoplay = () => {
|
|
237
197
|
if (childCount <= 1)
|
|
238
198
|
return;
|
|
239
199
|
stopAutoPlay();
|
|
240
|
-
swiperRef.current.autoplayTimer = setTimeout(
|
|
200
|
+
swiperRef.current.autoplayTimer = setTimeout(() => {
|
|
241
201
|
next();
|
|
242
|
-
|
|
202
|
+
autoplay();
|
|
243
203
|
}, Number(duration) + 100 * speed);
|
|
244
204
|
};
|
|
245
|
-
|
|
246
|
-
var _ref$pace = _ref.pace, pace = _ref$pace === void 0 ? 0 : _ref$pace, _ref$offset = _ref.offset, offset2 = _ref$offset === void 0 ? 0 : _ref$offset;
|
|
205
|
+
const move = ({ pace = 0, offset: offset2 = 0 }) => {
|
|
247
206
|
if (childCount <= 1)
|
|
248
207
|
return;
|
|
249
|
-
|
|
250
|
-
|
|
208
|
+
const targetActive = getActive(pace);
|
|
209
|
+
const targetOffset = getOffset(targetActive, offset2);
|
|
251
210
|
if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
|
|
252
|
-
|
|
211
|
+
const rightBound = targetOffset < minOffset;
|
|
253
212
|
childOffset[0] = rightBound ? trackSize : 0;
|
|
254
213
|
}
|
|
255
214
|
if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
|
|
256
|
-
|
|
215
|
+
const leftBound = targetOffset > 0;
|
|
257
216
|
childOffset[childCount - 1] = leftBound ? -trackSize : 0;
|
|
258
217
|
}
|
|
259
218
|
setChildOffset(childOffset);
|
|
@@ -261,10 +220,10 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
261
220
|
setOffset(targetOffset);
|
|
262
221
|
getStyle(targetOffset);
|
|
263
222
|
};
|
|
264
|
-
|
|
223
|
+
const next = () => {
|
|
265
224
|
resettPosition();
|
|
266
|
-
requestFrame(
|
|
267
|
-
requestFrame(
|
|
225
|
+
requestFrame(() => {
|
|
226
|
+
requestFrame(() => {
|
|
268
227
|
swiperRef.current.moving = false;
|
|
269
228
|
move({
|
|
270
229
|
pace: 1
|
|
@@ -272,141 +231,109 @@ var NoticeBar = function NoticeBar2(props) {
|
|
|
272
231
|
});
|
|
273
232
|
});
|
|
274
233
|
};
|
|
275
|
-
|
|
234
|
+
const handleItemClick = (event, value) => {
|
|
276
235
|
onItemClick && onItemClick(event, value);
|
|
277
236
|
};
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
var target = innerRef.current;
|
|
237
|
+
const getStyle = (moveOffset = offset) => {
|
|
238
|
+
const target = innerRef.current;
|
|
281
239
|
if (!target) {
|
|
282
240
|
return;
|
|
283
241
|
}
|
|
284
|
-
|
|
285
|
-
|
|
242
|
+
let _offset = 0;
|
|
243
|
+
const val = rect.height - height;
|
|
286
244
|
_offset = moveOffset + Number(active === childCount - 1 && val / 2);
|
|
287
|
-
target.style.transitionDuration =
|
|
288
|
-
target.style.height =
|
|
289
|
-
target.style.transform =
|
|
245
|
+
target.style.transitionDuration = `${swiperRef.current.moving ? 0 : duration}ms`;
|
|
246
|
+
target.style.height = `${Number(height) * childCount}px`;
|
|
247
|
+
target.style.transform = `translate3D(0,${_offset}px,0)`;
|
|
290
248
|
};
|
|
291
|
-
|
|
292
|
-
|
|
249
|
+
const itemStyle = (index) => {
|
|
250
|
+
const style2 = {};
|
|
293
251
|
if (height) {
|
|
294
|
-
style2.height =
|
|
295
|
-
style2.lineHeight =
|
|
252
|
+
style2.height = `${height}px`;
|
|
253
|
+
style2.lineHeight = `${height}px`;
|
|
296
254
|
}
|
|
297
|
-
|
|
255
|
+
const offset2 = childOffset[index];
|
|
298
256
|
if (offset2) {
|
|
299
|
-
style2.transform =
|
|
257
|
+
style2.transform = `translate3D(0,${offset2}px,0)`;
|
|
300
258
|
}
|
|
301
259
|
return style2;
|
|
302
260
|
};
|
|
303
|
-
|
|
261
|
+
const getActive = (pace) => {
|
|
304
262
|
if (pace) {
|
|
305
|
-
|
|
263
|
+
const _active = active + pace;
|
|
306
264
|
return range(_active, -1, childCount);
|
|
307
265
|
}
|
|
308
266
|
return active;
|
|
309
267
|
};
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
var targetOffset = offset2 - currentPosition;
|
|
268
|
+
const getOffset = (active2, offset2 = 0) => {
|
|
269
|
+
const currentPosition = active2 * Number(height);
|
|
270
|
+
const targetOffset = offset2 - currentPosition;
|
|
314
271
|
return targetOffset;
|
|
315
272
|
};
|
|
316
|
-
|
|
273
|
+
const requestFrame = (fn) => {
|
|
317
274
|
window.requestAnimationFrame.call(window, fn);
|
|
318
275
|
};
|
|
319
|
-
|
|
276
|
+
const range = (num, min, max) => {
|
|
320
277
|
return Math.min(Math.max(num, min), max);
|
|
321
278
|
};
|
|
322
|
-
|
|
279
|
+
const resettPosition = () => {
|
|
323
280
|
swiperRef.current.moving = true;
|
|
324
281
|
if (active <= -1) {
|
|
325
|
-
move({
|
|
326
|
-
pace: childCount
|
|
327
|
-
});
|
|
282
|
+
move({ pace: childCount });
|
|
328
283
|
}
|
|
329
284
|
if (active >= childCount) {
|
|
330
|
-
move({
|
|
331
|
-
pace: -childCount
|
|
332
|
-
});
|
|
285
|
+
move({ pace: -childCount });
|
|
333
286
|
}
|
|
334
287
|
};
|
|
335
|
-
|
|
336
|
-
"nut-noticebar-box": true
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
288
|
+
const noticebarClass = classNames({
|
|
289
|
+
"nut-noticebar-box": true,
|
|
290
|
+
[`nut-noticebar-box-wrapable`]: wrap
|
|
291
|
+
});
|
|
292
|
+
useEffect(() => {
|
|
293
|
+
return () => {
|
|
340
294
|
stopAutoPlay();
|
|
341
295
|
};
|
|
342
296
|
}, []);
|
|
343
|
-
return React__default.createElement(
|
|
344
|
-
|
|
345
|
-
style
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
style: barStyle,
|
|
369
|
-
ref: container,
|
|
370
|
-
onClick: handleClick
|
|
371
|
-
}, leftIcon ? React__default.createElement("div", {
|
|
372
|
-
className: "nut-noticebar-box-left-icon"
|
|
373
|
-
}, leftIcon) : null, children ? React__default.createElement("div", {
|
|
374
|
-
className: "nut-noticebar-box-wrap",
|
|
375
|
-
ref: innerRef
|
|
376
|
-
}, scrollList.current.map(function(item, index) {
|
|
377
|
-
return React__default.createElement("div", {
|
|
378
|
-
style: itemStyle(index),
|
|
379
|
-
key: index,
|
|
380
|
-
onClick: function onClick2(e) {
|
|
381
|
-
handleItemClick(e, item);
|
|
382
|
-
}
|
|
383
|
-
}, item);
|
|
384
|
-
})) : React__default.createElement("div", {
|
|
385
|
-
className: "nut-noticebar-box-horseLamp-list",
|
|
386
|
-
style: horseLampStyle
|
|
387
|
-
}, scrollList.current.map(function(item, index) {
|
|
388
|
-
return (
|
|
389
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
390
|
-
React__default.createElement("div", {
|
|
391
|
-
className: "nut-noticebar-box-horseLamp-list-item",
|
|
392
|
-
style: {
|
|
393
|
-
height
|
|
394
|
-
},
|
|
395
|
-
key: index,
|
|
396
|
-
onClick: function onClick2(e) {
|
|
297
|
+
return React__default.createElement(
|
|
298
|
+
"div",
|
|
299
|
+
{ className: `${classPrefix} ${className || ""}`, style },
|
|
300
|
+
showNoticeBar && direction === "horizontal" ? React__default.createElement(
|
|
301
|
+
"div",
|
|
302
|
+
{ className: noticebarClass, style: barStyle, onClick: handleClick },
|
|
303
|
+
leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
|
|
304
|
+
React__default.createElement(
|
|
305
|
+
"div",
|
|
306
|
+
{ ref: wrapRef, className: "nut-noticebar-box-wrap" },
|
|
307
|
+
React__default.createElement(
|
|
308
|
+
"div",
|
|
309
|
+
{ ref: contentRef, className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
|
|
310
|
+
children,
|
|
311
|
+
content
|
|
312
|
+
)
|
|
313
|
+
),
|
|
314
|
+
closeable || rightIcon ? React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { width: 12, height: 12 })) : null
|
|
315
|
+
) : null,
|
|
316
|
+
showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement(
|
|
317
|
+
"div",
|
|
318
|
+
{ className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
|
|
319
|
+
leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
|
|
320
|
+
children ? React__default.createElement("div", { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
|
|
321
|
+
return React__default.createElement("div", { style: itemStyle(index), key: index, onClick: (e) => {
|
|
397
322
|
handleItemClick(e, item);
|
|
398
|
-
}
|
|
399
|
-
}, item)
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
323
|
+
} }, item);
|
|
324
|
+
})) : React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list", style: horseLampStyle }, scrollList.current.map((item, index) => {
|
|
325
|
+
return (
|
|
326
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
327
|
+
React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list-item", style: { height }, key: index, onClick: (e) => {
|
|
328
|
+
handleItemClick(e, item);
|
|
329
|
+
} }, item)
|
|
330
|
+
);
|
|
331
|
+
})),
|
|
332
|
+
React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: (e) => {
|
|
333
|
+
handleClickIcon(e);
|
|
334
|
+
} }, rightIcon || (closeable ? React__default.createElement(Close, { width: 12, height: 12 }) : null))
|
|
335
|
+
) : null
|
|
336
|
+
);
|
|
410
337
|
};
|
|
411
338
|
NoticeBar.defaultProps = defaultProps;
|
|
412
339
|
NoticeBar.displayName = "NutNoticeBar";
|