Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-figma

Package Overview
Dependencies
Maintainers
2
Versions
113
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-figma - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

hooks/useNodeIdCallback.d.ts

2

components/component/Component.js

@@ -25,5 +25,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Component = function (props) {
var nodeRef = props.nodeRef || React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -30,0 +32,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -21,5 +21,7 @@ "use strict";

var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var ComponentSet = function (props) {
var nodeRef = props.nodeRef || React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -26,0 +28,0 @@ var componentProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), props, { style: style });

4

components/component/createComponent.d.ts

@@ -5,4 +5,4 @@ import * as React from 'react';

export declare const createComponent: () => {
Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fills" | "backgrounds" | "fillStyleId" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "effectStyleId" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "fills" | "backgrounds" | "fillStyleId" | "strokeStyleId" | "strokes" | "strokeWeight" | "strokeAlign" | "strokeCap" | "strokeJoin" | "dashPattern" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "cornerRadius" | "cornerSmoothing" | "isMask" | "effects" | "effectStyleId" | "topLeftRadius" | "topRightRadius" | "bottomLeftRadius" | "bottomRightRadius" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "clipsContent" | "guides" | "layoutGrids" | "gridStyleId" | "description" | "documentationLinks">>;
Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "name" | "children" | "layoutMode" | "layoutAlign" | "primaryAxisAlignItems" | "counterAxisAlignItems" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "constraints" | "pluginData" | "sharedPluginData" | "onNodeId" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutGrow" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "primaryAxisSizingMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "overrides" | "detach">>;
};

@@ -59,2 +59,3 @@ "use strict";

var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var getComponentByType = function (type) {

@@ -97,2 +98,3 @@ var componentName = type.charAt(0) + type.substring(1).toLowerCase();

useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -99,0 +101,0 @@ var componentProps = __assign({}, transformLayoutStyleProperties_1.transformLayoutStyleProperties(style), props, { style: style });

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Ellipse = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -37,2 +37,3 @@ "use strict";

var useInheritStyle_1 = require("../../hooks/useInheritStyle");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
exports.FRAME_PRESETS = {

@@ -208,2 +209,3 @@ iPhoneX: {

useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, StyleSheet_1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -210,0 +212,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Group = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Line = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -25,5 +25,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Rectangle = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -30,0 +32,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Star = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Svg = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, StyleSheet_1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

@@ -26,2 +26,3 @@ "use strict";

var useInheritStyle_1 = require("../../hooks/useInheritStyle");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var normalizeTextNodeChidren = function (children) {

@@ -33,2 +34,3 @@ return Array.isArray(children) ? children.join('') : children;

useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var inheritedStyle = useInheritStyle_1.useInheritStyle();

@@ -35,0 +37,0 @@ var flattenOriginalStyle = __1.StyleSheet.flatten(props.style);

@@ -24,5 +24,7 @@ "use strict";

var useImageHash_1 = require("../../hooks/useImageHash");
var useNodeIdCallback_1 = require("../../hooks/useNodeIdCallback");
var Vector = function (props) {
var nodeRef = React.useRef();
useSelectionChange_1.useSelectionChange(nodeRef, props);
useNodeIdCallback_1.useNodeIdCallback(nodeRef, props.onNodeId);
var style = __assign({}, __1.StyleSheet.flatten(props.style), transformAutoLayoutToYoga_1.transformAutoLayoutToYoga(props));

@@ -29,0 +31,0 @@ var imageHash = useImageHash_1.useImageHash(style.backgroundImage);

{
"name": "react-figma",
"version": "0.16.0",
"version": "0.17.0",
"description": "Render React components to Figma",

@@ -40,3 +40,3 @@ "scripts": {

"devDependencies": {
"@figma/plugin-typings": "1.23",
"@figma/plugin-typings": "1.24",
"@types/jest": "^24.0.18",

@@ -43,0 +43,0 @@ "@types/node": "^12.7.8",

@@ -28,3 +28,4 @@ "use strict";

'lineHeight',
'textStyleId'
'textStyleId',
'hyperlink'
], {

@@ -41,3 +42,4 @@ characters: '',

letterSpacing: { value: 0, unit: 'PIXELS' },
lineHeight: { unit: 'AUTO' }
lineHeight: { unit: 'AUTO' },
hyperlink: null
});

@@ -44,0 +46,0 @@ var defaultFont = { family: 'Roboto', style: 'Regular' };

@@ -48,2 +48,3 @@ /// <reference types="plugin-typings" />

export declare const $updateYogaReactId: Subject<unknown>;
export declare const $bindReactIdWithNodeId: Subject<[string, string]>;
export declare const uiApi: Readonly<{

@@ -53,2 +54,3 @@ currentPageChange: (reactId: any) => Promise<void>;

updateYogaNode: (reactId: any) => Promise<void>;
bindReactIdWithNode: (reactId: any, nodeId: any) => Promise<void>;
}>;

@@ -158,2 +158,3 @@ "use strict";

cache[tempNode.reactId] = instance;
exports.uiApi.bindReactIdWithNode(tempNode.reactId, instance.id);
},

@@ -281,2 +282,3 @@ appendToContainer: function (_parentNode, _childNode) {

exports.$updateYogaReactId = new rxjs_1.Subject();
exports.$bindReactIdWithNodeId = new rxjs_1.Subject();
// those methods will be executed in the Figma UI,

@@ -293,2 +295,5 @@ // regardless of where they are called from

exports.$updateYogaReactId.next(reactId);
},
bindReactIdWithNode: function (reactId, nodeId) {
exports.$bindReactIdWithNodeId.next([reactId, nodeId]);
}

@@ -295,0 +300,0 @@ }, {

@@ -21,2 +21,3 @@ /// <reference types="plugin-typings" />

};
onNodeId?: (nodeId: string) => void;
}

@@ -88,2 +89,3 @@ export interface LayoutProps {

textStyleId?: string;
hyperlink?: HyperlinkTarget;
}

@@ -154,2 +156,6 @@ export interface VectorNodeProps {

}
export interface HyperlinkTarget {
type: 'URL' | 'NODE';
value: string;
}
export {};

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc