deepsea-components 5.18.2 → 5.18.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/README.md +23 -23
- package/dist/components/InputFileButton.cjs +1 -0
- package/dist/components/InputFileButton.js +1 -0
- package/package.json +1 -1
- package/src/components/CircleText.tsx +81 -81
- package/src/components/InputFileButton.tsx +1 -0
- package/src/components/ReadExcel.tsx +13 -13
- package/src/components/ScrollMask.module.css +87 -87
- package/src/components/WriteExcel.tsx +13 -13
- package/src/utils/getReactVersion.ts +7 -7
- package/src/utils/index.ts +33 -33
package/README.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
# deepsea-components
|
|
2
|
-
|
|
3
|
-
[](https://npmjs.org/package/deepsea-components)
|
|
4
|
-
[](https://npmjs.org/package/deepsea-components)
|
|
5
|
-
|
|
6
|
-
## Install
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
$ yarn install
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
$ npm run dev
|
|
14
|
-
$ npm run build
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Options
|
|
18
|
-
|
|
19
|
-
TODO
|
|
20
|
-
|
|
21
|
-
## LICENSE
|
|
22
|
-
|
|
23
|
-
MIT
|
|
1
|
+
# deepsea-components
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/deepsea-components)
|
|
4
|
+
[](https://npmjs.org/package/deepsea-components)
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
$ yarn install
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
$ npm run dev
|
|
14
|
+
$ npm run build
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Options
|
|
18
|
+
|
|
19
|
+
TODO
|
|
20
|
+
|
|
21
|
+
## LICENSE
|
|
22
|
+
|
|
23
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,81 +1,81 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { FC, Fragment, HTMLAttributes } from "react"
|
|
4
|
-
|
|
5
|
-
export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
|
|
6
|
-
/** 每一个方块的宽度 */
|
|
7
|
-
width: number
|
|
8
|
-
/** 每一个方块的高度 */
|
|
9
|
-
height: number
|
|
10
|
-
/** 圆弧的半径，不包含方块的高度 */
|
|
11
|
-
radius: number
|
|
12
|
-
/** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
|
|
13
|
-
startAngel?: number
|
|
14
|
-
/** 每一个方块之间间隔的弧度 */
|
|
15
|
-
gapAngel?: number
|
|
16
|
-
/** 文字对齐的方式，默认居中 */
|
|
17
|
-
align?: "left" | "center" | "right"
|
|
18
|
-
/** 文字朝向圆心还是外侧，默认外侧 */
|
|
19
|
-
direction?: "inner" | "outer"
|
|
20
|
-
/** 是否反转文字顺序 */
|
|
21
|
-
reverse?: boolean
|
|
22
|
-
/** 分割文字的方法 */
|
|
23
|
-
separator?: string | RegExp | ((text: string) => string[])
|
|
24
|
-
/** 显示的文字 */
|
|
25
|
-
children: string
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/** 环形文字 */
|
|
29
|
-
export const CircleText: FC<CircleTextProps> = props => {
|
|
30
|
-
const {
|
|
31
|
-
width,
|
|
32
|
-
height,
|
|
33
|
-
radius,
|
|
34
|
-
startAngel = 0,
|
|
35
|
-
gapAngel = 0,
|
|
36
|
-
align = "center",
|
|
37
|
-
style,
|
|
38
|
-
direction = "outer",
|
|
39
|
-
reverse = false,
|
|
40
|
-
separator,
|
|
41
|
-
children,
|
|
42
|
-
...rest
|
|
43
|
-
} = props
|
|
44
|
-
const unitAngle = Math.atan(width / 2 / radius) * 2
|
|
45
|
-
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
|
|
46
|
-
const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
|
|
47
|
-
|
|
48
|
-
function getTransform(idx: number) {
|
|
49
|
-
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
|
|
50
|
-
const x = (radius + height / 2) * Math.cos(angle) - width / 2
|
|
51
|
-
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
|
|
52
|
-
const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
|
|
53
|
-
return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
|
|
57
|
-
|
|
58
|
-
if (reverse) words.reverse()
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<Fragment>
|
|
62
|
-
{words.map((w, idx) => (
|
|
63
|
-
<span
|
|
64
|
-
key={idx}
|
|
65
|
-
style={{
|
|
66
|
-
position: "absolute",
|
|
67
|
-
...style,
|
|
68
|
-
transform: getTransform(idx),
|
|
69
|
-
textAlign: "center",
|
|
70
|
-
width,
|
|
71
|
-
lineHeight: `${height}px`,
|
|
72
|
-
height: height,
|
|
73
|
-
}}
|
|
74
|
-
{...rest}
|
|
75
|
-
>
|
|
76
|
-
{w}
|
|
77
|
-
</span>
|
|
78
|
-
))}
|
|
79
|
-
</Fragment>
|
|
80
|
-
)
|
|
81
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { FC, Fragment, HTMLAttributes } from "react"
|
|
4
|
+
|
|
5
|
+
export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
|
|
6
|
+
/** 每一个方块的宽度 */
|
|
7
|
+
width: number
|
|
8
|
+
/** 每一个方块的高度 */
|
|
9
|
+
height: number
|
|
10
|
+
/** 圆弧的半径，不包含方块的高度 */
|
|
11
|
+
radius: number
|
|
12
|
+
/** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
|
|
13
|
+
startAngel?: number
|
|
14
|
+
/** 每一个方块之间间隔的弧度 */
|
|
15
|
+
gapAngel?: number
|
|
16
|
+
/** 文字对齐的方式，默认居中 */
|
|
17
|
+
align?: "left" | "center" | "right"
|
|
18
|
+
/** 文字朝向圆心还是外侧，默认外侧 */
|
|
19
|
+
direction?: "inner" | "outer"
|
|
20
|
+
/** 是否反转文字顺序 */
|
|
21
|
+
reverse?: boolean
|
|
22
|
+
/** 分割文字的方法 */
|
|
23
|
+
separator?: string | RegExp | ((text: string) => string[])
|
|
24
|
+
/** 显示的文字 */
|
|
25
|
+
children: string
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/** 环形文字 */
|
|
29
|
+
export const CircleText: FC<CircleTextProps> = props => {
|
|
30
|
+
const {
|
|
31
|
+
width,
|
|
32
|
+
height,
|
|
33
|
+
radius,
|
|
34
|
+
startAngel = 0,
|
|
35
|
+
gapAngel = 0,
|
|
36
|
+
align = "center",
|
|
37
|
+
style,
|
|
38
|
+
direction = "outer",
|
|
39
|
+
reverse = false,
|
|
40
|
+
separator,
|
|
41
|
+
children,
|
|
42
|
+
...rest
|
|
43
|
+
} = props
|
|
44
|
+
const unitAngle = Math.atan(width / 2 / radius) * 2
|
|
45
|
+
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
|
|
46
|
+
const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
|
|
47
|
+
|
|
48
|
+
function getTransform(idx: number) {
|
|
49
|
+
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2
|
|
50
|
+
const x = (radius + height / 2) * Math.cos(angle) - width / 2
|
|
51
|
+
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2
|
|
52
|
+
const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0)
|
|
53
|
+
return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "")
|
|
57
|
+
|
|
58
|
+
if (reverse) words.reverse()
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<Fragment>
|
|
62
|
+
{words.map((w, idx) => (
|
|
63
|
+
<span
|
|
64
|
+
key={idx}
|
|
65
|
+
style={{
|
|
66
|
+
position: "absolute",
|
|
67
|
+
...style,
|
|
68
|
+
transform: getTransform(idx),
|
|
69
|
+
textAlign: "center",
|
|
70
|
+
width,
|
|
71
|
+
lineHeight: `${height}px`,
|
|
72
|
+
height: height,
|
|
73
|
+
}}
|
|
74
|
+
{...rest}
|
|
75
|
+
>
|
|
76
|
+
{w}
|
|
77
|
+
</span>
|
|
78
|
+
))}
|
|
79
|
+
</Fragment>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { ReadSheet, ReadSheetProps } from "./ReadSheet"
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated 请使用 ReadSheetProps 代替
|
|
7
|
-
*/
|
|
8
|
-
export type ReadExcelProps = ReadSheetProps
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated 请使用 ReadSheet 代替
|
|
12
|
-
*/
|
|
13
|
-
export const ReadExcel = ReadSheet
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { ReadSheet, ReadSheetProps } from "./ReadSheet"
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated 请使用 ReadSheetProps 代替
|
|
7
|
+
*/
|
|
8
|
+
export type ReadExcelProps = ReadSheetProps
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated 请使用 ReadSheet 代替
|
|
12
|
+
*/
|
|
13
|
+
export const ReadExcel = ReadSheet
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
.scroll-mask {
|
|
2
|
-
position: sticky;
|
|
3
|
-
z-index: 10;
|
|
4
|
-
pointer-events: none;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.top-scroll-mask {
|
|
8
|
-
width: 100%;
|
|
9
|
-
height: 0;
|
|
10
|
-
top: 0;
|
|
11
|
-
right: 0;
|
|
12
|
-
bottom: 100%;
|
|
13
|
-
left: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.scroll-mask-content {
|
|
17
|
-
position: absolute;
|
|
18
|
-
background-image: linear-gradient(
|
|
19
|
-
to var(--scroll-mask-direction),
|
|
20
|
-
var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
|
|
21
|
-
var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
|
|
22
|
-
);
|
|
23
|
-
clip-path: var(--scroll-mask-clip-path, none);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.top-scroll-mask-content {
|
|
27
|
-
width: 100%;
|
|
28
|
-
height: var(--scroll-mask-size, 8px);
|
|
29
|
-
top: 0;
|
|
30
|
-
right: 50%;
|
|
31
|
-
transform: translateX(50%);
|
|
32
|
-
--scroll-mask-direction: bottom;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.bottom-scroll-mask {
|
|
36
|
-
width: 100%;
|
|
37
|
-
height: 0;
|
|
38
|
-
top: 100%;
|
|
39
|
-
right: 0;
|
|
40
|
-
bottom: 0;
|
|
41
|
-
left: 0;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.bottom-scroll-mask-content {
|
|
45
|
-
width: 100%;
|
|
46
|
-
height: var(--scroll-mask-size, 8px);
|
|
47
|
-
bottom: 0;
|
|
48
|
-
left: 50%;
|
|
49
|
-
transform: translateX(-50%);
|
|
50
|
-
--scroll-mask-direction: top;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.left-scroll-mask {
|
|
54
|
-
width: 0;
|
|
55
|
-
height: 100%;
|
|
56
|
-
top: 0;
|
|
57
|
-
right: 100%;
|
|
58
|
-
bottom: 0;
|
|
59
|
-
left: 0;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.left-scroll-mask-content {
|
|
63
|
-
width: var(--scroll-mask-size, 8px);
|
|
64
|
-
height: 100%;
|
|
65
|
-
left: 0;
|
|
66
|
-
top: 50%;
|
|
67
|
-
transform: translateY(-50%);
|
|
68
|
-
--scroll-mask-direction: right;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.right-scroll-mask {
|
|
72
|
-
width: 0;
|
|
73
|
-
height: 100%;
|
|
74
|
-
top: 0;
|
|
75
|
-
right: 0;
|
|
76
|
-
bottom: 0;
|
|
77
|
-
left: 100%;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.right-scroll-mask-content {
|
|
81
|
-
width: var(--scroll-mask-size, 8px);
|
|
82
|
-
height: 100%;
|
|
83
|
-
right: 0;
|
|
84
|
-
bottom: 50%;
|
|
85
|
-
transform: translateY(50%);
|
|
86
|
-
--scroll-mask-direction: left;
|
|
87
|
-
}
|
|
1
|
+
.scroll-mask {
|
|
2
|
+
position: sticky;
|
|
3
|
+
z-index: 10;
|
|
4
|
+
pointer-events: none;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.top-scroll-mask {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 0;
|
|
10
|
+
top: 0;
|
|
11
|
+
right: 0;
|
|
12
|
+
bottom: 100%;
|
|
13
|
+
left: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.scroll-mask-content {
|
|
17
|
+
position: absolute;
|
|
18
|
+
background-image: linear-gradient(
|
|
19
|
+
to var(--scroll-mask-direction),
|
|
20
|
+
var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
|
|
21
|
+
var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
|
|
22
|
+
);
|
|
23
|
+
clip-path: var(--scroll-mask-clip-path, none);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.top-scroll-mask-content {
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: var(--scroll-mask-size, 8px);
|
|
29
|
+
top: 0;
|
|
30
|
+
right: 50%;
|
|
31
|
+
transform: translateX(50%);
|
|
32
|
+
--scroll-mask-direction: bottom;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.bottom-scroll-mask {
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 0;
|
|
38
|
+
top: 100%;
|
|
39
|
+
right: 0;
|
|
40
|
+
bottom: 0;
|
|
41
|
+
left: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.bottom-scroll-mask-content {
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: var(--scroll-mask-size, 8px);
|
|
47
|
+
bottom: 0;
|
|
48
|
+
left: 50%;
|
|
49
|
+
transform: translateX(-50%);
|
|
50
|
+
--scroll-mask-direction: top;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.left-scroll-mask {
|
|
54
|
+
width: 0;
|
|
55
|
+
height: 100%;
|
|
56
|
+
top: 0;
|
|
57
|
+
right: 100%;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.left-scroll-mask-content {
|
|
63
|
+
width: var(--scroll-mask-size, 8px);
|
|
64
|
+
height: 100%;
|
|
65
|
+
left: 0;
|
|
66
|
+
top: 50%;
|
|
67
|
+
transform: translateY(-50%);
|
|
68
|
+
--scroll-mask-direction: right;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.right-scroll-mask {
|
|
72
|
+
width: 0;
|
|
73
|
+
height: 100%;
|
|
74
|
+
top: 0;
|
|
75
|
+
right: 0;
|
|
76
|
+
bottom: 0;
|
|
77
|
+
left: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.right-scroll-mask-content {
|
|
81
|
+
width: var(--scroll-mask-size, 8px);
|
|
82
|
+
height: 100%;
|
|
83
|
+
right: 0;
|
|
84
|
+
bottom: 50%;
|
|
85
|
+
transform: translateY(50%);
|
|
86
|
+
--scroll-mask-direction: left;
|
|
87
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { WriteSheet, WriteSheetProps } from "./WriteSheet"
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated 请使用 WriteSheetProps 代替
|
|
7
|
-
*/
|
|
8
|
-
export type WriteExcelProps = WriteSheetProps
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated 请使用 WriteSheet 代替
|
|
12
|
-
*/
|
|
13
|
-
export const WriteExcel = WriteSheet
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { WriteSheet, WriteSheetProps } from "./WriteSheet"
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated 请使用 WriteSheetProps 代替
|
|
7
|
+
*/
|
|
8
|
+
export type WriteExcelProps = WriteSheetProps
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated 请使用 WriteSheet 代替
|
|
12
|
+
*/
|
|
13
|
+
export const WriteExcel = WriteSheet
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { version } from "react"
|
|
2
|
-
|
|
3
|
-
const reg = /(\d+)\.(\d+)\.(\d+)/
|
|
4
|
-
|
|
5
|
-
export function getReactVersion() {
|
|
6
|
-
return version.match(reg)!.slice(1).map(Number)
|
|
7
|
-
}
|
|
1
|
+
import { version } from "react"
|
|
2
|
+
|
|
3
|
+
const reg = /(\d+)\.(\d+)\.(\d+)/
|
|
4
|
+
|
|
5
|
+
export function getReactVersion() {
|
|
6
|
+
return version.match(reg)!.slice(1).map(Number)
|
|
7
|
+
}
|
package/src/utils/index.ts
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { CSSProperties } from "react"
|
|
2
|
-
|
|
3
|
-
export type CSSVariableName = `--${string}`
|
|
4
|
-
|
|
5
|
-
export type CSSVariableValue = string | number | undefined
|
|
6
|
-
|
|
7
|
-
export interface StyleWithCSSVariable extends CSSProperties {
|
|
8
|
-
[X: CSSVariableName]: CSSVariableValue
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const cssVariableReg = /[A-Z]/
|
|
12
|
-
|
|
13
|
-
function addCSSVariableLine(match: string): string {
|
|
14
|
-
return `-${match}`
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export function transformCSSVariableName(name: string): CSSVariableName {
|
|
18
|
-
return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
|
|
22
|
-
return Object.assign(
|
|
23
|
-
Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
|
|
24
|
-
acc[transformCSSVariableName(key)] = value
|
|
25
|
-
return acc
|
|
26
|
-
}, {}),
|
|
27
|
-
style2,
|
|
28
|
-
)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export function px(value: string | number | undefined): string | undefined {
|
|
32
|
-
return typeof value === "number" ? `${value}px` : value
|
|
33
|
-
}
|
|
1
|
+
import { CSSProperties } from "react"
|
|
2
|
+
|
|
3
|
+
export type CSSVariableName = `--${string}`
|
|
4
|
+
|
|
5
|
+
export type CSSVariableValue = string | number | undefined
|
|
6
|
+
|
|
7
|
+
export interface StyleWithCSSVariable extends CSSProperties {
|
|
8
|
+
[X: CSSVariableName]: CSSVariableValue
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const cssVariableReg = /[A-Z]/
|
|
12
|
+
|
|
13
|
+
function addCSSVariableLine(match: string): string {
|
|
14
|
+
return `-${match}`
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function transformCSSVariableName(name: string): CSSVariableName {
|
|
18
|
+
return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {
|
|
22
|
+
return Object.assign(
|
|
23
|
+
Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {
|
|
24
|
+
acc[transformCSSVariableName(key)] = value
|
|
25
|
+
return acc
|
|
26
|
+
}, {}),
|
|
27
|
+
style2,
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export function px(value: string | number | undefined): string | undefined {
|
|
32
|
+
return typeof value === "number" ? `${value}px` : value
|
|
33
|
+
}
|