react-device-frameset - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

lib/DeviceEmulator.d.ts

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

lib/DeviceEmulator.js

@@ -50,24 +50,32 @@ "use strict";
     var _b;
-    var children = _a.children, _c = _a.banDevices, banDevices = _c === void 0 ? [] : _c, divProps = __rest(_a, ["children", "banDevices"]);
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _c = _a.banDevices, banDevices = _c === void 0 ? [] : _c, divProps = __rest(_a, ["children", "value", "onChange", "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 selectedDeviceName = (0, react_1.useMemo)(function () { return value !== null && value !== void 0 ? value : deviceName; }, [value, deviceName]);
     var handleSelectChange = (0, react_1.useCallback)(function (event) {
-        setDeviceName(event.target.value);
-    }, []);
-    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 newDeviceName = event.target.value;
+        if (!deviceNames.includes(newDeviceName))
+            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;
+    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 isLandscapeChecked = (0, react_1.useMemo)(function () { return hasLandscape ? isLandscape : undefined; }, [hasLandscape, isLandscape]);
+    var handleIsLandscapeChange = (0, react_1.useCallback)(function () {
+        if (!hasLandscape)
+            return;
+        setIsLandscape(function (is) { return !is; });
+    }, [hasLandscape]);
     var deviceFramesetProps = (0, react_1.useMemo)(function () { return ({
-        device: deviceName,
-        color: selectedColor,
-        landscape: isLandscape,
+        device: selectedDeviceName,
+        color: firstColor,
+        landscape: isLandscapeChecked,
         width: width,
         height: height,
-    }); }, [deviceName, selectedColor, isLandscape, width, height]);
+    }); }, [selectedDeviceName, firstColor, isLandscapeChecked, 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) { return (react_1.default.createElement("option", { key: devName, value: devName }, devName)); })),
+            react_1.default.createElement("select", { value: selectedDeviceName, 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 }),
@@ -77,4 +85,4 @@ react_1.default.createElement("span", null, "x"),
             react_1.default.createElement("label", null, "Landscape:"),
-            react_1.default.createElement("input", { type: "checkbox", checked: isLandscape, onClick: function () { return setIsLandscape(function (is) { return !is; }); } })),
+            react_1.default.createElement("input", { type: "checkbox", checked: !!isLandscapeChecked, disabled: !hasLandscape, onChange: handleIsLandscapeChange })),
         react_1.default.createElement("div", { className: "device-emulator-container" }, children(deviceFramesetProps))));
 });

lib/DeviceFrameset.js

@@ -49,3 +49,7 @@ "use strict";
 exports.DeviceFrameset = react_1.default.memo(function DeviceFrameset(props) {
-    var children = props.children, device = props.device, width = props.width, height = props.height, divProps = __rest(props, ["children", "device", "width", "height"]);
+    var children = props.children, device = props.device, width = props.width, height = props.height, restProps = __rest(props
+    // @ts-expect-error
+    , ["children", "device", "width", "height"]);
+    // @ts-expect-error
+    var _l = restProps.landscape, _c = restProps.color, divProps = __rest(restProps, ["landscape", "color"]);
     var color = 'color' in props ? props.color : undefined;
@@ -52,0 +56,0 @@ var landscape = 'landscape' in props ? props.landscape : undefined;

lib/DeviceSelector.d.ts

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

lib/DeviceSelector.js

@@ -49,20 +49,37 @@ "use strict";
 exports.DeviceSelector = react_1.default.memo(function DeviceSelector(_a) {
-    var children = _a.children, _b = _a.banDevices, banDevices = _b === void 0 ? [] : _b, divProps = __rest(_a, ["children", "banDevices"]);
+    var _b;
+    var children = _a.children, value = _a.value, onChange = _a.onChange, _c = _a.banDevices, banDevices = _c === void 0 ? [] : _c, divProps = __rest(_a, ["children", "value", "onChange", "banDevices"]);
     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 _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 handleSelectChange = (0, react_1.useCallback)(function (event) {
+        var newDeviceName = event.currentTarget.dataset['deviceName'];
+        if (!deviceNames.includes(newDeviceName))
+            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.useState)(true), showMenu = _e[0], setShowMenu = _e[1];
+    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 _g = (0, react_1.useState)(firstColor), selectedColor = _g[0], setSelectedColor = _g[1];
+    var handleColorChange = (0, react_1.useCallback)(function (event) {
+        var newDeviceColor = event.currentTarget.dataset['deviceColor'];
+        setSelectedColor(newDeviceColor);
+    }, []);
+    (0, react_1.useEffect)(function () { setSelectedColor(firstColor); }, [firstColor]);
+    var _h = (0, react_1.useState)(undefined), isLandscape = _h[0], setIsLandscape = _h[1];
+    var isLandscapeChecked = (0, react_1.useMemo)(function () { return hasLandscape ? isLandscape : undefined; }, [hasLandscape, isLandscape]);
+    var handleIsLandscapeChange = (0, react_1.useCallback)(function () {
+        if (!hasLandscape)
+            return;
+        setIsLandscape(function (is) { return !is; });
+    }, [hasLandscape]);
     var deviceFramesetProps = (0, react_1.useMemo)(function () { return ({
-        device: deviceName,
+        device: selectedDeviceName,
         color: selectedColor,
-        landscape: isLandscape,
+        landscape: isLandscapeChecked,
         width: width,
         height: height,
-    }); }, [deviceName, selectedColor, isLandscape, width, height]);
+    }); }, [selectedDeviceName, selectedColor, isLandscapeChecked, width, height]);
     return (react_1.default.createElement("div", __assign({ className: "device-selector" }, divProps),
@@ -73,5 +90,5 @@ react_1.default.createElement("dl", null,
                     "The Chosen: ",
-                    deviceName),
+                    selectedDeviceName),
                 react_1.default.createElement("span", { className: (showMenu ? 'active' : ''), onClick: function () { return setShowMenu(function (is) { return !is; }); } }, "show all devices")),
-            showMenu && deviceNames.map(function (devName, index) { return (react_1.default.createElement("dd", { key: devName, onClick: function () { return setSelectedDeviceIndex(index); }, className: devName === deviceName ? 'active' : '' },
+            showMenu && deviceNames.map(function (devName) { return (react_1.default.createElement("dd", { key: devName, "data-device-name": devName, onClick: handleSelectChange, className: devName === selectedDeviceName ? 'active' : '' },
                 react_1.default.createElement("input", { type: "radio", id: devName }),
@@ -81,5 +98,5 @@ react_1.default.createElement("label", { htmlFor: devName },
                         react_1.default.createElement("p", null, devName),
-                        DeviceFrameset_1.DeviceOptions[devName].hasLandscape && (react_1.default.createElement("span", { className: (devName === deviceName && isLandscape) ? 'active' : '', onClick: function () { return setIsLandscape(function (is) { return !is; }); } }, "landscape"))),
-                    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(' ') })); }))))); })),
+                        DeviceFrameset_1.DeviceOptions[devName].hasLandscape && (react_1.default.createElement("span", { className: (devName === deviceName && isLandscape) ? 'active' : '', onClick: handleIsLandscapeChange }, "landscape"))),
+                    react_1.default.createElement("ul", null, DeviceFrameset_1.DeviceOptions[devName].colors.map(function (color) { return (react_1.default.createElement("li", { key: color, title: color, "data-device-color": color, onClick: handleColorChange, className: [((devName === deviceName && color === selectedColor) ? 'active' : ''), color].join(' ') })); }))))); })),
         react_1.default.createElement("div", { className: "device-selector-container" }, children(deviceFramesetProps))));
 });

lib/index.d.ts

 export * from './DeviceFrameset';
 export * from './DeviceSelector';
+export * from './DeviceEmulator';

lib/index.js

@@ -15,1 +15,2 @@ "use strict";
 __exportStar(require("./DeviceSelector"), exports);
+__exportStar(require("./DeviceEmulator"), exports);

package.json

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

README.md

@@ -70,2 +70,4 @@ # React Device Frameset
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void, 
 }
@@ -96,2 +98,4 @@ ```
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void, 
 }
@@ -98,0 +102,0 @@ ```

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

306066

increased by0.67%

Lines of code

3386

increased by1.04%

Number of lines in readme file

115

increased by3.6%

No dependency changes