@nutui/nutui-react 1.1.5-beta.0 → 1.1.5-beta.1
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/dist/esm/Address.js +23 -11
- package/dist/esm/Button.js +27 -28
- package/dist/esm/FixedNav.js +3 -2
- package/dist/esm/Input.js +4 -2
- package/dist/esm/Swiper.js +62 -39
- package/dist/esm/SwiperItem.js +0 -4
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +1 -1
- package/dist/locales/zh-CN.js +1 -1
- package/dist/locales/zh-TW.js +1 -1
- package/dist/nutui.react.es.js +122 -67
- package/dist/nutui.react.umd.js +15 -21
- package/dist/packages/fixednav/fixednav.scss +1 -1
- package/dist/style.css +1 -1
- package/dist/style.es.js +1 -1
- package/dist/types/address/address.d.ts +1 -0
- package/dist/types/address/customRender.d.ts +1 -0
- package/dist/types/card/__test__/card.spec.d.ts +1 -0
- package/dist/types/cell/__test__/cell.spec.d.ts +1 -0
- package/dist/types/cellgroup/__test__/cellgroup.spec.d.ts +1 -0
- package/dist/types/price/__test__/price.spec.d.ts +1 -0
- package/package.json +1 -1
package/dist/nutui.react.es.js
CHANGED
|
@@ -34,12 +34,12 @@ var __publicField = (obj, key, value) => {
|
|
|
34
34
|
return value;
|
|
35
35
|
};
|
|
36
36
|
/*!
|
|
37
|
-
* @nutui/nutui-react v1.1.5-beta.
|
|
37
|
+
* @nutui/nutui-react v1.1.5-beta.1 Mon Jun 27 2022 19:39:21 GMT+0800 (China Standard Time)
|
|
38
38
|
* (c) 2022 @jdf2e.
|
|
39
39
|
* Released under the MIT License.
|
|
40
40
|
*/
|
|
41
41
|
import * as React from "react";
|
|
42
|
-
import React__default, { useState, useEffect, Component, useRef, createContext, useContext as useContext$1, useImperativeHandle, forwardRef,
|
|
42
|
+
import React__default, { useCallback, useState, useEffect, Component, useRef, createContext, useContext as useContext$1, useImperativeHandle, forwardRef, useMemo, memo } from "react";
|
|
43
43
|
import * as ReactDOM from "react-dom";
|
|
44
44
|
import ReactDOM__default, { unstable_batchedUpdates } from "react-dom";
|
|
45
45
|
var classname = { exports: {} };
|
|
@@ -168,8 +168,37 @@ const Button = (props) => {
|
|
|
168
168
|
"className",
|
|
169
169
|
"style"
|
|
170
170
|
]);
|
|
171
|
-
const
|
|
172
|
-
|
|
171
|
+
const getStyle = useCallback(() => {
|
|
172
|
+
const style2 = {};
|
|
173
|
+
if (color) {
|
|
174
|
+
if (plain) {
|
|
175
|
+
style2.color = color;
|
|
176
|
+
style2.background = "#fff";
|
|
177
|
+
if (!(color == null ? void 0 : color.includes("gradient"))) {
|
|
178
|
+
style2.borderColor = color;
|
|
179
|
+
}
|
|
180
|
+
} else {
|
|
181
|
+
style2.color = "#fff";
|
|
182
|
+
style2.background = color;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
return style2;
|
|
186
|
+
}, [color, plain]);
|
|
187
|
+
const classes = useCallback(() => {
|
|
188
|
+
const prefixCls = "nut-button";
|
|
189
|
+
return [
|
|
190
|
+
prefixCls,
|
|
191
|
+
`${type ? `${prefixCls}--${type}` : ""}`,
|
|
192
|
+
`${size ? `${prefixCls}--${size}` : ""}`,
|
|
193
|
+
`${shape ? `${prefixCls}--${shape}` : ""}`,
|
|
194
|
+
`${plain ? `${prefixCls}--plain` : ""}`,
|
|
195
|
+
`${block ? `${prefixCls}--block` : ""}`,
|
|
196
|
+
`${disabled ? `${prefixCls}--disabled` : ""}`,
|
|
197
|
+
`${loading ? `${prefixCls}--loading` : ""}`
|
|
198
|
+
].filter(Boolean).join(" ");
|
|
199
|
+
}, [block, disabled, loading, plain, shape, size, type]);
|
|
200
|
+
const [btnName, setBtnName] = useState(classes());
|
|
201
|
+
const [btnStyle, setBtnStyle] = useState(getStyle());
|
|
173
202
|
useEffect(() => {
|
|
174
203
|
setBtnName(classes());
|
|
175
204
|
setBtnStyle(getStyle());
|
|
@@ -186,39 +215,15 @@ const Button = (props) => {
|
|
|
186
215
|
block,
|
|
187
216
|
icon,
|
|
188
217
|
children,
|
|
189
|
-
onClick
|
|
218
|
+
onClick,
|
|
219
|
+
classes,
|
|
220
|
+
getStyle
|
|
190
221
|
]);
|
|
191
|
-
const classes = () => {
|
|
192
|
-
const prefixCls = "nut-button";
|
|
193
|
-
return `${prefixCls} ${type ? `${prefixCls}--${type}` : ""}
|
|
194
|
-
${size ? `${prefixCls}--${size}` : ""}
|
|
195
|
-
${shape ? `${prefixCls}--${shape}` : ""}
|
|
196
|
-
${plain ? `${prefixCls}--plain` : ""}
|
|
197
|
-
${block ? `${prefixCls}--block` : ""}
|
|
198
|
-
${disabled ? `${prefixCls}--disabled` : ""}
|
|
199
|
-
${loading ? `${prefixCls}--loading` : ""}`;
|
|
200
|
-
};
|
|
201
222
|
const handleClick = (e2) => {
|
|
202
223
|
if (!loading && !disabled && onClick) {
|
|
203
224
|
onClick(e2);
|
|
204
225
|
}
|
|
205
226
|
};
|
|
206
|
-
const getStyle = () => {
|
|
207
|
-
const style2 = {};
|
|
208
|
-
if (color) {
|
|
209
|
-
if (plain) {
|
|
210
|
-
style2.color = color;
|
|
211
|
-
style2.background = "#fff";
|
|
212
|
-
if (!(color == null ? void 0 : color.includes("gradient"))) {
|
|
213
|
-
style2.borderColor = color;
|
|
214
|
-
}
|
|
215
|
-
} else {
|
|
216
|
-
style2.color = "#fff";
|
|
217
|
-
style2.background = color;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
return style2;
|
|
221
|
-
};
|
|
222
227
|
return /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({
|
|
223
228
|
className: `${btnName} ${className}`,
|
|
224
229
|
style: __spreadValues(__spreadValues({}, btnStyle), style)
|
|
@@ -2556,9 +2561,10 @@ const FixedNav = (props) => {
|
|
|
2556
2561
|
onClick: (event) => onSelectCb(event, item),
|
|
2557
2562
|
key: item.id || index2
|
|
2558
2563
|
}, /* @__PURE__ */ React__default.createElement("img", {
|
|
2559
|
-
src: item.icon
|
|
2564
|
+
src: item.icon,
|
|
2565
|
+
alt: ""
|
|
2560
2566
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
|
2561
|
-
className: "
|
|
2567
|
+
className: "nut-fixednav__list-text"
|
|
2562
2568
|
}, item.text), item.num && /* @__PURE__ */ React__default.createElement("div", {
|
|
2563
2569
|
className: "b"
|
|
2564
2570
|
}, item.num));
|
|
@@ -5131,7 +5137,7 @@ function formatNumber(value, allowDot = true, allowMinus = true) {
|
|
|
5131
5137
|
const defaultProps$B = {
|
|
5132
5138
|
type: "text",
|
|
5133
5139
|
defaultValue: "",
|
|
5134
|
-
placeholder: "
|
|
5140
|
+
placeholder: "",
|
|
5135
5141
|
label: "",
|
|
5136
5142
|
requireShow: false,
|
|
5137
5143
|
disabled: false,
|
|
@@ -5141,7 +5147,7 @@ const defaultProps$B = {
|
|
|
5141
5147
|
clearable: true
|
|
5142
5148
|
};
|
|
5143
5149
|
const Input = (props) => {
|
|
5144
|
-
useConfig();
|
|
5150
|
+
const { locale } = useConfig();
|
|
5145
5151
|
const {
|
|
5146
5152
|
type,
|
|
5147
5153
|
defaultValue,
|
|
@@ -5160,6 +5166,7 @@ const Input = (props) => {
|
|
|
5160
5166
|
focus,
|
|
5161
5167
|
clear
|
|
5162
5168
|
} = __spreadValues(__spreadValues({}, defaultProps$B), props);
|
|
5169
|
+
locale.placeholder = placeholder || locale.placeholder;
|
|
5163
5170
|
const inputBem = cn("input");
|
|
5164
5171
|
const [inputValue, SetInputValue] = useState("");
|
|
5165
5172
|
const [active, SetActive] = useState(false);
|
|
@@ -12079,13 +12086,13 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12079
12086
|
offset: 0,
|
|
12080
12087
|
size: 0
|
|
12081
12088
|
});
|
|
12082
|
-
const childsRefs = [];
|
|
12083
12089
|
const isVertical = direction === "vertical";
|
|
12084
12090
|
const [rect, setRect] = useState(null);
|
|
12085
12091
|
let [active, setActive] = useState(0);
|
|
12086
12092
|
const [width, setWidth] = useState(0);
|
|
12087
12093
|
const [height, setHeight] = useState(0);
|
|
12088
12094
|
const [offset, setOffset] = useState(0);
|
|
12095
|
+
const [childOffset, setChildOffset] = useState([]);
|
|
12089
12096
|
const [ready, setReady] = useState(false);
|
|
12090
12097
|
let size = isVertical ? height : width;
|
|
12091
12098
|
const [touch, setTouch] = useState({
|
|
@@ -12099,22 +12106,20 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12099
12106
|
delta: 0,
|
|
12100
12107
|
touchTime: 0
|
|
12101
12108
|
});
|
|
12102
|
-
const
|
|
12103
|
-
|
|
12104
|
-
|
|
12105
|
-
|
|
12106
|
-
|
|
12107
|
-
|
|
12108
|
-
|
|
12109
|
-
const getChildren = () => {
|
|
12110
|
-
const childs2 = [];
|
|
12111
|
-
React__default.Children.toArray(children).forEach((child, index2) => {
|
|
12112
|
-
if (child.type && child.type.displayName === "NutSwiperItem") {
|
|
12113
|
-
childs2.push(React__default.cloneElement(child, { ref: childsRefs[index2], key: `item_${index2}` }));
|
|
12114
|
-
}
|
|
12109
|
+
const { childs, childCount } = useMemo(() => {
|
|
12110
|
+
let childCount2 = 0;
|
|
12111
|
+
const childs2 = React__default.Children.map(props.children, (child) => {
|
|
12112
|
+
if (!React__default.isValidElement(child))
|
|
12113
|
+
return null;
|
|
12114
|
+
childCount2++;
|
|
12115
|
+
return child;
|
|
12115
12116
|
});
|
|
12116
|
-
return
|
|
12117
|
-
|
|
12117
|
+
return {
|
|
12118
|
+
childs: childs2,
|
|
12119
|
+
childCount: childCount2
|
|
12120
|
+
};
|
|
12121
|
+
}, [props.children]);
|
|
12122
|
+
let trackSize = childCount * Number(size);
|
|
12118
12123
|
const parent = {
|
|
12119
12124
|
propSwiper,
|
|
12120
12125
|
size
|
|
@@ -12201,12 +12206,13 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12201
12206
|
if (props.loop) {
|
|
12202
12207
|
if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
|
|
12203
12208
|
const rightBound = targetOffset < minOffset;
|
|
12204
|
-
|
|
12209
|
+
childOffset[0] = rightBound ? trackSize : 0;
|
|
12205
12210
|
}
|
|
12206
12211
|
if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
|
|
12207
12212
|
const leftBound = targetOffset > 0;
|
|
12208
|
-
|
|
12213
|
+
childOffset[childCount - 1] = leftBound ? -trackSize : 0;
|
|
12209
12214
|
}
|
|
12215
|
+
setChildOffset(childOffset);
|
|
12210
12216
|
}
|
|
12211
12217
|
if (isEmit && active !== targetActive) {
|
|
12212
12218
|
props.onChange && props.onChange((targetActive + childCount) % childCount);
|
|
@@ -12374,7 +12380,8 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12374
12380
|
};
|
|
12375
12381
|
}, [ready]);
|
|
12376
12382
|
useEffect(() => {
|
|
12377
|
-
|
|
12383
|
+
stopAutoPlay();
|
|
12384
|
+
autoplay();
|
|
12378
12385
|
}, [children]);
|
|
12379
12386
|
useEffect(() => {
|
|
12380
12387
|
init();
|
|
@@ -12390,6 +12397,19 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12390
12397
|
target.removeEventListener("touchend", onTouchEnd, false);
|
|
12391
12398
|
};
|
|
12392
12399
|
});
|
|
12400
|
+
const style = (index2) => {
|
|
12401
|
+
const style2 = {};
|
|
12402
|
+
const _direction = propSwiper.direction || direction;
|
|
12403
|
+
const _size = size;
|
|
12404
|
+
if (_size) {
|
|
12405
|
+
style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
|
|
12406
|
+
}
|
|
12407
|
+
let offset2 = childOffset[index2];
|
|
12408
|
+
if (offset2) {
|
|
12409
|
+
style2.transform = `translate3D${_direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
|
|
12410
|
+
}
|
|
12411
|
+
return style2;
|
|
12412
|
+
};
|
|
12393
12413
|
React__default.useImperativeHandle(ref, () => ({
|
|
12394
12414
|
to: to2,
|
|
12395
12415
|
next,
|
|
@@ -12403,12 +12423,18 @@ const Swiper = React__default.forwardRef((props, ref) => {
|
|
|
12403
12423
|
}, rest), /* @__PURE__ */ React__default.createElement("div", {
|
|
12404
12424
|
className: contentClass,
|
|
12405
12425
|
ref: innerRef
|
|
12406
|
-
}, childs
|
|
12426
|
+
}, React__default.Children.map(childs, (child, index2) => {
|
|
12427
|
+
return /* @__PURE__ */ React__default.createElement("div", {
|
|
12428
|
+
className: b2("item-wrapper"),
|
|
12429
|
+
style: style(index2),
|
|
12430
|
+
key: index2
|
|
12431
|
+
}, child);
|
|
12432
|
+
})), propSwiper.paginationVisible && !("pageContent" in propSwiper) ? /* @__PURE__ */ React__default.createElement("div", {
|
|
12407
12433
|
className: classNames({
|
|
12408
12434
|
[`${b2("pagination")}`]: true,
|
|
12409
12435
|
[`${b2("pagination-vertical")}`]: isVertical
|
|
12410
12436
|
})
|
|
12411
|
-
},
|
|
12437
|
+
}, React__default.Children.map(childs, (item, index2) => {
|
|
12412
12438
|
return /* @__PURE__ */ React__default.createElement("i", {
|
|
12413
12439
|
style: {
|
|
12414
12440
|
backgroundColor: (active + childCount) % childCount === index2 ? propSwiper.paginationColor : "#ddd"
|
|
@@ -12441,9 +12467,6 @@ const SwiperItem = React__default.forwardRef((props, ref) => {
|
|
|
12441
12467
|
if (_size) {
|
|
12442
12468
|
style2[_direction === "horizontal" ? "width" : "height"] = `${_size}px`;
|
|
12443
12469
|
}
|
|
12444
|
-
if (offset) {
|
|
12445
|
-
style2.transform = `translate3D${_direction === "horizontal" ? `(${offset}px,0,0)` : `(0,${offset}px,0)`}`;
|
|
12446
|
-
}
|
|
12447
12470
|
return style2;
|
|
12448
12471
|
};
|
|
12449
12472
|
return /* @__PURE__ */ React__default.createElement("div", {
|
|
@@ -13653,7 +13676,29 @@ const defaultProps$4 = {
|
|
|
13653
13676
|
};
|
|
13654
13677
|
const CustomRender = (props) => {
|
|
13655
13678
|
const { locale } = useConfig();
|
|
13656
|
-
const _a = __spreadValues(__spreadValues({}, defaultProps$4), props), {
|
|
13679
|
+
const _a = __spreadValues(__spreadValues({}, defaultProps$4), props), {
|
|
13680
|
+
children,
|
|
13681
|
+
type,
|
|
13682
|
+
height,
|
|
13683
|
+
province,
|
|
13684
|
+
city,
|
|
13685
|
+
country,
|
|
13686
|
+
town,
|
|
13687
|
+
onNextArea,
|
|
13688
|
+
onTabClick,
|
|
13689
|
+
onClose
|
|
13690
|
+
} = _a, rest = __objRest(_a, [
|
|
13691
|
+
"children",
|
|
13692
|
+
"type",
|
|
13693
|
+
"height",
|
|
13694
|
+
"province",
|
|
13695
|
+
"city",
|
|
13696
|
+
"country",
|
|
13697
|
+
"town",
|
|
13698
|
+
"onNextArea",
|
|
13699
|
+
"onTabClick",
|
|
13700
|
+
"onClose"
|
|
13701
|
+
]);
|
|
13657
13702
|
const b2 = cn("address");
|
|
13658
13703
|
const [privateType] = useState(type);
|
|
13659
13704
|
const [tabIndex, setTabIndex] = useState(0);
|
|
@@ -13756,21 +13801,26 @@ const CustomRender = (props) => {
|
|
|
13756
13801
|
[tabName[i + 1]]: {}
|
|
13757
13802
|
});
|
|
13758
13803
|
}
|
|
13759
|
-
if (tabIndex <
|
|
13760
|
-
|
|
13761
|
-
|
|
13762
|
-
|
|
13804
|
+
if (tabIndex < 4) {
|
|
13805
|
+
if (tabIndex === 3) {
|
|
13806
|
+
calBack.next = "";
|
|
13807
|
+
} else {
|
|
13808
|
+
setTabIndex(() => tabIndex + 1);
|
|
13809
|
+
lineAnimation(tabIndex + 1);
|
|
13810
|
+
calBack.next = tabName[tabIndex + 1];
|
|
13811
|
+
}
|
|
13763
13812
|
calBack.value = item;
|
|
13764
13813
|
onNextArea && onNextArea(calBack);
|
|
13765
13814
|
} else {
|
|
13766
13815
|
onClose && onClose();
|
|
13767
13816
|
}
|
|
13768
13817
|
};
|
|
13769
|
-
const changeRegionTab = (item, index2) => {
|
|
13818
|
+
const changeRegionTab = (item, index2, key) => {
|
|
13770
13819
|
if (getTabName(item, index2)) {
|
|
13771
13820
|
setTabIndex(index2);
|
|
13772
13821
|
lineAnimation(index2);
|
|
13773
13822
|
}
|
|
13823
|
+
onTabClick && onTabClick(key);
|
|
13774
13824
|
};
|
|
13775
13825
|
const handleElevatorItem = (key, item) => {
|
|
13776
13826
|
nextAreaList(item);
|
|
@@ -13808,8 +13858,8 @@ const CustomRender = (props) => {
|
|
|
13808
13858
|
className: `${b2("tab-item")} ${index2 === tabIndex ? "active" : ""}`,
|
|
13809
13859
|
key: index2,
|
|
13810
13860
|
ref: mapRef[key],
|
|
13811
|
-
onClick: () => changeRegionTab(selectedRegion[key], index2)
|
|
13812
|
-
}, /* @__PURE__ */ React__default.createElement("div", null, getTabName(selectedRegion[key], index2)));
|
|
13861
|
+
onClick: () => changeRegionTab(selectedRegion[key], index2, key)
|
|
13862
|
+
}, index2 <= tabIndex && /* @__PURE__ */ React__default.createElement("div", null, getTabName(selectedRegion[key], index2)));
|
|
13813
13863
|
}), /* @__PURE__ */ React__default.createElement("div", {
|
|
13814
13864
|
className: b2("tab-line"),
|
|
13815
13865
|
ref: regionLine,
|
|
@@ -13880,6 +13930,7 @@ const Address = (props) => {
|
|
|
13880
13930
|
onClose,
|
|
13881
13931
|
closeMask,
|
|
13882
13932
|
switchModule,
|
|
13933
|
+
onTabChecked,
|
|
13883
13934
|
style,
|
|
13884
13935
|
className
|
|
13885
13936
|
} = _a, rest = __objRest(_a, [
|
|
@@ -13905,6 +13956,7 @@ const Address = (props) => {
|
|
|
13905
13956
|
"onClose",
|
|
13906
13957
|
"closeMask",
|
|
13907
13958
|
"switchModule",
|
|
13959
|
+
"onTabChecked",
|
|
13908
13960
|
"style",
|
|
13909
13961
|
"className"
|
|
13910
13962
|
]);
|
|
@@ -14035,6 +14087,9 @@ const Address = (props) => {
|
|
|
14035
14087
|
onNextArea: (cal) => {
|
|
14036
14088
|
nextAreaList && nextAreaList(cal);
|
|
14037
14089
|
},
|
|
14090
|
+
onTabClick: (type2) => {
|
|
14091
|
+
onTabChecked && onTabChecked(type2);
|
|
14092
|
+
},
|
|
14038
14093
|
onClose: handClose
|
|
14039
14094
|
}), privateType === "exist" && /* @__PURE__ */ React__default.createElement(ExistRender, {
|
|
14040
14095
|
type: privateType,
|