fix: code review

src/editor/components/DeviceEmulation/DeviceEmulation.tsx

@@ -1,79 +1,23 @@
-import React, {Fragment, PropsWithChildren, useContext, useEffect, useRef} from 'react';
+import React, {Fragment, PropsWithChildren} from 'react';
 
-import {block} from '../../../utils';
-import {EditorContext} from '../../context';
 import {ViewModeItem} from '../../types';
-import {DeviceIframe} from '../../widget';
 
-import './DeviceEmulation.scss';
-
-const b = block('device-emulation');
+import DeviceEmulationMobile from './DeviceEmulationMobile/DeviceEmulationMobile';
+import {isMobileDevice, mobileDevices} from './utils';
 
 export interface DeviceEmulationProps extends PropsWithChildren {
     mode: ViewModeItem;
 }
 
-type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;
-
-const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile] as const;
-const isMobileDevice = (mode: ViewModeItem): mode is MobileDevice =>
-    mobileDevices.includes(mode as MobileDevice);
-
-interface DeviceEmulationMobileProps extends PropsWithChildren {
-    device: MobileDevice;
-    active: boolean;
-}
-
-const DeviceEmulationMobile = ({device, active}: DeviceEmulationMobileProps) => {
-    const {deviceEmulationSettings, ...initialData} = useContext(EditorContext);
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const deviceIframeRef = useRef<DeviceIframe | null>(null);
-
-    useEffect(() => {
-        let iframe: DeviceIframe;
-
-        if (containerRef?.current) {
-            iframe = new DeviceIframe(containerRef?.current, {
-                initialData,
-                className: b('frame', {device}),
-                settings: deviceEmulationSettings,
-            });
-            deviceIframeRef.current = iframe;
-        }
-
-        return () => {
-            iframe?.destroy();
-        };
-        // render iframe only once, then update it's data with postMessage
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [device]);
-
-    useEffect(() => {
-        if (deviceIframeRef.current) {
-            deviceIframeRef.current.onActivenessUpdate(active);
-        }
-    }, [active]);
-
-    useEffect(() => {
-        if (deviceIframeRef.current && initialData) {
-            deviceIframeRef.current.onDataUpdate(initialData);
-        }
-    }, [initialData]);
-
-    return <div className={b({active, device})} ref={containerRef} />;
-};
-
-const DeviceEmulation = ({children, mode}: DeviceEmulationProps) => {
-    return (
-        <Fragment>
-            {!isMobileDevice(mode) && children}
-            {mobileDevices.map((device) => (
-                <DeviceEmulationMobile key={device} device={device} active={mode === device}>
-                    {children}
-                </DeviceEmulationMobile>
-            ))}
-        </Fragment>
-    );
-};
+const DeviceEmulation = ({children, mode}: DeviceEmulationProps) => (
+    <Fragment>
+        {!isMobileDevice(mode) && children}
+        {mobileDevices.map((device) => (
+            <DeviceEmulationMobile key={device} device={device} active={mode === device}>
+                {children}
+            </DeviceEmulationMobile>
+        ))}
+    </Fragment>
+);
 
 export default DeviceEmulation;

src/editor/components/DeviceEmulation/DeviceEmulation.scss → src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.scss

@@ -1,6 +1,6 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../../styles/variables.scss';
 
-$block: '.#{$ns}device-emulation';
+$block: '.#{$ns}device-emulation-mobile';
 
 #{$block} {
     position: absolute;

src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx

@@ -0,0 +1,56 @@
+import React, {PropsWithChildren, useContext, useEffect, useRef} from 'react';
+
+import {block} from '../../../../utils';
+import {EditorContext} from '../../../context';
+import {DeviceIframe} from '../../../widget';
+import {MobileDevice} from '../utils';
+
+import './DeviceEmulationMobile.scss';
+
+const b = block('device-emulation-mobile');
+
+interface DeviceEmulationMobileProps extends PropsWithChildren {
+    device: MobileDevice;
+    active: boolean;
+}
+
+const DeviceEmulationMobile = ({device, active}: DeviceEmulationMobileProps) => {
+    const {deviceEmulationSettings, ...initialData} = useContext(EditorContext);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const deviceIframeRef = useRef<DeviceIframe | null>(null);
+
+    useEffect(() => {
+        let iframe: DeviceIframe;
+
+        if (containerRef?.current) {
+            iframe = new DeviceIframe(containerRef?.current, {
+                initialData,
+                className: b('frame', {device}),
+                settings: deviceEmulationSettings,
+            });
+            deviceIframeRef.current = iframe;
+        }
+
+        return () => {
+            iframe?.destroy();
+        };
+        // render iframe only once, then update it's data with postMessage
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [device]);
+
+    useEffect(() => {
+        if (deviceIframeRef.current) {
+            deviceIframeRef.current.onActivenessUpdate(active);
+        }
+    }, [active]);
+
+    useEffect(() => {
+        if (deviceIframeRef.current && initialData) {
+            deviceIframeRef.current.onDataUpdate(initialData);
+        }
+    }, [initialData]);
+
+    return <div className={b({active, device})} ref={containerRef} />;
+};
+
+export default DeviceEmulationMobile;

src/editor/components/DeviceEmulation/utils.ts

@@ -0,0 +1,8 @@
+import {ViewModeItem} from '../../types';
+
+export type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;
+
+export const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile] as const;
+
+export const isMobileDevice = (mode: ViewModeItem): mode is MobileDevice =>
+    [ViewModeItem.Tablet, ViewModeItem.Mobile].includes(mode as MobileDevice);