@teambit/preview.ui.component-preview - npm Package Compare versions

Comparing version 0.0.509 to 0.0.510

dist/preview.d.ts

@@ -13,2 +13,6 @@ import { IframeHTMLAttributes } from 'react';
     /**
+     * add inner padding to the iframe.
+     */
+    innerBottomPadding?: number;
+    /**
      * query params to append at the end of the *hash*. Changing this property will not reload the preview
@@ -29,2 +33,6 @@ *
     /**
+     * class name to override preview style.
+     */
+    className?: string;
+    /**
      * set specific height for the iframe.
@@ -49,2 +57,2 @@ */
  */
-export declare function ComponentPreview({ component, previewName, forceHeight, queryParams, pubsub, viewport, fullContentHeight, onLoad, style, ...rest }: ComponentPreviewProps): JSX.Element;
+export declare function ComponentPreview({ component, previewName, className, forceHeight, queryParams, pubsub, innerBottomPadding, viewport, fullContentHeight, onLoad, style, ...rest }: ComponentPreviewProps): JSX.Element;

dist/preview.js

@@ -42,2 +42,3 @@ "use strict";
 const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const lodash_1 = require("lodash");
@@ -55,5 +56,5 @@ const penpal_1 = require("penpal");
     var _b, _c, _d;
-    var { component, previewName, forceHeight, queryParams, pubsub, 
+    var { component, previewName, className, forceHeight, queryParams, pubsub, innerBottomPadding = 0, 
     // fitView = 1280,
-    viewport = 1280, fullContentHeight = false, onLoad, style } = _a, rest = __rest(_a, ["component", "previewName", "forceHeight", "queryParams", "pubsub", "viewport", "fullContentHeight", "onLoad", "style"]);
+    viewport = 1280, fullContentHeight = false, onLoad, style } = _a, rest = __rest(_a, ["component", "previewName", "className", "forceHeight", "queryParams", "pubsub", "innerBottomPadding", "viewport", "fullContentHeight", "onLoad", "style"]);
     const [heightIframeRef, iframeHeight] = (0, use_iframe_content_height_1.useIframeContentHeight)({ skip: false, viewport });
@@ -82,6 +83,6 @@ const iframeRef = (0, react_1.useRef)(null);
                     }
+                    (onLoad && event) && onLoad();
                 },
             },
         });
-        onLoad && onLoad();
     }, [iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current]);
@@ -103,6 +104,6 @@ const params = Array.isArray(queryParams)
     const legacyIframeHeight = (iframeHeight || 0) > 400 ? iframeHeight : defaultLegacyHeight;
-    return (react_1.default.createElement("div", { ref: containerRef, className: preview_module_scss_1.default.preview, style: { height: forceHeight } },
-        react_1.default.createElement("iframe", Object.assign({}, rest, { ref: currentRef, style: Object.assign(Object.assign({}, style), { height: forceHeight || (isScaling ? finalHeight : legacyIframeHeight), width: isScaling ? targetWidth : legacyCurrentWidth, visibility: width === 0 && isScaling && !fullContentHeight ? 'hidden' : undefined, transform: fullContentHeight ? '' : (0, compute_preview_scale_1.computePreviewScale)(width, containerWidth), border: 0, transformOrigin: 'top left' }), src: url }))));
+    return (react_1.default.createElement("div", { ref: containerRef, className: (0, classnames_1.default)(preview_module_scss_1.default.preview, className), style: { height: forceHeight } },
+        react_1.default.createElement("iframe", Object.assign({}, rest, { ref: currentRef, style: Object.assign(Object.assign({}, style), { height: forceHeight || (isScaling ? finalHeight + innerBottomPadding : legacyIframeHeight), width: isScaling ? targetWidth : legacyCurrentWidth, visibility: width === 0 && isScaling && !fullContentHeight ? 'hidden' : undefined, transform: fullContentHeight ? '' : (0, compute_preview_scale_1.computePreviewScale)(width, containerWidth), border: 0, transformOrigin: 'top left' }), src: url }))));
 }
 exports.ComponentPreview = ComponentPreview;
 //# sourceMappingURL=preview.js.map

package.json

 {
   "name": "@teambit/preview.ui.component-preview",
-  "version": "0.0.509",
+  "version": "0.0.510",
   "homepage": "https://bit.dev/teambit/preview/ui/component-preview",
@@ -9,5 +9,6 @@ "main": "dist/index.js",
     "name": "ui/component-preview",
-    "version": "0.0.509"
+    "version": "0.0.510"
   },
   "dependencies": {
+    "classnames": "2.2.6",
     "lodash": "4.17.21",
@@ -19,2 +20,3 @@ "penpal": "6.2.2",
   "devDependencies": {
+    "@types/classnames": "2.2.11",
     "@types/lodash": "4.14.165",
@@ -21,0 +23,0 @@ "@types/react": "^17.0.8",

No alert changes

Improved metrics

Total package byte prevSize

66182

increased by1.72%

Lines of code

975

increased by2.09%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

11

increased by10%

Dependency changes

• + Addedclassnames@2.2.6

• + Addedclassnames@2.2.6(transitive)