react-figma - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

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;

components/component/Component.js

@@ -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

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" | "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">>;
 };

components/component/Instance.d.ts

@@ -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?: {

components/component/Instance.js

@@ -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) {

components/ellipse/Ellipse.d.ts

@@ -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;

components/ellipse/Ellipse.js

@@ -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

components/frame/Frame.d.ts

@@ -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;

components/frame/Frame.js

@@ -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

components/group/Group.d.ts

@@ -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>;

components/group/Group.js

@@ -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

components/line/Line.d.ts

@@ -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>;

components/line/Line.js

@@ -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

components/page/Page.d.ts

 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;

components/page/Page.js

@@ -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

components/rectangle/Rectangle.d.ts

@@ -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;

components/rectangle/Rectangle.js

@@ -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

components/star/Star.d.ts

@@ -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;

components/star/Star.js

@@ -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

components/svg/Svg.d.ts

@@ -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;

components/svg/Svg.js

@@ -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

components/text/Text.d.ts

@@ -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[];

components/text/Text.js

@@ -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

components/vector/Vector.d.ts

@@ -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;

components/vector/Vector.js

@@ -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

hooks/useYogaLayout.d.ts

@@ -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;

hooks/useYogaLayout.js

@@ -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;

package.json

 {
   "name": "react-figma",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Render React components to Figma",
@@ -5,0 +5,0 @@ "scripts": {

styleTransformers/transformBorderProperties.js

@@ -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) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

348031

increased by1.93%

Number of package files

267

increased by2.3%

Lines of code

5281

increased by1.56%

No dependency changes