@nutui/nutui-react 3.0.12 → 3.0.13-beta.0
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 +8 -9
- package/dist/cjs/packages/input/input.js +3 -0
- package/dist/cjs/packages/swiper/swiper.js +52 -43
- package/dist/cjs/packages/textarea/textarea.d.ts +2 -2
- package/dist/cjs/packages/textarea/textarea.js +25 -8
- package/dist/cjs/types/spec/lottie/taro.d.ts +1 -0
- package/dist/cjs/types/spec/swiper/base.d.ts +4 -0
- package/dist/cjs/types/spec/swiper/taro.d.ts +4 -0
- package/dist/es/packages/input/input.js +3 -0
- package/dist/es/packages/swiper/swiper.js +53 -44
- package/dist/es/packages/textarea/textarea.d.ts +2 -2
- package/dist/es/packages/textarea/textarea.js +26 -9
- package/dist/es/types/spec/lottie/taro.d.ts +1 -0
- package/dist/es/types/spec/swiper/base.d.ts +5 -1
- package/dist/es/types/spec/swiper/taro.d.ts +4 -0
- package/dist/nutui.react.umd.js +82 -56
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +43 -43
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +40 -40
- package/dist/style.css +1 -1
- package/dist/style.scss +36 -36
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
# v3.0.12
|
|
2
|
-
`2025-05-17`
|
|
3
|
-
|
|
4
2
|
|
|
5
|
-
|
|
6
|
-
* :sparkles: feat(progress): 兼容并支持taro components的progressProps & v15适配 (#3202)
|
|
7
|
-
* :sparkles: feat(searchbar): v15 适配,增加了受控和默认值 (#3209)
|
|
8
|
-
* :sparkles: feat(steps): v15 (#3216)
|
|
9
|
-
* :bug: fix(uploader): beforeUpload failed to work (#3219)
|
|
10
|
-
* :bug: fix(uploader): 多端上传媒体文件逻辑与2x保持一致 (#3223)
|
|
11
|
-
* :bug: fix(address): 构建单一样式文件 (#3220)
|
|
3
|
+
`2025-05-17`
|
|
12
4
|
|
|
5
|
+
- :sparkles: feat(range): 鸿蒙适配,修订NaN,纵向mark时异常问题 (#3217)
|
|
6
|
+
- :sparkles: feat(progress): 兼容并支持taro components的progressProps & v15适配 (#3202)
|
|
7
|
+
- :sparkles: feat(searchbar): v15 适配,增加了受控和默认值 (#3209)
|
|
8
|
+
- :sparkles: feat(steps): v15 (#3216)
|
|
9
|
+
- :bug: fix(uploader): beforeUpload failed to work (#3219)
|
|
10
|
+
- :bug: fix(uploader): 多端上传媒体文件逻辑与2x保持一致 (#3223)
|
|
11
|
+
- :bug: fix(address): 构建单一样式文件 (#3220)
|
|
13
12
|
|
|
14
13
|
# v3.0.11
|
|
15
14
|
|
|
@@ -86,6 +86,9 @@ var Input = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
|
|
|
86
86
|
var _inputRef_current;
|
|
87
87
|
return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
|
|
88
88
|
},
|
|
89
|
+
get: function get() {
|
|
90
|
+
return inputRef.current;
|
|
91
|
+
},
|
|
89
92
|
get nativeElement () {
|
|
90
93
|
return inputRef.current;
|
|
91
94
|
}
|
|
@@ -26,7 +26,7 @@ var defaultProps = {
|
|
|
26
26
|
indicator: false,
|
|
27
27
|
loop: false,
|
|
28
28
|
duration: 3000,
|
|
29
|
-
|
|
29
|
+
autoplay: false,
|
|
30
30
|
defaultValue: 0,
|
|
31
31
|
touchable: true,
|
|
32
32
|
effect: undefined
|
|
@@ -44,29 +44,44 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
44
44
|
return current;
|
|
45
45
|
};
|
|
46
46
|
var classPrefix = 'nut-swiper';
|
|
47
|
-
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, direction = _$_object_spread.direction, indicator = _$_object_spread.indicator, loop = _$_object_spread.loop, effect = _$_object_spread.effect,
|
|
47
|
+
var _$_object_spread = (0, _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;
|
|
48
48
|
var isVertical = direction === 'vertical';
|
|
49
49
|
var count = (0, _react.useMemo)(function() {
|
|
50
50
|
var c = 0;
|
|
51
|
-
_react.default.Children.map(children, function(
|
|
51
|
+
_react.default.Children.map(children, function() {
|
|
52
52
|
c += 1;
|
|
53
53
|
});
|
|
54
54
|
return c;
|
|
55
55
|
}, [
|
|
56
56
|
children
|
|
57
57
|
]);
|
|
58
|
+
var timeoutRef = (0, _react.useRef)(null);
|
|
59
|
+
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), dragging = _useState[0], setDragging = _useState[1];
|
|
60
|
+
var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)(defaultValue), 2), innerValue = _useRefState[0], setInnerValue = _useRefState[1];
|
|
61
|
+
var stageRef = (0, _react.useRef)(null);
|
|
62
|
+
var swiperRef = (0, _react.useRef)(null);
|
|
63
|
+
var _useSpring = (0, _sliced_to_array._)((0, _web.useSpring)(function() {
|
|
64
|
+
return {
|
|
65
|
+
x: !isVertical ? innerValue.current * 100 * -1 : 0,
|
|
66
|
+
y: isVertical ? innerValue.current * 100 * -1 : 0,
|
|
67
|
+
s: 0,
|
|
68
|
+
reset: function reset() {},
|
|
69
|
+
config: {
|
|
70
|
+
tension: 200,
|
|
71
|
+
friction: 30
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
}), 2), springs = _useSpring[0], api = _useSpring[1];
|
|
58
75
|
var getSlideSize = function getSlideSize() {
|
|
59
76
|
if (props.slideSize) return props.slideSize;
|
|
60
77
|
if (stageRef.current) {
|
|
61
|
-
|
|
62
|
-
return stageRef.current.offsetWidth;
|
|
78
|
+
return isVertical ? stageRef.current.offsetHeight : stageRef.current.offsetWidth;
|
|
63
79
|
}
|
|
64
80
|
return 0;
|
|
65
81
|
};
|
|
66
82
|
var getSwiperSize = function getSwiperSize() {
|
|
67
83
|
if (swiperRef.current) {
|
|
68
|
-
|
|
69
|
-
return swiperRef.current.offsetWidth;
|
|
84
|
+
return isVertical ? swiperRef.current.offsetHeight : swiperRef.current.offsetWidth;
|
|
70
85
|
}
|
|
71
86
|
return 0;
|
|
72
87
|
};
|
|
@@ -79,51 +94,48 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
79
94
|
}
|
|
80
95
|
return v;
|
|
81
96
|
};
|
|
82
|
-
var timeoutRef = (0, _react.useRef)(null);
|
|
83
|
-
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), dragging = _useState[0], setDragging = _useState[1];
|
|
84
|
-
var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)(defaultValue), 2), current = _useRefState[0], setCurrent = _useRefState[1];
|
|
85
|
-
var stageRef = (0, _react.useRef)(null);
|
|
86
|
-
var swiperRef = (0, _react.useRef)(null);
|
|
87
|
-
var _useSpring = (0, _sliced_to_array._)((0, _web.useSpring)(function() {
|
|
88
|
-
return {
|
|
89
|
-
x: !isVertical ? current.current * 100 * -1 : 0,
|
|
90
|
-
y: isVertical ? current.current * 100 * -1 : 0,
|
|
91
|
-
s: 0,
|
|
92
|
-
reset: function reset() {},
|
|
93
|
-
config: {
|
|
94
|
-
tension: 200,
|
|
95
|
-
friction: 30
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}), 2), springs = _useSpring[0], api = _useSpring[1];
|
|
99
97
|
(0, _react.useEffect)(function() {
|
|
100
98
|
var _obj;
|
|
101
|
-
api.start((_obj = {}, (0, _define_property._)(_obj, isVertical ? 'y' : 'x', boundIndex(
|
|
99
|
+
api.start((_obj = {}, (0, _define_property._)(_obj, isVertical ? 'y' : 'x', boundIndex(innerValue.current) * -1 * 100), (0, _define_property._)(_obj, "immediate", true), _obj));
|
|
102
100
|
}, [
|
|
103
101
|
swiperRef.current
|
|
104
102
|
]);
|
|
105
103
|
var swiperDirection = (0, _react.useRef)(1);
|
|
106
|
-
var _useList = (0, _sliced_to_array._)((0, _focus.useList)(effect, count,
|
|
104
|
+
var _useList = (0, _sliced_to_array._)((0, _focus.useList)(effect, count, innerValue), 2), transforms = _useList[0], setTransforms = _useList[1];
|
|
107
105
|
// 自动播放
|
|
108
|
-
var runTimeSwiper =
|
|
106
|
+
var runTimeSwiper = (0, _react.useCallback)(function() {
|
|
109
107
|
var durationNumber = typeof duration === 'string' ? parseInt(duration) : duration;
|
|
110
|
-
var d =
|
|
108
|
+
var d = durationNumber;
|
|
109
|
+
// 优先使用明确设置的数值型自动播放间隔
|
|
110
|
+
if (typeof props.autoPlay === 'number') {
|
|
111
|
+
d = props.autoPlay;
|
|
112
|
+
} else if (typeof autoplay === 'number') {
|
|
113
|
+
d = autoplay;
|
|
114
|
+
}
|
|
111
115
|
timeoutRef.current = window.setTimeout(function() {
|
|
112
116
|
next();
|
|
113
117
|
runTimeSwiper();
|
|
114
118
|
}, d);
|
|
115
|
-
}
|
|
119
|
+
}, [
|
|
120
|
+
props.autoPlay,
|
|
121
|
+
autoplay,
|
|
122
|
+
duration
|
|
123
|
+
]);
|
|
116
124
|
(0, _react.useEffect)(function() {
|
|
117
|
-
|
|
125
|
+
// 兼容旧版的 autoPlay 属性
|
|
126
|
+
var shouldAutoplay = props.autoPlay || autoplay;
|
|
127
|
+
if (!shouldAutoplay || dragging) return;
|
|
128
|
+
// if (!autoplay || dragging) return
|
|
118
129
|
runTimeSwiper();
|
|
119
130
|
return function() {
|
|
120
131
|
if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
|
|
121
132
|
};
|
|
122
133
|
}, [
|
|
123
|
-
|
|
134
|
+
autoplay,
|
|
124
135
|
duration,
|
|
125
136
|
dragging,
|
|
126
|
-
count
|
|
137
|
+
count,
|
|
138
|
+
runTimeSwiper
|
|
127
139
|
]);
|
|
128
140
|
var to = function to(index) {
|
|
129
141
|
var immediate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
@@ -133,7 +145,7 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
133
145
|
var cycleIndex = index % count;
|
|
134
146
|
targetIndex = cycleIndex < 0 ? cycleIndex + count : cycleIndex;
|
|
135
147
|
}
|
|
136
|
-
|
|
148
|
+
setInnerValue(targetIndex);
|
|
137
149
|
(_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, targetIndex);
|
|
138
150
|
if (effect) {
|
|
139
151
|
(0, _focus.updateTransform)(transforms, setTransforms, effect, targetIndex);
|
|
@@ -199,13 +211,10 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
199
211
|
bounds: function bounds() {
|
|
200
212
|
if (loop) return {};
|
|
201
213
|
var slideSize = getSlideSize();
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
};
|
|
207
|
-
}
|
|
208
|
-
return {
|
|
214
|
+
return isVertical ? {
|
|
215
|
+
top: 0,
|
|
216
|
+
bottom: (count - 1) * slideSize
|
|
217
|
+
} : {
|
|
209
218
|
left: 0,
|
|
210
219
|
right: (count - 1) * slideSize
|
|
211
220
|
};
|
|
@@ -219,13 +228,13 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
219
228
|
}
|
|
220
229
|
});
|
|
221
230
|
var renderIndicator = function renderIndicator() {
|
|
222
|
-
if (/*#__PURE__*/ _react.default.isValidElement(indicator)) return indicator;
|
|
223
231
|
if (!indicator) return null;
|
|
232
|
+
if (/*#__PURE__*/ _react.default.isValidElement(indicator)) return indicator;
|
|
224
233
|
var _obj;
|
|
225
234
|
return /*#__PURE__*/ _react.default.createElement("div", {
|
|
226
235
|
className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-indicator"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-indicator-vertical"), isVertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-indicator-horizontal"), !isVertical), _obj))
|
|
227
236
|
}, /*#__PURE__*/ _react.default.createElement(_indicator.default, {
|
|
228
|
-
current: (0, _userefstate.getRefValue)(
|
|
237
|
+
current: (0, _userefstate.getRefValue)(innerValue),
|
|
229
238
|
total: count,
|
|
230
239
|
direction: direction
|
|
231
240
|
}));
|
|
@@ -246,7 +255,7 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
|
|
|
246
255
|
count: count,
|
|
247
256
|
isVertical: isVertical,
|
|
248
257
|
effect: effect,
|
|
249
|
-
current:
|
|
258
|
+
current: innerValue,
|
|
250
259
|
swiperDirection: swiperDirection,
|
|
251
260
|
dragging: dragging,
|
|
252
261
|
transforms: transforms
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { WebTextAreaProps } from "../../types";
|
|
3
|
-
export declare const TextArea:
|
|
3
|
+
export declare const TextArea: React.ForwardRefExoticComponent<Partial<WebTextAreaProps> & Omit<React.HTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.RefAttributes<unknown>>;
|
|
@@ -25,14 +25,13 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
|
|
|
25
25
|
showCount: false,
|
|
26
26
|
rows: 2,
|
|
27
27
|
maxLength: 140,
|
|
28
|
-
placeholder: '',
|
|
29
28
|
readOnly: false,
|
|
30
29
|
disabled: false,
|
|
31
30
|
autoSize: false,
|
|
32
31
|
plain: false,
|
|
33
32
|
status: 'default'
|
|
34
33
|
});
|
|
35
|
-
var TextArea =
|
|
34
|
+
var TextArea = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
|
|
36
35
|
var locale = (0, _configprovider.useConfig)().locale;
|
|
37
36
|
var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = (0, _object_without_properties._)(_ref, [
|
|
38
37
|
"className",
|
|
@@ -67,13 +66,13 @@ var TextArea = function TextArea(props) {
|
|
|
67
66
|
defaultValue: defaultValue,
|
|
68
67
|
finalValue: format(defaultValue),
|
|
69
68
|
onChange: onChange
|
|
70
|
-
}), 2),
|
|
69
|
+
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
|
|
71
70
|
(0, _react.useEffect)(function() {
|
|
72
71
|
if (autoSize) setContentHeight();
|
|
73
72
|
}, [
|
|
74
73
|
autoSize,
|
|
75
74
|
defaultValue,
|
|
76
|
-
|
|
75
|
+
innerValue
|
|
77
76
|
]);
|
|
78
77
|
var setContentHeight = function setContentHeight() {
|
|
79
78
|
var textarea = textareaRef.current;
|
|
@@ -88,7 +87,7 @@ var TextArea = function TextArea(props) {
|
|
|
88
87
|
var handleChange = function handleChange(event) {
|
|
89
88
|
var text = event.target;
|
|
90
89
|
var value = compositionRef.current ? text.value : format(text.value);
|
|
91
|
-
|
|
90
|
+
setInnerValue(value);
|
|
92
91
|
};
|
|
93
92
|
var isDisabled = function isDisabled() {
|
|
94
93
|
return disabled || readOnly;
|
|
@@ -101,6 +100,24 @@ var TextArea = function TextArea(props) {
|
|
|
101
100
|
if (isDisabled()) return;
|
|
102
101
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
103
102
|
};
|
|
103
|
+
(0, _react.useImperativeHandle)(ref, function() {
|
|
104
|
+
return {
|
|
105
|
+
clear: function clear() {
|
|
106
|
+
return setInnerValue('');
|
|
107
|
+
},
|
|
108
|
+
focus: function focus() {
|
|
109
|
+
var _textareaRef_current;
|
|
110
|
+
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.focus();
|
|
111
|
+
},
|
|
112
|
+
blur: function blur() {
|
|
113
|
+
var _textareaRef_current;
|
|
114
|
+
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.blur();
|
|
115
|
+
},
|
|
116
|
+
get nativeElement () {
|
|
117
|
+
return textareaRef.current;
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
});
|
|
104
121
|
var _obj;
|
|
105
122
|
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
|
|
106
123
|
className: (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-readonly"), readOnly), (0, _define_property._)(_obj, "".concat(classPrefix, "-rtl"), rtl), (0, _define_property._)(_obj, "".concat(classPrefix, "-plain"), plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-container"), !plain), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
|
|
@@ -110,7 +127,7 @@ var TextArea = function TextArea(props) {
|
|
|
110
127
|
style: style,
|
|
111
128
|
disabled: disabled,
|
|
112
129
|
readOnly: readOnly,
|
|
113
|
-
value:
|
|
130
|
+
value: innerValue,
|
|
114
131
|
onChange: handleChange,
|
|
115
132
|
onBlur: handleBlur,
|
|
116
133
|
onFocus: handleFocus,
|
|
@@ -125,6 +142,6 @@ var TextArea = function TextArea(props) {
|
|
|
125
142
|
placeholder: placeholder !== undefined ? placeholder : locale.placeholder
|
|
126
143
|
})), showCount && /*#__PURE__*/ _react.default.createElement("div", {
|
|
127
144
|
className: (0, _classnames.default)("".concat(classPrefix, "-limit"), (0, _define_property._)({}, "".concat(classPrefix, "-limit-disabled"), disabled))
|
|
128
|
-
},
|
|
129
|
-
};
|
|
145
|
+
}, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));
|
|
146
|
+
});
|
|
130
147
|
TextArea.displayName = 'NutTextArea';
|
|
@@ -15,7 +15,11 @@ export interface BaseSwiper extends BaseProps {
|
|
|
15
15
|
indicator: ReactNode;
|
|
16
16
|
loop: boolean;
|
|
17
17
|
duration: SimpleValue;
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Please use `autoplay` prop instead.
|
|
20
|
+
*/
|
|
18
21
|
autoPlay: boolean | number;
|
|
22
|
+
autoplay: boolean | number;
|
|
19
23
|
defaultValue: number;
|
|
20
24
|
touchable: boolean;
|
|
21
25
|
effect: FocusEffect | undefined;
|
|
@@ -9,7 +9,11 @@ export type TaroSwiperProps = Omit<BaseSwiper, OmittedKeys> & OmittedSwiperProps
|
|
|
9
9
|
height?: SimpleValue;
|
|
10
10
|
direction: Direction;
|
|
11
11
|
indicator: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Please use `autoplay` prop instead.
|
|
14
|
+
*/
|
|
12
15
|
autoPlay: boolean;
|
|
16
|
+
autoplay: boolean;
|
|
13
17
|
loop: boolean;
|
|
14
18
|
defaultValue: number;
|
|
15
19
|
};
|
|
@@ -75,6 +75,9 @@ export var Input = /*#__PURE__*/ forwardRef(function(props, ref) {
|
|
|
75
75
|
var _inputRef_current;
|
|
76
76
|
return (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
|
|
77
77
|
},
|
|
78
|
+
get: function() {
|
|
79
|
+
return inputRef.current;
|
|
80
|
+
},
|
|
78
81
|
get nativeElement () {
|
|
79
82
|
return inputRef.current;
|
|
80
83
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
2
2
|
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
3
3
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
4
|
-
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
4
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { useDrag } from "@use-gesture/react";
|
|
6
6
|
import { useSpring } from "@react-spring/web";
|
|
7
7
|
import classNames from "classnames";
|
|
@@ -14,7 +14,7 @@ var defaultProps = {
|
|
|
14
14
|
indicator: false,
|
|
15
15
|
loop: false,
|
|
16
16
|
duration: 3000,
|
|
17
|
-
|
|
17
|
+
autoplay: false,
|
|
18
18
|
defaultValue: 0,
|
|
19
19
|
touchable: true,
|
|
20
20
|
effect: undefined
|
|
@@ -32,29 +32,44 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
32
32
|
return current;
|
|
33
33
|
};
|
|
34
34
|
var classPrefix = 'nut-swiper';
|
|
35
|
-
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,
|
|
35
|
+
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;
|
|
36
36
|
var isVertical = direction === 'vertical';
|
|
37
37
|
var count = useMemo(function() {
|
|
38
38
|
var c = 0;
|
|
39
|
-
React.Children.map(children, function(
|
|
39
|
+
React.Children.map(children, function() {
|
|
40
40
|
c += 1;
|
|
41
41
|
});
|
|
42
42
|
return c;
|
|
43
43
|
}, [
|
|
44
44
|
children
|
|
45
45
|
]);
|
|
46
|
+
var timeoutRef = useRef(null);
|
|
47
|
+
var _useState = _sliced_to_array(useState(false), 2), dragging = _useState[0], setDragging = _useState[1];
|
|
48
|
+
var _useRefState = _sliced_to_array(useRefState(defaultValue), 2), innerValue = _useRefState[0], setInnerValue = _useRefState[1];
|
|
49
|
+
var stageRef = useRef(null);
|
|
50
|
+
var swiperRef = useRef(null);
|
|
51
|
+
var _useSpring = _sliced_to_array(useSpring(function() {
|
|
52
|
+
return {
|
|
53
|
+
x: !isVertical ? innerValue.current * 100 * -1 : 0,
|
|
54
|
+
y: isVertical ? innerValue.current * 100 * -1 : 0,
|
|
55
|
+
s: 0,
|
|
56
|
+
reset: function() {},
|
|
57
|
+
config: {
|
|
58
|
+
tension: 200,
|
|
59
|
+
friction: 30
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
}), 2), springs = _useSpring[0], api = _useSpring[1];
|
|
46
63
|
var getSlideSize = function() {
|
|
47
64
|
if (props.slideSize) return props.slideSize;
|
|
48
65
|
if (stageRef.current) {
|
|
49
|
-
|
|
50
|
-
return stageRef.current.offsetWidth;
|
|
66
|
+
return isVertical ? stageRef.current.offsetHeight : stageRef.current.offsetWidth;
|
|
51
67
|
}
|
|
52
68
|
return 0;
|
|
53
69
|
};
|
|
54
70
|
var getSwiperSize = function() {
|
|
55
71
|
if (swiperRef.current) {
|
|
56
|
-
|
|
57
|
-
return swiperRef.current.offsetWidth;
|
|
72
|
+
return isVertical ? swiperRef.current.offsetHeight : swiperRef.current.offsetWidth;
|
|
58
73
|
}
|
|
59
74
|
return 0;
|
|
60
75
|
};
|
|
@@ -67,51 +82,48 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
67
82
|
}
|
|
68
83
|
return v;
|
|
69
84
|
};
|
|
70
|
-
var timeoutRef = useRef(null);
|
|
71
|
-
var _useState = _sliced_to_array(useState(false), 2), dragging = _useState[0], setDragging = _useState[1];
|
|
72
|
-
var _useRefState = _sliced_to_array(useRefState(defaultValue), 2), current = _useRefState[0], setCurrent = _useRefState[1];
|
|
73
|
-
var stageRef = useRef(null);
|
|
74
|
-
var swiperRef = useRef(null);
|
|
75
|
-
var _useSpring = _sliced_to_array(useSpring(function() {
|
|
76
|
-
return {
|
|
77
|
-
x: !isVertical ? current.current * 100 * -1 : 0,
|
|
78
|
-
y: isVertical ? current.current * 100 * -1 : 0,
|
|
79
|
-
s: 0,
|
|
80
|
-
reset: function() {},
|
|
81
|
-
config: {
|
|
82
|
-
tension: 200,
|
|
83
|
-
friction: 30
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
}), 2), springs = _useSpring[0], api = _useSpring[1];
|
|
87
85
|
useEffect(function() {
|
|
88
86
|
var _obj;
|
|
89
|
-
api.start((_obj = {}, _define_property(_obj, isVertical ? 'y' : 'x', boundIndex(
|
|
87
|
+
api.start((_obj = {}, _define_property(_obj, isVertical ? 'y' : 'x', boundIndex(innerValue.current) * -1 * 100), _define_property(_obj, "immediate", true), _obj));
|
|
90
88
|
}, [
|
|
91
89
|
swiperRef.current
|
|
92
90
|
]);
|
|
93
91
|
var swiperDirection = useRef(1);
|
|
94
|
-
var _useList = _sliced_to_array(useList(effect, count,
|
|
92
|
+
var _useList = _sliced_to_array(useList(effect, count, innerValue), 2), transforms = _useList[0], setTransforms = _useList[1];
|
|
95
93
|
// 自动播放
|
|
96
|
-
var runTimeSwiper = function() {
|
|
94
|
+
var runTimeSwiper = useCallback(function() {
|
|
97
95
|
var durationNumber = typeof duration === 'string' ? parseInt(duration) : duration;
|
|
98
|
-
var d =
|
|
96
|
+
var d = durationNumber;
|
|
97
|
+
// 优先使用明确设置的数值型自动播放间隔
|
|
98
|
+
if (typeof props.autoPlay === 'number') {
|
|
99
|
+
d = props.autoPlay;
|
|
100
|
+
} else if (typeof autoplay === 'number') {
|
|
101
|
+
d = autoplay;
|
|
102
|
+
}
|
|
99
103
|
timeoutRef.current = window.setTimeout(function() {
|
|
100
104
|
next();
|
|
101
105
|
runTimeSwiper();
|
|
102
106
|
}, d);
|
|
103
|
-
}
|
|
107
|
+
}, [
|
|
108
|
+
props.autoPlay,
|
|
109
|
+
autoplay,
|
|
110
|
+
duration
|
|
111
|
+
]);
|
|
104
112
|
useEffect(function() {
|
|
105
|
-
|
|
113
|
+
// 兼容旧版的 autoPlay 属性
|
|
114
|
+
var shouldAutoplay = props.autoPlay || autoplay;
|
|
115
|
+
if (!shouldAutoplay || dragging) return;
|
|
116
|
+
// if (!autoplay || dragging) return
|
|
106
117
|
runTimeSwiper();
|
|
107
118
|
return function() {
|
|
108
119
|
if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
|
|
109
120
|
};
|
|
110
121
|
}, [
|
|
111
|
-
|
|
122
|
+
autoplay,
|
|
112
123
|
duration,
|
|
113
124
|
dragging,
|
|
114
|
-
count
|
|
125
|
+
count,
|
|
126
|
+
runTimeSwiper
|
|
115
127
|
]);
|
|
116
128
|
var to = function(index) {
|
|
117
129
|
var immediate = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
|
@@ -121,7 +133,7 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
121
133
|
var cycleIndex = index % count;
|
|
122
134
|
targetIndex = cycleIndex < 0 ? cycleIndex + count : cycleIndex;
|
|
123
135
|
}
|
|
124
|
-
|
|
136
|
+
setInnerValue(targetIndex);
|
|
125
137
|
(_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, targetIndex);
|
|
126
138
|
if (effect) {
|
|
127
139
|
updateTransform(transforms, setTransforms, effect, targetIndex);
|
|
@@ -188,13 +200,10 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
188
200
|
bounds: function() {
|
|
189
201
|
if (loop) return {};
|
|
190
202
|
var slideSize = getSlideSize();
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
};
|
|
196
|
-
}
|
|
197
|
-
return {
|
|
203
|
+
return isVertical ? {
|
|
204
|
+
top: 0,
|
|
205
|
+
bottom: (count - 1) * slideSize
|
|
206
|
+
} : {
|
|
198
207
|
left: 0,
|
|
199
208
|
right: (count - 1) * slideSize
|
|
200
209
|
};
|
|
@@ -208,13 +217,13 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
208
217
|
}
|
|
209
218
|
});
|
|
210
219
|
var renderIndicator = function() {
|
|
211
|
-
if (/*#__PURE__*/ React.isValidElement(indicator)) return indicator;
|
|
212
220
|
if (!indicator) return null;
|
|
221
|
+
if (/*#__PURE__*/ React.isValidElement(indicator)) return indicator;
|
|
213
222
|
var _obj;
|
|
214
223
|
return /*#__PURE__*/ React.createElement("div", {
|
|
215
224
|
className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-indicator"), true), _define_property(_obj, "".concat(classPrefix, "-indicator-vertical"), isVertical), _define_property(_obj, "".concat(classPrefix, "-indicator-horizontal"), !isVertical), _obj))
|
|
216
225
|
}, /*#__PURE__*/ React.createElement(Indicator, {
|
|
217
|
-
current: getRefValue(
|
|
226
|
+
current: getRefValue(innerValue),
|
|
218
227
|
total: count,
|
|
219
228
|
direction: direction
|
|
220
229
|
}));
|
|
@@ -235,7 +244,7 @@ export var Swiper = /*#__PURE__*/ React.forwardRef(function(props, ref) {
|
|
|
235
244
|
count: count,
|
|
236
245
|
isVertical: isVertical,
|
|
237
246
|
effect: effect,
|
|
238
|
-
current:
|
|
247
|
+
current: innerValue,
|
|
239
248
|
swiperDirection: swiperDirection,
|
|
240
249
|
dragging: dragging,
|
|
241
250
|
transforms: transforms
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { WebTextAreaProps } from "../../types";
|
|
3
|
-
export declare const TextArea:
|
|
3
|
+
export declare const TextArea: React.ForwardRefExoticComponent<Partial<WebTextAreaProps> & Omit<React.HTMLAttributes<HTMLTextAreaElement>, "onFocus" | "onBlur" | "onChange"> & React.RefAttributes<unknown>>;
|
|
@@ -3,7 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
|
|
|
3
3
|
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
|
|
4
4
|
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
|
|
5
5
|
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
|
|
6
|
-
import React, { useEffect, useRef } from "react";
|
|
6
|
+
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
|
|
7
7
|
import classNames from "classnames";
|
|
8
8
|
import { useConfig, useRtl } from "../configprovider";
|
|
9
9
|
import { ComponentDefaults } from "../../utils/typings";
|
|
@@ -13,14 +13,13 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
|
|
|
13
13
|
showCount: false,
|
|
14
14
|
rows: 2,
|
|
15
15
|
maxLength: 140,
|
|
16
|
-
placeholder: '',
|
|
17
16
|
readOnly: false,
|
|
18
17
|
disabled: false,
|
|
19
18
|
autoSize: false,
|
|
20
19
|
plain: false,
|
|
21
20
|
status: 'default'
|
|
22
21
|
});
|
|
23
|
-
export var TextArea = function(props) {
|
|
22
|
+
export var TextArea = /*#__PURE__*/ forwardRef(function(props, ref) {
|
|
24
23
|
var locale = useConfig().locale;
|
|
25
24
|
var _ref = _object_spread({}, defaultProps, props), className = _ref.className, value = _ref.value, defaultValue = _ref.defaultValue, showCount = _ref.showCount, maxLength = _ref.maxLength, rows = _ref.rows, placeholder = _ref.placeholder, readOnly = _ref.readOnly, disabled = _ref.disabled, autoSize = _ref.autoSize, style = _ref.style, plain = _ref.plain, status = _ref.status, onChange = _ref.onChange, onBlur = _ref.onBlur, onFocus = _ref.onFocus, rest = _object_without_properties(_ref, [
|
|
26
25
|
"className",
|
|
@@ -55,13 +54,13 @@ export var TextArea = function(props) {
|
|
|
55
54
|
defaultValue: defaultValue,
|
|
56
55
|
finalValue: format(defaultValue),
|
|
57
56
|
onChange: onChange
|
|
58
|
-
}), 2),
|
|
57
|
+
}), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
|
|
59
58
|
useEffect(function() {
|
|
60
59
|
if (autoSize) setContentHeight();
|
|
61
60
|
}, [
|
|
62
61
|
autoSize,
|
|
63
62
|
defaultValue,
|
|
64
|
-
|
|
63
|
+
innerValue
|
|
65
64
|
]);
|
|
66
65
|
var setContentHeight = function() {
|
|
67
66
|
var textarea = textareaRef.current;
|
|
@@ -76,7 +75,7 @@ export var TextArea = function(props) {
|
|
|
76
75
|
var handleChange = function(event) {
|
|
77
76
|
var text = event.target;
|
|
78
77
|
var value = compositionRef.current ? text.value : format(text.value);
|
|
79
|
-
|
|
78
|
+
setInnerValue(value);
|
|
80
79
|
};
|
|
81
80
|
var isDisabled = function() {
|
|
82
81
|
return disabled || readOnly;
|
|
@@ -89,6 +88,24 @@ export var TextArea = function(props) {
|
|
|
89
88
|
if (isDisabled()) return;
|
|
90
89
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
91
90
|
};
|
|
91
|
+
useImperativeHandle(ref, function() {
|
|
92
|
+
return {
|
|
93
|
+
clear: function() {
|
|
94
|
+
return setInnerValue('');
|
|
95
|
+
},
|
|
96
|
+
focus: function() {
|
|
97
|
+
var _textareaRef_current;
|
|
98
|
+
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.focus();
|
|
99
|
+
},
|
|
100
|
+
blur: function() {
|
|
101
|
+
var _textareaRef_current;
|
|
102
|
+
return (_textareaRef_current = textareaRef.current) === null || _textareaRef_current === void 0 ? void 0 : _textareaRef_current.blur();
|
|
103
|
+
},
|
|
104
|
+
get nativeElement () {
|
|
105
|
+
return textareaRef.current;
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
});
|
|
92
109
|
var _obj;
|
|
93
110
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
|
|
94
111
|
className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-readonly"), readOnly), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _define_property(_obj, "".concat(classPrefix, "-plain"), plain), _define_property(_obj, "".concat(classPrefix, "-container"), !plain), _define_property(_obj, "".concat(classPrefix, "-").concat(status), status), _obj), className)
|
|
@@ -98,7 +115,7 @@ export var TextArea = function(props) {
|
|
|
98
115
|
style: style,
|
|
99
116
|
disabled: disabled,
|
|
100
117
|
readOnly: readOnly,
|
|
101
|
-
value:
|
|
118
|
+
value: innerValue,
|
|
102
119
|
onChange: handleChange,
|
|
103
120
|
onBlur: handleBlur,
|
|
104
121
|
onFocus: handleFocus,
|
|
@@ -113,6 +130,6 @@ export var TextArea = function(props) {
|
|
|
113
130
|
placeholder: placeholder !== undefined ? placeholder : locale.placeholder
|
|
114
131
|
})), showCount && /*#__PURE__*/ React.createElement("div", {
|
|
115
132
|
className: classNames("".concat(classPrefix, "-limit"), _define_property({}, "".concat(classPrefix, "-limit-disabled"), disabled))
|
|
116
|
-
},
|
|
117
|
-
};
|
|
133
|
+
}, innerValue.length, "/", maxLength < 0 ? 0 : maxLength)));
|
|
134
|
+
});
|
|
118
135
|
TextArea.displayName = 'NutTextArea';
|