@figspec/react
Advanced tools
Comparing version 1.0.0 to 1.0.1
@@ -1,6 +0,5 @@ | ||
/// <reference types="react" /> | ||
import "@figspec/components"; | ||
import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components"; | ||
import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components"; | ||
import * as React from "react"; | ||
declare type FigspecFrameViewerElementProps = Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>; | ||
export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps { | ||
interface FigspecFrameViewerEvents { | ||
onScaleChange?(ev: CustomEvent<{ | ||
@@ -17,5 +16,6 @@ scale: number; | ||
} | ||
export declare const FigspecFrameViewer: import("react").ForwardRefExoticComponent<FigspecFrameViewerProps & import("react").RefAttributes<FigspecFrameViewerElement>>; | ||
export declare type FigspecFrameViewerProps = FigspecFrameViewerElementProps & FigspecFrameViewerEvents; | ||
export declare const FigspecFrameViewer: React.ForwardRefExoticComponent<Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFrameViewerEvents & React.RefAttributes<FigspecFrameViewerElement>>; | ||
declare type FigspecFileViewerElementProps = Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>; | ||
export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { | ||
interface FigspecFileViewerEvents { | ||
onScaleChange?(ev: CustomEvent<{ | ||
@@ -32,3 +32,4 @@ scale: number; | ||
} | ||
export declare const FigspecFileViewer: import("react").ForwardRefExoticComponent<FigspecFileViewerProps & import("react").RefAttributes<FigspecFileViewerElement>>; | ||
export declare type FigspecFileViewerProps = FigspecFileViewerElementProps & FigspecFileViewerEvents; | ||
export declare const FigspecFileViewer: React.ForwardRefExoticComponent<Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFileViewerEvents & React.RefAttributes<FigspecFileViewerElement>>; | ||
export {}; |
"use strict"; | ||
var __rest = (this && this.__rest) || function (s, e) { | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
t[p[i]] = s[p[i]]; | ||
} | ||
return t; | ||
}; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
exports.FigspecFileViewer = exports.FigspecFrameViewer = void 0; | ||
require("@figspec/components"); | ||
const react_1 = require("react"); | ||
const bindEvent = (element, event, cb) => { | ||
const listener = ((ev) => { | ||
cb(ev); | ||
}); | ||
element.addEventListener(event, listener); | ||
return () => element.removeEventListener(event, listener); | ||
}; | ||
exports.FigspecFrameViewer = react_1.forwardRef((_a, ref) => { | ||
var { nodes, renderedImage, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["nodes", "renderedImage", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]); | ||
const [refNode, setNode] = react_1.useState(null); | ||
react_1.useImperativeHandle(ref, () => refNode, [refNode]); | ||
const refCb = react_1.useCallback((node) => { | ||
if (node) { | ||
setNode(node); | ||
node.nodes = nodes; | ||
node.renderedImage = renderedImage; | ||
} | ||
}, []); | ||
react_1.useEffect(() => { | ||
if (!refNode) | ||
return; | ||
refNode.nodes = nodes; | ||
refNode.renderedImage = renderedImage; | ||
}, [refNode, nodes, renderedImage]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onNodeSelect) | ||
return; | ||
return bindEvent(refNode, "nodeselect", onNodeSelect); | ||
}, [refNode, onNodeSelect]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onPositionChange) | ||
return; | ||
return bindEvent(refNode, "positionchange", onPositionChange); | ||
}, [refNode, onPositionChange]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onScaleChange) | ||
return; | ||
return bindEvent(refNode, "scalechange", onScaleChange); | ||
}, [refNode, onScaleChange]); | ||
return (react_1.createElement("figspec-frame-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest))); | ||
const components_1 = require("@figspec/components"); | ||
const react_1 = require("@lit-labs/react"); | ||
const React = require("react"); | ||
// 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. | ||
exports.FigspecFrameViewer = react_1.createComponent(React, "figspec-frame-viewer", components_1.FigspecFrameViewer, { | ||
onNodeSelect: "nodeselect", | ||
onPositionChange: "positionchange", | ||
onScaleChange: "scalechange", | ||
}); | ||
exports.FigspecFileViewer = react_1.forwardRef((_a, ref) => { | ||
var { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["documentNode", "renderedImages", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]); | ||
const [refNode, setNode] = react_1.useState(null); | ||
react_1.useImperativeHandle(ref, () => refNode, [refNode]); | ||
const refCb = react_1.useCallback((node) => { | ||
if (node) { | ||
setNode(node); | ||
node.documentNode = documentNode; | ||
node.renderedImages = renderedImages; | ||
} | ||
}, []); | ||
react_1.useEffect(() => { | ||
if (!refNode) | ||
return; | ||
refNode.documentNode = documentNode; | ||
refNode.renderedImages = renderedImages; | ||
}, [refNode, documentNode, renderedImages]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onNodeSelect) | ||
return; | ||
return bindEvent(refNode, "nodeselect", onNodeSelect); | ||
}, [refNode, onNodeSelect]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onPositionChange) | ||
return; | ||
return bindEvent(refNode, "positionchange", onPositionChange); | ||
}, [refNode, onPositionChange]); | ||
react_1.useEffect(() => { | ||
if (!refNode || !onScaleChange) | ||
return; | ||
return bindEvent(refNode, "scalechange", onScaleChange); | ||
}, [refNode, onScaleChange]); | ||
return (react_1.createElement("figspec-file-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest))); | ||
exports.FigspecFileViewer = react_1.createComponent(React, "figspec-file-viewer", components_1.FigspecFileViewer, { | ||
onNodeSelect: "nodeselect", | ||
onPositionChange: "positionchange", | ||
onScaleChange: "scalechange", | ||
}); |
@@ -1,6 +0,5 @@ | ||
/// <reference types="react" /> | ||
import "@figspec/components"; | ||
import type { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components"; | ||
import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement } from "@figspec/components"; | ||
import * as React from "react"; | ||
declare type FigspecFrameViewerElementProps = Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>; | ||
export interface FigspecFrameViewerProps extends FigspecFrameViewerElementProps { | ||
interface FigspecFrameViewerEvents { | ||
onScaleChange?(ev: CustomEvent<{ | ||
@@ -17,5 +16,6 @@ scale: number; | ||
} | ||
export declare const FigspecFrameViewer: import("react").ForwardRefExoticComponent<FigspecFrameViewerProps & import("react").RefAttributes<FigspecFrameViewerElement>>; | ||
export declare type FigspecFrameViewerProps = FigspecFrameViewerElementProps & FigspecFrameViewerEvents; | ||
export declare const FigspecFrameViewer: React.ForwardRefExoticComponent<Pick<FigspecFrameViewerElement, "nodes" | "renderedImage"> & Partial<Pick<FigspecFrameViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFrameViewerEvents & React.RefAttributes<FigspecFrameViewerElement>>; | ||
declare type FigspecFileViewerElementProps = Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "id" | "className" | "style" | "zoomSpeed" | "panSpeed" | "zoomMargin" | "link">>; | ||
export interface FigspecFileViewerProps extends FigspecFileViewerElementProps { | ||
interface FigspecFileViewerEvents { | ||
onScaleChange?(ev: CustomEvent<{ | ||
@@ -32,3 +32,4 @@ scale: number; | ||
} | ||
export declare const FigspecFileViewer: import("react").ForwardRefExoticComponent<FigspecFileViewerProps & import("react").RefAttributes<FigspecFileViewerElement>>; | ||
export declare type FigspecFileViewerProps = FigspecFileViewerElementProps & FigspecFileViewerEvents; | ||
export declare const FigspecFileViewer: React.ForwardRefExoticComponent<Pick<FigspecFileViewerElement, "documentNode" | "renderedImages"> & Partial<Pick<FigspecFileViewerElement, "link" | "style" | "className" | "id" | "zoomMargin" | "zoomSpeed" | "panSpeed">> & FigspecFileViewerEvents & React.RefAttributes<FigspecFileViewerElement>>; | ||
export {}; |
@@ -1,88 +0,18 @@ | ||
var __rest = (this && this.__rest) || function (s, e) { | ||
var t = {}; | ||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) | ||
t[p] = s[p]; | ||
if (s != null && typeof Object.getOwnPropertySymbols === "function") | ||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { | ||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) | ||
t[p[i]] = s[p[i]]; | ||
} | ||
return t; | ||
}; | ||
import "@figspec/components"; | ||
import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useState, } from "react"; | ||
const bindEvent = (element, event, cb) => { | ||
const listener = ((ev) => { | ||
cb(ev); | ||
}); | ||
element.addEventListener(event, listener); | ||
return () => element.removeEventListener(event, listener); | ||
}; | ||
export const FigspecFrameViewer = forwardRef((_a, ref) => { | ||
var { nodes, renderedImage, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["nodes", "renderedImage", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]); | ||
const [refNode, setNode] = useState(null); | ||
useImperativeHandle(ref, () => refNode, [refNode]); | ||
const refCb = useCallback((node) => { | ||
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 (createElement("figspec-frame-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest))); | ||
import { FigspecFrameViewer as FigspecFrameViewerElement, FigspecFileViewer as FigspecFileViewerElement, } from "@figspec/components"; | ||
import { createComponent } from "@lit-labs/react"; | ||
import * as React from "react"; | ||
// 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(React, "figspec-frame-viewer", FigspecFrameViewerElement, { | ||
onNodeSelect: "nodeselect", | ||
onPositionChange: "positionchange", | ||
onScaleChange: "scalechange", | ||
}); | ||
export const FigspecFileViewer = forwardRef((_a, ref) => { | ||
var { documentNode, renderedImages, className, panSpeed, zoomMargin, zoomSpeed, onNodeSelect, onPositionChange, onScaleChange } = _a, rest = __rest(_a, ["documentNode", "renderedImages", "className", "panSpeed", "zoomMargin", "zoomSpeed", "onNodeSelect", "onPositionChange", "onScaleChange"]); | ||
const [refNode, setNode] = useState(null); | ||
useImperativeHandle(ref, () => refNode, [refNode]); | ||
const refCb = useCallback((node) => { | ||
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 (createElement("figspec-file-viewer", Object.assign({ ref: refCb, class: className, "pan-speed": panSpeed, "zoom-margin": zoomMargin, "zoom-speed": zoomSpeed }, rest))); | ||
export const FigspecFileViewer = createComponent(React, "figspec-file-viewer", FigspecFileViewerElement, { | ||
onNodeSelect: "nodeselect", | ||
onPositionChange: "positionchange", | ||
onScaleChange: "scalechange", | ||
}); |
@@ -8,3 +8,3 @@ { | ||
], | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"contributors": [ | ||
@@ -26,7 +26,8 @@ { | ||
"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" | ||
}, | ||
@@ -38,6 +39,7 @@ "peerDependencies": { | ||
"@babel/core": "^7.12.3", | ||
"@storybook/addon-actions": "^6.0.26", | ||
"@storybook/addon-essentials": "^6.0.26", | ||
"@storybook/addon-links": "^6.0.26", | ||
"@storybook/react": "^6.0.26", | ||
"@babel/preset-typescript": "^7.16.7", | ||
"@storybook/addon-actions": "^6.4.0", | ||
"@storybook/addon-essentials": "^6.4.0", | ||
"@storybook/addon-links": "^6.4.0", | ||
"@storybook/react": "^6.4.0", | ||
"babel-loader": "^8.1.0", | ||
@@ -44,0 +46,0 @@ "react": "^16.14.0", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
9623
3
10
109
1
+ Added@lit-labs/react@^1.0.2
+ Added@lit-labs/react@1.2.1(transitive)