deepsea-components 5.15.7 → 5.15.9
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/package.json +3 -3
- package/src/components/IconFileType.tsx +162 -153
- package/src/components/ReadSheet.tsx +17 -17
- package/src/components/WriteSheet.tsx +25 -25
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "deepsea-components",
|
|
3
|
-
"version": "5.15.
|
|
3
|
+
"version": "5.15.9",
|
|
4
4
|
"description": "格数科技自用组件库",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"echarts": "^5.6.0",
|
|
41
41
|
"hls.js": "^1.6.1",
|
|
42
42
|
"smooth-scrollbar": "^8.8.4",
|
|
43
|
-
"deepsea-tools": "5.35.
|
|
44
|
-
"soda-hooks": "6.10.
|
|
43
|
+
"deepsea-tools": "5.35.2",
|
|
44
|
+
"soda-hooks": "6.10.8"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"typescript": "^5.8.3"
|
|
@@ -1,153 +1,162 @@
|
|
|
1
|
-
import { ComponentProps, FC } from "react"
|
|
2
|
-
|
|
3
|
-
const GOLD = (Math.sqrt(5) - 1) / 2
|
|
4
|
-
const GOLD_T = Math.sqrt(1 - GOLD * GOLD)
|
|
5
|
-
const HANDLE_LENGTH = (1 - GOLD) * GOLD_T
|
|
6
|
-
|
|
7
|
-
const FileTypeSize = 512
|
|
8
|
-
|
|
9
|
-
export const IconFileTypeBase: FC<ComponentProps<"svg">> = props => (
|
|
10
|
-
<svg viewBox={`${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`} {...props} />
|
|
11
|
-
)
|
|
12
|
-
|
|
13
|
-
export interface IconFileTypePagePropsBase {
|
|
14
|
-
/**
|
|
15
|
-
* 书页颜色,默认为 #f31260
|
|
16
|
-
*/
|
|
17
|
-
pageColor?: string
|
|
18
|
-
/**
|
|
19
|
-
* 书页宽度,默认为 512 * 0.75
|
|
20
|
-
*/
|
|
21
|
-
pageWidth?: number
|
|
22
|
-
/**
|
|
23
|
-
* 书页贝塞尔曲线尺寸,尺寸越大,圆角越大,默认为 512 * 0.75 * 0.618
|
|
24
|
-
*/
|
|
25
|
-
pageBessel?: number
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export interface IconFileTypePageProps extends IconFileTypePagePropsBase, ComponentProps<"path"> {}
|
|
29
|
-
|
|
30
|
-
export const IconFileTypePage: FC<IconFileTypePageProps> = ({
|
|
31
|
-
pageColor = "#f31260",
|
|
32
|
-
pageWidth = FileTypeSize * 0.75,
|
|
33
|
-
pageBessel = FileTypeSize * 0.75 * GOLD,
|
|
34
|
-
...rest
|
|
35
|
-
}) => {
|
|
36
|
-
const radius = pageBessel * (1 - GOLD)
|
|
37
|
-
const offset = pageBessel * HANDLE_LENGTH
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<path
|
|
41
|
-
d={`M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
|
|
42
|
-
L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
|
|
43
|
-
L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
|
|
44
|
-
L ${pageWidth / 2} ${FileTypeSize / 2 - radius}
|
|
45
|
-
C ${pageWidth / 2} ${FileTypeSize / 2 - radius + offset} ${pageWidth / 2 - radius + offset} ${FileTypeSize / 2} ${pageWidth / 2 - radius} ${FileTypeSize / 2}
|
|
46
|
-
L ${-(pageWidth / 2 - radius)} ${FileTypeSize / 2}
|
|
47
|
-
C ${-(pageWidth / 2 - radius) - offset} ${FileTypeSize / 2} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius + offset} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius}
|
|
48
|
-
L ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius)}
|
|
49
|
-
C ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius) - offset} ${-(pageWidth / 2 - radius) - offset} ${-(FileTypeSize / 2)} ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
|
|
50
|
-
Z
|
|
51
|
-
`}
|
|
52
|
-
fill={pageColor}
|
|
53
|
-
{...rest}
|
|
54
|
-
/>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export interface IconFileTypeDogEarPropsBase extends Required<Pick<IconFileTypePagePropsBase, "pageWidth">> {
|
|
59
|
-
/**
|
|
60
|
-
* 折角颜色,默认为 rgba(0, 0, 0, 0.25)
|
|
61
|
-
*/
|
|
62
|
-
dogEarColor?: string
|
|
63
|
-
/**
|
|
64
|
-
* 折角大小,默认为 页面宽度 * (1 - 0.618)
|
|
65
|
-
*/
|
|
66
|
-
dogEarSize?: number
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export interface IconFileTypeDogEarProps extends IconFileTypeDogEarPropsBase, ComponentProps<"path"> {}
|
|
70
|
-
|
|
71
|
-
export const IconFileTypeDogEar: FC<IconFileTypeDogEarProps> = ({
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
)
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
1
|
+
import { ComponentProps, FC } from "react"
|
|
2
|
+
|
|
3
|
+
const GOLD = (Math.sqrt(5) - 1) / 2
|
|
4
|
+
const GOLD_T = Math.sqrt(1 - GOLD * GOLD)
|
|
5
|
+
const HANDLE_LENGTH = (1 - GOLD) * GOLD_T
|
|
6
|
+
|
|
7
|
+
const FileTypeSize = 512
|
|
8
|
+
|
|
9
|
+
export const IconFileTypeBase: FC<ComponentProps<"svg">> = props => (
|
|
10
|
+
<svg viewBox={`${-(FileTypeSize / 2)} ${-(FileTypeSize / 2)} ${FileTypeSize} ${FileTypeSize}`} {...props} />
|
|
11
|
+
)
|
|
12
|
+
|
|
13
|
+
export interface IconFileTypePagePropsBase {
|
|
14
|
+
/**
|
|
15
|
+
* 书页颜色,默认为 #f31260
|
|
16
|
+
*/
|
|
17
|
+
pageColor?: string
|
|
18
|
+
/**
|
|
19
|
+
* 书页宽度,默认为 512 * 0.75
|
|
20
|
+
*/
|
|
21
|
+
pageWidth?: number
|
|
22
|
+
/**
|
|
23
|
+
* 书页贝塞尔曲线尺寸,尺寸越大,圆角越大,默认为 512 * 0.75 * 0.618
|
|
24
|
+
*/
|
|
25
|
+
pageBessel?: number
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export interface IconFileTypePageProps extends IconFileTypePagePropsBase, ComponentProps<"path"> {}
|
|
29
|
+
|
|
30
|
+
export const IconFileTypePage: FC<IconFileTypePageProps> = ({
|
|
31
|
+
pageColor = "#f31260",
|
|
32
|
+
pageWidth = FileTypeSize * 0.75,
|
|
33
|
+
pageBessel = FileTypeSize * 0.75 * GOLD,
|
|
34
|
+
...rest
|
|
35
|
+
}) => {
|
|
36
|
+
const radius = pageBessel * (1 - GOLD)
|
|
37
|
+
const offset = pageBessel * HANDLE_LENGTH
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<path
|
|
41
|
+
d={`M ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
|
|
42
|
+
L ${pageWidth * GOLD - pageWidth / 2} ${-(FileTypeSize / 2)}
|
|
43
|
+
L ${pageWidth / 2} ${-(FileTypeSize / 2 - pageWidth * (1 - GOLD))}
|
|
44
|
+
L ${pageWidth / 2} ${FileTypeSize / 2 - radius}
|
|
45
|
+
C ${pageWidth / 2} ${FileTypeSize / 2 - radius + offset} ${pageWidth / 2 - radius + offset} ${FileTypeSize / 2} ${pageWidth / 2 - radius} ${FileTypeSize / 2}
|
|
46
|
+
L ${-(pageWidth / 2 - radius)} ${FileTypeSize / 2}
|
|
47
|
+
C ${-(pageWidth / 2 - radius) - offset} ${FileTypeSize / 2} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius + offset} ${-(pageWidth / 2)} ${FileTypeSize / 2 - radius}
|
|
48
|
+
L ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius)}
|
|
49
|
+
C ${-(pageWidth / 2)} ${-(FileTypeSize / 2 - radius) - offset} ${-(pageWidth / 2 - radius) - offset} ${-(FileTypeSize / 2)} ${-(pageWidth / 2 - radius)} ${-(FileTypeSize / 2)}
|
|
50
|
+
Z
|
|
51
|
+
`}
|
|
52
|
+
fill={pageColor}
|
|
53
|
+
{...rest}
|
|
54
|
+
/>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export interface IconFileTypeDogEarPropsBase extends Required<Pick<IconFileTypePagePropsBase, "pageWidth">> {
|
|
59
|
+
/**
|
|
60
|
+
* 折角颜色,默认为 rgba(0, 0, 0, 0.25)
|
|
61
|
+
*/
|
|
62
|
+
dogEarColor?: string
|
|
63
|
+
/**
|
|
64
|
+
* 折角大小,默认为 页面宽度 * (1 - 0.618)
|
|
65
|
+
*/
|
|
66
|
+
dogEarSize?: number
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export interface IconFileTypeDogEarProps extends IconFileTypeDogEarPropsBase, ComponentProps<"path"> {}
|
|
70
|
+
|
|
71
|
+
export const IconFileTypeDogEar: FC<IconFileTypeDogEarProps> = ({
|
|
72
|
+
pageWidth,
|
|
73
|
+
dogEarColor = "rgba(0, 0, 0, 0.25)",
|
|
74
|
+
dogEarSize = pageWidth * (1 - GOLD),
|
|
75
|
+
...rest
|
|
76
|
+
}) => (
|
|
77
|
+
<path
|
|
78
|
+
d={`M ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2)}
|
|
79
|
+
L ${pageWidth / 2} ${-(FileTypeSize / 2 - dogEarSize)}
|
|
80
|
+
L ${pageWidth / 2 - dogEarSize} ${-(FileTypeSize / 2 - dogEarSize)}`}
|
|
81
|
+
fill={dogEarColor}
|
|
82
|
+
{...rest}
|
|
83
|
+
/>
|
|
84
|
+
)
|
|
85
|
+
|
|
86
|
+
export interface IconFileTypeTextPropsBase {
|
|
87
|
+
/**
|
|
88
|
+
* 文字颜色,默认为 白色
|
|
89
|
+
*/
|
|
90
|
+
textColor?: string
|
|
91
|
+
/**
|
|
92
|
+
* 文字大小,默认为 512 * 0.25
|
|
93
|
+
*/
|
|
94
|
+
textFontSize?: number
|
|
95
|
+
/**
|
|
96
|
+
* 文字字重,默认为 bold
|
|
97
|
+
*/
|
|
98
|
+
textFontWeight?: string
|
|
99
|
+
/**
|
|
100
|
+
* 文字字体
|
|
101
|
+
*/
|
|
102
|
+
textFontFamily?: string
|
|
103
|
+
/**
|
|
104
|
+
* 文字 x 轴远点,默认为 0
|
|
105
|
+
*/
|
|
106
|
+
textX?: number
|
|
107
|
+
/**
|
|
108
|
+
* 文字 y 轴远点,默认为 512 * 0.25
|
|
109
|
+
*/
|
|
110
|
+
textY?: number
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export interface IconFileTypeTextProps extends IconFileTypeTextPropsBase, ComponentProps<"text"> {}
|
|
114
|
+
|
|
115
|
+
export const IconFileTypeText: FC<IconFileTypeTextProps> = ({
|
|
116
|
+
textColor = "#ffffff",
|
|
117
|
+
textFontSize = FileTypeSize * 0.25,
|
|
118
|
+
textFontWeight = "bold",
|
|
119
|
+
textFontFamily,
|
|
120
|
+
textX = 0,
|
|
121
|
+
textY = FileTypeSize * 0.25,
|
|
122
|
+
...rest
|
|
123
|
+
}) => (
|
|
124
|
+
<text textAnchor="middle" fill={textColor} x={textX} y={textY} fontSize={textFontSize} fontWeight={textFontWeight} fontFamily={textFontFamily} {...rest} />
|
|
125
|
+
)
|
|
126
|
+
|
|
127
|
+
export interface IconFileTypeProps
|
|
128
|
+
extends IconFileTypePagePropsBase,
|
|
129
|
+
Omit<IconFileTypeDogEarPropsBase, "pageWidth">,
|
|
130
|
+
IconFileTypeTextPropsBase,
|
|
131
|
+
ComponentProps<"svg"> {}
|
|
132
|
+
|
|
133
|
+
export const IconFileType: FC<IconFileTypeProps> = ({
|
|
134
|
+
pageColor,
|
|
135
|
+
pageWidth = FileTypeSize * 0.75,
|
|
136
|
+
pageBessel,
|
|
137
|
+
dogEarColor,
|
|
138
|
+
dogEarSize,
|
|
139
|
+
textColor,
|
|
140
|
+
textFontSize,
|
|
141
|
+
textFontWeight,
|
|
142
|
+
textFontFamily,
|
|
143
|
+
textX,
|
|
144
|
+
textY,
|
|
145
|
+
children,
|
|
146
|
+
...rest
|
|
147
|
+
}) => (
|
|
148
|
+
<IconFileTypeBase {...rest}>
|
|
149
|
+
<IconFileTypePage pageColor={pageColor} pageWidth={pageWidth} pageBessel={pageBessel} />
|
|
150
|
+
<IconFileTypeDogEar pageWidth={pageWidth} dogEarColor={dogEarColor} dogEarSize={dogEarSize} />
|
|
151
|
+
<IconFileTypeText
|
|
152
|
+
textColor={textColor}
|
|
153
|
+
textFontSize={textFontSize}
|
|
154
|
+
textFontWeight={textFontWeight}
|
|
155
|
+
textFontFamily={textFontFamily}
|
|
156
|
+
textX={textX}
|
|
157
|
+
textY={textY}
|
|
158
|
+
>
|
|
159
|
+
{children}
|
|
160
|
+
</IconFileTypeText>
|
|
161
|
+
</IconFileTypeBase>
|
|
162
|
+
)
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { FC } from "react"
|
|
4
|
-
import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
|
|
5
|
-
|
|
6
|
-
import { InputFile, InputFileProps } from "./InputFile"
|
|
7
|
-
|
|
8
|
-
export interface ReadSheetProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
|
|
9
|
-
onValueChange?: <Sheet = WorkSheetData>(data: WorkBookData<Sheet>) => void
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/** 专门用于读取 excel 的组件 */
|
|
13
|
-
export const ReadSheet: FC<ReadSheetProps> = props => {
|
|
14
|
-
const { onValueChange, ...rest } = props
|
|
15
|
-
|
|
16
|
-
return <InputFile accept=".xlsx" type="arrayBuffer" onValueChange={data => onValueChange?.(readSheet(data))} {...rest} />
|
|
17
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { FC } from "react"
|
|
4
|
+
import { WorkBookData, WorkSheetData, readSheet } from "deepsea-tools"
|
|
5
|
+
|
|
6
|
+
import { InputFile, InputFileProps } from "./InputFile"
|
|
7
|
+
|
|
8
|
+
export interface ReadSheetProps extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
|
|
9
|
+
onValueChange?: <Sheet = WorkSheetData>(data: WorkBookData<Sheet>) => void
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/** 专门用于读取 excel 的组件 */
|
|
13
|
+
export const ReadSheet: FC<ReadSheetProps> = props => {
|
|
14
|
+
const { onValueChange, ...rest } = props
|
|
15
|
+
|
|
16
|
+
return <InputFile accept=".xlsx" type="arrayBuffer" onValueChange={data => onValueChange?.(readSheet(data))} {...rest} />
|
|
17
|
+
}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
|
|
4
|
-
import { WriteSheetParams, writeSheet } from "deepsea-tools"
|
|
5
|
-
|
|
6
|
-
export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
|
|
7
|
-
as?: AS
|
|
8
|
-
excel?: WriteSheetParams
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/** 导出 excel 的 button 组件 */
|
|
12
|
-
export function WriteSheet<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: WriteSheetProps<AS>) {
|
|
13
|
-
const { as, excel, onClick: _onClick, ...rest } = props
|
|
14
|
-
|
|
15
|
-
function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
|
|
16
|
-
_onClick?.(e)
|
|
17
|
-
if (!excel) return
|
|
18
|
-
writeSheet(excel)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return createElement(as ?? "button", {
|
|
22
|
-
onClick,
|
|
23
|
-
...rest,
|
|
24
|
-
})
|
|
25
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { ComponentProps, JSX, JSXElementConstructor, MouseEvent as ReactMouseEvent, createElement } from "react"
|
|
4
|
+
import { WriteSheetParams, writeSheet } from "deepsea-tools"
|
|
5
|
+
|
|
6
|
+
export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
|
|
7
|
+
as?: AS
|
|
8
|
+
excel?: WriteSheetParams
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/** 导出 excel 的 button 组件 */
|
|
12
|
+
export function WriteSheet<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: WriteSheetProps<AS>) {
|
|
13
|
+
const { as, excel, onClick: _onClick, ...rest } = props
|
|
14
|
+
|
|
15
|
+
function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
|
|
16
|
+
_onClick?.(e)
|
|
17
|
+
if (!excel) return
|
|
18
|
+
writeSheet(excel)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return createElement(as ?? "button", {
|
|
22
|
+
onClick,
|
|
23
|
+
...rest,
|
|
24
|
+
})
|
|
25
|
+
}
|