react-device-frameset - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/DeviceEmulator.d.ts

@@ -7,5 +7,5 @@ import React from 'react';
     children: (props: DeviceFramesetProps) => React.ReactNode;
-    value?: DeviceName;
-    onChange?: (deviceName: DeviceName) => void;
+    value?: DeviceFramesetProps;
+    onChange?: (deviceConfig: DeviceFramesetProps) => void;
 };
 export declare const DeviceEmulator: React.NamedExoticComponent<DeviceEmulatorProps>;

lib/DeviceEmulator.js

@@ -48,2 +48,5 @@ "use strict";
 var DeviceOptions_1 = require("./DeviceOptions");
+var zooms = [
+    0.5, 0.75, 1, 1.25, 1.5
+];
 exports.DeviceEmulator = react_1.default.memo(function DeviceEmulator(_a) {
@@ -54,3 +57,3 @@ var _b;
     var _d = (0, react_1.useState)((_b = deviceNames[0]) !== null && _b !== void 0 ? _b : ''), deviceName = _d[0], setDeviceName = _d[1];
-    var selectedDeviceName = (0, react_1.useMemo)(function () { return value !== null && value !== void 0 ? value : deviceName; }, [value, deviceName]);
+    var selectedDeviceName = (0, react_1.useMemo)(function () { var _a; return (_a = value === null || value === void 0 ? void 0 : value.device) !== null && _a !== void 0 ? _a : deviceName; }, [value, deviceName]);
     var handleSelectChange = (0, react_1.useCallback)(function (event) {
@@ -60,8 +63,14 @@ var newDeviceName = event.target.value;
             throw new Error("Invalid device name for " + newDeviceName);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newDeviceName);
         setDeviceName(newDeviceName);
-    }, [deviceNames, onChange]);
-    var _e = (0, react_1.useMemo)(function () { return DeviceFrameset_1.DeviceOptions[selectedDeviceName]; }, [selectedDeviceName]), colors = _e.colors, hasLandscape = _e.hasLandscape, width = _e.width, height = _e.height;
+    }, [deviceNames]);
+    var _e = (0, react_1.useState)(zooms[2]), selectedZoom = _e[0], setSelectedZoom = _e[1];
+    var handleSelectZoomChange = (0, react_1.useCallback)(function (event) {
+        var newZoom = +event.target.value;
+        if (!zooms.includes(newZoom))
+            throw new Error("Invalid device zoom for " + newZoom);
+        setSelectedZoom(newZoom);
+    }, [deviceNames]);
+    var _f = (0, react_1.useMemo)(function () { return DeviceFrameset_1.DeviceOptions[selectedDeviceName]; }, [selectedDeviceName]), colors = _f.colors, hasLandscape = _f.hasLandscape, width = _f.width, height = _f.height;
     var firstColor = (0, react_1.useMemo)(function () { return colors[0]; }, [colors]);
-    var _f = (0, react_1.useState)(undefined), isLandscape = _f[0], setIsLandscape = _f[1];
+    var _g = (0, react_1.useState)(undefined), isLandscape = _g[0], setIsLandscape = _g[1];
     var isLandscapeChecked = (0, react_1.useMemo)(function () { return hasLandscape ? isLandscape : undefined; }, [hasLandscape, isLandscape]);
@@ -73,3 +82,3 @@ var handleIsLandscapeChange = (0, react_1.useCallback)(function () {
     }, [hasLandscape]);
-    var deviceFramesetProps = (0, react_1.useMemo)(function () { return ({
+    var deviceFramesetProps = (0, react_1.useMemo)(function () { return value !== null && value !== void 0 ? value : ({
         device: selectedDeviceName,
@@ -80,3 +89,7 @@ color: firstColor,
         height: height,
-    }); }, [selectedDeviceName, firstColor, isLandscapeChecked, width, height]);
+        zoom: selectedZoom,
+    }); }, [value, selectedDeviceName, firstColor, isLandscapeChecked, width, height, selectedZoom]);
+    (0, react_1.useEffect)(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange(deviceFramesetProps);
+    }, [onChange, deviceFramesetProps]);
     return (react_1.default.createElement("div", __assign({ className: "device-emulator" }, divProps),
@@ -88,2 +101,5 @@ react_1.default.createElement("section", null,
             react_1.default.createElement("input", { disabled: true, value: height }),
+            react_1.default.createElement("select", { value: selectedZoom, onChange: handleSelectZoomChange }, zooms.map(function (zoom) { return (react_1.default.createElement("option", { key: zoom, value: zoom },
+                zoom * 100,
+                "%")); })),
             react_1.default.createElement("label", null, "Landscape:"),
@@ -90,0 +106,0 @@ react_1.default.createElement("input", { type: "checkbox", checked: !!isLandscapeChecked, disabled: !hasLandscape, onChange: handleIsLandscapeChange })),

lib/DeviceFrameset.js

@@ -49,5 +49,5 @@ "use strict";
 exports.DeviceFrameset = react_1.default.memo(function DeviceFrameset(props) {
-    var children = props.children, device = props.device, width = props.width, height = props.height, restProps = __rest(props
+    var children = props.children, device = props.device, width = props.width, height = props.height, zoom = props.zoom, restProps = __rest(props
     // @ts-expect-error
-    , ["children", "device", "width", "height"]);
+    , ["children", "device", "width", "height", "zoom"]);
     // @ts-expect-error
@@ -57,3 +57,5 @@ var _l = restProps.landscape, _c = restProps.color, divProps = __rest(restProps, ["landscape", "color"]);
     var landscape = 'landscape' in props ? props.landscape : undefined;
-    var style = (0, react_1.useMemo)(function () { return (landscape && DeviceOptions_1.DeviceOptions[device].hasLandscape) ? ({ width: height, height: width }) : ({ width: width, height: height }); }, [width, height, landscape, device]);
+    var style = (0, react_1.useMemo)(function () { return (landscape && DeviceOptions_1.DeviceOptions[device].hasLandscape)
+        ? ({ width: height, height: width, transform: zoom !== undefined ? "scale(" + zoom + ")" : undefined })
+        : ({ width: width, height: height, transform: zoom !== undefined ? "scale(" + zoom + ")" : undefined }); }, [width, height, landscape, device, zoom]);
     return (react_1.default.createElement("div", __assign({ className: "marvel-device " + DeviceOptions_1.DeviceOptions[device].device + " " + (color ? color : '') + " " + (landscape ? 'landscape' : '') }, divProps, { style: style }),
@@ -60,0 +62,0 @@ react_1.default.createElement("div", { className: "inner" }),

lib/DeviceOptions.d.ts

@@ -113,2 +113,3 @@ /// <reference types="react" />
         height?: number;
+        zoom?: number;
     }, never>>>;
@@ -115,0 +116,0 @@ }[keyof R];

package.json

@@ -25,3 +25,3 @@ {
   "repository": "https://github.com/zheeeng/react-device-frameset",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
@@ -28,0 +28,0 @@ "main": "lib/DeviceFrameset.js",

README.md

@@ -97,4 +97,4 @@ # React Device Frameset
     children: (props: DeviceFramesetProps) => React.ReactNode,
-    value?: DeviceName,
-    onChange?: (deviceName: DeviceName) => void, 
+    value?: DeviceFramesetProps,
+    onChange?: (deviceConfig: DeviceFramesetProps) => void, 
 }
@@ -101,0 +101,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

307237

increased by0.38%

Lines of code

3405

increased by0.56%

No dependency changes