react-device-frameset - npm Package Compare versions

Comparing version 1.0.5 to 1.0.7

lib/DeviceFrameset.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeviceFrameset = exports.DeviceOptions = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var DeviceOptions_1 = require("./DeviceOptions");
 Object.defineProperty(exports, "DeviceOptions", { enumerable: true, get: function () { return DeviceOptions_1.DeviceOptions; } });
 exports.DeviceFrameset = react_1.default.memo(function DeviceFrameset(props) {
-    var children = props.children, device = props.device;
+    var children = props.children, device = props.device, width = props.width, height = props.height, divProps = __rest(props, ["children", "device", "width", "height"]);
     var color = 'color' in props ? props.color : undefined;
     var landscape = 'landscape' in props ? props.landscape : undefined;
-    return (react_1.default.createElement("div", { className: "marvel-device " + DeviceOptions_1.DeviceOptions[device].device + " " + (color ? color : '') + " " + (landscape ? 'landscape' : '') },
+    var style = react_1.useMemo(function () { return landscape ? ({ width: height, height: width }) : ({ width: width, height: height }); }, [width, height, landscape]);
+    return (react_1.default.createElement("div", __assign({ className: "marvel-device " + DeviceOptions_1.DeviceOptions[device].device + " " + (color ? color : '') + " " + (landscape ? 'landscape' : '') }, divProps, { style: style }),
         react_1.default.createElement("div", { className: "inner" }),
@@ -16,0 +55,0 @@ device === 'Galaxy Note 8' ? react_1.default.createElement("div", { className: "overflow" },

lib/DeviceOptions.d.ts

@@ -0,3 +1,3 @@
+/// <reference types="react" />
 import type { Compute, OptionField, OmitFieldByType } from './helper';
-export declare const i = 11;
 declare type DeviceType<Device extends string, Colors extends readonly string[]> = {
@@ -7,2 +7,4 @@ device: Device;
     hasLandscape: boolean;
+    width?: number;
+    height?: number;
 };
@@ -15,2 +17,4 @@ export declare const defineDevice: <Device extends string, Colors extends readonly string[], Def extends DeviceType<Device, Colors>>(definition: Def) => Def;
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -21,2 +25,4 @@ "iPhone 8": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -27,2 +33,4 @@ "iPhone 8 Plus": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -33,2 +41,4 @@ "iPhone 5s": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -39,2 +49,4 @@ "iPhone 5c": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -45,2 +57,4 @@ "iPhone 4s": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -51,2 +65,4 @@ "Galaxy Note 8": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -57,2 +73,4 @@ "Nexus 5": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -63,2 +81,4 @@ "Lumia 920": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -69,2 +89,4 @@ "Samsung Galaxy S5": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -75,2 +97,4 @@ "HTC One": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -81,2 +105,4 @@ "iPad Mini": {
         hasLandscape: true;
+        width: number;
+        height: number;
     };
@@ -87,4 +113,8 @@ "MacBook Pro": {
         hasLandscape: false;
+        width: number;
+        height: number;
     };
 };
+export declare type DeviceName = keyof typeof DeviceOptions;
+export declare const DeviceNames: ("iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro")[];
 declare type DevicesType<R extends Record<string, DeviceType<string, readonly string[]>>> = {
@@ -95,5 +125,7 @@ [key in keyof R]: Compute<OptionField<OmitFieldByType<{
         landscape: R[key]['hasLandscape'] extends true ? (boolean | undefined) : never;
+        width?: number;
+        height?: number;
     }, never>>>;
 }[keyof R];
-export declare type DeviceFramesetProps = DevicesType<typeof DeviceOptions>;
+export declare type DeviceFramesetProps = DevicesType<typeof DeviceOptions> & React.HTMLAttributes<HTMLDivElement>;
 export {};

lib/DeviceOptions.js

 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeviceOptions = exports.defineDevice = exports.i = void 0;
-exports.i = 11;
+exports.DeviceNames = exports.DeviceOptions = exports.defineDevice = void 0;
 var defineDevice = function (definition) { return definition; };
@@ -13,2 +12,4 @@ exports.defineDevice = defineDevice;
         hasLandscape: true,
+        width: 375,
+        height: 812,
     }),
@@ -19,2 +20,4 @@ _a['iPhone 8'] = exports.defineDevice({
         hasLandscape: true,
+        width: 375,
+        height: 667,
     }),
@@ -25,2 +28,4 @@ _a['iPhone 8 Plus'] = exports.defineDevice({
         hasLandscape: true,
+        width: 414,
+        height: 736,
     }),
@@ -31,2 +36,4 @@ _a['iPhone 5s'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 568,
     }),
@@ -37,2 +44,4 @@ _a['iPhone 5c'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 568,
     }),
@@ -43,2 +52,4 @@ _a['iPhone 4s'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 480,
     }),
@@ -49,2 +60,4 @@ _a['Galaxy Note 8'] = exports.defineDevice({
         hasLandscape: true,
+        width: 400,
+        height: 822,
     }),
@@ -55,2 +68,4 @@ _a['Nexus 5'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 568,
     }),
@@ -61,2 +76,4 @@ _a['Lumia 920'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 533,
     }),
@@ -67,2 +84,4 @@ _a['Samsung Galaxy S5'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 568,
     }),
@@ -73,2 +92,4 @@ _a['HTC One'] = exports.defineDevice({
         hasLandscape: true,
+        width: 320,
+        height: 568,
     }),
@@ -79,2 +100,4 @@ _a['iPad Mini'] = exports.defineDevice({
         hasLandscape: true,
+        width: 576,
+        height: 768,
     }),
@@ -85,3 +108,6 @@ _a['MacBook Pro'] = exports.defineDevice({
         hasLandscape: false,
+        width: 960,
+        height: 600,
     }),
     _a);
+exports.DeviceNames = Object.keys(exports.DeviceOptions);

lib/DeviceSelector.d.ts

 import React from 'react';
 import { DeviceFramesetProps } from './DeviceFrameset';
-export declare type DeviceSelectorProps = {
+import { DeviceName } from './DeviceOptions';
+export declare type DeviceSelectorProps = React.HTMLAttributes<HTMLDivElement> & {
+    banDevices?: DeviceName[];
     children: (props: DeviceFramesetProps) => React.ReactNode;
 };
 export declare const DeviceSelector: React.NamedExoticComponent<DeviceSelectorProps>;

lib/DeviceSelector.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
@@ -21,2 +32,13 @@ if (k2 === undefined) k2 = k;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -26,11 +48,12 @@ exports.DeviceSelector = void 0;
 var DeviceFrameset_1 = require("./DeviceFrameset");
+var DeviceOptions_1 = require("./DeviceOptions");
 exports.DeviceSelector = react_1.default.memo(function DeviceSelector(_a) {
-    var children = _a.children;
-    var deviceNames = react_1.useMemo(function () { return Object.keys(DeviceFrameset_1.DeviceOptions); }, []);
-    var _b = react_1.useState(0), selectedDeviceIndex = _b[0], setSelectedDeviceIndex = _b[1];
-    var _c = react_1.useState(true), showMenu = _c[0], setShowMenu = _c[1];
+    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 _d = react_1.useMemo(function () { return DeviceFrameset_1.DeviceOptions[deviceName]; }, [deviceName]), colors = _d.colors, hasLandscape = _d.hasLandscape;
-    var _e = react_1.useState(0), selectedColorIndex = _e[0], setSelectedColorIndex = _e[1];
-    var _f = react_1.useState(undefined), isLandscape = _f[0], setIsLandscape = _f[1];
+    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]);
@@ -42,5 +65,7 @@ react_1.useEffect(function () { setIsLandscape(hasLandscape ? false : undefined); }, [hasLandscape]);
         color: selectedColor,
-        landscape: isLandscape
+        landscape: isLandscape,
+        width: width,
+        height: height,
     };
-    return (react_1.default.createElement("div", { className: "device-selector" },
+    return (react_1.default.createElement("div", __assign({ className: "device-selector" }, divProps),
         react_1.default.createElement("dl", null,
@@ -47,0 +72,0 @@ react_1.default.createElement("dt", null,

package.json

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

README.md

@@ -44,2 +44,4 @@ # React Device Frameset
 
+DeviceFramesetProps:
+
 ```ts (signature)
@@ -63,2 +65,11 @@ | { device: 'iPhone X', landscape?: boolean }
 
+```ts (signature)
+type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"
+
+type DeviceEmulatorProps = {
+    banDevices?: DeviceName[]
+    children: (props: DeviceFramesetProps) => React.ReactNode,
+}
+```
+
 ```tsx
@@ -77,1 +88,26 @@ import { DeviceFrameset, DeviceSelector } from 'react-device-frameset'
 ```
+
+## If you like the frameset emulator?
+
+```ts (signature)
+type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro"
+
+type DeviceEmulatorProps = {
+    banDevices?: DeviceName[]
+    children: (props: DeviceFramesetProps) => React.ReactNode,
+}
+```
+
+```tsx
+import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset'
+import 'react-device-frameset/lib/css/marvel-devices.min.css'
+import 'react-device-frameset/lib/css/device-emulator.min.css'
+
+export const App = () => {
+    return (
+        <DeviceEmulator banDevices={["HTC One"]}>
+            {props => <DeviceFrameset {...props} />}
+        </DeviceEmulator>
+    )
+}
+```

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

303593

increased by7.94%

Number of package files

26

increased by36.84%

Lines of code

3352

increased by14.13%

Number of lines in readme file

111

increased by48%

No dependency changes