@hpcc-js/react 2.54.0 → 3.1.0

package/src/vertex.tsx

@@ -1,15 +1,15 @@
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { TextBox } from "./text";
+import React from "react";
+import { Icon, IconProps } from "./icon.tsx";
+import { TextBox } from "./text.tsx";
 
-export interface Annotations {
+export interface AnnotationsProps {
     x: number;
     y: number;
     annotationIDs: string[];
     stepSize?: number;
 }
 
-export const Annotations: React.FunctionComponent<Annotations> = ({
+export const Annotations: React.FunctionComponent<AnnotationsProps> = ({
     x,
     y,
     annotationIDs = [],
@@ -35,7 +35,7 @@ export interface VertexProps {
     text: string;
     textHeight?: number;
     textPadding?: number;
-    icon?: Icon;
+    icon?: IconProps;
     annotationsHeight?: number;
     annotationIDs?: string[];
     textFill?: string;
@@ -52,7 +52,7 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
     text = "",
     textHeight = 12,
     textPadding = 4,
-    icon = {},
+    icon = {} as IconProps,
     annotationsHeight = 12,
     annotationIDs = [],
     textFill,
@@ -63,19 +63,22 @@ export const Vertex: React.FunctionComponent<VertexProps> = ({
     showLabel = true,
     scale = 1
 }) => {
-    const [textBoxWidth, setTextBoxWidthUpdate] = React.useState(0);
-    const [textBoxHeight, setTextBoxHeightUpdate] = React.useState(0);
-
-    React.useEffect(() => {
-        onSizeUpdate && onSizeUpdate({ width: 0, height: 0 });
-    }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
-
     icon = {
         imageChar: "fa-question",
         height: 32,
         fill: "transparent",
         ...icon
     };
+
+    const [textBoxWidth, setTextBoxWidthUpdate] = React.useState(0);
+    const [textBoxHeight, setTextBoxHeightUpdate] = React.useState(0);
+
+    React.useEffect(() => {
+        if (onSizeUpdate) {
+            onSizeUpdate({ width: 0, height: 0 });
+        }
+    }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
+
     let width = textBoxWidth;
     width += 4;
     let offsetY = -(icon.height * 2 / 6 + textHeight + 8) / 2;

package/src/vertex2.tsx

@@ -1,15 +1,15 @@
+import React from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { TextBox } from "./text";
-import { Annotations, VertexProps } from "./vertex";
+import { Icon, IconProps } from "./icon.tsx";
+import { TextBox } from "./text.tsx";
+import { Annotations, VertexProps } from "./vertex.tsx";
 
 export const Vertex2: React.FunctionComponent<VertexProps> = ({
     categoryID = "",
     text = "",
     textHeight = 12,
     textPadding = 4,
-    icon = {},
+    icon = {} as IconProps,
     textFill = "black",
     textboxFill = "white",
     textboxStroke = "black",

package/src/vertex3.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { TextBox } from "./text";
-import { VertexProps } from "./vertex";
+import { Icon, IconProps } from "./icon.tsx";
+import { TextBox, TextBoxProps } from "./text.tsx";
+import { VertexProps } from "./vertex.tsx";
 
 export interface Vertex3Props extends VertexProps {
     id: string;
@@ -12,8 +12,8 @@ export interface Vertex3Props extends VertexProps {
     textHeight?: number;
     textPadding?: number;
     textboxStrokeWidth?: number;
-    icon?: Icon;
-    annotations?: Icon[];
+    icon?: IconProps;
+    annotations?: IconProps[];
     annotationsHeight?: number;
     annotationGutter?: number;
     textFill?: string;
@@ -21,11 +21,11 @@ export interface Vertex3Props extends VertexProps {
     textboxStroke?: string;
     textFontFamily?: string;
     cornerRadius?: number;
-    subText?: TextBox;
+    subText?: TextBoxProps;
     onSizeUpdate?: (size: { width: number, height: number }) => void;
     showLabel?: boolean;
     noLabelRadius?: number;
-    expansionIcon?: Icon;
+    expansionIcon?: IconProps;
     scale?: number;
 }
 
@@ -41,8 +41,8 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
     annotationGutter = 2,
     annotations = [],
     cornerRadius = 3,
-    icon = {},
-    subText = { text: "" },
+    icon = {} as IconProps,
+    subText = { text: "" } as TextBoxProps,
     showLabel = true,
     noLabelRadius = 5,
     expansionIcon,
@@ -98,7 +98,7 @@ export const Vertex3: React.FunctionComponent<Vertex3Props> = ({
         fullAnnotationWidth += annoShapeWidth + annotationGutter;
         const annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
         annotationArr.push(
-            <g key={idx} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
+            <g key={idx} className="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
                 <Icon
                     {...anno}
                     shape="square"

package/src/vertex4.tsx

@@ -1,11 +1,10 @@
-/* eslint-disable no-debugger, no-console */
+import React from "react";
 import { Utility } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { TextBox } from "./text";
-import { VertexProps } from "./vertex";
+import { Icon, IconProps } from "./icon.tsx";
+import { TextBox, TextBoxProps } from "./text.tsx";
+import { VertexProps } from "./vertex.tsx";
 
-export interface IVertex4Annotation extends Icon {
+export interface IVertex4Annotation extends IconProps {
     shapeOffsetX?: number;
     shapeOffsetY?: number;
 }
@@ -47,8 +46,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     annotations = [],
     iconAnnotations = [],
     cornerRadius = 3,
-    icon = {},
-    subText = {},
+    icon = {} as IconProps,
+    subText = {} as TextBoxProps,
     showLabel = true,
     noLabelRadius = 5,
 
@@ -99,7 +98,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     const textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
 
     const textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
-    const annoWidthArr = annotations.map((anno, i) => {
+    const annoWidthArr = annotations.map((anno) => {
         return Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
     });
     const annotationArr = [];
@@ -110,7 +109,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
         const annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
         annotationArr.push(
-            <g key={i} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
+            <g key={i} className="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
                 <Icon
                     {...anno}
                     shape="rectangle"
@@ -133,7 +132,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         const x = anno.shapeOffsetX;
         const y = anno.shapeOffsetY;
         iconAnnotationArr.push(
-            <g key={i} class="vertex3-iconAnno" data-click={"icon-annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
+            <g key={i} className="vertex3-iconAnno" data-click={"icon-annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
                 <Icon
                     {...anno}
                     shape={anno.shape ?? "square"}

package/types/ImageChar.d.ts

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-interface ImageChar {
+import React from "react";
+export interface ImageCharProps {
     x?: number;
     y?: number;
     height?: number;
@@ -8,7 +8,6 @@ interface ImageChar {
     fontFamily?: string;
     char?: string;
     yOffset?: number;
+    fontWeight?: number;
 }
-export declare const ImageChar: React.FunctionComponent<ImageChar>;
-export {};
-//# sourceMappingURL=ImageChar.d.ts.map
+export declare const ImageChar: React.FunctionComponent<ImageCharProps>;

package/types/__package__.d.ts

@@ -1,4 +1,3 @@
 export declare const PKG_NAME = "@hpcc-js/react";
-export declare const PKG_VERSION = "2.54.0";
-export declare const BUILD_VERSION = "2.106.0";
-//# sourceMappingURL=__package__.d.ts.map
+export declare const PKG_VERSION = "3.1.0";
+export declare const BUILD_VERSION = "3.2.0";

package/types/edge.d.ts

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-import { VertexProps } from "./vertex";
+import React from "react";
+import { VertexProps } from "./vertex.tsx";
 type Point = [number, number];
 export interface EdgeProps<V extends VertexProps = VertexProps> {
     id: string | number;
@@ -21,4 +21,3 @@ export interface EdgeProps<V extends VertexProps = VertexProps> {
 }
 export declare const Edge: React.FunctionComponent<EdgeProps>;
 export {};
-//# sourceMappingURL=edge.d.ts.map

package/types/icon.d.ts

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-export interface Icon {
+import React from "react";
+export interface IconProps {
     shape?: "circle" | "square" | "rectangle";
     width?: number;
     height?: number;
@@ -16,12 +16,11 @@ export interface Icon {
     cornerRadius?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Icon: React.FunctionComponent<Icon>;
-export interface IconEx extends Icon {
+export declare const Icon: React.FunctionComponent<IconProps>;
+export interface IconEx extends IconProps {
     id: string;
 }
-export interface Icons {
+export interface IconsProps {
     icons: IconEx[];
 }
-export declare const Icons: React.FunctionComponent<Icons>;
-//# sourceMappingURL=icon.d.ts.map
+export declare const Icons: React.FunctionComponent<IconsProps>;

package/types/image.d.ts

@@ -1,11 +1,10 @@
-import * as React from "@hpcc-js/preact-shim";
-interface Image {
+import React from "react";
+interface ImageProps {
     href: string;
     x?: number;
     y?: number;
     height?: number;
     yOffset?: number;
 }
-export declare const Image: React.FunctionComponent<Image>;
+export declare const Image: React.FunctionComponent<ImageProps>;
 export {};
-//# sourceMappingURL=image.d.ts.map

package/types/index.d.ts

@@ -1,15 +1,16 @@
-export * from "./__package__";
-export * from "./edge";
-export * from "./ImageChar";
-export * from "./icon";
-export * from "./render";
-export * from "./shape";
-export * from "./text";
-export * from "./vertex";
-export * from "./vertex2";
-export * from "./vertex3";
-export * from "./vertex4";
-export * from "./subgraph";
-import * as React from "@hpcc-js/preact-shim";
+export * from "./__package__.ts";
+export * from "./edge.tsx";
+export * from "./ImageChar.tsx";
+export * from "./icon.tsx";
+export * from "./image.tsx";
+export * from "./render.ts";
+export * from "./shape.tsx";
+export * from "./span.tsx";
+export * from "./text.tsx";
+export * from "./vertex.tsx";
+export * from "./vertex2.tsx";
+export * from "./vertex3.tsx";
+export * from "./vertex4.tsx";
+export * from "./subgraph.tsx";
+import React from "react";
 export { React };
-//# sourceMappingURL=index.d.ts.map

package/types/render.d.ts

@@ -1,27 +1,35 @@
+import React from "react";
+import { Root } from "react-dom/client";
 import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
-import * as React from "@hpcc-js/preact-shim";
-export declare function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
-export interface FunctionComponent<T> extends React.FunctionComponent<T> {
-}
-export declare function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text): void;
+export declare function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment): void;
 export declare class HTMLAdapter<P> extends HTMLWidget {
     protected readonly _component: React.FunctionComponent<P>;
-    protected _props: P;
+    protected _root: Root;
     props(): P;
     props(_: Partial<P>): this;
     prop<K extends keyof P>(_: K): P[K];
     prop<K extends keyof P>(_: K, value: P[K]): this;
     constructor(_component: React.FunctionComponent<P>);
+    enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
+    exit(domNode: any, element: any): void;
+}
+export interface HTMLAdapter<P> {
+    _props: P;
 }
 export declare class SVGAdapter<P> extends SVGWidget {
     protected readonly _component: React.FunctionComponent<P>;
-    protected _props: P;
+    protected _root: Root;
     props(): P;
     props(_: Partial<P>): this;
     prop<K extends keyof P>(_: K): P[K];
     prop<K extends keyof P>(_: K, value: P[K]): this;
     constructor(_component: React.FunctionComponent<P>);
+    _c2: React.ReactElement;
+    enter(domNode: any, element: any): void;
     update(domNode: any, element: any): void;
+    exit(domNode: any, element: any): void;
+}
+export interface SVGAdapter<P> {
+    _props: P;
 }
-//# sourceMappingURL=render.d.ts.map

package/types/shape.d.ts

@@ -1,13 +1,13 @@
-import * as React from "@hpcc-js/preact-shim";
-interface Circle {
+import React from "react";
+interface CircleProps {
     radius?: number;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Circle: React.FunctionComponent<Circle>;
-interface Square {
+export declare const Circle: React.FunctionComponent<CircleProps>;
+interface SquareProps {
     radius?: number;
     cornerRadius?: number;
     fill?: string;
@@ -15,8 +15,8 @@ interface Square {
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Square: React.FunctionComponent<Square>;
-interface Rectangle {
+export declare const Square: React.FunctionComponent<SquareProps>;
+interface RectangleProps {
     width?: number;
     height?: number;
     cornerRadius?: number;
@@ -25,8 +25,8 @@ interface Rectangle {
     strokeWidth?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
 }
-export declare const Rectangle: React.FunctionComponent<Rectangle>;
-interface Shape {
+export declare const Rectangle: React.FunctionComponent<RectangleProps>;
+interface ShapeProps {
     shape?: "circle" | "square" | "rectangle";
     height?: number;
     width?: number;
@@ -36,6 +36,5 @@ interface Shape {
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
     cornerRadius?: number;
 }
-export declare const Shape: React.FunctionComponent<Shape>;
+export declare const Shape: React.FunctionComponent<ShapeProps>;
 export {};
-//# sourceMappingURL=shape.d.ts.map

package/types/span.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface SpanProps {
+    text: string;
+}
+export declare const Span: React.FunctionComponent<SpanProps>;

package/types/subgraph.d.ts

@@ -1,4 +1,4 @@
-import * as React from "@hpcc-js/preact-shim";
+import React from "react";
 export interface SubgraphProps {
     id: string;
     origData?: any;
@@ -11,4 +11,3 @@ export interface SubgraphProps {
     fontFamily?: string;
 }
 export declare const Subgraph: React.FunctionComponent<SubgraphProps>;
-//# sourceMappingURL=subgraph.d.ts.map

package/types/text.d.ts

@@ -1,5 +1,5 @@
-import * as React from "@hpcc-js/preact-shim";
-interface TextLine {
+import React from "react";
+export interface TextLineProps {
     text: string;
     height?: number;
     anchor?: string;
@@ -7,8 +7,8 @@ interface TextLine {
     fontFamily?: string;
     fill?: string;
 }
-export declare const TextLine: React.FunctionComponent<TextLine>;
-interface Text {
+export declare const TextLine: React.FunctionComponent<TextLineProps>;
+export interface TextProps {
     text: string;
     height?: number;
     fontFamily?: string;
@@ -18,8 +18,8 @@ interface Text {
         height: number;
     }) => void;
 }
-export declare const Text: React.FunctionComponent<Text>;
-export interface TextBox {
+export declare const Text: React.FunctionComponent<TextProps>;
+export interface TextBoxProps {
     text: string;
     height?: number;
     fontFamily?: string;
@@ -35,17 +35,15 @@ export interface TextBox {
         height: number;
     }) => void;
 }
-export declare const TextBox: React.FunctionComponent<TextBox>;
-export interface LabelledRect extends TextBox {
+export declare const TextBox: React.FunctionComponent<TextBoxProps>;
+export interface LabelledRect extends TextBoxProps {
     width?: number;
     fontSize?: number;
 }
+export declare const LabelledRect: React.FunctionComponent<LabelledRect>;
 export interface IconLabelledRect extends LabelledRect {
     icon: string;
-    iconFontFamily: string;
-    iconFontSize: number;
+    iconFontFamily?: string;
+    iconFontSize?: number;
 }
-export declare const LabelledRect: React.FunctionComponent<LabelledRect>;
 export declare const IconLabelledRect: React.FunctionComponent<IconLabelledRect>;
-export {};
-//# sourceMappingURL=text.d.ts.map

package/types/vertex.d.ts

@@ -1,12 +1,12 @@
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-export interface Annotations {
+import React from "react";
+import { IconProps } from "./icon.tsx";
+export interface AnnotationsProps {
     x: number;
     y: number;
     annotationIDs: string[];
     stepSize?: number;
 }
-export declare const Annotations: React.FunctionComponent<Annotations>;
+export declare const Annotations: React.FunctionComponent<AnnotationsProps>;
 export interface VertexProps {
     id: string | number;
     origData?: any;
@@ -15,7 +15,7 @@ export interface VertexProps {
     text: string;
     textHeight?: number;
     textPadding?: number;
-    icon?: Icon;
+    icon?: IconProps;
     annotationsHeight?: number;
     annotationIDs?: string[];
     textFill?: string;
@@ -30,4 +30,3 @@ export interface VertexProps {
     scale?: number;
 }
 export declare const Vertex: React.FunctionComponent<VertexProps>;
-//# sourceMappingURL=vertex.d.ts.map

package/types/vertex2.d.ts

@@ -1,4 +1,3 @@
-import * as React from "@hpcc-js/preact-shim";
-import { VertexProps } from "./vertex";
+import React from "react";
+import { VertexProps } from "./vertex.tsx";
 export declare const Vertex2: React.FunctionComponent<VertexProps>;
-//# sourceMappingURL=vertex2.d.ts.map

package/types/vertex3.d.ts

@@ -1,7 +1,7 @@
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { TextBox } from "./text";
-import { VertexProps } from "./vertex";
+import React from "react";
+import { IconProps } from "./icon.tsx";
+import { TextBoxProps } from "./text.tsx";
+import { VertexProps } from "./vertex.tsx";
 export interface Vertex3Props extends VertexProps {
     id: string;
     origData?: any;
@@ -10,8 +10,8 @@ export interface Vertex3Props extends VertexProps {
     textHeight?: number;
     textPadding?: number;
     textboxStrokeWidth?: number;
-    icon?: Icon;
-    annotations?: Icon[];
+    icon?: IconProps;
+    annotations?: IconProps[];
     annotationsHeight?: number;
     annotationGutter?: number;
     textFill?: string;
@@ -19,16 +19,15 @@ export interface Vertex3Props extends VertexProps {
     textboxStroke?: string;
     textFontFamily?: string;
     cornerRadius?: number;
-    subText?: TextBox;
+    subText?: TextBoxProps;
     onSizeUpdate?: (size: {
         width: number;
         height: number;
     }) => void;
     showLabel?: boolean;
     noLabelRadius?: number;
-    expansionIcon?: Icon;
+    expansionIcon?: IconProps;
     scale?: number;
 }
 export declare const Vertex3: React.FunctionComponent<Vertex3Props>;
 export declare const CentroidVertex3: React.FunctionComponent<Vertex3Props>;
-//# sourceMappingURL=vertex3.d.ts.map

package/types/vertex4.d.ts

@@ -1,7 +1,7 @@
-import * as React from "@hpcc-js/preact-shim";
-import { Icon } from "./icon";
-import { VertexProps } from "./vertex";
-export interface IVertex4Annotation extends Icon {
+import React from "react";
+import { IconProps } from "./icon.tsx";
+import { VertexProps } from "./vertex.tsx";
+export interface IVertex4Annotation extends IconProps {
     shapeOffsetX?: number;
     shapeOffsetY?: number;
 }
@@ -29,4 +29,3 @@ export interface IVertex4 extends VertexProps {
 }
 export declare const Vertex4: React.FunctionComponent<IVertex4>;
 export declare const CentroidVertex4: React.FunctionComponent<IVertex4>;
-//# sourceMappingURL=vertex4.d.ts.map