@hpcc-js/react 2.55.3 → 2.55.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/LICENSE +43 -43
- package/dist/index.es6.js +4 -4
- package/dist/index.es6.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +3 -3
- package/src/ImageChar.tsx +39 -39
- package/src/__package__.ts +3 -3
- package/src/edge.tsx +45 -45
- package/src/icon.tsx +95 -95
- package/src/image.tsx +25 -25
- package/src/index.ts +18 -18
- package/src/render.ts +73 -73
- package/src/shape.tsx +138 -138
- package/src/subgraph.tsx +45 -45
- package/src/text.tsx +238 -238
- package/src/vertex.tsx +116 -116
- package/src/vertex2.tsx +100 -100
- package/src/vertex3.tsx +238 -238
- package/src/vertex4.tsx +309 -309
- package/types/__package__.d.ts +2 -2
- package/types-3.4/__package__.d.ts +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hpcc-js/react",
|
|
3
|
-
"version": "2.55.
|
|
3
|
+
"version": "2.55.4",
|
|
4
4
|
"description": "hpcc-js - Viz React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es6",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"update": "npx --yes npm-check-updates -u -t minor"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@hpcc-js/common": "^2.73.
|
|
41
|
+
"@hpcc-js/common": "^2.73.4",
|
|
42
42
|
"@hpcc-js/preact-shim": "^2.19.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"url": "https://github.com/hpcc-systems/Visualization/issues"
|
|
57
57
|
},
|
|
58
58
|
"homepage": "https://github.com/hpcc-systems/Visualization",
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "81822aa7c1ef1b1ad45ca4cf7769d13fdaf36fba"
|
|
60
60
|
}
|
package/src/ImageChar.tsx
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { Utility } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
-
|
|
4
|
-
interface ImageChar {
|
|
5
|
-
x?: number;
|
|
6
|
-
y?: number;
|
|
7
|
-
height?: number;
|
|
8
|
-
fill?: string;
|
|
9
|
-
stroke?: string;
|
|
10
|
-
fontFamily?: string;
|
|
11
|
-
char?: string;
|
|
12
|
-
yOffset?: number;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export const ImageChar: React.FunctionComponent<ImageChar> = ({
|
|
16
|
-
x,
|
|
17
|
-
y = 0,
|
|
18
|
-
height = 12,
|
|
19
|
-
fill,
|
|
20
|
-
stroke,
|
|
21
|
-
fontFamily = "FontAwesome",
|
|
22
|
-
char = ""
|
|
23
|
-
}) => {
|
|
24
|
-
|
|
25
|
-
const renderChar = React.useMemo(() => {
|
|
26
|
-
return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
|
|
27
|
-
}, [char, fontFamily]);
|
|
28
|
-
|
|
29
|
-
return <text
|
|
30
|
-
x={x}
|
|
31
|
-
y={y}
|
|
32
|
-
fill={fill}
|
|
33
|
-
stroke={stroke}
|
|
34
|
-
font-family={fontFamily}
|
|
35
|
-
font-size={`${height}px`}
|
|
36
|
-
dominant-baseline="middle"
|
|
37
|
-
style="text-anchor: middle;alignment-baseline:middle;"
|
|
38
|
-
>{renderChar}</text>;
|
|
39
|
-
};
|
|
1
|
+
import { Utility } from "@hpcc-js/common";
|
|
2
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
+
|
|
4
|
+
interface ImageChar {
|
|
5
|
+
x?: number;
|
|
6
|
+
y?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
fill?: string;
|
|
9
|
+
stroke?: string;
|
|
10
|
+
fontFamily?: string;
|
|
11
|
+
char?: string;
|
|
12
|
+
yOffset?: number;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const ImageChar: React.FunctionComponent<ImageChar> = ({
|
|
16
|
+
x,
|
|
17
|
+
y = 0,
|
|
18
|
+
height = 12,
|
|
19
|
+
fill,
|
|
20
|
+
stroke,
|
|
21
|
+
fontFamily = "FontAwesome",
|
|
22
|
+
char = ""
|
|
23
|
+
}) => {
|
|
24
|
+
|
|
25
|
+
const renderChar = React.useMemo(() => {
|
|
26
|
+
return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
|
|
27
|
+
}, [char, fontFamily]);
|
|
28
|
+
|
|
29
|
+
return <text
|
|
30
|
+
x={x}
|
|
31
|
+
y={y}
|
|
32
|
+
fill={fill}
|
|
33
|
+
stroke={stroke}
|
|
34
|
+
font-family={fontFamily}
|
|
35
|
+
font-size={`${height}px`}
|
|
36
|
+
dominant-baseline="middle"
|
|
37
|
+
style="text-anchor: middle;alignment-baseline:middle;"
|
|
38
|
+
>{renderChar}</text>;
|
|
39
|
+
};
|
package/src/__package__.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export const PKG_NAME = "@hpcc-js/react";
|
|
2
|
-
export const PKG_VERSION = "2.55.
|
|
3
|
-
export const BUILD_VERSION = "2.108.
|
|
1
|
+
export const PKG_NAME = "@hpcc-js/react";
|
|
2
|
+
export const PKG_VERSION = "2.55.4";
|
|
3
|
+
export const BUILD_VERSION = "2.108.8";
|
package/src/edge.tsx
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
2
|
-
import { VertexProps } from "./vertex";
|
|
3
|
-
import { Text } from "./text";
|
|
4
|
-
|
|
5
|
-
type Point = [number, number];
|
|
6
|
-
|
|
7
|
-
export interface EdgeProps<V extends VertexProps = VertexProps> {
|
|
8
|
-
id: string | number;
|
|
9
|
-
origData?: any;
|
|
10
|
-
source: V;
|
|
11
|
-
target: V;
|
|
12
|
-
label?: string;
|
|
13
|
-
labelPos?: Point;
|
|
14
|
-
weight?: number;
|
|
15
|
-
strokeDasharray?: string;
|
|
16
|
-
strokeWidth?: number;
|
|
17
|
-
stroke?: string;
|
|
18
|
-
fontFamily?: string;
|
|
19
|
-
labelFill?: string;
|
|
20
|
-
labelHeight?: number,
|
|
21
|
-
path?: string;
|
|
22
|
-
points?: Array<[number, number]>;
|
|
23
|
-
curveDepth?: number;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export const Edge: React.FunctionComponent<EdgeProps> = ({
|
|
27
|
-
label,
|
|
28
|
-
labelPos,
|
|
29
|
-
labelFill = "black",
|
|
30
|
-
labelHeight = 12,
|
|
31
|
-
path,
|
|
32
|
-
stroke,
|
|
33
|
-
strokeWidth,
|
|
34
|
-
strokeDasharray
|
|
35
|
-
}) => {
|
|
36
|
-
return <>
|
|
37
|
-
<path d={path} stroke={stroke} style={{ strokeWidth, strokeDasharray }}></path>
|
|
38
|
-
{
|
|
39
|
-
label && labelPos && labelPos.length === 2 ?
|
|
40
|
-
<g transform={`translate(${labelPos[0]} ${labelPos[1]})`}>
|
|
41
|
-
<Text text={label} fill={labelFill} height={labelHeight} />
|
|
42
|
-
</g> : undefined
|
|
43
|
-
}
|
|
44
|
-
</>;
|
|
45
|
-
};
|
|
1
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
2
|
+
import { VertexProps } from "./vertex";
|
|
3
|
+
import { Text } from "./text";
|
|
4
|
+
|
|
5
|
+
type Point = [number, number];
|
|
6
|
+
|
|
7
|
+
export interface EdgeProps<V extends VertexProps = VertexProps> {
|
|
8
|
+
id: string | number;
|
|
9
|
+
origData?: any;
|
|
10
|
+
source: V;
|
|
11
|
+
target: V;
|
|
12
|
+
label?: string;
|
|
13
|
+
labelPos?: Point;
|
|
14
|
+
weight?: number;
|
|
15
|
+
strokeDasharray?: string;
|
|
16
|
+
strokeWidth?: number;
|
|
17
|
+
stroke?: string;
|
|
18
|
+
fontFamily?: string;
|
|
19
|
+
labelFill?: string;
|
|
20
|
+
labelHeight?: number,
|
|
21
|
+
path?: string;
|
|
22
|
+
points?: Array<[number, number]>;
|
|
23
|
+
curveDepth?: number;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export const Edge: React.FunctionComponent<EdgeProps> = ({
|
|
27
|
+
label,
|
|
28
|
+
labelPos,
|
|
29
|
+
labelFill = "black",
|
|
30
|
+
labelHeight = 12,
|
|
31
|
+
path,
|
|
32
|
+
stroke,
|
|
33
|
+
strokeWidth,
|
|
34
|
+
strokeDasharray
|
|
35
|
+
}) => {
|
|
36
|
+
return <>
|
|
37
|
+
<path d={path} stroke={stroke} style={{ strokeWidth, strokeDasharray }}></path>
|
|
38
|
+
{
|
|
39
|
+
label && labelPos && labelPos.length === 2 ?
|
|
40
|
+
<g transform={`translate(${labelPos[0]} ${labelPos[1]})`}>
|
|
41
|
+
<Text text={label} fill={labelFill} height={labelHeight} />
|
|
42
|
+
</g> : undefined
|
|
43
|
+
}
|
|
44
|
+
</>;
|
|
45
|
+
};
|
package/src/icon.tsx
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
import { Palette } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
-
import { Image } from "./image";
|
|
4
|
-
import { ImageChar } from "./ImageChar";
|
|
5
|
-
import { Shape } from "./shape";
|
|
6
|
-
|
|
7
|
-
export interface Icon {
|
|
8
|
-
shape?: "circle" | "square" | "rectangle";
|
|
9
|
-
width?: number;
|
|
10
|
-
height?: number;
|
|
11
|
-
padding?: number;
|
|
12
|
-
fill?: string;
|
|
13
|
-
stroke?: string;
|
|
14
|
-
strokeWidth?: number;
|
|
15
|
-
imageUrl?: string;
|
|
16
|
-
imageFontFamily?: string;
|
|
17
|
-
imageChar?: string;
|
|
18
|
-
imageCharFill?: string;
|
|
19
|
-
xOffset?: number;
|
|
20
|
-
yOffset?: number;
|
|
21
|
-
cornerRadius?: number;
|
|
22
|
-
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const Icon: React.FunctionComponent<Icon> = ({
|
|
26
|
-
shape = "circle",
|
|
27
|
-
width,
|
|
28
|
-
height = 32,
|
|
29
|
-
fill,
|
|
30
|
-
stroke,
|
|
31
|
-
strokeWidth = 0,
|
|
32
|
-
imageUrl = "",
|
|
33
|
-
imageFontFamily = "FontAwesome",
|
|
34
|
-
imageChar = "",
|
|
35
|
-
imageCharFill = Palette.textColor(fill),
|
|
36
|
-
padding = height / 5,
|
|
37
|
-
xOffset = 0,
|
|
38
|
-
yOffset = 0,
|
|
39
|
-
cornerRadius,
|
|
40
|
-
shapeRendering
|
|
41
|
-
}) => {
|
|
42
|
-
return <>
|
|
43
|
-
<Shape
|
|
44
|
-
shape={shape}
|
|
45
|
-
width={width}
|
|
46
|
-
height={height}
|
|
47
|
-
fill={fill}
|
|
48
|
-
stroke={stroke}
|
|
49
|
-
strokeWidth={strokeWidth}
|
|
50
|
-
shapeRendering={shapeRendering}
|
|
51
|
-
cornerRadius={cornerRadius}
|
|
52
|
-
/>
|
|
53
|
-
{imageUrl ?
|
|
54
|
-
<Image
|
|
55
|
-
href={imageUrl}
|
|
56
|
-
x={xOffset}
|
|
57
|
-
y={yOffset}
|
|
58
|
-
height={height - padding}
|
|
59
|
-
></Image> :
|
|
60
|
-
<ImageChar
|
|
61
|
-
x={xOffset}
|
|
62
|
-
y={yOffset}
|
|
63
|
-
height={height - padding}
|
|
64
|
-
fontFamily={imageFontFamily}
|
|
65
|
-
char={imageChar}
|
|
66
|
-
fill={imageCharFill}
|
|
67
|
-
font-weight={400}
|
|
68
|
-
></ImageChar>
|
|
69
|
-
}
|
|
70
|
-
</>;
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export interface IconEx extends Icon {
|
|
74
|
-
id: string;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export interface Icons {
|
|
78
|
-
icons: IconEx[];
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
export const Icons: React.FunctionComponent<Icons> = ({
|
|
82
|
-
icons = []
|
|
83
|
-
}) => {
|
|
84
|
-
const IconComponents = icons.map(cat => {
|
|
85
|
-
return <g
|
|
86
|
-
key={cat.id}
|
|
87
|
-
id={cat.id}
|
|
88
|
-
>
|
|
89
|
-
<Icon
|
|
90
|
-
{...cat}
|
|
91
|
-
/>
|
|
92
|
-
</g>;
|
|
93
|
-
});
|
|
94
|
-
return <>{IconComponents}</>;
|
|
95
|
-
};
|
|
1
|
+
import { Palette } from "@hpcc-js/common";
|
|
2
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
+
import { Image } from "./image";
|
|
4
|
+
import { ImageChar } from "./ImageChar";
|
|
5
|
+
import { Shape } from "./shape";
|
|
6
|
+
|
|
7
|
+
export interface Icon {
|
|
8
|
+
shape?: "circle" | "square" | "rectangle";
|
|
9
|
+
width?: number;
|
|
10
|
+
height?: number;
|
|
11
|
+
padding?: number;
|
|
12
|
+
fill?: string;
|
|
13
|
+
stroke?: string;
|
|
14
|
+
strokeWidth?: number;
|
|
15
|
+
imageUrl?: string;
|
|
16
|
+
imageFontFamily?: string;
|
|
17
|
+
imageChar?: string;
|
|
18
|
+
imageCharFill?: string;
|
|
19
|
+
xOffset?: number;
|
|
20
|
+
yOffset?: number;
|
|
21
|
+
cornerRadius?: number;
|
|
22
|
+
shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const Icon: React.FunctionComponent<Icon> = ({
|
|
26
|
+
shape = "circle",
|
|
27
|
+
width,
|
|
28
|
+
height = 32,
|
|
29
|
+
fill,
|
|
30
|
+
stroke,
|
|
31
|
+
strokeWidth = 0,
|
|
32
|
+
imageUrl = "",
|
|
33
|
+
imageFontFamily = "FontAwesome",
|
|
34
|
+
imageChar = "",
|
|
35
|
+
imageCharFill = Palette.textColor(fill),
|
|
36
|
+
padding = height / 5,
|
|
37
|
+
xOffset = 0,
|
|
38
|
+
yOffset = 0,
|
|
39
|
+
cornerRadius,
|
|
40
|
+
shapeRendering
|
|
41
|
+
}) => {
|
|
42
|
+
return <>
|
|
43
|
+
<Shape
|
|
44
|
+
shape={shape}
|
|
45
|
+
width={width}
|
|
46
|
+
height={height}
|
|
47
|
+
fill={fill}
|
|
48
|
+
stroke={stroke}
|
|
49
|
+
strokeWidth={strokeWidth}
|
|
50
|
+
shapeRendering={shapeRendering}
|
|
51
|
+
cornerRadius={cornerRadius}
|
|
52
|
+
/>
|
|
53
|
+
{imageUrl ?
|
|
54
|
+
<Image
|
|
55
|
+
href={imageUrl}
|
|
56
|
+
x={xOffset}
|
|
57
|
+
y={yOffset}
|
|
58
|
+
height={height - padding}
|
|
59
|
+
></Image> :
|
|
60
|
+
<ImageChar
|
|
61
|
+
x={xOffset}
|
|
62
|
+
y={yOffset}
|
|
63
|
+
height={height - padding}
|
|
64
|
+
fontFamily={imageFontFamily}
|
|
65
|
+
char={imageChar}
|
|
66
|
+
fill={imageCharFill}
|
|
67
|
+
font-weight={400}
|
|
68
|
+
></ImageChar>
|
|
69
|
+
}
|
|
70
|
+
</>;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export interface IconEx extends Icon {
|
|
74
|
+
id: string;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export interface Icons {
|
|
78
|
+
icons: IconEx[];
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export const Icons: React.FunctionComponent<Icons> = ({
|
|
82
|
+
icons = []
|
|
83
|
+
}) => {
|
|
84
|
+
const IconComponents = icons.map(cat => {
|
|
85
|
+
return <g
|
|
86
|
+
key={cat.id}
|
|
87
|
+
id={cat.id}
|
|
88
|
+
>
|
|
89
|
+
<Icon
|
|
90
|
+
{...cat}
|
|
91
|
+
/>
|
|
92
|
+
</g>;
|
|
93
|
+
});
|
|
94
|
+
return <>{IconComponents}</>;
|
|
95
|
+
};
|
package/src/image.tsx
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
2
|
-
|
|
3
|
-
interface Image {
|
|
4
|
-
href: string;
|
|
5
|
-
x?: number;
|
|
6
|
-
y?: number;
|
|
7
|
-
height?: number;
|
|
8
|
-
yOffset?: number;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const Image: React.FunctionComponent<Image> = ({
|
|
12
|
-
href,
|
|
13
|
-
x,
|
|
14
|
-
y = 0,
|
|
15
|
-
height = 12
|
|
16
|
-
}) => {
|
|
17
|
-
|
|
18
|
-
return <image
|
|
19
|
-
href={href}
|
|
20
|
-
x={x - height / 2}
|
|
21
|
-
y={y - height / 2}
|
|
22
|
-
width={height}
|
|
23
|
-
height={height}
|
|
24
|
-
></image>;
|
|
25
|
-
};
|
|
1
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
2
|
+
|
|
3
|
+
interface Image {
|
|
4
|
+
href: string;
|
|
5
|
+
x?: number;
|
|
6
|
+
y?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
yOffset?: number;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const Image: React.FunctionComponent<Image> = ({
|
|
12
|
+
href,
|
|
13
|
+
x,
|
|
14
|
+
y = 0,
|
|
15
|
+
height = 12
|
|
16
|
+
}) => {
|
|
17
|
+
|
|
18
|
+
return <image
|
|
19
|
+
href={href}
|
|
20
|
+
x={x - height / 2}
|
|
21
|
+
y={y - height / 2}
|
|
22
|
+
width={height}
|
|
23
|
+
height={height}
|
|
24
|
+
></image>;
|
|
25
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
export * from "./__package__";
|
|
2
|
-
|
|
3
|
-
export * from "./edge";
|
|
4
|
-
export * from "./ImageChar";
|
|
5
|
-
export * from "./icon";
|
|
6
|
-
export * from "./render";
|
|
7
|
-
export * from "./shape";
|
|
8
|
-
export * from "./text";
|
|
9
|
-
export * from "./vertex";
|
|
10
|
-
export * from "./vertex2";
|
|
11
|
-
export * from "./vertex3";
|
|
12
|
-
export * from "./vertex4";
|
|
13
|
-
export * from "./subgraph";
|
|
14
|
-
|
|
15
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
16
|
-
export {
|
|
17
|
-
React
|
|
18
|
-
};
|
|
1
|
+
export * from "./__package__";
|
|
2
|
+
|
|
3
|
+
export * from "./edge";
|
|
4
|
+
export * from "./ImageChar";
|
|
5
|
+
export * from "./icon";
|
|
6
|
+
export * from "./render";
|
|
7
|
+
export * from "./shape";
|
|
8
|
+
export * from "./text";
|
|
9
|
+
export * from "./vertex";
|
|
10
|
+
export * from "./vertex2";
|
|
11
|
+
export * from "./vertex3";
|
|
12
|
+
export * from "./vertex4";
|
|
13
|
+
export * from "./subgraph";
|
|
14
|
+
|
|
15
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
16
|
+
export {
|
|
17
|
+
React
|
|
18
|
+
};
|
package/src/render.ts
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
import { HTMLWidget, publish, SVGWidget } from "@hpcc-js/common";
|
|
2
|
-
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
-
|
|
4
|
-
export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
|
|
5
|
-
React.render(React.h(C, props), parent, replaceNode);
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export interface FunctionComponent<T> extends React.FunctionComponent<T> {
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
|
|
12
|
-
React.render(React.h("svg", null, React.h(C, props)), parent, replaceNode);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export class HTMLAdapter<P> extends HTMLWidget {
|
|
16
|
-
|
|
17
|
-
@publish({}, "object", "Properties")
|
|
18
|
-
protected _props: P = {} as P;
|
|
19
|
-
props(): P;
|
|
20
|
-
props(_: Partial<P>): this;
|
|
21
|
-
props(_?: Partial<P>): P | this {
|
|
22
|
-
if (!arguments.length) return this._props;
|
|
23
|
-
this._props = { ...this._props, ..._ };
|
|
24
|
-
return this;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
prop<K extends keyof P>(_: K): P[K];
|
|
28
|
-
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
29
|
-
prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
|
|
30
|
-
if (arguments.length === 1) return this._props[_];
|
|
31
|
-
this._props[_] = value;
|
|
32
|
-
return this;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
constructor(protected readonly _component: React.FunctionComponent<P>) {
|
|
36
|
-
super();
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
update(domNode, element) {
|
|
40
|
-
super.update(domNode, element);
|
|
41
|
-
render(this._component, this._props, domNode);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export class SVGAdapter<P> extends SVGWidget {
|
|
46
|
-
|
|
47
|
-
@publish({}, "object", "Properties")
|
|
48
|
-
protected _props: P = {} as P;
|
|
49
|
-
props(): P;
|
|
50
|
-
props(_: Partial<P>): this;
|
|
51
|
-
props(_?: Partial<P>): P | this {
|
|
52
|
-
if (!arguments.length) return this._props;
|
|
53
|
-
this._props = { ...this._props, ..._ };
|
|
54
|
-
return this;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
prop<K extends keyof P>(_: K): P[K];
|
|
58
|
-
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
59
|
-
prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
|
|
60
|
-
if (arguments.length === 1) return this._props[_];
|
|
61
|
-
this._props[_] = value;
|
|
62
|
-
return this;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
constructor(protected readonly _component: React.FunctionComponent<P>) {
|
|
66
|
-
super();
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
update(domNode, element) {
|
|
70
|
-
super.update(domNode, element);
|
|
71
|
-
render(this._component, this._props, domNode);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
1
|
+
import { HTMLWidget, publish, SVGWidget } from "@hpcc-js/common";
|
|
2
|
+
import * as React from "@hpcc-js/preact-shim";
|
|
3
|
+
|
|
4
|
+
export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
|
|
5
|
+
React.render(React.h(C, props), parent, replaceNode);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export interface FunctionComponent<T> extends React.FunctionComponent<T> {
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
|
|
12
|
+
React.render(React.h("svg", null, React.h(C, props)), parent, replaceNode);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export class HTMLAdapter<P> extends HTMLWidget {
|
|
16
|
+
|
|
17
|
+
@publish({}, "object", "Properties")
|
|
18
|
+
protected _props: P = {} as P;
|
|
19
|
+
props(): P;
|
|
20
|
+
props(_: Partial<P>): this;
|
|
21
|
+
props(_?: Partial<P>): P | this {
|
|
22
|
+
if (!arguments.length) return this._props;
|
|
23
|
+
this._props = { ...this._props, ..._ };
|
|
24
|
+
return this;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
prop<K extends keyof P>(_: K): P[K];
|
|
28
|
+
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
29
|
+
prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
|
|
30
|
+
if (arguments.length === 1) return this._props[_];
|
|
31
|
+
this._props[_] = value;
|
|
32
|
+
return this;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
constructor(protected readonly _component: React.FunctionComponent<P>) {
|
|
36
|
+
super();
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
update(domNode, element) {
|
|
40
|
+
super.update(domNode, element);
|
|
41
|
+
render(this._component, this._props, domNode);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export class SVGAdapter<P> extends SVGWidget {
|
|
46
|
+
|
|
47
|
+
@publish({}, "object", "Properties")
|
|
48
|
+
protected _props: P = {} as P;
|
|
49
|
+
props(): P;
|
|
50
|
+
props(_: Partial<P>): this;
|
|
51
|
+
props(_?: Partial<P>): P | this {
|
|
52
|
+
if (!arguments.length) return this._props;
|
|
53
|
+
this._props = { ...this._props, ..._ };
|
|
54
|
+
return this;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
prop<K extends keyof P>(_: K): P[K];
|
|
58
|
+
prop<K extends keyof P>(_: K, value: P[K]): this;
|
|
59
|
+
prop<K extends keyof P>(_: K, value?: P[K]): this | P[K] {
|
|
60
|
+
if (arguments.length === 1) return this._props[_];
|
|
61
|
+
this._props[_] = value;
|
|
62
|
+
return this;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
constructor(protected readonly _component: React.FunctionComponent<P>) {
|
|
66
|
+
super();
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
update(domNode, element) {
|
|
70
|
+
super.update(domNode, element);
|
|
71
|
+
render(this._component, this._props, domNode);
|
|
72
|
+
}
|
|
73
|
+
}
|