@bifrostui/react 1.4.5-beta.2 → 1.4.5-beta.3
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/ActionSheet/ActionSheetItem.js +3 -8
- package/dist/Avatar/Avatar.js +3 -8
- package/dist/Avatar/AvatarGroup.js +2 -6
- package/dist/Badge/Badge.js +3 -8
- package/dist/Button/Button.css +0 -10
- package/dist/Button/Button.js +3 -8
- package/dist/Calendar/Calendar.js +6 -14
- package/dist/Card/Card.css +0 -3
- package/dist/Card/CardContent.css +1 -0
- package/dist/Card/CardFooter.css +1 -0
- package/dist/Card/CardHeader.css +1 -0
- package/dist/Checkbox/Checkbox.js +2 -6
- package/dist/Checkbox/CheckboxGroup.js +4 -7
- package/dist/CollapsePanel/CollapsePanelItem.js +45 -46
- package/dist/Countdown/Countdown.js +5 -12
- package/dist/Divider/Divider.js +8 -5
- package/dist/Drawer/Drawer.js +4 -10
- package/dist/Fade/Fade.js +52 -56
- package/dist/IconButton/IconButton.js +5 -12
- package/dist/Image/Image.js +112 -119
- package/dist/Input/Input.js +4 -10
- package/dist/List/List.js +3 -8
- package/dist/List/ListItem.js +42 -44
- package/dist/List/ListItemContent.js +1 -4
- package/dist/List/ListItemExtra.js +9 -4
- package/dist/List/ListItemFooter.js +9 -4
- package/dist/List/ListItemHeader.js +9 -4
- package/dist/Loading/Loading.js +13 -4
- package/dist/Modal/Modal.js +0 -6
- package/dist/Modal/Modal.miniapp.js +4 -10
- package/dist/NavBar/NavBar.js +0 -1
- package/dist/Radio/Radio.js +2 -6
- package/dist/Radio/RadioGroup.js +0 -3
- package/dist/Rating/Rating.js +8 -18
- package/dist/Select/Select.js +4 -8
- package/dist/Skeleton/Skeleton.js +5 -9
- package/dist/Slide/Slide.js +69 -74
- package/dist/Slider/Slider.js +6 -14
- package/dist/Steps/Step.js +81 -82
- package/dist/Steps/Steps.d.ts +1 -1
- package/dist/Steps/Steps.js +57 -60
- package/dist/Switch/Switch.js +75 -78
- package/dist/TabBar/TabBar.js +3 -8
- package/dist/Tabs/Tab.css +3 -2
- package/dist/Tabs/Tab.js +13 -4
- package/dist/Tabs/Tabs.css +3 -17
- package/dist/Tabs/Tabs.js +13 -28
- package/dist/Tag/Tag.js +2 -6
- package/dist/TextArea/TextArea.js +5 -12
- package/dist/Transition/TransitionCore.js +3 -8
- package/es/ActionSheet/ActionSheetItem.js +3 -8
- package/es/Avatar/Avatar.js +3 -8
- package/es/Avatar/AvatarGroup.js +2 -6
- package/es/Badge/Badge.js +3 -8
- package/es/Button/Button.css +0 -10
- package/es/Button/Button.js +3 -8
- package/es/Calendar/Calendar.js +6 -14
- package/es/Card/Card.css +0 -3
- package/es/Card/CardContent.css +1 -0
- package/es/Card/CardFooter.css +1 -0
- package/es/Card/CardHeader.css +1 -0
- package/es/Checkbox/Checkbox.js +2 -6
- package/es/Checkbox/CheckboxGroup.js +4 -7
- package/es/CollapsePanel/CollapsePanelItem.js +45 -46
- package/es/Countdown/Countdown.js +5 -12
- package/es/Divider/Divider.js +8 -5
- package/es/Drawer/Drawer.js +4 -10
- package/es/Fade/Fade.js +52 -56
- package/es/IconButton/IconButton.js +5 -12
- package/es/Image/Image.js +112 -119
- package/es/Input/Input.js +4 -10
- package/es/List/List.js +3 -8
- package/es/List/ListItem.js +42 -44
- package/es/List/ListItemContent.js +1 -4
- package/es/List/ListItemExtra.js +9 -4
- package/es/List/ListItemFooter.js +9 -4
- package/es/List/ListItemHeader.js +9 -4
- package/es/Loading/Loading.js +13 -4
- package/es/Modal/Modal.js +0 -6
- package/es/Modal/Modal.miniapp.d.ts +1 -1
- package/es/Modal/Modal.miniapp.js +4 -10
- package/es/NavBar/NavBar.js +0 -1
- package/es/Radio/Radio.js +2 -6
- package/es/Radio/RadioGroup.js +0 -3
- package/es/Rating/Rating.js +8 -18
- package/es/Select/Select.js +4 -8
- package/es/Skeleton/Skeleton.js +5 -9
- package/es/Slide/Slide.js +69 -74
- package/es/Slider/Slider.js +6 -14
- package/es/Steps/Step.js +81 -82
- package/es/Steps/Steps.d.ts +1 -1
- package/es/Steps/Steps.js +57 -60
- package/es/Switch/Switch.js +75 -78
- package/es/TabBar/TabBar.js +3 -8
- package/es/Tabs/Tab.css +3 -2
- package/es/Tabs/Tab.js +13 -4
- package/es/Tabs/Tabs.css +3 -17
- package/es/Tabs/Tabs.js +15 -41
- package/es/Tag/Tag.js +2 -6
- package/es/TextArea/TextArea.js +5 -12
- package/es/Transition/TransitionCore.js +3 -8
- package/package.json +5 -5
package/es/Tabs/Tabs.js
CHANGED
|
@@ -26,47 +26,31 @@ var __objRest = (source, exclude) => {
|
|
|
26
26
|
}
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
|
-
import {
|
|
30
|
-
debounce,
|
|
31
|
-
isMini,
|
|
32
|
-
throttle,
|
|
33
|
-
useDidMountEffect
|
|
34
|
-
} from "@bifrostui/utils";
|
|
29
|
+
import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
|
|
35
30
|
import clsx from "clsx";
|
|
36
|
-
import React, {
|
|
37
|
-
useEffect,
|
|
38
|
-
useLayoutEffect,
|
|
39
|
-
useMemo,
|
|
40
|
-
useRef,
|
|
41
|
-
useState
|
|
42
|
-
} from "react";
|
|
31
|
+
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
43
32
|
import Tab from "./Tab";
|
|
44
33
|
import { TabsContextProvider } from "./TabsContext";
|
|
45
34
|
import bound from "./utils/bound";
|
|
46
35
|
import "./Tabs.css";
|
|
47
36
|
const prefixCls = "bui-tabs";
|
|
48
|
-
const defaultProps = {
|
|
49
|
-
tabs: []
|
|
50
|
-
};
|
|
51
37
|
const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
52
|
-
const _a =
|
|
53
|
-
const [active, setActive] = useState("");
|
|
38
|
+
const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
|
|
54
39
|
const tabsRef = useRef(null);
|
|
55
40
|
const activeLineRef = useRef(null);
|
|
56
|
-
const [
|
|
41
|
+
const [indicatorData, setIndicatorData] = useState({
|
|
57
42
|
x: 0,
|
|
58
|
-
transitionInUse: false,
|
|
59
43
|
hasActiveTab: false
|
|
60
44
|
});
|
|
61
45
|
const [maskData, setMaskData] = useState({
|
|
62
46
|
leftMaskOpacity: 0,
|
|
63
47
|
rightMaskOpacity: 0
|
|
64
48
|
});
|
|
65
|
-
const animate = (
|
|
49
|
+
const animate = useEventCallback(() => {
|
|
66
50
|
const container = tabsRef.current;
|
|
67
51
|
if (!container)
|
|
68
52
|
return;
|
|
69
|
-
const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index ===
|
|
53
|
+
const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
|
|
70
54
|
const activeLine = activeLineRef.current;
|
|
71
55
|
if (!activeLine)
|
|
72
56
|
return;
|
|
@@ -97,9 +81,8 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
97
81
|
activeLineWidth = activeLine.offsetWidth;
|
|
98
82
|
x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
|
|
99
83
|
}
|
|
100
|
-
|
|
84
|
+
setIndicatorData({
|
|
101
85
|
x,
|
|
102
|
-
transitionInUse,
|
|
103
86
|
hasActiveTab: !!activeTab
|
|
104
87
|
});
|
|
105
88
|
const maxScrollDistance = containerScrollWidth - containerWidth;
|
|
@@ -113,7 +96,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
113
96
|
if (tabsRef.current) {
|
|
114
97
|
tabsRef.current.scrollLeft = nextScrollLeft;
|
|
115
98
|
}
|
|
116
|
-
};
|
|
99
|
+
});
|
|
117
100
|
const updateMask = useMemo(
|
|
118
101
|
() => throttle(
|
|
119
102
|
() => {
|
|
@@ -137,25 +120,19 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
137
120
|
[]
|
|
138
121
|
);
|
|
139
122
|
useEffect(() => {
|
|
140
|
-
|
|
123
|
+
animate();
|
|
141
124
|
}, [value]);
|
|
142
|
-
useLayoutEffect(() => {
|
|
143
|
-
animate({ transitionInUse: false });
|
|
144
|
-
}, []);
|
|
145
125
|
useEffect(() => {
|
|
146
126
|
const handleResize = debounce(() => {
|
|
147
|
-
animate(
|
|
127
|
+
animate();
|
|
148
128
|
updateMask();
|
|
149
129
|
}, 100);
|
|
150
130
|
window.addEventListener("resize", handleResize);
|
|
151
131
|
return () => {
|
|
152
132
|
window.removeEventListener("resize", handleResize);
|
|
153
133
|
};
|
|
154
|
-
}, [
|
|
155
|
-
|
|
156
|
-
animate({ transitionInUse: true });
|
|
157
|
-
}, [active, tabs, children]);
|
|
158
|
-
useLayoutEffect(() => {
|
|
134
|
+
}, []);
|
|
135
|
+
useEffect(() => {
|
|
159
136
|
updateMask();
|
|
160
137
|
}, []);
|
|
161
138
|
const handleClick = (e, item) => {
|
|
@@ -165,9 +142,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
165
142
|
if (index === void 0 || index === null) {
|
|
166
143
|
return;
|
|
167
144
|
}
|
|
168
|
-
if (active !== value) {
|
|
169
|
-
setActive(index);
|
|
170
|
-
}
|
|
171
145
|
if (index !== value) {
|
|
172
146
|
onChange == null ? void 0 : onChange(e, { index });
|
|
173
147
|
}
|
|
@@ -196,11 +170,11 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
196
170
|
{
|
|
197
171
|
ref: activeLineRef,
|
|
198
172
|
className: clsx(`${prefixCls}-indicator`, {
|
|
199
|
-
"bui-indicator-invisible": isMini || !
|
|
173
|
+
"bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
|
|
200
174
|
}),
|
|
201
175
|
style: {
|
|
202
|
-
transition:
|
|
203
|
-
transform: `translate3d(${
|
|
176
|
+
transition: "transform 0.3s ease-in-out",
|
|
177
|
+
transform: `translate3d(${indicatorData.x}px, 0px, 0px)`
|
|
204
178
|
}
|
|
205
179
|
}
|
|
206
180
|
), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
|
package/es/Tag/Tag.js
CHANGED
|
@@ -47,9 +47,9 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
47
47
|
const _a = props, {
|
|
48
48
|
className,
|
|
49
49
|
style,
|
|
50
|
-
color,
|
|
50
|
+
color = "default",
|
|
51
51
|
htmlColor,
|
|
52
|
-
variant,
|
|
52
|
+
variant = "outlined",
|
|
53
53
|
onClick,
|
|
54
54
|
children
|
|
55
55
|
} = _a, others = __objRest(_a, [
|
|
@@ -98,10 +98,6 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
98
98
|
);
|
|
99
99
|
});
|
|
100
100
|
Tag.displayName = "BuiTag";
|
|
101
|
-
Tag.defaultProps = {
|
|
102
|
-
variant: "outlined",
|
|
103
|
-
color: "default"
|
|
104
|
-
};
|
|
105
101
|
var Tag_default = Tag;
|
|
106
102
|
export {
|
|
107
103
|
Tag_default as default
|
package/es/TextArea/TextArea.js
CHANGED
|
@@ -40,17 +40,17 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
|
|
|
40
40
|
const _a = props, {
|
|
41
41
|
className,
|
|
42
42
|
value,
|
|
43
|
-
defaultValue,
|
|
43
|
+
defaultValue = "",
|
|
44
44
|
textareaProps,
|
|
45
45
|
textareaRef,
|
|
46
46
|
name,
|
|
47
47
|
placeholder,
|
|
48
48
|
disabled,
|
|
49
|
-
rows,
|
|
49
|
+
rows = DEFAULT_ROWS,
|
|
50
50
|
maxLength,
|
|
51
|
-
autoSize,
|
|
52
|
-
autoFocus,
|
|
53
|
-
showCount,
|
|
51
|
+
autoSize = false,
|
|
52
|
+
autoFocus = false,
|
|
53
|
+
showCount = false,
|
|
54
54
|
onChange
|
|
55
55
|
} = _a, others = __objRest(_a, [
|
|
56
56
|
"className",
|
|
@@ -175,13 +175,6 @@ const TextArea = /* @__PURE__ */ React.forwardRef(
|
|
|
175
175
|
}
|
|
176
176
|
);
|
|
177
177
|
TextArea.displayName = "BuiTextArea";
|
|
178
|
-
TextArea.defaultProps = {
|
|
179
|
-
defaultValue: "",
|
|
180
|
-
rows: DEFAULT_ROWS,
|
|
181
|
-
autoSize: false,
|
|
182
|
-
autoFocus: false,
|
|
183
|
-
showCount: false
|
|
184
|
-
};
|
|
185
178
|
var TextArea_default = TextArea;
|
|
186
179
|
export {
|
|
187
180
|
TextArea_default as default
|
|
@@ -59,8 +59,8 @@ const TransitionCore = forwardRef(
|
|
|
59
59
|
children,
|
|
60
60
|
mountOnEnter,
|
|
61
61
|
unmountOnExit,
|
|
62
|
-
enter,
|
|
63
|
-
exit,
|
|
62
|
+
enter = true,
|
|
63
|
+
exit = true,
|
|
64
64
|
timeout: _timeout,
|
|
65
65
|
delay: _delay,
|
|
66
66
|
onEnter,
|
|
@@ -69,7 +69,7 @@ const TransitionCore = forwardRef(
|
|
|
69
69
|
onExit,
|
|
70
70
|
onExiting,
|
|
71
71
|
onExited,
|
|
72
|
-
nextTick
|
|
72
|
+
nextTick = setTimeout
|
|
73
73
|
} = _a, childProps = __objRest(_a, [
|
|
74
74
|
"appear",
|
|
75
75
|
"in",
|
|
@@ -224,11 +224,6 @@ const TransitionCore = forwardRef(
|
|
|
224
224
|
}
|
|
225
225
|
);
|
|
226
226
|
TransitionCore.displayName = "BuiTransitionCore";
|
|
227
|
-
TransitionCore.defaultProps = {
|
|
228
|
-
enter: true,
|
|
229
|
-
exit: true,
|
|
230
|
-
nextTick: setTimeout
|
|
231
|
-
};
|
|
232
227
|
var TransitionCore_default = TransitionCore;
|
|
233
228
|
export {
|
|
234
229
|
TransitionCore_default as default
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bifrostui/react",
|
|
3
|
-
"version": "1.4.5-beta.
|
|
3
|
+
"version": "1.4.5-beta.3",
|
|
4
4
|
"description": "React components for building mobile application",
|
|
5
5
|
"homepage": "http://bui.taopiaopiao.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"clsx": "^2.1.1",
|
|
34
34
|
"dayjs": "^1.11.7",
|
|
35
35
|
"swiper": "^8.1.5",
|
|
36
|
-
"@bifrostui/icons": "1.4.5-beta.
|
|
37
|
-
"@bifrostui/
|
|
38
|
-
"@bifrostui/
|
|
39
|
-
"@bifrostui/
|
|
36
|
+
"@bifrostui/icons": "1.4.5-beta.3",
|
|
37
|
+
"@bifrostui/types": "1.4.5-beta.3",
|
|
38
|
+
"@bifrostui/utils": "1.4.5-beta.3",
|
|
39
|
+
"@bifrostui/styles": "1.4.5-beta.3"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@tarojs/components": "^3.0.0",
|