Changes
6 changed files (+112/-263)
-
-
@@ -22,11 +22,12 @@ "esm","cjs" ], "sideEffects": [ "./src/index.tsx", "./src/index.ts", "./{cjs,esm}/*/index.js" ], "dependencies": { "@figspec/components": "^1.0.0" "@figspec/components": "^1.0.0", "@lit-labs/react": "^1.0.2" }, "peerDependencies": { "react": "^16.14.0 || ^17.0.0"
-
-
-
@@ -0,0 +1,103 @@import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components"; import { createComponent } from "@lit-labs/react"; import * as React from "react"; import type { ForwardRefExoticComponent, RefAttributes } from "react"; // Frame viewer type FigspecFrameViewerElementProps = // Required props Pick< FigspecFrameViewerElement, // Element props "nodes" | "renderedImage" > & // Optional props Partial< Pick< FigspecFrameViewerElement, // HTML attributes | "id" | "className" | "style" // Element attributes (will be converted to kebab-case) | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link" > >; interface FigspecFrameViewerEvents { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } export type FigspecFrameViewerProps = FigspecFrameViewerElementProps & FigspecFrameViewerEvents; // NOTE: These exported components are casted with `as unknown as ...` in order not to break // typings accidentally. `as unknown` is required because a component created by // `createComponent` has `RefAttributes<unknown>`, which is incompatible with existing // type signature (and breaks ref typings). Also the explicit props definition prevents // every properties turns into optional. export const FigspecFrameViewer = (createComponent< FigspecFrameViewerElement, FigspecFrameViewerEvents >(React, "figspec-frame-viewer", FigspecFrameViewerElement, { onNodeSelect: "nodeselect", onPositionChange: "positionchange", onScaleChange: "scalechange", }) as unknown) as ForwardRefExoticComponent< FigspecFrameViewerProps & RefAttributes<FigspecFrameViewerElement> >; // File viewer type FigspecFileViewerElementProps = // Required props Pick< FigspecFileViewerElement, // Element props "documentNode" | "renderedImages" > & // Optional props Partial< Pick< FigspecFileViewerElement, // HTML attributes | "id" | "className" | "style" // Element attributes (will be converted to kebab-case) | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link" > >; interface FigspecFileViewerEvents { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } export type FigspecFileViewerProps = FigspecFileViewerElementProps & FigspecFileViewerEvents; export const FigspecFileViewer = (createComponent< FigspecFileViewerElement, FigspecFileViewerEvents >(React, "figspec-file-viewer", FigspecFileViewerElement, { onNodeSelect: "nodeselect", onPositionChange: "positionchange", onScaleChange: "scalechange", }) as unknown) as ForwardRefExoticComponent< FigspecFileViewerProps & RefAttributes<FigspecFileViewerElement> >;
-
-
packages/react/src/index.tsx (deleted)
-
@@ -1,252 +0,0 @@import "@figspec/components"; // This line is treated as type-only import even without the `type` keyword. // The keyword is here to indicate the line does not triggers any side-effects. import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components"; import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useState, } from "react"; const bindEvent = ( element: HTMLElement, event: string, cb: (ev: CustomEvent) => void ) => { const listener = ((ev: CustomEvent) => { cb(ev); }) as EventListener; element.addEventListener(event, listener); return () => element.removeEventListener(event, listener); }; // Frame viewer type FigspecFrameViewerElementProps = // Required props Pick< FigspecFrameViewerElement, // Element props "nodes" | "renderedImage" > & // Optional props Partial< Pick< FigspecFrameViewerElement, // HTML attributes | "id" | "className" | "style" // Element attributes (will be converted to kebab-case) | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link" > >; export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } type FigspecFrameViewerRef = FigspecFrameViewerElement | null | undefined; export const FigspecFrameViewer = forwardRef< FigspecFrameViewerElement, FigspecFrameViewerProps >( ( { nodes, renderedImage, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange, ...rest }, ref ) => { const [refNode, setNode] = useState<(FigspecFrameViewerElement & HTMLElement) | null>(null); useImperativeHandle<FigspecFrameViewerRef, FigspecFrameViewerRef>( ref, () => refNode, [refNode] ); const refCb = useCallback( (node: (FigspecFrameViewerElement & HTMLElement) | null) => { if (node) { setNode(node); node.nodes = nodes; node.renderedImage = renderedImage; } }, [] ); useEffect(() => { if (!refNode) return; refNode.nodes = nodes; refNode.renderedImage = renderedImage; }, [refNode, nodes, renderedImage]); useEffect(() => { if (!refNode || !onNodeSelect) return; return bindEvent(refNode, "nodeselect", onNodeSelect); }, [refNode, onNodeSelect]); useEffect(() => { if (!refNode || !onPositionChange) return; return bindEvent(refNode, "positionchange", onPositionChange); }, [refNode, onPositionChange]); useEffect(() => { if (!refNode || !onScaleChange) return; return bindEvent(refNode, "scalechange", onScaleChange); }, [refNode, onScaleChange]); return ( <figspec-frame-viewer ref={refCb} class={className} pan-speed={panSpeed} zoom-margin={zoomMargin} zoom-speed={zoomSpeed} {...rest} /> ); } ); // File viewer type FigspecFileViewerElementProps = // Required props Pick< FigspecFileViewerElement, // Element props "documentNode" | "renderedImages" > & // Optional props Partial< Pick< FigspecFileViewerElement, // HTML attributes | "id" | "className" | "style" // Element attributes (will be converted to kebab-case) | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link" > >; export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { onScaleChange?(ev: CustomEvent<{ scale: number }>): void; onPositionChange?(ev: CustomEvent<{ x: number; y: number }>): void; onNodeSelect?(ev: CustomEvent<{ selectedNode: unknown | null }>): void; } type FigspecFileViewerRef = FigspecFileViewerElement | null | undefined; export const FigspecFileViewer = forwardRef< FigspecFileViewerElement, FigspecFileViewerProps >( ( { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange, ...rest }, ref ) => { const [refNode, setNode] = useState<(FigspecFileViewerElement & HTMLElement) | null>(null); useImperativeHandle<FigspecFileViewerRef, FigspecFileViewerRef>( ref, () => refNode, [refNode] ); const refCb = useCallback( (node: (FigspecFileViewerElement & HTMLElement) | null) => { if (node) { setNode(node); node.documentNode = documentNode; node.renderedImages = renderedImages; } }, [] ); useEffect(() => { if (!refNode) return; refNode.documentNode = documentNode; refNode.renderedImages = renderedImages; }, [refNode, documentNode, renderedImages]); useEffect(() => { if (!refNode || !onNodeSelect) return; return bindEvent(refNode, "nodeselect", onNodeSelect); }, [refNode, onNodeSelect]); useEffect(() => { if (!refNode || !onPositionChange) return; return bindEvent(refNode, "positionchange", onPositionChange); }, [refNode, onPositionChange]); useEffect(() => { if (!refNode || !onScaleChange) return; return bindEvent(refNode, "scalechange", onScaleChange); }, [refNode, onScaleChange]); return ( <figspec-file-viewer ref={refCb} class={className} pan-speed={panSpeed} zoom-margin={zoomMargin} zoom-speed={zoomSpeed} {...rest} /> ); } );
-
-
packages/react/src/types.d.ts (deleted)
-
@@ -1,6 +0,0 @@declare namespace JSX { interface IntrinsicElements { "figspec-frame-viewer": any; "figspec-file-viewer": any; } }
-
-
-
@@ -3,11 +3,9 @@ "compilerOptions": {"target": "ES2015", "module": "ESNext", "declaration": true, "jsx": "react", "jsxFactory": "createElement", "lib": ["ESNext", "DOM"], "strict": true, "moduleResolution": "Node" }, "include": ["./src/**/*.ts", "./src/**/*.tsx"] "include": ["./src/**/*.ts"] }
-
-
-
@@ -1756,6 +1756,11 @@ "@types/node" "*""@types/yargs" "^15.0.0" chalk "^4.0.0" "@lit-labs/react@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.0.2.tgz#a9059c39d40a1598deb17fc57dd9ed7f924165fe" integrity sha512-jfcHoNsdbxA3vHTnvm4Q08skWFFYvpXRdPZ7Z31oC3lxeKfLR5WGQldr/fTF1Q0gKY3zusLsvX5UiSurV/F+og== "@lit/reactive-element@^1.1.0": version "1.2.2" resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.2.2.tgz#bfa5539dfe4776899c3e3ba11e0e10224aeb9ff7"
-