@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/Swiper.js
CHANGED
|
@@ -1,28 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
var _excluded = ["children", "direction", "className", "onChange", "defaultValue", "indicator", "touchable", "preventDefault", "stopPropagation", "autoPlay", "center"];
|
|
5
|
-
function ownKeys(e, r) {
|
|
6
|
-
var t = Object.keys(e);
|
|
7
|
-
if (Object.getOwnPropertySymbols) {
|
|
8
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
9
|
-
r && (o = o.filter(function(r2) {
|
|
10
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
11
|
-
})), t.push.apply(t, o);
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
}
|
|
15
|
-
function _objectSpread(e) {
|
|
16
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
17
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
18
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
19
|
-
_defineProperty(e, r2, t[r2]);
|
|
20
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
21
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
return e;
|
|
25
|
-
}
|
|
1
|
+
import { _ as __rest } from "./tslib.es6.js";
|
|
26
2
|
import React__default, { useRef, useState, useMemo, useEffect } from "react";
|
|
27
3
|
import classNames from "classnames";
|
|
28
4
|
import { D as DataContext } from "./context4.js";
|
|
@@ -31,7 +7,7 @@ import { I as Indicator } from "./indicator2.js";
|
|
|
31
7
|
import { u as useTouch } from "./use-touch.js";
|
|
32
8
|
import { r as requestAniFrame } from "./raf.js";
|
|
33
9
|
import SwiperItem from "./SwiperItem.js";
|
|
34
|
-
|
|
10
|
+
const defaultProps = {
|
|
35
11
|
duration: 500,
|
|
36
12
|
defaultValue: 0,
|
|
37
13
|
autoPlay: 0,
|
|
@@ -44,12 +20,12 @@ var defaultProps = {
|
|
|
44
20
|
center: false,
|
|
45
21
|
className: ""
|
|
46
22
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
23
|
+
const Swiper = React__default.forwardRef((props, ref) => {
|
|
24
|
+
const mergedProps = Object.assign(Object.assign({}, defaultProps), props);
|
|
25
|
+
const { children, direction, className, onChange, defaultValue, indicator, touchable, preventDefault, stopPropagation, autoPlay, center } = mergedProps, rest = __rest(mergedProps, ["children", "direction", "className", "onChange", "defaultValue", "indicator", "touchable", "preventDefault", "stopPropagation", "autoPlay", "center"]);
|
|
26
|
+
const container = useRef(null);
|
|
27
|
+
const innerRef = useRef(null);
|
|
28
|
+
const swiperRef = useRef({
|
|
53
29
|
moving: false,
|
|
54
30
|
autoplayTimer: null,
|
|
55
31
|
width: 0,
|
|
@@ -57,19 +33,19 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
57
33
|
offset: 0,
|
|
58
34
|
size: 0
|
|
59
35
|
});
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
36
|
+
const touch = useTouch();
|
|
37
|
+
const isVertical = direction === "vertical";
|
|
38
|
+
const [rect, setRect] = useState(null);
|
|
39
|
+
let [active, setActive] = useState(0);
|
|
40
|
+
const [width, setWidth] = useState(0);
|
|
41
|
+
const [height, setHeight] = useState(0);
|
|
42
|
+
const [offset, setOffset] = useState(0);
|
|
43
|
+
const [childOffset, setChildOffset] = useState([]);
|
|
44
|
+
const [ready, setReady] = useState(false);
|
|
45
|
+
let size = isVertical ? height : width;
|
|
46
|
+
const { swiperItems, swiperItemCount } = useMemo(() => {
|
|
47
|
+
let count = 0;
|
|
48
|
+
const swiperItems2 = React__default.Children.map(props.children, (child) => {
|
|
73
49
|
if (!React__default.isValidElement(child))
|
|
74
50
|
return null;
|
|
75
51
|
count++;
|
|
@@ -79,50 +55,46 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
79
55
|
swiperItems: swiperItems2,
|
|
80
56
|
swiperItemCount: count
|
|
81
57
|
};
|
|
82
|
-
}, [props.children])
|
|
83
|
-
|
|
84
|
-
|
|
58
|
+
}, [props.children]);
|
|
59
|
+
let trackSize = swiperItemCount * Number(size);
|
|
60
|
+
const parent = {
|
|
85
61
|
propSwiper: mergedProps,
|
|
86
62
|
size
|
|
87
63
|
};
|
|
88
|
-
|
|
64
|
+
const minOffset = (() => {
|
|
89
65
|
if (rect) {
|
|
90
|
-
|
|
66
|
+
const base = isVertical ? rect.height : rect.width;
|
|
91
67
|
return base - Number(size) * swiperItemCount;
|
|
92
68
|
}
|
|
93
69
|
return 0;
|
|
94
|
-
}();
|
|
95
|
-
|
|
70
|
+
})();
|
|
71
|
+
const stopAutoPlay = () => {
|
|
96
72
|
clearTimeout(swiperRef.current.autoplayTimer);
|
|
97
73
|
swiperRef.current.autoplayTimer = null;
|
|
98
74
|
};
|
|
99
|
-
|
|
75
|
+
const startPlay = () => {
|
|
100
76
|
if (mergedProps.autoPlay <= 0 || swiperItemCount <= 1)
|
|
101
77
|
return;
|
|
102
78
|
stopAutoPlay();
|
|
103
|
-
swiperRef.current.autoplayTimer = setTimeout(
|
|
79
|
+
swiperRef.current.autoplayTimer = setTimeout(() => {
|
|
104
80
|
next();
|
|
105
|
-
|
|
81
|
+
startPlay();
|
|
106
82
|
}, Number(mergedProps.autoPlay));
|
|
107
83
|
};
|
|
108
|
-
|
|
84
|
+
const resetPosition = () => {
|
|
109
85
|
swiperRef.current.moving = true;
|
|
110
86
|
if (active <= -1) {
|
|
111
|
-
move({
|
|
112
|
-
pace: swiperItemCount
|
|
113
|
-
});
|
|
87
|
+
move({ pace: swiperItemCount });
|
|
114
88
|
}
|
|
115
89
|
if (active >= swiperItemCount) {
|
|
116
|
-
move({
|
|
117
|
-
pace: -swiperItemCount
|
|
118
|
-
});
|
|
90
|
+
move({ pace: -swiperItemCount });
|
|
119
91
|
}
|
|
120
92
|
};
|
|
121
|
-
|
|
93
|
+
const prev = () => {
|
|
122
94
|
resetPosition();
|
|
123
95
|
touch.reset();
|
|
124
|
-
requestAniFrame(
|
|
125
|
-
requestAniFrame(
|
|
96
|
+
requestAniFrame(() => {
|
|
97
|
+
requestAniFrame(() => {
|
|
126
98
|
swiperRef.current.moving = false;
|
|
127
99
|
move({
|
|
128
100
|
pace: -1,
|
|
@@ -131,11 +103,11 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
131
103
|
});
|
|
132
104
|
});
|
|
133
105
|
};
|
|
134
|
-
|
|
106
|
+
const next = () => {
|
|
135
107
|
resetPosition();
|
|
136
108
|
touch.reset();
|
|
137
|
-
requestAniFrame(
|
|
138
|
-
requestAniFrame(
|
|
109
|
+
requestAniFrame(() => {
|
|
110
|
+
requestAniFrame(() => {
|
|
139
111
|
swiperRef.current.moving = false;
|
|
140
112
|
move({
|
|
141
113
|
pace: 1,
|
|
@@ -144,13 +116,13 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
144
116
|
});
|
|
145
117
|
});
|
|
146
118
|
};
|
|
147
|
-
|
|
119
|
+
const to = (index) => {
|
|
148
120
|
resetPosition();
|
|
149
121
|
touch.reset();
|
|
150
|
-
requestAniFrame(
|
|
151
|
-
requestAniFrame(
|
|
122
|
+
requestAniFrame(() => {
|
|
123
|
+
requestAniFrame(() => {
|
|
152
124
|
swiperRef.current.moving = false;
|
|
153
|
-
|
|
125
|
+
let targetIndex;
|
|
154
126
|
if (props.loop && swiperItemCount === index) {
|
|
155
127
|
targetIndex = active === 0 ? 0 : index;
|
|
156
128
|
} else {
|
|
@@ -163,46 +135,43 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
163
135
|
});
|
|
164
136
|
});
|
|
165
137
|
};
|
|
166
|
-
|
|
138
|
+
const resize = () => {
|
|
167
139
|
init(active);
|
|
168
140
|
};
|
|
169
|
-
|
|
170
|
-
var
|
|
141
|
+
const move = ({ pace = 0, offset: offset2 = 0, isEmit = false, movingStatus = false }) => {
|
|
142
|
+
var _a;
|
|
171
143
|
if (swiperItemCount <= 1)
|
|
172
144
|
return;
|
|
173
|
-
|
|
174
|
-
|
|
145
|
+
const targetActive = getActive(pace);
|
|
146
|
+
const targetOffset = getOffset(targetActive, offset2);
|
|
175
147
|
if (props.loop) {
|
|
176
148
|
if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
|
|
177
|
-
|
|
149
|
+
const rightBound = targetOffset < minOffset;
|
|
178
150
|
childOffset[0] = rightBound ? trackSize : 0;
|
|
179
151
|
}
|
|
180
152
|
if (Array.isArray(children) && children[swiperItemCount - 1] && targetOffset !== 0) {
|
|
181
|
-
|
|
153
|
+
const leftBound = targetOffset > 0;
|
|
182
154
|
childOffset[swiperItemCount - 1] = leftBound ? -trackSize : 0;
|
|
183
155
|
}
|
|
184
156
|
setChildOffset(childOffset);
|
|
185
157
|
}
|
|
186
158
|
if (isEmit && active !== targetActive) {
|
|
187
|
-
|
|
188
|
-
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, (targetActive + swiperItemCount) % swiperItemCount);
|
|
159
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (targetActive + swiperItemCount) % swiperItemCount);
|
|
189
160
|
}
|
|
190
161
|
active = targetActive;
|
|
191
162
|
setActive(targetActive);
|
|
192
163
|
setOffset(targetOffset);
|
|
193
164
|
getStyle(targetOffset);
|
|
194
165
|
};
|
|
195
|
-
React__default.useImperativeHandle(ref,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
});
|
|
203
|
-
var getActive = function getActive2(pace) {
|
|
166
|
+
React__default.useImperativeHandle(ref, () => ({
|
|
167
|
+
to,
|
|
168
|
+
next,
|
|
169
|
+
prev,
|
|
170
|
+
resize
|
|
171
|
+
}));
|
|
172
|
+
const getActive = (pace) => {
|
|
204
173
|
if (pace) {
|
|
205
|
-
|
|
174
|
+
const _active = active + pace;
|
|
206
175
|
if (props.loop) {
|
|
207
176
|
return range(_active, -1, swiperItemCount);
|
|
208
177
|
}
|
|
@@ -210,49 +179,50 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
210
179
|
}
|
|
211
180
|
return active;
|
|
212
181
|
};
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
var currentPosition = active2 * Number(size);
|
|
182
|
+
const getOffset = (active2, offset2 = 0) => {
|
|
183
|
+
let currentPosition = active2 * Number(size);
|
|
216
184
|
if (!props.loop) {
|
|
217
185
|
currentPosition = Math.min(currentPosition, -minOffset);
|
|
218
186
|
}
|
|
219
|
-
|
|
187
|
+
let targetOffset = offset2 - currentPosition;
|
|
220
188
|
if (!props.loop) {
|
|
221
189
|
targetOffset = range(targetOffset, minOffset, 0);
|
|
222
190
|
}
|
|
223
191
|
return targetOffset;
|
|
224
192
|
};
|
|
225
|
-
|
|
193
|
+
const range = (num, min, max) => {
|
|
226
194
|
return Math.min(Math.max(num, min), max);
|
|
227
195
|
};
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
196
|
+
const classPrefix = "nut-swiper";
|
|
197
|
+
const contentClass = classNames({
|
|
198
|
+
[`${classPrefix}-inner`]: true,
|
|
199
|
+
[`${classPrefix}-vertical`]: isVertical
|
|
200
|
+
});
|
|
201
|
+
const getStyle = (moveOffset = offset) => {
|
|
202
|
+
const target = innerRef.current;
|
|
233
203
|
if (!target)
|
|
234
204
|
return;
|
|
235
|
-
|
|
205
|
+
let _offset = 0;
|
|
236
206
|
if (!center) {
|
|
237
207
|
_offset = moveOffset;
|
|
238
208
|
} else {
|
|
239
|
-
|
|
240
|
-
|
|
209
|
+
const _size = isVertical ? height : width;
|
|
210
|
+
const val = isVertical ? rect.height - _size : rect.width - _size;
|
|
241
211
|
_offset = moveOffset + (active === swiperItemCount - 1 && !props.loop ? -val / 2 : val / 2);
|
|
242
212
|
}
|
|
243
|
-
target.style.transitionDuration =
|
|
244
|
-
target.style[isVertical ? "height" : "width"] =
|
|
245
|
-
target.style[isVertical ? "width" : "height"] =
|
|
246
|
-
target.style.transform =
|
|
213
|
+
target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
|
|
214
|
+
target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
|
|
215
|
+
target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
|
|
216
|
+
target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
|
|
247
217
|
};
|
|
248
|
-
|
|
218
|
+
const onTouchStart = (e) => {
|
|
249
219
|
if (!props.touchable)
|
|
250
220
|
return;
|
|
251
221
|
touch.start(e);
|
|
252
222
|
stopAutoPlay();
|
|
253
223
|
resetPosition();
|
|
254
224
|
};
|
|
255
|
-
|
|
225
|
+
const onTouchMove = (e) => {
|
|
256
226
|
if (props.preventDefault)
|
|
257
227
|
e.preventDefault();
|
|
258
228
|
if (props.stopPropagation)
|
|
@@ -266,15 +236,15 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
266
236
|
}
|
|
267
237
|
}
|
|
268
238
|
};
|
|
269
|
-
|
|
239
|
+
const onTouchEnd = (e) => {
|
|
270
240
|
if (!props.touchable || !swiperRef.current.moving)
|
|
271
241
|
return;
|
|
272
|
-
|
|
273
|
-
|
|
242
|
+
const speed = touch.delta.current / (Date.now() - touch.touchTime.current);
|
|
243
|
+
const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta.current) > Number((size / 2).toFixed(2));
|
|
274
244
|
swiperRef.current.moving = false;
|
|
275
245
|
if (isShouldMove && touch.direction.current === props.direction) {
|
|
276
|
-
|
|
277
|
-
|
|
246
|
+
let pace = 0;
|
|
247
|
+
const offset2 = touch.isVertical() ? touch.offsetY : touch.offsetX;
|
|
278
248
|
if (props.loop) {
|
|
279
249
|
if (offset2.current > 0) {
|
|
280
250
|
pace = touch.delta.current > 0 ? -1 : 1;
|
|
@@ -287,33 +257,31 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
287
257
|
isEmit: true
|
|
288
258
|
});
|
|
289
259
|
} else if (touch.delta.current) {
|
|
290
|
-
move({
|
|
291
|
-
pace: 0
|
|
292
|
-
});
|
|
260
|
+
move({ pace: 0 });
|
|
293
261
|
} else {
|
|
294
262
|
getStyle();
|
|
295
263
|
}
|
|
296
264
|
startPlay();
|
|
297
265
|
};
|
|
298
|
-
|
|
299
|
-
|
|
266
|
+
const getItemStyle = (index) => {
|
|
267
|
+
const style = {};
|
|
300
268
|
if (size) {
|
|
301
|
-
style[direction === "horizontal" ? "width" : "height"] =
|
|
269
|
+
style[direction === "horizontal" ? "width" : "height"] = `${size}px`;
|
|
302
270
|
}
|
|
303
|
-
|
|
271
|
+
const offset2 = childOffset[index];
|
|
304
272
|
if (offset2) {
|
|
305
|
-
style.transform =
|
|
273
|
+
style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
|
|
306
274
|
}
|
|
307
275
|
return style;
|
|
308
276
|
};
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
277
|
+
const init = (index) => {
|
|
278
|
+
const rect2 = getRect(container === null || container === void 0 ? void 0 : container.current);
|
|
279
|
+
const currentIndex = Math.max(Math.min(swiperItemCount - 1, index || Number(mergedProps.defaultValue)), 0);
|
|
280
|
+
const width2 = Number(mergedProps.width) || rect2.width;
|
|
281
|
+
const height2 = Number(mergedProps.height) || rect2.height;
|
|
314
282
|
size = isVertical ? height2 : width2;
|
|
315
283
|
trackSize = swiperItemCount * Number(size);
|
|
316
|
-
|
|
284
|
+
const targetOffset = getOffset(currentIndex);
|
|
317
285
|
swiperRef.current.moving = true;
|
|
318
286
|
if (ready) {
|
|
319
287
|
swiperRef.current.moving = false;
|
|
@@ -325,82 +293,67 @@ var Swiper = React__default.forwardRef(function(props, ref) {
|
|
|
325
293
|
setOffset(targetOffset);
|
|
326
294
|
setReady(true);
|
|
327
295
|
};
|
|
328
|
-
useEffect(
|
|
296
|
+
useEffect(() => {
|
|
329
297
|
if (ready) {
|
|
330
298
|
getStyle();
|
|
331
299
|
}
|
|
332
300
|
}, [isVertical, width, height, offset, ready]);
|
|
333
|
-
useEffect(
|
|
301
|
+
useEffect(() => {
|
|
334
302
|
if (ready) {
|
|
335
303
|
stopAutoPlay();
|
|
336
304
|
startPlay();
|
|
337
305
|
}
|
|
338
|
-
return
|
|
339
|
-
return setReady(false);
|
|
340
|
-
};
|
|
306
|
+
return () => setReady(false);
|
|
341
307
|
}, [ready]);
|
|
342
|
-
useEffect(
|
|
343
|
-
|
|
344
|
-
name: "touchstart",
|
|
345
|
-
e:
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
e: onTouchEnd
|
|
352
|
-
}];
|
|
353
|
-
events.forEach(function(item) {
|
|
354
|
-
var _container$current;
|
|
355
|
-
(_container$current = container.current) === null || _container$current === void 0 || _container$current.addEventListener(item.name, item.e, false);
|
|
308
|
+
useEffect(() => {
|
|
309
|
+
const events = [
|
|
310
|
+
{ name: "touchstart", e: onTouchStart },
|
|
311
|
+
{ name: "touchmove", e: onTouchMove },
|
|
312
|
+
{ name: "touchend", e: onTouchEnd }
|
|
313
|
+
];
|
|
314
|
+
events.forEach((item) => {
|
|
315
|
+
var _a;
|
|
316
|
+
(_a = container.current) === null || _a === void 0 ? void 0 : _a.addEventListener(item.name, item.e, false);
|
|
356
317
|
});
|
|
357
|
-
return
|
|
358
|
-
events.forEach(
|
|
359
|
-
var
|
|
360
|
-
(
|
|
318
|
+
return () => {
|
|
319
|
+
events.forEach((item) => {
|
|
320
|
+
var _a;
|
|
321
|
+
(_a = container.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(item.name, item.e, false);
|
|
361
322
|
});
|
|
362
323
|
};
|
|
363
324
|
});
|
|
364
|
-
useEffect(
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
useEffect(function() {
|
|
368
|
-
return function() {
|
|
369
|
-
return stopAutoPlay();
|
|
370
|
-
};
|
|
325
|
+
useEffect(() => init(), [props.defaultValue]);
|
|
326
|
+
useEffect(() => {
|
|
327
|
+
return () => stopAutoPlay();
|
|
371
328
|
}, []);
|
|
372
|
-
|
|
329
|
+
const renderIndicator = () => {
|
|
373
330
|
if (React__default.isValidElement(indicator))
|
|
374
331
|
return indicator;
|
|
375
332
|
if (!indicator)
|
|
376
333
|
return null;
|
|
377
|
-
return React__default.createElement(
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
334
|
+
return React__default.createElement(
|
|
335
|
+
"div",
|
|
336
|
+
{ className: classNames({
|
|
337
|
+
[`${classPrefix}-indicator`]: true,
|
|
338
|
+
[`${classPrefix}-indicator-vertical`]: isVertical
|
|
339
|
+
}) },
|
|
340
|
+
React__default.createElement(Indicator, { current: (active + swiperItemCount) % swiperItemCount, total: swiperItems === null || swiperItems === void 0 ? void 0 : swiperItems.length, direction })
|
|
341
|
+
);
|
|
384
342
|
};
|
|
385
|
-
return React__default.createElement(
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
className: "".concat(classPrefix, "-item-wrapper"),
|
|
396
|
-
style: getItemStyle(index),
|
|
397
|
-
key: index
|
|
398
|
-
}, child);
|
|
399
|
-
})), renderIndicator()));
|
|
343
|
+
return React__default.createElement(
|
|
344
|
+
DataContext.Provider,
|
|
345
|
+
{ value: parent },
|
|
346
|
+
React__default.createElement(
|
|
347
|
+
"div",
|
|
348
|
+
Object.assign({ className: classNames(classPrefix, className), ref: container }, rest),
|
|
349
|
+
React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(swiperItems, (child, index) => React__default.createElement("div", { className: `${classPrefix}-item-wrapper`, style: getItemStyle(index), key: index }, child))),
|
|
350
|
+
renderIndicator()
|
|
351
|
+
)
|
|
352
|
+
);
|
|
400
353
|
});
|
|
401
354
|
Swiper.defaultProps = defaultProps;
|
|
402
355
|
Swiper.displayName = "NutSwiper";
|
|
403
|
-
|
|
356
|
+
const InnerSwiper = Swiper;
|
|
404
357
|
InnerSwiper.Item = SwiperItem;
|
|
405
358
|
export {
|
|
406
359
|
InnerSwiper as default
|
package/dist/esm/SwiperItem.js
CHANGED
|
@@ -1,50 +1,25 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) {
|
|
3
|
-
var t = Object.keys(e);
|
|
4
|
-
if (Object.getOwnPropertySymbols) {
|
|
5
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
6
|
-
r && (o = o.filter(function(r2) {
|
|
7
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
8
|
-
})), t.push.apply(t, o);
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
}
|
|
12
|
-
function _objectSpread(e) {
|
|
13
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
14
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
15
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
16
|
-
_defineProperty(e, r2, t[r2]);
|
|
17
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
18
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
return e;
|
|
22
|
-
}
|
|
23
1
|
import React__default, { useContext } from "react";
|
|
24
2
|
import classNames from "classnames";
|
|
25
3
|
import { D as DataContext } from "./context4.js";
|
|
26
|
-
|
|
4
|
+
const defaultProps = {
|
|
27
5
|
direction: "horizontal"
|
|
28
6
|
};
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
7
|
+
const SwiperItem = React__default.forwardRef((props, ref) => {
|
|
8
|
+
const classPrefix = "nut-swiper-item";
|
|
9
|
+
const _props = Object.assign(Object.assign({}, defaultProps), props);
|
|
10
|
+
const { className, style, children, direction, size } = _props;
|
|
11
|
+
const parent = useContext(DataContext);
|
|
12
|
+
const classes = classNames(classPrefix, className);
|
|
13
|
+
const getStyle = () => {
|
|
14
|
+
const style2 = {};
|
|
15
|
+
const _direction = (parent === null || parent === void 0 ? void 0 : parent.propSwiper.direction) || direction;
|
|
16
|
+
const _size = (parent === null || parent === void 0 ? void 0 : parent.size) || size;
|
|
39
17
|
if (_size) {
|
|
40
|
-
style2[_direction === "horizontal" ? "width" : "height"] =
|
|
18
|
+
style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
|
|
41
19
|
}
|
|
42
20
|
return style2;
|
|
43
21
|
};
|
|
44
|
-
return React__default.createElement("div", {
|
|
45
|
-
className: classes,
|
|
46
|
-
style: _objectSpread(_objectSpread({}, style), getStyle())
|
|
47
|
-
}, children);
|
|
22
|
+
return React__default.createElement("div", { className: classes, style: Object.assign(Object.assign({}, style), getStyle()) }, children);
|
|
48
23
|
});
|
|
49
24
|
SwiperItem.defaultProps = defaultProps;
|
|
50
25
|
SwiperItem.displayName = "NutSwiperItem";
|