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

react-figma

Package Overview
Dependencies
Maintainers
1
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.1.4 to 0.1.5

helpers/areEqualShallow.d.ts

3

components/component/Component.d.ts

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface ComponentProps extends DefaultContainerProps, SelectionEventProps, AutoLayoutProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface ComponentProps extends DefaultContainerProps, SelectionEventProps, AutoLayoutProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties>;

@@ -9,0 +10,0 @@ nodeRef?: any;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Component = function (props) {

@@ -28,4 +29,5 @@ var nodeRef = props.nodeRef || React.useRef();

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, componentProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("component", __assign({}, componentProps, yogaChildProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Component.js.map

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

export declare const createComponent: () => {
Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints">>;
Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints" | "overrides">>;
Component: React.FunctionComponent<Pick<ComponentProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints">>;
Instance: React.FunctionComponent<Pick<InstanceProps, "width" | "height" | "visible" | "opacity" | "blendMode" | "backgrounds" | "children" | "style" | "isMask" | "effects" | "effectStyleId" | "locked" | "name" | "pluginData" | "sharedPluginData" | "relativeTransform" | "x" | "y" | "rotation" | "isWithoutConstraints" | "layoutAlign" | "exportSettings" | "exportAsyncSettings" | "exportAsyncCallback" | "onSelectionEnter" | "onSelectionLeave" | "onLayout" | "layoutMode" | "counterAxisSizingMode" | "horizontalPadding" | "verticalPadding" | "itemSpacing" | "constraints" | "overrides">>;
};

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface InstanceProps extends DefaultContainerProps, SelectionEventProps, AutoLayoutProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface InstanceProps extends DefaultContainerProps, SelectionEventProps, AutoLayoutProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties>;

@@ -9,0 +10,0 @@ overrides?: {

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

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

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

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, componentProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return (React.createElement("instance", __assign({}, componentProps, yogaProps, { innerRef: nodeRef, innerRefCallback: function () { return setHaveNode(true); } }), isHaveNode && props.overrides

@@ -102,0 +104,0 @@ ? Object.keys(props.overrides).map(function (overrideName) {

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface EllipseProps extends DefaultShapeProps, CornerProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface EllipseProps extends DefaultShapeProps, CornerProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & GeometryStyleProperties & BlendStyleProperties>;

@@ -10,0 +11,0 @@ children?: undefined;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Ellipse = function (props) {

@@ -31,4 +32,5 @@ var nodeRef = React.useRef();

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, ellipseProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("ellipse", __assign({}, ellipseProps, yogaChildProps, (fills && { fills: fills }), { innerRef: nodeRef }));
};
//# sourceMappingURL=Ellipse.js.map

@@ -8,2 +8,3 @@ import * as React from 'react';

import { BorderStyleProperties } from '../../styleTransformers/transformBorderProperties';
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
interface Preset {

@@ -181,3 +182,3 @@ name: string;

};
export interface FrameNodeProps extends DefaultShapeProps, DefaultContainerProps, InstanceItemProps, SelectionEventProps, AutoLayoutProps, BorderProps, CornerProps, FrameSpecificProps {
export interface FrameNodeProps extends DefaultShapeProps, DefaultContainerProps, InstanceItemProps, SelectionEventProps, AutoLayoutProps, BorderProps, CornerProps, FrameSpecificProps, OnLayoutHandlerProps {
style?: StyleOf<GeometryStyleProperties & YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties & BorderStyleProperties>;

@@ -184,0 +185,0 @@ preset?: Preset;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.FRAME_PRESETS = {

@@ -209,4 +210,5 @@ iPhoneX: {

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, frameProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("frame", __assign({}, frameProps, yogaChildProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Frame.js.map

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

import { GeometryStyleProperties } from '../../styleTransformers/transformGeometryStyleProperties';
export interface GroupNodeProps extends DefaultShapeProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface GroupNodeProps extends DefaultShapeProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<GeometryStyleProperties & YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties>;
}
export declare const Group: React.FC<GroupNodeProps>;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Group = function (props) {

@@ -29,4 +30,5 @@ var nodeRef = React.useRef();

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, groupProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("group", __assign({}, groupProps, yogaChildProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Group.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface LineProps extends DefaultShapeProps, CornerProps, BorderProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface LineProps extends DefaultShapeProps, CornerProps, BorderProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & GeometryStyleProperties & BlendStyleProperties>;
}
export declare const Line: React.FC<LineProps>;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Line = function (props) {

@@ -29,4 +30,5 @@ var nodeRef = React.useRef();

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, lineProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return React.createElement("line", __assign({}, lineProps, yogaProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Line.js.map
import * as React from 'react';
import { BaseNodeProps, ChildrenProps, ExportProps, StyleOf } from '../../types';
import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface PageProps extends BaseNodeProps, ChildrenProps, ExportProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface PageProps extends BaseNodeProps, ChildrenProps, ExportProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties>;

@@ -6,0 +7,0 @@ isCurrent?: boolean;

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

var operators_1 = require("rxjs/operators");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.useCurrentPageChange = function (nodeRef, callback, _isCurrent) {

@@ -48,4 +49,5 @@ React.useEffect(function () {

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, otherProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("page", __assign({}, otherProps, yogaChildProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Page.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface RectangleProps extends DefaultShapeProps, CornerProps, BorderProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface RectangleProps extends DefaultShapeProps, CornerProps, BorderProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<LayoutStyleProperties & YogaStyleProperties & BorderStyleProperties & BlendStyleProperties & GeometryStyleProperties>;

@@ -11,0 +12,0 @@ children?: undefined;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Rectangle = function (props) {

@@ -32,4 +33,5 @@ var nodeRef = React.useRef();

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, rectangleProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return React.createElement("rectangle", __assign({}, rectangleProps, yogaProps, (fills && { fills: fills }), { innerRef: nodeRef }));
};
//# sourceMappingURL=Rectangle.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface StarProps extends DefaultShapeProps, CornerProps, StarNodeProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface StarProps extends DefaultShapeProps, CornerProps, StarNodeProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & GeometryStyleProperties & BlendStyleProperties>;

@@ -10,0 +11,0 @@ children?: undefined;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Star = function (props) {

@@ -31,4 +32,5 @@ var nodeRef = React.useRef();

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, starProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return React.createElement("star", __assign({}, starProps, yogaProps, (fills && { fills: fills }), { innerRef: nodeRef }));
};
//# sourceMappingURL=Star.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface SvgNodeProps extends DefaultContainerProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface SvgNodeProps extends DefaultContainerProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<GeometryStyleProperties & YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties>;

@@ -10,0 +11,0 @@ source?: string;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Svg = function (props) {

@@ -29,4 +30,5 @@ var nodeRef = React.useRef();

var yogaChildProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, frameProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaChildProps, props);
return React.createElement("svg", __assign({}, frameProps, yogaChildProps, { innerRef: nodeRef }));
};
//# sourceMappingURL=Svg.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface TextProps extends TextNodeProps, DefaultShapeProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface TextProps extends TextNodeProps, DefaultShapeProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & TextStyleProperties & BlendStyleProperties> | void;

@@ -10,0 +11,0 @@ children?: React.ReactText | React.ReactText[];

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
var normalizeTextNodeChidren = function (children) {

@@ -39,4 +40,5 @@ return Array.isArray(children) ? children.join('') : children;

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, textProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return (React.createElement("text", __assign({}, textProps, yogaProps, { hasDefinedWidth: hasDefinedWidth, loadedFont: loadedFont, innerRef: nodeRef })));
};
//# sourceMappingURL=Text.js.map

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

import { YogaStyleProperties } from '../../yoga/YogaStyleProperties';
export interface VectorProps extends VectorNodeProps, DefaultShapeProps, CornerProps, InstanceItemProps, SelectionEventProps {
import { OnLayoutHandlerProps } from '../../hooks/useOnLayoutHandler';
export interface VectorProps extends VectorNodeProps, DefaultShapeProps, CornerProps, InstanceItemProps, SelectionEventProps, OnLayoutHandlerProps {
style?: StyleOf<YogaStyleProperties & LayoutStyleProperties & BlendStyleProperties & GeometryStyleProperties>;

@@ -10,0 +11,0 @@ children?: undefined;

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

var transformAutoLayoutToYoga_1 = require("../../styleTransformers/transformAutoLayoutToYoga");
var useOnLayoutHandler_1 = require("../../hooks/useOnLayoutHandler");
exports.Vector = function (props) {

@@ -31,4 +32,5 @@ var nodeRef = React.useRef();

var yogaProps = useYogaLayout_1.useYogaLayout(__assign({ nodeRef: nodeRef }, vectorProps));
useOnLayoutHandler_1.useOnLayoutHandler(yogaProps, props);
return React.createElement("vector", __assign({}, vectorProps, yogaProps, (fills && { fills: fills }), { innerRef: nodeRef }));
};
//# sourceMappingURL=Vector.js.map

@@ -0,1 +1,8 @@

export interface CalculatedYogaLayoutProps {
x: number;
y: number;
width: number;
height: number;
}
export declare type NullableCalculatedYogaLayoutProps = CalculatedYogaLayoutProps | null;
export declare const useYogaLayout: (props: any) => any;

@@ -49,3 +49,5 @@ "use strict";

var nodeRef = props.nodeRef;
var _a = React.useState({}), yogaProps = _a[0], setYogaProps = _a[1];
// TODO: should be type-annotated to NullableCalculatedYogaLayoutProps
// but it leads to TS compiler bug
var _a = React.useState(null), yogaProps = _a[0], setYogaProps = _a[1];
React.useEffect(function () {

@@ -52,0 +54,0 @@ var instance = nodeRef.current;

{
"name": "react-figma",
"version": "0.1.4",
"version": "0.1.5",
"description": "Render React components to Figma",

@@ -5,0 +5,0 @@ "scripts": {

@@ -17,9 +17,9 @@ "use strict";

if (styles.borderTopRightRadius) {
props.topLeftRadius = size_1.transformSize(styles.borderTopRightRadius);
props.topRightRadius = size_1.transformSize(styles.borderTopRightRadius);
}
if (styles.borderBottomLeftRadius) {
props.topLeftRadius = size_1.transformSize(styles.borderBottomLeftRadius);
props.bottomLeftRadius = size_1.transformSize(styles.borderBottomLeftRadius);
}
if (styles.borderBottomRightRadius) {
props.topLeftRadius = size_1.transformSize(styles.borderBottomRightRadius);
props.bottomRightRadius = size_1.transformSize(styles.borderBottomRightRadius);
}

@@ -26,0 +26,0 @@ if (styles.borderColor) {

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