deepsea-components 5.17.2 → 5.17.4
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/components/LoopSwiper.cjs +30 -29
- package/dist/components/LoopSwiper.d.ts +10 -4
- package/dist/components/LoopSwiper.js +30 -29
- package/dist/components/Title.cjs +9 -5
- package/dist/components/Title.d.ts +2 -3
- package/dist/components/Title.js +10 -6
- package/package.json +3 -3
- package/src/components/LoopSwiper.tsx +55 -17
- package/src/components/Title.tsx +9 -8
|
@@ -28,11 +28,10 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
LoopSwiper: ()=>LoopSwiper
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
31
32
|
const css_namespaceObject = require("@emotion/css");
|
|
32
33
|
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
33
|
-
const
|
|
34
|
-
const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
|
|
35
|
-
const { className, style, children, direction, period, reverse, gap, ...rest } = props;
|
|
34
|
+
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, gap = 0, ...rest })=>{
|
|
36
35
|
const wrapper = (0, external_react_namespaceObject.useRef)(null);
|
|
37
36
|
const container = (0, external_react_namespaceObject.useRef)(null);
|
|
38
37
|
const [swiper, setSwiper] = (0, external_react_namespaceObject.useState)(false);
|
|
@@ -69,6 +68,11 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
69
68
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
70
69
|
ref: wrapper,
|
|
71
70
|
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: ${flexDirection};
|
|
73
|
+
gap: ${gap}px;
|
|
74
|
+
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
75
|
+
|
|
72
76
|
@keyframes deepsea-horizontal-loop-swipe {
|
|
73
77
|
from {
|
|
74
78
|
transform: translateX(0);
|
|
@@ -77,6 +81,7 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
77
81
|
transform: translateX(-100%);
|
|
78
82
|
}
|
|
79
83
|
}
|
|
84
|
+
|
|
80
85
|
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
81
86
|
from {
|
|
82
87
|
transform: translateX(0);
|
|
@@ -85,6 +90,7 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
85
90
|
transform: translateX(100%);
|
|
86
91
|
}
|
|
87
92
|
}
|
|
93
|
+
|
|
88
94
|
@keyframes deepsea-vertical-loop-swipe {
|
|
89
95
|
from {
|
|
90
96
|
transform: translateY(0);
|
|
@@ -93,6 +99,7 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
93
99
|
transform: translateY(-100%);
|
|
94
100
|
}
|
|
95
101
|
}
|
|
102
|
+
|
|
96
103
|
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
97
104
|
from {
|
|
98
105
|
transform: translateY(0);
|
|
@@ -101,43 +108,37 @@ const LoopSwiper = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
|
|
|
101
108
|
transform: translateY(100%);
|
|
102
109
|
}
|
|
103
110
|
}
|
|
104
|
-
`, className),
|
|
105
|
-
style: {
|
|
106
|
-
display: "flex",
|
|
107
|
-
flexDirection,
|
|
108
|
-
gap,
|
|
109
|
-
...style
|
|
110
|
-
},
|
|
111
|
+
`, className, rootClassName),
|
|
111
112
|
...rest,
|
|
112
113
|
children: [
|
|
113
114
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
114
115
|
ref: container,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
116
|
+
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: ${flexDirection};
|
|
119
|
+
gap: ${gap}px;
|
|
120
|
+
animation-name: ${animationName};
|
|
121
|
+
animation-timing-function: ${animationTimingFunction};
|
|
122
|
+
animation-duration: ${animationDuration};
|
|
123
|
+
animation-iteration-count: ${animationIterationCount};
|
|
124
|
+
`, containerClassName),
|
|
124
125
|
children: children
|
|
125
126
|
}),
|
|
126
127
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
128
|
+
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
129
|
+
display: ${swiper ? "flex" : "none"};
|
|
130
|
+
flex-direction: ${flexDirection};
|
|
131
|
+
gap: ${gap}px;
|
|
132
|
+
animation-name: ${animationName};
|
|
133
|
+
animation-timing-function: ${animationTimingFunction};
|
|
134
|
+
animation-duration: ${animationDuration};
|
|
135
|
+
animation-iteration-count: ${animationIterationCount};
|
|
136
|
+
`, mirrorClassName),
|
|
136
137
|
children: children
|
|
137
138
|
})
|
|
138
139
|
]
|
|
139
140
|
});
|
|
140
|
-
}
|
|
141
|
+
};
|
|
141
142
|
exports.LoopSwiper = __webpack_exports__.LoopSwiper;
|
|
142
143
|
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
143
144
|
"LoopSwiper"
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { ComponentProps, FC } from "react";
|
|
2
|
+
export interface LoopSwiperClassNames {
|
|
3
|
+
root?: string;
|
|
4
|
+
container?: string;
|
|
5
|
+
mirror?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface LoopSwiperProps extends ComponentProps<"div"> {
|
|
8
|
+
classNames?: LoopSwiperClassNames;
|
|
3
9
|
direction?: "horizontal" | "vertical";
|
|
4
10
|
reverse?: boolean;
|
|
5
11
|
period: number;
|
|
6
|
-
gap?:
|
|
12
|
+
gap?: number;
|
|
7
13
|
}
|
|
8
14
|
/** 循环播放组件 */
|
|
9
|
-
export declare const LoopSwiper:
|
|
15
|
+
export declare const LoopSwiper: FC<LoopSwiperProps>;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
3
4
|
import { css } from "@emotion/css";
|
|
4
5
|
import { clsx } from "deepsea-tools";
|
|
5
|
-
|
|
6
|
-
const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
|
-
const { className, style, children, direction, period, reverse, gap, ...rest } = props;
|
|
6
|
+
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, gap = 0, ...rest })=>{
|
|
8
7
|
const wrapper = useRef(null);
|
|
9
8
|
const container = useRef(null);
|
|
10
9
|
const [swiper, setSwiper] = useState(false);
|
|
@@ -41,6 +40,11 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
41
40
|
return /*#__PURE__*/ jsxs("div", {
|
|
42
41
|
ref: wrapper,
|
|
43
42
|
className: clsx(css`
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: ${flexDirection};
|
|
45
|
+
gap: ${gap}px;
|
|
46
|
+
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
47
|
+
|
|
44
48
|
@keyframes deepsea-horizontal-loop-swipe {
|
|
45
49
|
from {
|
|
46
50
|
transform: translateX(0);
|
|
@@ -49,6 +53,7 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
49
53
|
transform: translateX(-100%);
|
|
50
54
|
}
|
|
51
55
|
}
|
|
56
|
+
|
|
52
57
|
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
53
58
|
from {
|
|
54
59
|
transform: translateX(0);
|
|
@@ -57,6 +62,7 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
57
62
|
transform: translateX(100%);
|
|
58
63
|
}
|
|
59
64
|
}
|
|
65
|
+
|
|
60
66
|
@keyframes deepsea-vertical-loop-swipe {
|
|
61
67
|
from {
|
|
62
68
|
transform: translateY(0);
|
|
@@ -65,6 +71,7 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
65
71
|
transform: translateY(-100%);
|
|
66
72
|
}
|
|
67
73
|
}
|
|
74
|
+
|
|
68
75
|
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
69
76
|
from {
|
|
70
77
|
transform: translateY(0);
|
|
@@ -73,41 +80,35 @@ const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
73
80
|
transform: translateY(100%);
|
|
74
81
|
}
|
|
75
82
|
}
|
|
76
|
-
`, className),
|
|
77
|
-
style: {
|
|
78
|
-
display: "flex",
|
|
79
|
-
flexDirection,
|
|
80
|
-
gap,
|
|
81
|
-
...style
|
|
82
|
-
},
|
|
83
|
+
`, className, rootClassName),
|
|
83
84
|
...rest,
|
|
84
85
|
children: [
|
|
85
86
|
/*#__PURE__*/ jsx("div", {
|
|
86
87
|
ref: container,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
88
|
+
className: clsx(css`
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: ${flexDirection};
|
|
91
|
+
gap: ${gap}px;
|
|
92
|
+
animation-name: ${animationName};
|
|
93
|
+
animation-timing-function: ${animationTimingFunction};
|
|
94
|
+
animation-duration: ${animationDuration};
|
|
95
|
+
animation-iteration-count: ${animationIterationCount};
|
|
96
|
+
`, containerClassName),
|
|
96
97
|
children: children
|
|
97
98
|
}),
|
|
98
99
|
/*#__PURE__*/ jsx("div", {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
100
|
+
className: clsx(css`
|
|
101
|
+
display: ${swiper ? "flex" : "none"};
|
|
102
|
+
flex-direction: ${flexDirection};
|
|
103
|
+
gap: ${gap}px;
|
|
104
|
+
animation-name: ${animationName};
|
|
105
|
+
animation-timing-function: ${animationTimingFunction};
|
|
106
|
+
animation-duration: ${animationDuration};
|
|
107
|
+
animation-iteration-count: ${animationIterationCount};
|
|
108
|
+
`, mirrorClassName),
|
|
108
109
|
children: children
|
|
109
110
|
})
|
|
110
111
|
]
|
|
111
112
|
});
|
|
112
|
-
}
|
|
113
|
+
};
|
|
113
114
|
export { LoopSwiper };
|
|
@@ -28,15 +28,18 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
Title: ()=>Title
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
-
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
32
31
|
const external_react_namespaceObject = require("react");
|
|
33
32
|
const external_react_dom_namespaceObject = require("react-dom");
|
|
33
|
+
const server_namespaceObject = require("react-dom/server");
|
|
34
|
+
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
34
35
|
const getReactVersion_cjs_namespaceObject = require("../utils/getReactVersion.cjs");
|
|
35
36
|
const [major] = (0, getReactVersion_cjs_namespaceObject.getReactVersion)();
|
|
36
|
-
const Title =
|
|
37
|
+
const Title = ({ ref, children, ...rest })=>{
|
|
38
|
+
children = "string" == typeof children ? children : (0, server_namespaceObject.renderToString)(children).replace(/<!-- -->/g, "");
|
|
37
39
|
if (major >= 19) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
|
|
38
40
|
ref: ref,
|
|
39
|
-
...
|
|
41
|
+
...rest,
|
|
42
|
+
children: children
|
|
40
43
|
});
|
|
41
44
|
const ele = (0, external_react_namespaceObject.useRef)(null);
|
|
42
45
|
(0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>ele.current, [
|
|
@@ -49,9 +52,10 @@ const Title = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((prop
|
|
|
49
52
|
}, []);
|
|
50
53
|
return external_deepsea_tools_namespaceObject.isBrowser && /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
|
|
51
54
|
ref: ele,
|
|
52
|
-
...
|
|
55
|
+
...rest,
|
|
56
|
+
children: children
|
|
53
57
|
}), document.head);
|
|
54
|
-
}
|
|
58
|
+
};
|
|
55
59
|
exports.Title = __webpack_exports__.Title;
|
|
56
60
|
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
57
61
|
"Title"
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export
|
|
3
|
-
export declare const Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, "ref"> & import("react").RefAttributes<HTMLTitleElement>>;
|
|
1
|
+
import { ComponentProps, FC } from "react";
|
|
2
|
+
export declare const Title: FC<ComponentProps<"title">>;
|
package/dist/components/Title.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
3
|
+
import { useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
5
4
|
import { createPortal } from "react-dom";
|
|
5
|
+
import { renderToString } from "react-dom/server";
|
|
6
|
+
import { isBrowser } from "deepsea-tools";
|
|
6
7
|
import { getReactVersion } from "../utils/getReactVersion.js";
|
|
7
8
|
const [major] = getReactVersion();
|
|
8
|
-
const Title =
|
|
9
|
+
const Title = ({ ref, children, ...rest })=>{
|
|
10
|
+
children = "string" == typeof children ? children : renderToString(children).replace(/<!-- -->/g, "");
|
|
9
11
|
if (major >= 19) return /*#__PURE__*/ jsx("title", {
|
|
10
12
|
ref: ref,
|
|
11
|
-
...
|
|
13
|
+
...rest,
|
|
14
|
+
children: children
|
|
12
15
|
});
|
|
13
16
|
const ele = useRef(null);
|
|
14
17
|
useImperativeHandle(ref, ()=>ele.current, [
|
|
@@ -21,7 +24,8 @@ const Title = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
21
24
|
}, []);
|
|
22
25
|
return isBrowser && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("title", {
|
|
23
26
|
ref: ele,
|
|
24
|
-
...
|
|
27
|
+
...rest,
|
|
28
|
+
children: children
|
|
25
29
|
}), document.head);
|
|
26
|
-
}
|
|
30
|
+
};
|
|
27
31
|
export { Title };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "deepsea-components",
|
|
3
|
-
"version": "5.17.
|
|
3
|
+
"version": "5.17.4",
|
|
4
4
|
"description": "格数科技自用组件库",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"echarts": "^6.0.0",
|
|
41
41
|
"hls.js": "^1.6.13",
|
|
42
42
|
"smooth-scrollbar": "^8.8.4",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
43
|
+
"soda-hooks": "6.15.2",
|
|
44
|
+
"deepsea-tools": "5.42.4"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"typescript": "^5.9.3"
|
|
@@ -1,19 +1,35 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
+
import { CSSProperties, ComponentProps, FC, useEffect, useImperativeHandle, useRef, useState } from "react"
|
|
3
4
|
import { css } from "@emotion/css"
|
|
4
5
|
import { clsx } from "deepsea-tools"
|
|
5
|
-
import { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react"
|
|
6
6
|
|
|
7
|
-
export interface
|
|
7
|
+
export interface LoopSwiperClassNames {
|
|
8
|
+
root?: string
|
|
9
|
+
container?: string
|
|
10
|
+
mirror?: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface LoopSwiperProps extends ComponentProps<"div"> {
|
|
14
|
+
classNames?: LoopSwiperClassNames
|
|
8
15
|
direction?: "horizontal" | "vertical"
|
|
9
16
|
reverse?: boolean
|
|
10
17
|
period: number
|
|
11
|
-
gap?:
|
|
18
|
+
gap?: number
|
|
12
19
|
}
|
|
13
20
|
|
|
14
21
|
/** 循环播放组件 */
|
|
15
|
-
export const LoopSwiper
|
|
16
|
-
|
|
22
|
+
export const LoopSwiper: FC<LoopSwiperProps> = ({
|
|
23
|
+
ref,
|
|
24
|
+
className,
|
|
25
|
+
classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {},
|
|
26
|
+
children,
|
|
27
|
+
direction,
|
|
28
|
+
period,
|
|
29
|
+
reverse,
|
|
30
|
+
gap = 0,
|
|
31
|
+
...rest
|
|
32
|
+
}) => {
|
|
17
33
|
const wrapper = useRef<HTMLDivElement>(null)
|
|
18
34
|
const container = useRef<HTMLDivElement>(null)
|
|
19
35
|
const [swiper, setSwiper] = useState(false)
|
|
@@ -63,6 +79,11 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
|
|
|
63
79
|
ref={wrapper}
|
|
64
80
|
className={clsx(
|
|
65
81
|
css`
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: ${flexDirection};
|
|
84
|
+
gap: ${gap}px;
|
|
85
|
+
${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
86
|
+
|
|
66
87
|
@keyframes deepsea-horizontal-loop-swipe {
|
|
67
88
|
from {
|
|
68
89
|
transform: translateX(0);
|
|
@@ -71,6 +92,7 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
|
|
|
71
92
|
transform: translateX(-100%);
|
|
72
93
|
}
|
|
73
94
|
}
|
|
95
|
+
|
|
74
96
|
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
75
97
|
from {
|
|
76
98
|
transform: translateX(0);
|
|
@@ -79,6 +101,7 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
|
|
|
79
101
|
transform: translateX(100%);
|
|
80
102
|
}
|
|
81
103
|
}
|
|
104
|
+
|
|
82
105
|
@keyframes deepsea-vertical-loop-swipe {
|
|
83
106
|
from {
|
|
84
107
|
transform: translateY(0);
|
|
@@ -87,6 +110,7 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
|
|
|
87
110
|
transform: translateY(-100%);
|
|
88
111
|
}
|
|
89
112
|
}
|
|
113
|
+
|
|
90
114
|
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
91
115
|
from {
|
|
92
116
|
transform: translateY(0);
|
|
@@ -97,29 +121,43 @@ export const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, re
|
|
|
97
121
|
}
|
|
98
122
|
`,
|
|
99
123
|
className,
|
|
124
|
+
rootClassName,
|
|
100
125
|
)}
|
|
101
|
-
style={{ display: "flex", flexDirection, gap, ...style }}
|
|
102
126
|
{...rest}
|
|
103
127
|
>
|
|
104
128
|
<div
|
|
105
129
|
ref={container}
|
|
106
|
-
|
|
130
|
+
className={clsx(
|
|
131
|
+
css`
|
|
132
|
+
display: flex;
|
|
133
|
+
flex-direction: ${flexDirection};
|
|
134
|
+
gap: ${gap}px;
|
|
135
|
+
animation-name: ${animationName};
|
|
136
|
+
animation-timing-function: ${animationTimingFunction};
|
|
137
|
+
animation-duration: ${animationDuration};
|
|
138
|
+
animation-iteration-count: ${animationIterationCount};
|
|
139
|
+
`,
|
|
140
|
+
containerClassName,
|
|
141
|
+
)}
|
|
107
142
|
>
|
|
108
143
|
{children}
|
|
109
144
|
</div>
|
|
110
145
|
<div
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
146
|
+
className={clsx(
|
|
147
|
+
css`
|
|
148
|
+
display: ${swiper ? "flex" : "none"};
|
|
149
|
+
flex-direction: ${flexDirection};
|
|
150
|
+
gap: ${gap}px;
|
|
151
|
+
animation-name: ${animationName};
|
|
152
|
+
animation-timing-function: ${animationTimingFunction};
|
|
153
|
+
animation-duration: ${animationDuration};
|
|
154
|
+
animation-iteration-count: ${animationIterationCount};
|
|
155
|
+
`,
|
|
156
|
+
mirrorClassName,
|
|
157
|
+
)}
|
|
120
158
|
>
|
|
121
159
|
{children}
|
|
122
160
|
</div>
|
|
123
161
|
</div>
|
|
124
162
|
)
|
|
125
|
-
}
|
|
163
|
+
}
|
package/src/components/Title.tsx
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
|
|
3
|
+
import { ComponentProps, FC, useImperativeHandle, useLayoutEffect, useRef } from "react"
|
|
5
4
|
import { createPortal } from "react-dom"
|
|
5
|
+
import { renderToString } from "react-dom/server"
|
|
6
|
+
import { isBrowser } from "deepsea-tools"
|
|
6
7
|
|
|
7
8
|
import { getReactVersion } from "@/utils/getReactVersion"
|
|
8
9
|
|
|
9
|
-
export type TitleProps = ComponentPropsWithoutRef<"title">
|
|
10
|
-
|
|
11
10
|
const [major] = getReactVersion()
|
|
12
11
|
|
|
13
|
-
export const Title =
|
|
14
|
-
|
|
12
|
+
export const Title: FC<ComponentProps<"title">> = ({ ref, children, ...rest }) => {
|
|
13
|
+
children = typeof children === "string" ? children : renderToString(children).replace(/<!-- -->/g, "")
|
|
14
|
+
|
|
15
|
+
if (major >= 19) return <title ref={ref} {...rest} children={children} />
|
|
15
16
|
|
|
16
17
|
const ele = useRef<HTMLTitleElement>(null)
|
|
17
18
|
|
|
@@ -23,5 +24,5 @@ export const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {
|
|
|
23
24
|
document.head.insertBefore(ele.current as HTMLTitleElement, title)
|
|
24
25
|
}, [])
|
|
25
26
|
|
|
26
|
-
return isBrowser && createPortal(<title ref={ele} {...
|
|
27
|
-
}
|
|
27
|
+
return isBrowser && createPortal(<title ref={ele} {...rest} children={children} />, document.head)
|
|
28
|
+
}
|