@nutui/nutui-react-taro 2.7.6 → 2.7.7
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 +20 -7
- package/dist/esm/Address/style/style.css +1 -1
- package/dist/esm/Address.js +1 -1
- package/dist/esm/Cascader/style/style.css +1 -1
- package/dist/esm/Cascader.js +1 -1
- package/dist/esm/DatePicker.js +1 -1
- package/dist/esm/Empty.js +1 -1
- package/dist/esm/Form.js +2 -1
- package/dist/esm/FormItem.js +1 -1
- package/dist/esm/TabPane.js +1 -1
- package/dist/esm/Tabs/style/style.css +1 -1
- package/dist/esm/Tabs.js +1 -1
- package/dist/esm/{address.taro-BCoDZM6h.js → address.taro-Ck0ZmxRg.js} +1 -1
- package/dist/esm/{cascader.taro-BwRnRQXE.js → cascader.taro-DUJvcGw0.js} +1 -1
- package/dist/esm/{datepicker.taro-DicskhhH.js → datepicker.taro-Dwh8sKhJ.js} +8 -0
- package/dist/esm/{empty.taro-DhCHSdca.js → empty.taro-ChtnK90s.js} +1 -1
- package/dist/esm/{formitem.taro-CU6rrcJD.js → formitem.taro-Bee3MWwq.js} +121 -31
- package/dist/esm/nutui-react.es.js +7 -7
- package/dist/esm/{tabpane.taro-BAe86j3t.js → tabpane.taro-BAihO3w8.js} +2 -1
- package/dist/esm/{tabs.taro-CnXiMR_B.js → tabs.taro-sp_DNWis.js} +26 -44
- 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 +161 -100
- package/dist/nutui.react.umd.js +161 -100
- package/dist/packages/tabs/tabs.scss +72 -115
- package/dist/style.css +1 -1
- package/dist/types/packages/form/__tests__/merge.spec.d.ts +1 -0
- package/dist/types/packages/form/index.d.ts +2 -1
- package/dist/types/packages/form/index.taro.d.ts +2 -1
- package/dist/types/packages/form/useform.d.ts +2 -1
- package/dist/types/packages/form/useform.taro.d.ts +2 -1
- package/dist/types/utils/merge.d.ts +14 -1
- package/package.json +1 -1
|
@@ -22,17 +22,17 @@ import { S as S5 } from "./sidenavbaritem.taro-BKpzXpzG.js";
|
|
|
22
22
|
import { S as S6 } from "./subsidenavbar.taro-CSU3DhNq.js";
|
|
23
23
|
import { T } from "./tabbar.taro-BiQDgZQF.js";
|
|
24
24
|
import { T as T2 } from "./tabbaritem.taro-BiIVucQz.js";
|
|
25
|
-
import { T as T3 } from "./tabpane.taro-
|
|
26
|
-
import { T as T4 } from "./tabs.taro-
|
|
27
|
-
import { A } from "./address.taro-
|
|
25
|
+
import { T as T3 } from "./tabpane.taro-BAihO3w8.js";
|
|
26
|
+
import { T as T4 } from "./tabs.taro-sp_DNWis.js";
|
|
27
|
+
import { A } from "./address.taro-Ck0ZmxRg.js";
|
|
28
28
|
import { C as C5 } from "./calendar.taro-CM4yWFlF.js";
|
|
29
29
|
import { C as C6 } from "./calendaritem.taro-BGbbuJOS.js";
|
|
30
30
|
import { C as C7 } from "./calendarcard.taro-CvWyBqnr.js";
|
|
31
|
-
import { C as C8 } from "./cascader.taro-
|
|
31
|
+
import { C as C8 } from "./cascader.taro-DUJvcGw0.js";
|
|
32
32
|
import { C as C9, a as a2 } from "./checkbox.taro-CgqJyhrh.js";
|
|
33
|
-
import { D as D2 } from "./datepicker.taro-
|
|
33
|
+
import { D as D2 } from "./datepicker.taro-Dwh8sKhJ.js";
|
|
34
34
|
import { default as default2 } from "./Form.js";
|
|
35
|
-
import { F as F2 } from "./formitem.taro-
|
|
35
|
+
import { F as F2 } from "./formitem.taro-Bee3MWwq.js";
|
|
36
36
|
import { I as I2 } from "./input.taro-CA9ZpM9a.js";
|
|
37
37
|
import { I as I3 } from "./inputnumber.taro-CZourWz-.js";
|
|
38
38
|
import { M } from "./menu.taro-2APk--BX.js";
|
|
@@ -52,7 +52,7 @@ import { A as A2 } from "./actionsheet.taro-kMhbV73n.js";
|
|
|
52
52
|
import { B as B3 } from "./badge.taro-B42_7q8v.js";
|
|
53
53
|
import { B as B4 } from "./dialog.taro-yjDaaRHA.js";
|
|
54
54
|
import { D as D3 } from "./drag.taro-r5Lmncrq.js";
|
|
55
|
-
import { E as E2 } from "./empty.taro-
|
|
55
|
+
import { E as E2 } from "./empty.taro-ChtnK90s.js";
|
|
56
56
|
import { I as I4 } from "./infiniteloading.taro-DzIrZvc0.js";
|
|
57
57
|
import { L as L2 } from "./loading.taro-n_qoNgCW.js";
|
|
58
58
|
import { N as N3 } from "./noticebar.taro-B0qm66Cu.js";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React__default from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
|
+
import { View } from "@tarojs/components";
|
|
3
4
|
const defaultProps = {
|
|
4
5
|
title: "",
|
|
5
6
|
value: "",
|
|
@@ -11,7 +12,7 @@ const TabPane = (props) => {
|
|
|
11
12
|
const classes = classNames(classPrefix, {
|
|
12
13
|
active: !disabled && props.active
|
|
13
14
|
}, autoHeightClassName, className);
|
|
14
|
-
return children
|
|
15
|
+
return children && React__default.createElement(View, { className: classes }, !disabled && children);
|
|
15
16
|
};
|
|
16
17
|
export {
|
|
17
18
|
TabPane as T
|
|
@@ -5,7 +5,7 @@ import classNames from "classnames";
|
|
|
5
5
|
import { JoySmile } from "@nutui/icons-react-taro";
|
|
6
6
|
import Taro, { nextTick, createSelectorQuery } from "@tarojs/taro";
|
|
7
7
|
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
|
|
8
|
-
import { T as TabPane } from "./tabpane.taro-
|
|
8
|
+
import { T as TabPane } from "./tabpane.taro-BAihO3w8.js";
|
|
9
9
|
import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
|
|
10
10
|
import { u as useForceUpdate } from "./use-force-update-CudFjCsy.js";
|
|
11
11
|
import { r as requestAniFrame } from "./raf-Di10dXPS.js";
|
|
@@ -20,16 +20,14 @@ const Tabs = (props) => {
|
|
|
20
20
|
const [value, setValue] = usePropsValue({
|
|
21
21
|
value: outerValue,
|
|
22
22
|
defaultValue: outerDefaultValue,
|
|
23
|
-
finalValue: 0,
|
|
24
23
|
onChange
|
|
25
24
|
});
|
|
26
25
|
const titleItemsRef = useRef([]);
|
|
27
|
-
const navRef = useRef(null);
|
|
28
26
|
const getTitles = () => {
|
|
29
27
|
const titles2 = [];
|
|
30
28
|
React__default.Children.forEach(children, (child, idx) => {
|
|
31
29
|
if (React__default.isValidElement(child)) {
|
|
32
|
-
const
|
|
30
|
+
const { props: props2 } = child;
|
|
33
31
|
if ((props2 === null || props2 === void 0 ? void 0 : props2.title) || (props2 === null || props2 === void 0 ? void 0 : props2.value)) {
|
|
34
32
|
titles2.push({
|
|
35
33
|
title: props2.title,
|
|
@@ -60,13 +58,8 @@ const Tabs = (props) => {
|
|
|
60
58
|
const classes = classNames(classPrefix, `${classPrefix}-${direction}`, className);
|
|
61
59
|
const classesTitle = classNames(`${classPrefix}-titles`, {
|
|
62
60
|
[`${classPrefix}-titles-${activeType}`]: activeType,
|
|
63
|
-
[`${classPrefix}-titles-scrollable`]: true,
|
|
64
61
|
[`${classPrefix}-titles-${align}`]: align
|
|
65
62
|
});
|
|
66
|
-
const tabsActiveStyle = {
|
|
67
|
-
color: activeType === "smile" ? activeColor : "",
|
|
68
|
-
background: activeType === "line" ? activeColor : ""
|
|
69
|
-
};
|
|
70
63
|
const getRect = (selector) => {
|
|
71
64
|
return new Promise((resolve) => {
|
|
72
65
|
createSelectorQuery().select(selector).boundingClientRect().exec((rect = []) => {
|
|
@@ -82,22 +75,18 @@ const Tabs = (props) => {
|
|
|
82
75
|
});
|
|
83
76
|
};
|
|
84
77
|
const scrollWithAnimation = useRef(false);
|
|
85
|
-
const navRectRef = useRef();
|
|
86
|
-
const titleRectRef = useRef([]);
|
|
87
78
|
const [scrollLeft, setScrollLeft] = useState(0);
|
|
88
79
|
const [scrollTop, setScrollTop] = useState(0);
|
|
89
80
|
const scrollDirection = (to, direction2) => {
|
|
90
81
|
let count = 0;
|
|
91
82
|
const frames = 1;
|
|
92
83
|
function animate() {
|
|
93
|
-
if (direction2 === "horizontal")
|
|
84
|
+
if (direction2 === "horizontal")
|
|
94
85
|
setScrollLeft(to);
|
|
95
|
-
|
|
86
|
+
else
|
|
96
87
|
setScrollTop(to);
|
|
97
|
-
|
|
98
|
-
if (++count < frames) {
|
|
88
|
+
if (++count < frames)
|
|
99
89
|
requestAniFrame(animate);
|
|
100
|
-
}
|
|
101
90
|
}
|
|
102
91
|
animate();
|
|
103
92
|
};
|
|
@@ -107,18 +96,19 @@ const Tabs = (props) => {
|
|
|
107
96
|
getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
|
|
108
97
|
getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`)
|
|
109
98
|
]).then(([navRect, titleRects]) => {
|
|
110
|
-
|
|
111
|
-
titleRectRef.current = titleRects;
|
|
112
|
-
const titleRect = titleRectRef.current[index];
|
|
99
|
+
const titleRect = titleRects[index];
|
|
113
100
|
if (!titleRect)
|
|
114
101
|
return;
|
|
115
102
|
let to = 0;
|
|
116
103
|
if (direction === "vertical") {
|
|
117
104
|
const top = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.height, 0);
|
|
118
|
-
to = top - (
|
|
105
|
+
to = top - (navRect.height - titleRect.height) / 2;
|
|
119
106
|
} else {
|
|
120
107
|
const left = titleRects.slice(0, index).reduce((prev, curr) => prev + curr.width, 0);
|
|
121
|
-
to =
|
|
108
|
+
to = left - (navRect.width - titleRect.width) / 2;
|
|
109
|
+
if (to < 0)
|
|
110
|
+
return;
|
|
111
|
+
to = rtl ? -to : to;
|
|
122
112
|
}
|
|
123
113
|
nextTick(() => {
|
|
124
114
|
scrollWithAnimation.current = true;
|
|
@@ -131,7 +121,7 @@ const Tabs = (props) => {
|
|
|
131
121
|
let index = titles.current.findIndex((t) => String(t.value) === String(value));
|
|
132
122
|
index = index < 0 ? 0 : index;
|
|
133
123
|
return {
|
|
134
|
-
transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0
|
|
124
|
+
transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0, -${index * 100}%, 0)`,
|
|
135
125
|
transitionDuration: `${duration}ms`
|
|
136
126
|
};
|
|
137
127
|
};
|
|
@@ -140,38 +130,35 @@ const Tabs = (props) => {
|
|
|
140
130
|
index = index < 0 ? 0 : index;
|
|
141
131
|
scrollIntoView(index);
|
|
142
132
|
}, [value]);
|
|
143
|
-
const tabChange = (item
|
|
133
|
+
const tabChange = (item) => {
|
|
144
134
|
onClick && onClick(item.value);
|
|
145
|
-
if (item.disabled) {
|
|
146
|
-
|
|
135
|
+
if (!item.disabled) {
|
|
136
|
+
setValue(item.value);
|
|
147
137
|
}
|
|
148
|
-
setValue(item.value);
|
|
149
138
|
};
|
|
150
139
|
return React__default.createElement(
|
|
151
140
|
View,
|
|
152
141
|
Object.assign({ className: classes }, rest),
|
|
153
142
|
React__default.createElement(
|
|
154
143
|
ScrollView,
|
|
155
|
-
{ enableFlex: true, scrollX: direction === "horizontal", scrollY: direction === "vertical", scrollLeft, scrollTop, enhanced: true, showScrollbar: false, scrollWithAnimation: rtl && Taro.getEnv() !== "WEB" ? false : scrollWithAnimation.current, id: `nut-tabs-titles-${name || uuid}`, className: classesTitle, style:
|
|
156
|
-
React__default.createElement(View, { className: "nut-tabs-list"
|
|
144
|
+
{ enableFlex: true, scrollX: direction === "horizontal", scrollY: direction === "vertical", scrollLeft, scrollTop, enhanced: true, showScrollbar: false, scrollWithAnimation: rtl && Taro.getEnv() !== "WEB" ? false : scrollWithAnimation.current, id: `nut-tabs-titles-${name || uuid}`, className: classesTitle, style: tabStyle },
|
|
145
|
+
React__default.createElement(View, { className: "nut-tabs-list" }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
|
|
157
146
|
return React__default.createElement(
|
|
158
147
|
View,
|
|
159
|
-
{ ref: (ref) => titleItemsRef.current.push(ref), id: `scrollIntoView${index}`, onClick: (
|
|
160
|
-
tabChange(item);
|
|
161
|
-
}, className: classNames(`${classPrefix}-titles-item`, {
|
|
148
|
+
{ key: item.value, ref: (ref) => titleItemsRef.current.push(ref), id: `scrollIntoView${index}`, onClick: () => tabChange(item), className: classNames(`${classPrefix}-titles-item`, {
|
|
162
149
|
[`nut-tabs-titles-item-active`]: !item.disabled && String(item.value) === String(value),
|
|
163
150
|
[`nut-tabs-titles-item-disabled`]: item.disabled,
|
|
164
151
|
[`nut-tabs-titles-item-${align}`]: align
|
|
165
|
-
})
|
|
166
|
-
activeType === "line" && React__default.createElement(View, { className: classNames(`${classPrefix}-titles-item-line`, {
|
|
167
|
-
[`${classPrefix}-titles-item-line-${direction}`]: true
|
|
168
|
-
}), style: tabsActiveStyle }),
|
|
152
|
+
}) },
|
|
153
|
+
activeType === "line" && React__default.createElement(View, { className: classNames(`${classPrefix}-titles-item-line`, `${classPrefix}-titles-item-line-${direction}`), style: { background: activeColor } }),
|
|
169
154
|
activeType === "smile" && React__default.createElement(
|
|
170
155
|
View,
|
|
171
|
-
{ className: `${classPrefix}-titles-item-smile
|
|
156
|
+
{ className: `${classPrefix}-titles-item-smile` },
|
|
172
157
|
React__default.createElement(JoySmile, { color: activeColor })
|
|
173
158
|
),
|
|
174
|
-
React__default.createElement(View, { className: classNames(
|
|
159
|
+
React__default.createElement(View, { className: classNames({
|
|
160
|
+
[`${classPrefix}-ellipsis`]: direction === "vertical"
|
|
161
|
+
}, `${classPrefix}-titles-item-text`), style: { color: activeColor } }, item.title)
|
|
175
162
|
);
|
|
176
163
|
}))
|
|
177
164
|
),
|
|
@@ -179,14 +166,9 @@ const Tabs = (props) => {
|
|
|
179
166
|
View,
|
|
180
167
|
{ className: `${classPrefix}-content-wrap` },
|
|
181
168
|
React__default.createElement(View, { className: `${classPrefix}-content`, style: getContentStyle() }, React__default.Children.map(children, (child, idx) => {
|
|
182
|
-
if (!React__default.isValidElement(child))
|
|
169
|
+
if (!React__default.isValidElement(child))
|
|
183
170
|
return null;
|
|
184
|
-
}
|
|
185
|
-
let childProps = Object.assign(Object.assign({}, child.props), { active: value === child.props.value });
|
|
186
|
-
if (String(value) !== String(child.props.value || idx) && autoHeight) {
|
|
187
|
-
childProps = Object.assign(Object.assign({}, childProps), { autoHeightClassName: "inactive" });
|
|
188
|
-
}
|
|
189
|
-
return React__default.cloneElement(child, childProps);
|
|
171
|
+
return React__default.cloneElement(child, Object.assign(Object.assign({}, child.props), { active: value === child.props.value, autoHeightClassName: autoHeight && String(value) !== String(child.props.value || idx) ? "inactive" : void 0 }));
|
|
190
172
|
}))
|
|
191
173
|
)
|
|
192
174
|
);
|
package/dist/locales/base.js
CHANGED
package/dist/locales/en-US.js
CHANGED
package/dist/locales/id-ID.js
CHANGED
package/dist/locales/tr-TR.js
CHANGED
package/dist/locales/zh-CN.js
CHANGED
package/dist/locales/zh-TW.js
CHANGED
package/dist/locales/zh-UG.js
CHANGED