react-device-frameset - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

lib/DeviceEmulator.js

@@ -49,17 +49,16 @@ "use strict";
 exports.DeviceEmulator = react_1.default.memo(function DeviceEmulator(_a) {
-    var children = _a.children, _b = _a.banDevices, banDevices = _b === void 0 ? [] : _b, divProps = __rest(_a, ["children", "banDevices"]);
-    var deviceNames = react_1.useMemo(function () { return DeviceOptions_1.DeviceNames.filter(function (devName) { return !banDevices.includes(devName); }); }, []);
-    var _c = react_1.useState(0), selectedDeviceIndex = _c[0], setSelectedDeviceIndex = _c[1];
-    var handleSelectChange = react_1.useCallback(function (event) {
-        var index = +event.target.value;
-        setSelectedDeviceIndex(index);
+    var _b;
+    var children = _a.children, _c = _a.banDevices, banDevices = _c === void 0 ? [] : _c, divProps = __rest(_a, ["children", "banDevices"]);
+    var deviceNames = (0, react_1.useMemo)(function () { return DeviceOptions_1.DeviceNames.filter(function (devName) { return !banDevices.includes(devName); }); }, []);
+    var _d = (0, react_1.useState)((_b = deviceNames[0]) !== null && _b !== void 0 ? _b : ''), deviceName = _d[0], setDeviceName = _d[1];
+    var handleSelectChange = (0, react_1.useCallback)(function (event) {
+        setDeviceName(event.target.value);
     }, []);
-    var deviceName = react_1.useMemo(function () { return deviceNames[selectedDeviceIndex]; }, [selectedDeviceIndex]);
-    var _d = react_1.useMemo(function () { return DeviceFrameset_1.DeviceOptions[deviceName]; }, [deviceName]), colors = _d.colors, hasLandscape = _d.hasLandscape, width = _d.width, height = _d.height;
-    var _e = react_1.useState(0), selectedColorIndex = _e[0], setSelectedColorIndex = _e[1];
-    var _f = react_1.useState(undefined), isLandscape = _f[0], setIsLandscape = _f[1];
-    react_1.useEffect(function () { setSelectedColorIndex(0); }, [colors]);
-    react_1.useEffect(function () { setIsLandscape(hasLandscape ? false : undefined); }, [hasLandscape]);
-    var selectedColor = react_1.useMemo(function () { return colors[selectedColorIndex]; }, [colors, selectedColorIndex]);
-    var props = {
+    var _e = (0, react_1.useMemo)(function () { return DeviceFrameset_1.DeviceOptions[deviceName]; }, [deviceName]), colors = _e.colors, hasLandscape = _e.hasLandscape, width = _e.width, height = _e.height;
+    var _f = (0, react_1.useState)(0), selectedColorIndex = _f[0], setSelectedColorIndex = _f[1];
+    var _g = (0, react_1.useState)(undefined), isLandscape = _g[0], setIsLandscape = _g[1];
+    (0, react_1.useEffect)(function () { setSelectedColorIndex(0); }, [colors]);
+    (0, react_1.useEffect)(function () { setIsLandscape(hasLandscape ? false : undefined); }, [hasLandscape]);
+    var selectedColor = (0, react_1.useMemo)(function () { return colors[selectedColorIndex]; }, [colors, selectedColorIndex]);
+    var deviceFramesetProps = (0, react_1.useMemo)(function () { return ({
         device: deviceName,
@@ -70,6 +69,6 @@ color: selectedColor,
         height: height,
-    };
+    }); }, [deviceName, selectedColor, isLandscape, width, height]);
     return (react_1.default.createElement("div", __assign({ className: "device-emulator" }, divProps),
         react_1.default.createElement("section", null,
-            react_1.default.createElement("select", { value: deviceName, onChange: handleSelectChange }, deviceNames.map(function (devName, index) { return (react_1.default.createElement("option", { key: devName, value: index }, devName)); })),
+            react_1.default.createElement("select", { value: deviceName, onChange: handleSelectChange }, deviceNames.map(function (devName) { return (react_1.default.createElement("option", { key: devName, value: devName }, devName)); })),
             react_1.default.createElement("input", { disabled: true, value: width }),
@@ -80,3 +79,3 @@ react_1.default.createElement("span", null, "x"),
             react_1.default.createElement("input", { type: "checkbox", checked: isLandscape, onClick: function () { return setIsLandscape(function (is) { return !is; }); } })),
-        react_1.default.createElement("div", { className: "device-emulator-container" }, children(props))));
+        react_1.default.createElement("div", { className: "device-emulator-container" }, children(deviceFramesetProps))));
 });

lib/DeviceFrameset.js

@@ -52,3 +52,3 @@ "use strict";
     var landscape = 'landscape' in props ? props.landscape : undefined;
-    var style = 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 }) : ({ width: width, height: height }); }, [width, height, landscape, device]);
     return (react_1.default.createElement("div", __assign({ className: "marvel-device " + DeviceOptions_1.DeviceOptions[device].device + " " + (color ? color : '') + " " + (landscape ? 'landscape' : '') }, divProps, { style: style }),
@@ -55,0 +55,0 @@ react_1.default.createElement("div", { className: "inner" }),

lib/DeviceOptions.js

@@ -8,3 +8,3 @@ "use strict";
 exports.DeviceOptions = (_a = {},
-    _a['iPhone X'] = exports.defineDevice({
+    _a['iPhone X'] = (0, exports.defineDevice)({
         device: 'iphone-x',
@@ -16,3 +16,3 @@ colors: [],
     }),
-    _a['iPhone 8'] = exports.defineDevice({
+    _a['iPhone 8'] = (0, exports.defineDevice)({
         device: 'iphone8',
@@ -24,3 +24,3 @@ colors: ['black', 'silver', 'gold'],
     }),
-    _a['iPhone 8 Plus'] = exports.defineDevice({
+    _a['iPhone 8 Plus'] = (0, exports.defineDevice)({
         device: 'iphone8plus',
@@ -32,3 +32,3 @@ colors: ['black', 'silver', 'gold'],
     }),
-    _a['iPhone 5s'] = exports.defineDevice({
+    _a['iPhone 5s'] = (0, exports.defineDevice)({
         device: 'iphone5s',
@@ -40,3 +40,3 @@ colors: ['black', 'silver', 'gold'],
     }),
-    _a['iPhone 5c'] = exports.defineDevice({
+    _a['iPhone 5c'] = (0, exports.defineDevice)({
         device: 'iphone5c',
@@ -48,3 +48,3 @@ colors: ['white', 'red', 'yellow', 'green', 'blue'],
     }),
-    _a['iPhone 4s'] = exports.defineDevice({
+    _a['iPhone 4s'] = (0, exports.defineDevice)({
         device: 'iphone4s',
@@ -56,3 +56,3 @@ colors: ['black', 'silver'],
     }),
-    _a['Galaxy Note 8'] = exports.defineDevice({
+    _a['Galaxy Note 8'] = (0, exports.defineDevice)({
         device: 'note8',
@@ -64,3 +64,3 @@ colors: [],
     }),
-    _a['Nexus 5'] = exports.defineDevice({
+    _a['Nexus 5'] = (0, exports.defineDevice)({
         device: 'nexus5',
@@ -72,3 +72,3 @@ colors: [],
     }),
-    _a['Lumia 920'] = exports.defineDevice({
+    _a['Lumia 920'] = (0, exports.defineDevice)({
         device: 'lumia920',
@@ -80,3 +80,3 @@ colors: ['black', 'white', 'yellow', 'red', 'blue'],
     }),
-    _a['Samsung Galaxy S5'] = exports.defineDevice({
+    _a['Samsung Galaxy S5'] = (0, exports.defineDevice)({
         device: 's5',
@@ -88,3 +88,3 @@ colors: ['white', 'black'],
     }),
-    _a['HTC One'] = exports.defineDevice({
+    _a['HTC One'] = (0, exports.defineDevice)({
         device: 'nexus5',
@@ -96,3 +96,3 @@ colors: [],
     }),
-    _a['iPad Mini'] = exports.defineDevice({
+    _a['iPad Mini'] = (0, exports.defineDevice)({
         device: 'ipad',
@@ -104,3 +104,3 @@ colors: ['black', 'silver'],
     }),
-    _a['MacBook Pro'] = exports.defineDevice({
+    _a['MacBook Pro'] = (0, exports.defineDevice)({
         device: 'macbook',
@@ -107,0 +107,0 @@ colors: [],

lib/DeviceSelector.js

@@ -50,13 +50,13 @@ "use strict";
     var children = _a.children, _b = _a.banDevices, banDevices = _b === void 0 ? [] : _b, divProps = __rest(_a, ["children", "banDevices"]);
-    var deviceNames = react_1.useMemo(function () { return DeviceOptions_1.DeviceNames.filter(function (devName) { return !banDevices.includes(devName); }); }, []);
-    var _c = react_1.useState(0), selectedDeviceIndex = _c[0], setSelectedDeviceIndex = _c[1];
-    var _d = react_1.useState(true), showMenu = _d[0], setShowMenu = _d[1];
-    var deviceName = react_1.useMemo(function () { return deviceNames[selectedDeviceIndex]; }, [selectedDeviceIndex]);
-    var _e = react_1.useMemo(function () { return DeviceFrameset_1.DeviceOptions[deviceName]; }, [deviceName]), colors = _e.colors, hasLandscape = _e.hasLandscape, width = _e.width, height = _e.height;
-    var _f = react_1.useState(0), selectedColorIndex = _f[0], setSelectedColorIndex = _f[1];
-    var _g = react_1.useState(undefined), isLandscape = _g[0], setIsLandscape = _g[1];
-    react_1.useEffect(function () { setSelectedColorIndex(0); }, [colors]);
-    react_1.useEffect(function () { setIsLandscape(hasLandscape ? false : undefined); }, [hasLandscape]);
-    var selectedColor = react_1.useMemo(function () { return colors[selectedColorIndex]; }, [colors, selectedColorIndex]);
-    var props = {
+    var deviceNames = (0, react_1.useMemo)(function () { return DeviceOptions_1.DeviceNames.filter(function (devName) { return !banDevices.includes(devName); }); }, []);
+    var _c = (0, react_1.useState)(0), selectedDeviceIndex = _c[0], setSelectedDeviceIndex = _c[1];
+    var _d = (0, react_1.useState)(true), showMenu = _d[0], setShowMenu = _d[1];
+    var deviceName = (0, react_1.useMemo)(function () { return deviceNames[selectedDeviceIndex]; }, [selectedDeviceIndex]);
+    var _e = (0, react_1.useMemo)(function () { return DeviceFrameset_1.DeviceOptions[deviceName]; }, [deviceName]), colors = _e.colors, hasLandscape = _e.hasLandscape, width = _e.width, height = _e.height;
+    var _f = (0, react_1.useState)(0), selectedColorIndex = _f[0], setSelectedColorIndex = _f[1];
+    var _g = (0, react_1.useState)(undefined), isLandscape = _g[0], setIsLandscape = _g[1];
+    (0, react_1.useEffect)(function () { setSelectedColorIndex(0); }, [colors]);
+    (0, react_1.useEffect)(function () { setIsLandscape(hasLandscape ? false : undefined); }, [hasLandscape]);
+    var selectedColor = (0, react_1.useMemo)(function () { return colors[selectedColorIndex]; }, [colors, selectedColorIndex]);
+    var deviceFramesetProps = (0, react_1.useMemo)(function () { return ({
         device: deviceName,
@@ -67,3 +67,3 @@ color: selectedColor,
         height: height,
-    };
+    }); }, [deviceName, selectedColor, isLandscape, width, height]);
     return (react_1.default.createElement("div", __assign({ className: "device-selector" }, divProps),
@@ -83,3 +83,3 @@ react_1.default.createElement("dl", null,
                     react_1.default.createElement("ul", null, DeviceFrameset_1.DeviceOptions[devName].colors.map(function (color, index) { return (react_1.default.createElement("li", { key: color, title: color, onClick: function () { return setSelectedColorIndex(index); }, className: [((devName === deviceName && color === selectedColor) ? 'active' : ''), color].join(' ') })); }))))); })),
-        react_1.default.createElement("div", { className: "device-selector-container" }, children(props))));
+        react_1.default.createElement("div", { className: "device-selector-container" }, children(deviceFramesetProps))));
 });

lib/Zoomable.js

@@ -92,20 +92,20 @@ "use strict";
     var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = react_1.useState([1, 1]), _c = _b[0], width = _c[0], height = _c[1], setSize = _b[1];
-    var _d = react_1.useState([
+    var _b = (0, react_1.useState)([1, 1]), _c = _b[0], width = _c[0], height = _c[1], setSize = _b[1];
+    var _d = (0, react_1.useState)([
         width,
         height,
     ]), _e = _d[0], clientWidth = _e[0], clientHeight = _e[1], setClientSize = _d[1];
-    var _f = react_1.useState(null), container = _f[0], setContainer = _f[1];
-    var _g = react_1.useState(null), zoomContainer = _g[0], setZoomContainer = _g[1];
-    var scale = react_1.useMemo(function () {
+    var _f = (0, react_1.useState)(null), container = _f[0], setContainer = _f[1];
+    var _g = (0, react_1.useState)(null), zoomContainer = _g[0], setZoomContainer = _g[1];
+    var scale = (0, react_1.useMemo)(function () {
         var _a = [width / clientWidth, height / clientHeight], scaleX = _a[0], scaleY = _a[1];
         return Math.min(scaleX, scaleY, 1);
     }, [width, height, clientWidth, clientHeight]);
-    var _h = react_1.useState(null), localScale = _h[0], setLocaleScale = _h[1];
-    var realScale = react_1.useMemo(function () { return toCurr(localScale !== null && localScale !== void 0 ? localScale : scale); }, [localScale, scale]);
-    var allowScroll = react_1.useMemo(function () { return clientWidth / realScale < width || clientHeight / realScale < height; }, [clientHeight, clientWidth, realScale, width, height]);
-    var transformStyle = react_1.useMemo(function () {
+    var _h = (0, react_1.useState)(null), localScale = _h[0], setLocaleScale = _h[1];
+    var realScale = (0, react_1.useMemo)(function () { return toCurr(localScale !== null && localScale !== void 0 ? localScale : scale); }, [localScale, scale]);
+    var allowScroll = (0, react_1.useMemo)(function () { return clientWidth / realScale < width || clientHeight / realScale < height; }, [clientHeight, clientWidth, realScale, width, height]);
+    var transformStyle = (0, react_1.useMemo)(function () {
         return { transform: "scale(" + realScale + ")" };
     }, [realScale]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (zoomContainer) {
@@ -131,3 +131,3 @@ var syncClientSize_1 = function (el) {
     }, [zoomContainer]);
-    react_1.useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (container) {
@@ -134,0 +134,0 @@ var clientWidth_1 = container.clientWidth, clientHeight_1 = container.clientHeight;

package.json

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

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

304032

increased by0.12%

Worsened metrics

Lines of code

3351

decreased by-0.03%

No dependency changes