@bifrostui/react 1.5.0 → 1.5.2
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/DatePicker/DatePicker.d.ts +1 -1
- package/dist/Fade/Fade.miniapp.d.ts +10 -0
- package/dist/Fade/Fade.miniapp.js +199 -0
- package/dist/Fade/index.css +16 -0
- package/dist/IconButton/IconButton.js +4 -4
- package/dist/IconButton/IconButton.types.d.ts +0 -1
- package/dist/Modal/Modal.miniapp.d.ts +1 -1
- package/dist/Modal/Modal.miniapp.js +6 -1
- package/dist/Slide/Slide.miniapp.d.ts +14 -0
- package/dist/Slide/Slide.miniapp.js +212 -0
- package/dist/Slide/index.css +72 -0
- package/dist/TabBar/TabBarItem.js +2 -2
- package/dist/Transition/TransitionCore.js +7 -7
- package/es/Fade/Fade.miniapp.d.ts +10 -0
- package/es/Fade/Fade.miniapp.js +178 -0
- package/es/Fade/index.css +16 -0
- package/es/IconButton/IconButton.js +4 -4
- package/es/IconButton/IconButton.types.d.ts +0 -1
- package/es/Modal/Modal.miniapp.d.ts +1 -1
- package/es/Modal/Modal.miniapp.js +6 -1
- package/es/Slide/Slide.miniapp.d.ts +14 -0
- package/es/Slide/Slide.miniapp.js +191 -0
- package/es/Slide/index.css +72 -0
- package/es/TabBar/TabBarItem.js +1 -1
- package/es/Transition/TransitionCore.js +7 -7
- package/package.json +5 -5
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DatePickerProps } from './DatePicker.types';
|
|
3
|
-
declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "
|
|
3
|
+
declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
4
4
|
export default DatePicker;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fade Animation Component
|
|
3
|
+
* @description A component that implements fade in/out animation effects for elements
|
|
4
|
+
* @component Fade
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { FadeProps } from './Fade.types';
|
|
8
|
+
import './index.less';
|
|
9
|
+
declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
export default Fade;
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __objRest = (source, exclude) => {
|
|
25
|
+
var target = {};
|
|
26
|
+
for (var prop in source)
|
|
27
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
if (source != null && __getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
+
target[prop] = source[prop];
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
var __export = (target, all) => {
|
|
37
|
+
for (var name in all)
|
|
38
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
39
|
+
};
|
|
40
|
+
var __copyProps = (to, from, except, desc) => {
|
|
41
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
42
|
+
for (let key of __getOwnPropNames(from))
|
|
43
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
44
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
45
|
+
}
|
|
46
|
+
return to;
|
|
47
|
+
};
|
|
48
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
49
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
50
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
51
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
52
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
53
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
54
|
+
mod
|
|
55
|
+
));
|
|
56
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
57
|
+
var Fade_miniapp_exports = {};
|
|
58
|
+
__export(Fade_miniapp_exports, {
|
|
59
|
+
default: () => Fade_miniapp_default
|
|
60
|
+
});
|
|
61
|
+
module.exports = __toCommonJS(Fade_miniapp_exports);
|
|
62
|
+
var import_react = __toESM(require("react"));
|
|
63
|
+
var import_utils = require("@bifrostui/utils");
|
|
64
|
+
var import_index = require("./index.css");
|
|
65
|
+
const defaultEasing = {
|
|
66
|
+
enter: import_utils.easing.easeOut,
|
|
67
|
+
exit: import_utils.easing.sharp
|
|
68
|
+
};
|
|
69
|
+
const defaultTimeout = {
|
|
70
|
+
enter: import_utils.duration.enteringScreen,
|
|
71
|
+
exit: import_utils.duration.leavingScreen
|
|
72
|
+
};
|
|
73
|
+
const Fade = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
|
|
74
|
+
var _b;
|
|
75
|
+
const _a = props, {
|
|
76
|
+
children: children,
|
|
77
|
+
in: inProp,
|
|
78
|
+
style,
|
|
79
|
+
appear: appear = true,
|
|
80
|
+
enter = true,
|
|
81
|
+
exit = true,
|
|
82
|
+
delay = 0,
|
|
83
|
+
easing: easingProp = defaultEasing,
|
|
84
|
+
timeout = defaultTimeout,
|
|
85
|
+
mountOnEnter: mountOnEnter,
|
|
86
|
+
unmountOnExit,
|
|
87
|
+
onEnter: onEnter,
|
|
88
|
+
onEntering,
|
|
89
|
+
onEntered,
|
|
90
|
+
onExit,
|
|
91
|
+
onExiting,
|
|
92
|
+
onExited
|
|
93
|
+
} = _a, others = __objRest(_a, [
|
|
94
|
+
// Base props
|
|
95
|
+
"children",
|
|
96
|
+
"in",
|
|
97
|
+
"style",
|
|
98
|
+
// Animation controls
|
|
99
|
+
"appear",
|
|
100
|
+
"enter",
|
|
101
|
+
"exit",
|
|
102
|
+
"delay",
|
|
103
|
+
"easing",
|
|
104
|
+
"timeout",
|
|
105
|
+
// Lifecycle hooks
|
|
106
|
+
"mountOnEnter",
|
|
107
|
+
"unmountOnExit",
|
|
108
|
+
// Animation callbacks
|
|
109
|
+
"onEnter",
|
|
110
|
+
"onEntering",
|
|
111
|
+
"onEntered",
|
|
112
|
+
"onExit",
|
|
113
|
+
"onExiting",
|
|
114
|
+
"onExited"
|
|
115
|
+
]);
|
|
116
|
+
const isFirstMount = (0, import_react.useRef)(true);
|
|
117
|
+
const [isMounted, setIsMounted] = (0, import_react.useState)(
|
|
118
|
+
() => !mountOnEnter || !unmountOnExit
|
|
119
|
+
);
|
|
120
|
+
const elementRef = (0, import_react.useRef)(null);
|
|
121
|
+
const handleRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref, elementRef);
|
|
122
|
+
const shouldAnimateOnFirstMount = inProp && appear;
|
|
123
|
+
const shouldAnimate = inProp && enter || !inProp && exit;
|
|
124
|
+
const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
|
|
125
|
+
const getAnimationDurationAndDelay = () => {
|
|
126
|
+
if (!shouldExecuteAnimation) {
|
|
127
|
+
return { timeout: 0, delay: 0 };
|
|
128
|
+
}
|
|
129
|
+
return { timeout, delay };
|
|
130
|
+
};
|
|
131
|
+
const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
|
|
132
|
+
const transitions = (0, import_utils.createTransitions)();
|
|
133
|
+
const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
|
|
134
|
+
const animationDurationAndDelay = getAnimationDurationAndDelay();
|
|
135
|
+
const animation = transitions.create(
|
|
136
|
+
animationName,
|
|
137
|
+
(0, import_utils.getTransitionProps)(
|
|
138
|
+
__spreadProps(__spreadValues({}, animationDurationAndDelay), {
|
|
139
|
+
style,
|
|
140
|
+
easing: easingProp
|
|
141
|
+
}),
|
|
142
|
+
{ mode: inProp ? "enter" : "exit" }
|
|
143
|
+
)
|
|
144
|
+
);
|
|
145
|
+
(0, import_react.useEffect)(() => {
|
|
146
|
+
if (inProp && !isMounted) {
|
|
147
|
+
setIsMounted(true);
|
|
148
|
+
}
|
|
149
|
+
}, [inProp, isMounted]);
|
|
150
|
+
(0, import_react.useEffect)(() => {
|
|
151
|
+
if (isMounted && isFirstMount.current) {
|
|
152
|
+
isFirstMount.current = false;
|
|
153
|
+
}
|
|
154
|
+
}, [isMounted]);
|
|
155
|
+
(0, import_react.useEffect)(() => {
|
|
156
|
+
const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
|
|
157
|
+
if (!shouldTriggerCallback)
|
|
158
|
+
return;
|
|
159
|
+
if (inProp) {
|
|
160
|
+
onEnter == null ? void 0 : onEnter(elementRef.current);
|
|
161
|
+
} else {
|
|
162
|
+
onExit == null ? void 0 : onExit(elementRef.current);
|
|
163
|
+
}
|
|
164
|
+
}, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
|
|
165
|
+
const handleAnimationStart = () => {
|
|
166
|
+
if (!shouldExecuteAnimation)
|
|
167
|
+
return;
|
|
168
|
+
if (inProp) {
|
|
169
|
+
onEntering == null ? void 0 : onEntering(elementRef.current);
|
|
170
|
+
} else {
|
|
171
|
+
onExiting == null ? void 0 : onExiting(elementRef.current);
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
const handleAnimationEnd = () => {
|
|
175
|
+
if (shouldSkipFirstAnimation)
|
|
176
|
+
return;
|
|
177
|
+
if (inProp) {
|
|
178
|
+
onEntered == null ? void 0 : onEntered(elementRef.current);
|
|
179
|
+
} else {
|
|
180
|
+
onExited == null ? void 0 : onExited(elementRef.current);
|
|
181
|
+
if (unmountOnExit) {
|
|
182
|
+
setIsMounted(false);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
if (!children || !isMounted)
|
|
187
|
+
return null;
|
|
188
|
+
return import_react.default.cloneElement(children, __spreadProps(__spreadValues({}, others), {
|
|
189
|
+
ref: handleRef,
|
|
190
|
+
onAnimationEnd: handleAnimationEnd,
|
|
191
|
+
onAnimationStart: handleAnimationStart,
|
|
192
|
+
style: __spreadValues(__spreadValues({
|
|
193
|
+
animation,
|
|
194
|
+
animationFillMode: "both"
|
|
195
|
+
}, style), (_b = children.props) == null ? void 0 : _b.style)
|
|
196
|
+
}));
|
|
197
|
+
});
|
|
198
|
+
Fade.displayName = "BuiFade";
|
|
199
|
+
var Fade_miniapp_default = Fade;
|
|
@@ -63,7 +63,7 @@ var import_IconButton2 = require("./IconButton.css");
|
|
|
63
63
|
const prefixCls = "bui-icon-btn";
|
|
64
64
|
const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
|
|
65
65
|
(props, ref) => {
|
|
66
|
-
var _b, _c;
|
|
66
|
+
var _b, _c, _d;
|
|
67
67
|
const _a = props, {
|
|
68
68
|
className,
|
|
69
69
|
children,
|
|
@@ -100,9 +100,10 @@ const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
|
|
|
100
100
|
ref
|
|
101
101
|
}, others),
|
|
102
102
|
import_utils.isMini && import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, __spreadValues(__spreadValues({}, !isContainedVariant && {
|
|
103
|
-
color: ((_b = children.props) == null ? void 0 : _b.color) || color
|
|
103
|
+
color: ((_b = children.props) == null ? void 0 : _b.color) || color,
|
|
104
|
+
htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "#959aa5"
|
|
104
105
|
}), isContainedVariant && {
|
|
105
|
-
htmlColor: ((
|
|
106
|
+
htmlColor: ((_d = children.props) == null ? void 0 : _d.htmlColor) || "#fff"
|
|
106
107
|
})) : children
|
|
107
108
|
);
|
|
108
109
|
}
|
|
@@ -112,7 +113,6 @@ IconButton.defaultProps = {
|
|
|
112
113
|
size: "medium",
|
|
113
114
|
variant: "default",
|
|
114
115
|
shape: "circular",
|
|
115
|
-
color: "default",
|
|
116
116
|
disabled: false
|
|
117
117
|
};
|
|
118
118
|
var IconButton_default = IconButton;
|
|
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
|
|
|
12
12
|
keepMounted?: boolean;
|
|
13
13
|
} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: React.Ref<HTMLDivElement>;
|
|
15
|
-
},
|
|
15
|
+
}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export default Modal;
|
|
@@ -79,6 +79,7 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
|
|
|
79
79
|
disableScrollLock,
|
|
80
80
|
hideBackdrop,
|
|
81
81
|
onClose,
|
|
82
|
+
onClick,
|
|
82
83
|
keepMounted
|
|
83
84
|
} = _a, others = __objRest(_a, [
|
|
84
85
|
"className",
|
|
@@ -90,6 +91,7 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
|
|
|
90
91
|
"disableScrollLock",
|
|
91
92
|
"hideBackdrop",
|
|
92
93
|
"onClose",
|
|
94
|
+
"onClick",
|
|
93
95
|
"keepMounted"
|
|
94
96
|
]);
|
|
95
97
|
const modalRef = import_react.default.useRef(null);
|
|
@@ -112,7 +114,10 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
|
|
|
112
114
|
__spreadValues({
|
|
113
115
|
className: (0, import_clsx.default)(prefixCls, className),
|
|
114
116
|
ref: handleRef,
|
|
115
|
-
catchMove: !disableScrollLock
|
|
117
|
+
catchMove: !disableScrollLock,
|
|
118
|
+
onClick: (event) => {
|
|
119
|
+
onClick == null ? void 0 : onClick(event);
|
|
120
|
+
}
|
|
116
121
|
}, others),
|
|
117
122
|
!hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
|
|
118
123
|
import_Backdrop.default,
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Slide Animation Component
|
|
3
|
+
* @description A component that implements slide in/out animation effects for elements
|
|
4
|
+
* @component Slide
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { SlideProps } from './Slide.types';
|
|
8
|
+
import './index.less';
|
|
9
|
+
/**
|
|
10
|
+
* Slide Component
|
|
11
|
+
* @component
|
|
12
|
+
*/
|
|
13
|
+
declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<HTMLElement>>;
|
|
14
|
+
export default Slide;
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __objRest = (source, exclude) => {
|
|
25
|
+
var target = {};
|
|
26
|
+
for (var prop in source)
|
|
27
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
if (source != null && __getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
+
target[prop] = source[prop];
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
var __export = (target, all) => {
|
|
37
|
+
for (var name in all)
|
|
38
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
39
|
+
};
|
|
40
|
+
var __copyProps = (to, from, except, desc) => {
|
|
41
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
42
|
+
for (let key of __getOwnPropNames(from))
|
|
43
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
44
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
45
|
+
}
|
|
46
|
+
return to;
|
|
47
|
+
};
|
|
48
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
49
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
50
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
51
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
52
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
53
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
54
|
+
mod
|
|
55
|
+
));
|
|
56
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
57
|
+
var Slide_miniapp_exports = {};
|
|
58
|
+
__export(Slide_miniapp_exports, {
|
|
59
|
+
default: () => Slide_miniapp_default
|
|
60
|
+
});
|
|
61
|
+
module.exports = __toCommonJS(Slide_miniapp_exports);
|
|
62
|
+
var import_react = __toESM(require("react"));
|
|
63
|
+
var import_utils = require("@bifrostui/utils");
|
|
64
|
+
var import_index = require("./index.css");
|
|
65
|
+
const defaultEasing = {
|
|
66
|
+
enter: import_utils.easing.easeOut,
|
|
67
|
+
exit: import_utils.easing.sharp
|
|
68
|
+
};
|
|
69
|
+
const defaultTimeout = {
|
|
70
|
+
enter: import_utils.duration.enteringScreen,
|
|
71
|
+
exit: import_utils.duration.leavingScreen
|
|
72
|
+
};
|
|
73
|
+
const getAnimationName = (direction, inProp) => {
|
|
74
|
+
const animations = {
|
|
75
|
+
left: inProp ? "bui-slide-left-in" : "bui-slide-left-out",
|
|
76
|
+
right: inProp ? "bui-slide-right-in" : "bui-slide-right-out",
|
|
77
|
+
up: inProp ? "bui-slide-up-in" : "bui-slide-up-out",
|
|
78
|
+
down: inProp ? "bui-slide-down-in" : "bui-slide-down-out"
|
|
79
|
+
};
|
|
80
|
+
return animations[direction] || animations.down;
|
|
81
|
+
};
|
|
82
|
+
const Slide = /* @__PURE__ */ import_react.default.forwardRef(
|
|
83
|
+
(_a, ref) => {
|
|
84
|
+
var _b = _a, {
|
|
85
|
+
children: children,
|
|
86
|
+
in: inProp,
|
|
87
|
+
style,
|
|
88
|
+
direction = "down",
|
|
89
|
+
appear: appear = true,
|
|
90
|
+
enter = true,
|
|
91
|
+
exit = true,
|
|
92
|
+
delay = 0,
|
|
93
|
+
easing: easingProp = defaultEasing,
|
|
94
|
+
timeout = defaultTimeout,
|
|
95
|
+
mountOnEnter: mountOnEnter,
|
|
96
|
+
unmountOnExit,
|
|
97
|
+
onEnter: onEnter,
|
|
98
|
+
onEntering,
|
|
99
|
+
onEntered,
|
|
100
|
+
onExit,
|
|
101
|
+
onExiting,
|
|
102
|
+
onExited
|
|
103
|
+
} = _b, others = __objRest(_b, [
|
|
104
|
+
// Base props
|
|
105
|
+
"children",
|
|
106
|
+
"in",
|
|
107
|
+
"style",
|
|
108
|
+
"direction",
|
|
109
|
+
// Animation controls
|
|
110
|
+
"appear",
|
|
111
|
+
"enter",
|
|
112
|
+
"exit",
|
|
113
|
+
"delay",
|
|
114
|
+
"easing",
|
|
115
|
+
"timeout",
|
|
116
|
+
// Lifecycle hooks
|
|
117
|
+
"mountOnEnter",
|
|
118
|
+
"unmountOnExit",
|
|
119
|
+
// Animation callbacks
|
|
120
|
+
"onEnter",
|
|
121
|
+
"onEntering",
|
|
122
|
+
"onEntered",
|
|
123
|
+
"onExit",
|
|
124
|
+
"onExiting",
|
|
125
|
+
"onExited"
|
|
126
|
+
]);
|
|
127
|
+
var _a2;
|
|
128
|
+
const isFirstMount = (0, import_react.useRef)(true);
|
|
129
|
+
const [isMounted, setIsMounted] = (0, import_react.useState)(
|
|
130
|
+
() => !mountOnEnter || !unmountOnExit
|
|
131
|
+
);
|
|
132
|
+
const elementRef = (0, import_react.useRef)(null);
|
|
133
|
+
const handleRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref, elementRef);
|
|
134
|
+
const shouldAnimateOnFirstMount = inProp && appear;
|
|
135
|
+
const shouldAnimate = inProp && enter || !inProp && exit;
|
|
136
|
+
const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
|
|
137
|
+
const getAnimationDurationAndDelay = () => {
|
|
138
|
+
if (!shouldExecuteAnimation) {
|
|
139
|
+
return { timeout: 0, delay: 0 };
|
|
140
|
+
}
|
|
141
|
+
return { timeout, delay };
|
|
142
|
+
};
|
|
143
|
+
const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
|
|
144
|
+
const transitions = (0, import_utils.createTransitions)();
|
|
145
|
+
const animationName = getAnimationName(direction, inProp);
|
|
146
|
+
const animationDurationAndDelay = getAnimationDurationAndDelay();
|
|
147
|
+
const animation = transitions.create(
|
|
148
|
+
animationName,
|
|
149
|
+
(0, import_utils.getTransitionProps)(
|
|
150
|
+
__spreadProps(__spreadValues({}, animationDurationAndDelay), {
|
|
151
|
+
style,
|
|
152
|
+
easing: easingProp
|
|
153
|
+
}),
|
|
154
|
+
{ mode: inProp ? "enter" : "exit" }
|
|
155
|
+
)
|
|
156
|
+
);
|
|
157
|
+
(0, import_react.useEffect)(() => {
|
|
158
|
+
if (inProp && !isMounted) {
|
|
159
|
+
setIsMounted(true);
|
|
160
|
+
}
|
|
161
|
+
}, [inProp, isMounted]);
|
|
162
|
+
(0, import_react.useEffect)(() => {
|
|
163
|
+
if (isMounted && isFirstMount.current) {
|
|
164
|
+
isFirstMount.current = false;
|
|
165
|
+
}
|
|
166
|
+
}, [isMounted]);
|
|
167
|
+
(0, import_react.useEffect)(() => {
|
|
168
|
+
const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
|
|
169
|
+
if (!shouldTriggerCallback)
|
|
170
|
+
return;
|
|
171
|
+
if (inProp) {
|
|
172
|
+
onEnter == null ? void 0 : onEnter(elementRef.current);
|
|
173
|
+
} else {
|
|
174
|
+
onExit == null ? void 0 : onExit(elementRef.current);
|
|
175
|
+
}
|
|
176
|
+
}, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
|
|
177
|
+
const handleAnimationStart = () => {
|
|
178
|
+
if (!shouldExecuteAnimation)
|
|
179
|
+
return;
|
|
180
|
+
if (inProp) {
|
|
181
|
+
onEntering == null ? void 0 : onEntering(elementRef.current);
|
|
182
|
+
} else {
|
|
183
|
+
onExiting == null ? void 0 : onExiting(elementRef.current);
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
const handleAnimationEnd = () => {
|
|
187
|
+
if (shouldSkipFirstAnimation)
|
|
188
|
+
return;
|
|
189
|
+
if (inProp) {
|
|
190
|
+
onEntered == null ? void 0 : onEntered(elementRef.current);
|
|
191
|
+
} else {
|
|
192
|
+
onExited == null ? void 0 : onExited(elementRef.current);
|
|
193
|
+
if (unmountOnExit) {
|
|
194
|
+
setIsMounted(false);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
if (!children || !isMounted)
|
|
199
|
+
return null;
|
|
200
|
+
return import_react.default.cloneElement(children, __spreadProps(__spreadValues({}, others), {
|
|
201
|
+
ref: handleRef,
|
|
202
|
+
onAnimationEnd: handleAnimationEnd,
|
|
203
|
+
onAnimationStart: handleAnimationStart,
|
|
204
|
+
style: __spreadValues(__spreadValues({
|
|
205
|
+
animation,
|
|
206
|
+
animationFillMode: "both"
|
|
207
|
+
}, style), (_a2 = children.props) == null ? void 0 : _a2.style)
|
|
208
|
+
}));
|
|
209
|
+
}
|
|
210
|
+
);
|
|
211
|
+
Slide.displayName = "BuiSlide";
|
|
212
|
+
var Slide_miniapp_default = Slide;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@keyframes bui-slide-left-in {
|
|
2
|
+
from {
|
|
3
|
+
transform: translateX(100%);
|
|
4
|
+
}
|
|
5
|
+
to {
|
|
6
|
+
visibility: visible;
|
|
7
|
+
transform: none;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@keyframes bui-slide-left-out {
|
|
11
|
+
from {
|
|
12
|
+
transform: none;
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
visibility: hidden;
|
|
16
|
+
transform: translateX(100%);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@keyframes bui-slide-right-in {
|
|
20
|
+
from {
|
|
21
|
+
transform: translateX(-100%);
|
|
22
|
+
}
|
|
23
|
+
to {
|
|
24
|
+
visibility: visible;
|
|
25
|
+
transform: none;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
@keyframes bui-slide-right-out {
|
|
29
|
+
from {
|
|
30
|
+
transform: none;
|
|
31
|
+
}
|
|
32
|
+
to {
|
|
33
|
+
visibility: hidden;
|
|
34
|
+
transform: translateX(-100%);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@keyframes bui-slide-up-in {
|
|
38
|
+
from {
|
|
39
|
+
transform: translateY(100%);
|
|
40
|
+
}
|
|
41
|
+
to {
|
|
42
|
+
visibility: visible;
|
|
43
|
+
transform: none;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
@keyframes bui-slide-up-out {
|
|
47
|
+
from {
|
|
48
|
+
transform: none;
|
|
49
|
+
}
|
|
50
|
+
to {
|
|
51
|
+
visibility: hidden;
|
|
52
|
+
transform: translateY(100%);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
@keyframes bui-slide-down-in {
|
|
56
|
+
from {
|
|
57
|
+
transform: translateY(-100%);
|
|
58
|
+
}
|
|
59
|
+
to {
|
|
60
|
+
visibility: visible;
|
|
61
|
+
transform: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
@keyframes bui-slide-down-out {
|
|
65
|
+
from {
|
|
66
|
+
transform: none;
|
|
67
|
+
}
|
|
68
|
+
to {
|
|
69
|
+
visibility: hidden;
|
|
70
|
+
transform: translateY(-100%);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -57,8 +57,8 @@ __export(TabBarItem_exports, {
|
|
|
57
57
|
});
|
|
58
58
|
module.exports = __toCommonJS(TabBarItem_exports);
|
|
59
59
|
var import_react = __toESM(require("react"));
|
|
60
|
-
var import_react2 = require("@bifrostui/react");
|
|
61
60
|
var import_clsx = __toESM(require("clsx"));
|
|
61
|
+
var import_Badge = __toESM(require("../Badge"));
|
|
62
62
|
var import_TabBarItem = require("./TabBarItem.css");
|
|
63
63
|
var import_TabBarContext = __toESM(require("./TabBarContext"));
|
|
64
64
|
const prefixCls = "bui-tab-bar-item";
|
|
@@ -102,7 +102,7 @@ const TabBarItem = /* @__PURE__ */ import_react.default.forwardRef(
|
|
|
102
102
|
ref,
|
|
103
103
|
onClick: handleClick
|
|
104
104
|
}, others),
|
|
105
|
-
children || ((_b = Object.values(BadgeProps || {})) == null ? void 0 : _b.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(
|
|
105
|
+
children || ((_b = Object.values(BadgeProps || {})) == null ? void 0 : _b.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_Badge.default, __spreadValues({}, BadgeProps), currentIndex === index && activeIcon ? activeIcon : icon, /* @__PURE__ */ import_react.default.createElement(
|
|
106
106
|
"div",
|
|
107
107
|
{
|
|
108
108
|
className: (0, import_clsx.default)(`${prefixCls}-title`, {
|
|
@@ -173,8 +173,8 @@ const TransitionCore = (0, import_react.forwardRef)(
|
|
|
173
173
|
(_a2 = nextCallback == null ? void 0 : nextCallback.current) == null ? void 0 : _a2.call(nextCallback);
|
|
174
174
|
});
|
|
175
175
|
};
|
|
176
|
-
const performEnter = () => __async(void 0, null, function* () {
|
|
177
|
-
if (!enter) {
|
|
176
|
+
const performEnter = (mounting) => __async(void 0, null, function* () {
|
|
177
|
+
if (!enter && !mounting) {
|
|
178
178
|
safeSetState(ENTERED, () => __async(void 0, null, function* () {
|
|
179
179
|
yield onEntered == null ? void 0 : onEntered(innerNodeRef == null ? void 0 : innerNodeRef.current);
|
|
180
180
|
}));
|
|
@@ -208,18 +208,18 @@ const TransitionCore = (0, import_react.forwardRef)(
|
|
|
208
208
|
});
|
|
209
209
|
}));
|
|
210
210
|
});
|
|
211
|
-
const updateStatus = (nextStatus) => {
|
|
211
|
+
const updateStatus = (nextStatus, mounting) => {
|
|
212
212
|
if (nextStatus !== null) {
|
|
213
213
|
cancelNextCallback();
|
|
214
214
|
if (nextStatus === ENTERING) {
|
|
215
|
-
performEnter();
|
|
215
|
+
performEnter(mounting);
|
|
216
216
|
} else if (nextStatus === EXITING) {
|
|
217
217
|
performExit();
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
220
|
};
|
|
221
221
|
(0, import_react.useEffect)(() => {
|
|
222
|
-
nextTick(() => updateStatus(appearStatus.current));
|
|
222
|
+
nextTick(() => updateStatus(appearStatus.current, true));
|
|
223
223
|
return () => {
|
|
224
224
|
cancelNextCallback();
|
|
225
225
|
};
|
|
@@ -239,11 +239,11 @@ const TransitionCore = (0, import_react.forwardRef)(
|
|
|
239
239
|
nextStatus = EXITING;
|
|
240
240
|
}
|
|
241
241
|
if (isMounted)
|
|
242
|
-
updateStatus(nextStatus);
|
|
242
|
+
updateStatus(nextStatus, false);
|
|
243
243
|
else
|
|
244
244
|
safeSetState(inProp ? "EXITED" : "ENTERED", () => {
|
|
245
245
|
forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
|
|
246
|
-
updateStatus(nextStatus);
|
|
246
|
+
updateStatus(nextStatus, false);
|
|
247
247
|
});
|
|
248
248
|
}, [inProp]);
|
|
249
249
|
if (status === UNMOUNTED)
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fade Animation Component
|
|
3
|
+
* @description A component that implements fade in/out animation effects for elements
|
|
4
|
+
* @component Fade
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { FadeProps } from './Fade.types';
|
|
8
|
+
import './index.less';
|
|
9
|
+
declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLElement>>;
|
|
10
|
+
export default Fade;
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import React, { useEffect, useState, useRef } from "react";
|
|
33
|
+
import {
|
|
34
|
+
createTransitions,
|
|
35
|
+
duration,
|
|
36
|
+
easing,
|
|
37
|
+
getTransitionProps,
|
|
38
|
+
useForkRef
|
|
39
|
+
} from "@bifrostui/utils";
|
|
40
|
+
import "./index.css";
|
|
41
|
+
const defaultEasing = {
|
|
42
|
+
enter: easing.easeOut,
|
|
43
|
+
exit: easing.sharp
|
|
44
|
+
};
|
|
45
|
+
const defaultTimeout = {
|
|
46
|
+
enter: duration.enteringScreen,
|
|
47
|
+
exit: duration.leavingScreen
|
|
48
|
+
};
|
|
49
|
+
const Fade = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
50
|
+
var _b;
|
|
51
|
+
const _a = props, {
|
|
52
|
+
children: children,
|
|
53
|
+
in: inProp,
|
|
54
|
+
style,
|
|
55
|
+
appear: appear = true,
|
|
56
|
+
enter = true,
|
|
57
|
+
exit = true,
|
|
58
|
+
delay = 0,
|
|
59
|
+
easing: easingProp = defaultEasing,
|
|
60
|
+
timeout = defaultTimeout,
|
|
61
|
+
mountOnEnter: mountOnEnter,
|
|
62
|
+
unmountOnExit,
|
|
63
|
+
onEnter: onEnter,
|
|
64
|
+
onEntering,
|
|
65
|
+
onEntered,
|
|
66
|
+
onExit,
|
|
67
|
+
onExiting,
|
|
68
|
+
onExited
|
|
69
|
+
} = _a, others = __objRest(_a, [
|
|
70
|
+
// Base props
|
|
71
|
+
"children",
|
|
72
|
+
"in",
|
|
73
|
+
"style",
|
|
74
|
+
// Animation controls
|
|
75
|
+
"appear",
|
|
76
|
+
"enter",
|
|
77
|
+
"exit",
|
|
78
|
+
"delay",
|
|
79
|
+
"easing",
|
|
80
|
+
"timeout",
|
|
81
|
+
// Lifecycle hooks
|
|
82
|
+
"mountOnEnter",
|
|
83
|
+
"unmountOnExit",
|
|
84
|
+
// Animation callbacks
|
|
85
|
+
"onEnter",
|
|
86
|
+
"onEntering",
|
|
87
|
+
"onEntered",
|
|
88
|
+
"onExit",
|
|
89
|
+
"onExiting",
|
|
90
|
+
"onExited"
|
|
91
|
+
]);
|
|
92
|
+
const isFirstMount = useRef(true);
|
|
93
|
+
const [isMounted, setIsMounted] = useState(
|
|
94
|
+
() => !mountOnEnter || !unmountOnExit
|
|
95
|
+
);
|
|
96
|
+
const elementRef = useRef(null);
|
|
97
|
+
const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
|
|
98
|
+
const shouldAnimateOnFirstMount = inProp && appear;
|
|
99
|
+
const shouldAnimate = inProp && enter || !inProp && exit;
|
|
100
|
+
const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
|
|
101
|
+
const getAnimationDurationAndDelay = () => {
|
|
102
|
+
if (!shouldExecuteAnimation) {
|
|
103
|
+
return { timeout: 0, delay: 0 };
|
|
104
|
+
}
|
|
105
|
+
return { timeout, delay };
|
|
106
|
+
};
|
|
107
|
+
const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
|
|
108
|
+
const transitions = createTransitions();
|
|
109
|
+
const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
|
|
110
|
+
const animationDurationAndDelay = getAnimationDurationAndDelay();
|
|
111
|
+
const animation = transitions.create(
|
|
112
|
+
animationName,
|
|
113
|
+
getTransitionProps(
|
|
114
|
+
__spreadProps(__spreadValues({}, animationDurationAndDelay), {
|
|
115
|
+
style,
|
|
116
|
+
easing: easingProp
|
|
117
|
+
}),
|
|
118
|
+
{ mode: inProp ? "enter" : "exit" }
|
|
119
|
+
)
|
|
120
|
+
);
|
|
121
|
+
useEffect(() => {
|
|
122
|
+
if (inProp && !isMounted) {
|
|
123
|
+
setIsMounted(true);
|
|
124
|
+
}
|
|
125
|
+
}, [inProp, isMounted]);
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
if (isMounted && isFirstMount.current) {
|
|
128
|
+
isFirstMount.current = false;
|
|
129
|
+
}
|
|
130
|
+
}, [isMounted]);
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
|
|
133
|
+
if (!shouldTriggerCallback)
|
|
134
|
+
return;
|
|
135
|
+
if (inProp) {
|
|
136
|
+
onEnter == null ? void 0 : onEnter(elementRef.current);
|
|
137
|
+
} else {
|
|
138
|
+
onExit == null ? void 0 : onExit(elementRef.current);
|
|
139
|
+
}
|
|
140
|
+
}, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
|
|
141
|
+
const handleAnimationStart = () => {
|
|
142
|
+
if (!shouldExecuteAnimation)
|
|
143
|
+
return;
|
|
144
|
+
if (inProp) {
|
|
145
|
+
onEntering == null ? void 0 : onEntering(elementRef.current);
|
|
146
|
+
} else {
|
|
147
|
+
onExiting == null ? void 0 : onExiting(elementRef.current);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
const handleAnimationEnd = () => {
|
|
151
|
+
if (shouldSkipFirstAnimation)
|
|
152
|
+
return;
|
|
153
|
+
if (inProp) {
|
|
154
|
+
onEntered == null ? void 0 : onEntered(elementRef.current);
|
|
155
|
+
} else {
|
|
156
|
+
onExited == null ? void 0 : onExited(elementRef.current);
|
|
157
|
+
if (unmountOnExit) {
|
|
158
|
+
setIsMounted(false);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
if (!children || !isMounted)
|
|
163
|
+
return null;
|
|
164
|
+
return React.cloneElement(children, __spreadProps(__spreadValues({}, others), {
|
|
165
|
+
ref: handleRef,
|
|
166
|
+
onAnimationEnd: handleAnimationEnd,
|
|
167
|
+
onAnimationStart: handleAnimationStart,
|
|
168
|
+
style: __spreadValues(__spreadValues({
|
|
169
|
+
animation,
|
|
170
|
+
animationFillMode: "both"
|
|
171
|
+
}, style), (_b = children.props) == null ? void 0 : _b.style)
|
|
172
|
+
}));
|
|
173
|
+
});
|
|
174
|
+
Fade.displayName = "BuiFade";
|
|
175
|
+
var Fade_miniapp_default = Fade;
|
|
176
|
+
export {
|
|
177
|
+
Fade_miniapp_default as default
|
|
178
|
+
};
|
|
@@ -33,7 +33,7 @@ import "./IconButton.css";
|
|
|
33
33
|
const prefixCls = "bui-icon-btn";
|
|
34
34
|
const IconButton = /* @__PURE__ */ React.forwardRef(
|
|
35
35
|
(props, ref) => {
|
|
36
|
-
var _b, _c;
|
|
36
|
+
var _b, _c, _d;
|
|
37
37
|
const _a = props, {
|
|
38
38
|
className,
|
|
39
39
|
children,
|
|
@@ -70,9 +70,10 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
|
|
|
70
70
|
ref
|
|
71
71
|
}, others),
|
|
72
72
|
isMini && React.isValidElement(children) ? React.cloneElement(children, __spreadValues(__spreadValues({}, !isContainedVariant && {
|
|
73
|
-
color: ((_b = children.props) == null ? void 0 : _b.color) || color
|
|
73
|
+
color: ((_b = children.props) == null ? void 0 : _b.color) || color,
|
|
74
|
+
htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "#959aa5"
|
|
74
75
|
}), isContainedVariant && {
|
|
75
|
-
htmlColor: ((
|
|
76
|
+
htmlColor: ((_d = children.props) == null ? void 0 : _d.htmlColor) || "#fff"
|
|
76
77
|
})) : children
|
|
77
78
|
);
|
|
78
79
|
}
|
|
@@ -82,7 +83,6 @@ IconButton.defaultProps = {
|
|
|
82
83
|
size: "medium",
|
|
83
84
|
variant: "default",
|
|
84
85
|
shape: "circular",
|
|
85
|
-
color: "default",
|
|
86
86
|
disabled: false
|
|
87
87
|
};
|
|
88
88
|
var IconButton_default = IconButton;
|
|
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
|
|
|
12
12
|
keepMounted?: boolean;
|
|
13
13
|
} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: React.Ref<HTMLDivElement>;
|
|
15
|
-
}, "open" |
|
|
15
|
+
}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "BackdropProps" | "onClose" | "disablePortal" | "hideBackdrop" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export default Modal;
|
|
@@ -49,6 +49,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(
|
|
|
49
49
|
disableScrollLock,
|
|
50
50
|
hideBackdrop,
|
|
51
51
|
onClose,
|
|
52
|
+
onClick,
|
|
52
53
|
keepMounted
|
|
53
54
|
} = _a, others = __objRest(_a, [
|
|
54
55
|
"className",
|
|
@@ -60,6 +61,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(
|
|
|
60
61
|
"disableScrollLock",
|
|
61
62
|
"hideBackdrop",
|
|
62
63
|
"onClose",
|
|
64
|
+
"onClick",
|
|
63
65
|
"keepMounted"
|
|
64
66
|
]);
|
|
65
67
|
const modalRef = React.useRef(null);
|
|
@@ -82,7 +84,10 @@ const Modal = /* @__PURE__ */ React.forwardRef(
|
|
|
82
84
|
__spreadValues({
|
|
83
85
|
className: clsx(prefixCls, className),
|
|
84
86
|
ref: handleRef,
|
|
85
|
-
catchMove: !disableScrollLock
|
|
87
|
+
catchMove: !disableScrollLock,
|
|
88
|
+
onClick: (event) => {
|
|
89
|
+
onClick == null ? void 0 : onClick(event);
|
|
90
|
+
}
|
|
86
91
|
}, others),
|
|
87
92
|
!hideBackdrop ? /* @__PURE__ */ React.createElement(
|
|
88
93
|
Backdrop,
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Slide Animation Component
|
|
3
|
+
* @description A component that implements slide in/out animation effects for elements
|
|
4
|
+
* @component Slide
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { SlideProps } from './Slide.types';
|
|
8
|
+
import './index.less';
|
|
9
|
+
/**
|
|
10
|
+
* Slide Component
|
|
11
|
+
* @component
|
|
12
|
+
*/
|
|
13
|
+
declare const Slide: React.ForwardRefExoticComponent<SlideProps & React.RefAttributes<HTMLElement>>;
|
|
14
|
+
export default Slide;
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import React, { useEffect, useState, useRef } from "react";
|
|
33
|
+
import {
|
|
34
|
+
createTransitions,
|
|
35
|
+
duration,
|
|
36
|
+
easing,
|
|
37
|
+
getTransitionProps,
|
|
38
|
+
useForkRef
|
|
39
|
+
} from "@bifrostui/utils";
|
|
40
|
+
import "./index.css";
|
|
41
|
+
const defaultEasing = {
|
|
42
|
+
enter: easing.easeOut,
|
|
43
|
+
exit: easing.sharp
|
|
44
|
+
};
|
|
45
|
+
const defaultTimeout = {
|
|
46
|
+
enter: duration.enteringScreen,
|
|
47
|
+
exit: duration.leavingScreen
|
|
48
|
+
};
|
|
49
|
+
const getAnimationName = (direction, inProp) => {
|
|
50
|
+
const animations = {
|
|
51
|
+
left: inProp ? "bui-slide-left-in" : "bui-slide-left-out",
|
|
52
|
+
right: inProp ? "bui-slide-right-in" : "bui-slide-right-out",
|
|
53
|
+
up: inProp ? "bui-slide-up-in" : "bui-slide-up-out",
|
|
54
|
+
down: inProp ? "bui-slide-down-in" : "bui-slide-down-out"
|
|
55
|
+
};
|
|
56
|
+
return animations[direction] || animations.down;
|
|
57
|
+
};
|
|
58
|
+
const Slide = /* @__PURE__ */ React.forwardRef(
|
|
59
|
+
(_a, ref) => {
|
|
60
|
+
var _b = _a, {
|
|
61
|
+
children: children,
|
|
62
|
+
in: inProp,
|
|
63
|
+
style,
|
|
64
|
+
direction = "down",
|
|
65
|
+
appear: appear = true,
|
|
66
|
+
enter = true,
|
|
67
|
+
exit = true,
|
|
68
|
+
delay = 0,
|
|
69
|
+
easing: easingProp = defaultEasing,
|
|
70
|
+
timeout = defaultTimeout,
|
|
71
|
+
mountOnEnter: mountOnEnter,
|
|
72
|
+
unmountOnExit,
|
|
73
|
+
onEnter: onEnter,
|
|
74
|
+
onEntering,
|
|
75
|
+
onEntered,
|
|
76
|
+
onExit,
|
|
77
|
+
onExiting,
|
|
78
|
+
onExited
|
|
79
|
+
} = _b, others = __objRest(_b, [
|
|
80
|
+
// Base props
|
|
81
|
+
"children",
|
|
82
|
+
"in",
|
|
83
|
+
"style",
|
|
84
|
+
"direction",
|
|
85
|
+
// Animation controls
|
|
86
|
+
"appear",
|
|
87
|
+
"enter",
|
|
88
|
+
"exit",
|
|
89
|
+
"delay",
|
|
90
|
+
"easing",
|
|
91
|
+
"timeout",
|
|
92
|
+
// Lifecycle hooks
|
|
93
|
+
"mountOnEnter",
|
|
94
|
+
"unmountOnExit",
|
|
95
|
+
// Animation callbacks
|
|
96
|
+
"onEnter",
|
|
97
|
+
"onEntering",
|
|
98
|
+
"onEntered",
|
|
99
|
+
"onExit",
|
|
100
|
+
"onExiting",
|
|
101
|
+
"onExited"
|
|
102
|
+
]);
|
|
103
|
+
var _a2;
|
|
104
|
+
const isFirstMount = useRef(true);
|
|
105
|
+
const [isMounted, setIsMounted] = useState(
|
|
106
|
+
() => !mountOnEnter || !unmountOnExit
|
|
107
|
+
);
|
|
108
|
+
const elementRef = useRef(null);
|
|
109
|
+
const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
|
|
110
|
+
const shouldAnimateOnFirstMount = inProp && appear;
|
|
111
|
+
const shouldAnimate = inProp && enter || !inProp && exit;
|
|
112
|
+
const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
|
|
113
|
+
const getAnimationDurationAndDelay = () => {
|
|
114
|
+
if (!shouldExecuteAnimation) {
|
|
115
|
+
return { timeout: 0, delay: 0 };
|
|
116
|
+
}
|
|
117
|
+
return { timeout, delay };
|
|
118
|
+
};
|
|
119
|
+
const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
|
|
120
|
+
const transitions = createTransitions();
|
|
121
|
+
const animationName = getAnimationName(direction, inProp);
|
|
122
|
+
const animationDurationAndDelay = getAnimationDurationAndDelay();
|
|
123
|
+
const animation = transitions.create(
|
|
124
|
+
animationName,
|
|
125
|
+
getTransitionProps(
|
|
126
|
+
__spreadProps(__spreadValues({}, animationDurationAndDelay), {
|
|
127
|
+
style,
|
|
128
|
+
easing: easingProp
|
|
129
|
+
}),
|
|
130
|
+
{ mode: inProp ? "enter" : "exit" }
|
|
131
|
+
)
|
|
132
|
+
);
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
if (inProp && !isMounted) {
|
|
135
|
+
setIsMounted(true);
|
|
136
|
+
}
|
|
137
|
+
}, [inProp, isMounted]);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
if (isMounted && isFirstMount.current) {
|
|
140
|
+
isFirstMount.current = false;
|
|
141
|
+
}
|
|
142
|
+
}, [isMounted]);
|
|
143
|
+
useEffect(() => {
|
|
144
|
+
const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
|
|
145
|
+
if (!shouldTriggerCallback)
|
|
146
|
+
return;
|
|
147
|
+
if (inProp) {
|
|
148
|
+
onEnter == null ? void 0 : onEnter(elementRef.current);
|
|
149
|
+
} else {
|
|
150
|
+
onExit == null ? void 0 : onExit(elementRef.current);
|
|
151
|
+
}
|
|
152
|
+
}, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
|
|
153
|
+
const handleAnimationStart = () => {
|
|
154
|
+
if (!shouldExecuteAnimation)
|
|
155
|
+
return;
|
|
156
|
+
if (inProp) {
|
|
157
|
+
onEntering == null ? void 0 : onEntering(elementRef.current);
|
|
158
|
+
} else {
|
|
159
|
+
onExiting == null ? void 0 : onExiting(elementRef.current);
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
const handleAnimationEnd = () => {
|
|
163
|
+
if (shouldSkipFirstAnimation)
|
|
164
|
+
return;
|
|
165
|
+
if (inProp) {
|
|
166
|
+
onEntered == null ? void 0 : onEntered(elementRef.current);
|
|
167
|
+
} else {
|
|
168
|
+
onExited == null ? void 0 : onExited(elementRef.current);
|
|
169
|
+
if (unmountOnExit) {
|
|
170
|
+
setIsMounted(false);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
if (!children || !isMounted)
|
|
175
|
+
return null;
|
|
176
|
+
return React.cloneElement(children, __spreadProps(__spreadValues({}, others), {
|
|
177
|
+
ref: handleRef,
|
|
178
|
+
onAnimationEnd: handleAnimationEnd,
|
|
179
|
+
onAnimationStart: handleAnimationStart,
|
|
180
|
+
style: __spreadValues(__spreadValues({
|
|
181
|
+
animation,
|
|
182
|
+
animationFillMode: "both"
|
|
183
|
+
}, style), (_a2 = children.props) == null ? void 0 : _a2.style)
|
|
184
|
+
}));
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
Slide.displayName = "BuiSlide";
|
|
188
|
+
var Slide_miniapp_default = Slide;
|
|
189
|
+
export {
|
|
190
|
+
Slide_miniapp_default as default
|
|
191
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@keyframes bui-slide-left-in {
|
|
2
|
+
from {
|
|
3
|
+
transform: translateX(100%);
|
|
4
|
+
}
|
|
5
|
+
to {
|
|
6
|
+
visibility: visible;
|
|
7
|
+
transform: none;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@keyframes bui-slide-left-out {
|
|
11
|
+
from {
|
|
12
|
+
transform: none;
|
|
13
|
+
}
|
|
14
|
+
to {
|
|
15
|
+
visibility: hidden;
|
|
16
|
+
transform: translateX(100%);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
@keyframes bui-slide-right-in {
|
|
20
|
+
from {
|
|
21
|
+
transform: translateX(-100%);
|
|
22
|
+
}
|
|
23
|
+
to {
|
|
24
|
+
visibility: visible;
|
|
25
|
+
transform: none;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
@keyframes bui-slide-right-out {
|
|
29
|
+
from {
|
|
30
|
+
transform: none;
|
|
31
|
+
}
|
|
32
|
+
to {
|
|
33
|
+
visibility: hidden;
|
|
34
|
+
transform: translateX(-100%);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@keyframes bui-slide-up-in {
|
|
38
|
+
from {
|
|
39
|
+
transform: translateY(100%);
|
|
40
|
+
}
|
|
41
|
+
to {
|
|
42
|
+
visibility: visible;
|
|
43
|
+
transform: none;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
@keyframes bui-slide-up-out {
|
|
47
|
+
from {
|
|
48
|
+
transform: none;
|
|
49
|
+
}
|
|
50
|
+
to {
|
|
51
|
+
visibility: hidden;
|
|
52
|
+
transform: translateY(100%);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
@keyframes bui-slide-down-in {
|
|
56
|
+
from {
|
|
57
|
+
transform: translateY(-100%);
|
|
58
|
+
}
|
|
59
|
+
to {
|
|
60
|
+
visibility: visible;
|
|
61
|
+
transform: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
@keyframes bui-slide-down-out {
|
|
65
|
+
from {
|
|
66
|
+
transform: none;
|
|
67
|
+
}
|
|
68
|
+
to {
|
|
69
|
+
visibility: hidden;
|
|
70
|
+
transform: translateY(-100%);
|
|
71
|
+
}
|
|
72
|
+
}
|
package/es/TabBar/TabBarItem.js
CHANGED
|
@@ -27,8 +27,8 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
return target;
|
|
28
28
|
};
|
|
29
29
|
import React, { useContext } from "react";
|
|
30
|
-
import { Badge } from "@bifrostui/react";
|
|
31
30
|
import clsx from "clsx";
|
|
31
|
+
import Badge from "../Badge";
|
|
32
32
|
import "./TabBarItem.css";
|
|
33
33
|
import TabBarContext from "./TabBarContext";
|
|
34
34
|
const prefixCls = "bui-tab-bar-item";
|
|
@@ -143,8 +143,8 @@ const TransitionCore = forwardRef(
|
|
|
143
143
|
(_a2 = nextCallback == null ? void 0 : nextCallback.current) == null ? void 0 : _a2.call(nextCallback);
|
|
144
144
|
});
|
|
145
145
|
};
|
|
146
|
-
const performEnter = () => __async(void 0, null, function* () {
|
|
147
|
-
if (!enter) {
|
|
146
|
+
const performEnter = (mounting) => __async(void 0, null, function* () {
|
|
147
|
+
if (!enter && !mounting) {
|
|
148
148
|
safeSetState(ENTERED, () => __async(void 0, null, function* () {
|
|
149
149
|
yield onEntered == null ? void 0 : onEntered(innerNodeRef == null ? void 0 : innerNodeRef.current);
|
|
150
150
|
}));
|
|
@@ -178,18 +178,18 @@ const TransitionCore = forwardRef(
|
|
|
178
178
|
});
|
|
179
179
|
}));
|
|
180
180
|
});
|
|
181
|
-
const updateStatus = (nextStatus) => {
|
|
181
|
+
const updateStatus = (nextStatus, mounting) => {
|
|
182
182
|
if (nextStatus !== null) {
|
|
183
183
|
cancelNextCallback();
|
|
184
184
|
if (nextStatus === ENTERING) {
|
|
185
|
-
performEnter();
|
|
185
|
+
performEnter(mounting);
|
|
186
186
|
} else if (nextStatus === EXITING) {
|
|
187
187
|
performExit();
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
};
|
|
191
191
|
useEffect(() => {
|
|
192
|
-
nextTick(() => updateStatus(appearStatus.current));
|
|
192
|
+
nextTick(() => updateStatus(appearStatus.current, true));
|
|
193
193
|
return () => {
|
|
194
194
|
cancelNextCallback();
|
|
195
195
|
};
|
|
@@ -209,11 +209,11 @@ const TransitionCore = forwardRef(
|
|
|
209
209
|
nextStatus = EXITING;
|
|
210
210
|
}
|
|
211
211
|
if (isMounted)
|
|
212
|
-
updateStatus(nextStatus);
|
|
212
|
+
updateStatus(nextStatus, false);
|
|
213
213
|
else
|
|
214
214
|
safeSetState(inProp ? "EXITED" : "ENTERED", () => {
|
|
215
215
|
forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
|
|
216
|
-
updateStatus(nextStatus);
|
|
216
|
+
updateStatus(nextStatus, false);
|
|
217
217
|
});
|
|
218
218
|
}, [inProp]);
|
|
219
219
|
if (status === UNMOUNTED)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bifrostui/react",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.2",
|
|
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": "^1.2.1",
|
|
34
34
|
"dayjs": "^1.11.7",
|
|
35
35
|
"swiper": "^8.1.5",
|
|
36
|
-
"@bifrostui/icons": "1.5.
|
|
37
|
-
"@bifrostui/
|
|
38
|
-
"@bifrostui/
|
|
39
|
-
"@bifrostui/
|
|
36
|
+
"@bifrostui/icons": "1.5.2",
|
|
37
|
+
"@bifrostui/styles": "1.5.2",
|
|
38
|
+
"@bifrostui/types": "1.5.2",
|
|
39
|
+
"@bifrostui/utils": "1.5.2"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@tarojs/components": "^3.0.0",
|