feat: controlled deviceEmulator && deviceSelector

Author: zheeeng

README.md

@@ -67,6 +67,8 @@ type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPh
 type DeviceEmulatorProps = {
     banDevices?: DeviceName[]
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void, 
 }
 ```
 
@@ -92,6 +94,8 @@ type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPh
 type DeviceEmulatorProps = {
     banDevices?: DeviceName[]
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void, 
 }
 ```
 

package.json

@@ -22,7 +22,7 @@
     "typescript"
   ],
   "repository": "https://github.com/zheeeng/react-device-frameset",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "lib/DeviceFrameset.js",
   "scripts": {

src/DeviceEmulator.tsx

@@ -5,50 +5,58 @@ import { DeviceName, DeviceNames } from './DeviceOptions'
 export type DeviceEmulatorProps = React.HTMLAttributes<HTMLDivElement> & {
     banDevices?: DeviceName[]
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void,
 }
 
-export const DeviceEmulator = React.memo<DeviceEmulatorProps>(function DeviceEmulator ({ children, banDevices = [], ...divProps }) {
+export const DeviceEmulator = React.memo<DeviceEmulatorProps>(function DeviceEmulator ({ children, value, onChange, banDevices = [], ...divProps }) {
     const deviceNames = useMemo(() => DeviceNames.filter(devName => !banDevices.includes(devName)) as Array<keyof typeof DeviceOptions>, [])
     const [deviceName, setDeviceName] = useState<DeviceName>(deviceNames[0] ?? '')
+    const selectedDeviceName = useMemo(() => value ?? deviceName, [value, deviceName])
 
     const handleSelectChange = useCallback(
         (event: React.ChangeEvent<HTMLSelectElement>) => {
-            setDeviceName(event.target.value as DeviceName)
+            const newDeviceName = event.target.value as DeviceName
+            if (!deviceNames.includes(newDeviceName)) throw new Error(`Invalid device name for ${newDeviceName}`)
+
+            onChange?.(newDeviceName)
+            setDeviceName(newDeviceName)
         },
-        [],
+        [deviceNames, onChange],
     )
 
-    const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[deviceName], [deviceName])
+    const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[selectedDeviceName], [selectedDeviceName])
+
+    const firstColor = useMemo(() => colors[0]!, [colors])
 
-    const [selectedColorIndex, setSelectedColorIndex] = useState(0) 
     const [isLandscape, setIsLandscape] = useState<boolean | undefined>(undefined)
 
-    useEffect(
-        () => { setSelectedColorIndex(0) },
-        [colors],
-    )
-    useEffect(
-        () => { setIsLandscape(hasLandscape ? false : undefined) },
-        [hasLandscape],
-    )
+    const isLandscapeChecked = useMemo(() => hasLandscape ? isLandscape : undefined, [hasLandscape, isLandscape])
 
-    const selectedColor = useMemo(() => colors[selectedColorIndex], [colors, selectedColorIndex])
+    const handleIsLandscapeChange = useCallback(
+        () => {
+            if (!hasLandscape) return
+
+            setIsLandscape(is => !is)
+        },
+        [hasLandscape]
+    )
 
     const deviceFramesetProps = useMemo(
         () => ({
-            device: deviceName,
-            color: selectedColor,
-            landscape: isLandscape,
+            device: selectedDeviceName,
+            color: firstColor,
+            landscape: isLandscapeChecked,
             width,
             height,
         }) as DeviceFramesetProps,
-        [deviceName, selectedColor, isLandscape, width, height],
+        [selectedDeviceName, firstColor, isLandscapeChecked, width, height],
     )
 
     return (
         <div className="device-emulator" {...divProps}>
             <section>
-                <select value={deviceName} onChange={handleSelectChange}>
+                <select value={selectedDeviceName} onChange={handleSelectChange}>
                     {deviceNames.map((devName) => (
                         <option
                             key={devName}
@@ -60,7 +68,7 @@ export const DeviceEmulator = React.memo<DeviceEmulatorProps>(function DeviceEmu
                 <span>x</span>
                 <input disabled value={height} />
                 <label>Landscape:</label>
-                <input type="checkbox" checked={isLandscape} onClick={() => setIsLandscape(is => !is)}/>
+                <input type="checkbox" checked={!!isLandscapeChecked} disabled={!hasLandscape} onChange={handleIsLandscapeChange}/>
             </section>
 
             <div className="device-emulator-container">

src/DeviceFrameset.tsx

@@ -7,7 +7,10 @@ export { DeviceOptions, DeviceFramesetProps }
 
 export const DeviceFrameset = React.memo<DeviceFramesetProps>(
     function DeviceFrameset(props) {
-        const { children, device, width, height, ...divProps } = props
+        const { children, device, width, height, ...restProps } = props
+        // @ts-expect-error
+        const { landscape: _l, color: _c, ...divProps } = restProps
+
         const color = 'color' in props ? props.color : undefined
         const landscape = 'landscape' in props ? props.landscape : undefined
 

src/DeviceSelector.tsx

@@ -1,63 +1,93 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState, useCallback } from 'react'
 import { DeviceOptions, DeviceFramesetProps } from './DeviceFrameset'
 import { DeviceName, DeviceNames } from './DeviceOptions'
 
 export type DeviceSelectorProps = React.HTMLAttributes<HTMLDivElement> & {
     banDevices?: DeviceName[],
     children: (props: DeviceFramesetProps) => React.ReactNode,
+    value?: DeviceName,
+    onChange?: (deviceName: DeviceName) => void,
 }
 
-export const DeviceSelector = React.memo<DeviceSelectorProps>(function DeviceSelector ({ children, banDevices = [], ...divProps }) {
+export const DeviceSelector = React.memo<DeviceSelectorProps>(function DeviceSelector ({ children, value, onChange, banDevices = [], ...divProps }) {
     const deviceNames = useMemo(() => DeviceNames.filter(devName => !banDevices.includes(devName)) as Array<keyof typeof DeviceOptions>, [])
-    const [selectedDeviceIndex, setSelectedDeviceIndex] = useState(0)
+    const [deviceName, setDeviceName] = useState<DeviceName>(deviceNames[0] ?? '')
+    const selectedDeviceName = useMemo(() => value ?? deviceName, [value, deviceName])
+
+    const handleSelectChange = useCallback(
+        (event: React.MouseEvent<HTMLElement>) => {
+
+            const newDeviceName = event.currentTarget.dataset['deviceName'] as DeviceName
+            if (!deviceNames.includes(newDeviceName)) throw new Error(`Invalid device name for ${newDeviceName}`)
+
+            onChange?.(newDeviceName)
+            setDeviceName(newDeviceName)
+        },
+        [deviceNames, onChange],
+    )
+
     const [showMenu, setShowMenu] = useState(true)
 
-    const deviceName = useMemo(() => deviceNames[selectedDeviceIndex], [selectedDeviceIndex])
+    const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[selectedDeviceName], [selectedDeviceName])
 
-    const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[deviceName], [deviceName])
+    const firstColor = useMemo(() => colors[0]!, [colors])
 
-    const [selectedColorIndex, setSelectedColorIndex] = useState(0) 
-    const [isLandscape, setIsLandscape] = useState<boolean | undefined>(undefined)
+    const [selectedColor, setSelectedColor] = useState<typeof colors[number]>(firstColor)
 
-    useEffect(
-        () => { setSelectedColorIndex(0) },
-        [colors],
-    )
-    useEffect(
-        () => { setIsLandscape(hasLandscape ? false : undefined) },
-        [hasLandscape],
+    const handleColorChange = useCallback(
+        (event: React.MouseEvent<HTMLLIElement>) => {
+
+            const newDeviceColor = event.currentTarget.dataset['deviceColor'] as typeof colors[number]
+
+            setSelectedColor(newDeviceColor)
+        },
+        [],
     )
 
-    const selectedColor = useMemo(() => colors[selectedColorIndex], [colors, selectedColorIndex])
+    useEffect(() => { setSelectedColor(firstColor) }, [firstColor])
+
+    const [isLandscape, setIsLandscape] = useState<boolean | undefined>(undefined)
+
+    const isLandscapeChecked = useMemo(() => hasLandscape ? isLandscape : undefined, [hasLandscape, isLandscape])
+
+    const handleIsLandscapeChange = useCallback(
+        () => {
+            if (!hasLandscape) return
+
+            setIsLandscape(is => !is)
+        },
+        [hasLandscape]
+    )
 
     const deviceFramesetProps = useMemo(
         () => ({
-            device: deviceName,
+            device: selectedDeviceName,
             color: selectedColor,
-            landscape: isLandscape,
+            landscape: isLandscapeChecked,
             width,
             height,
         }) as DeviceFramesetProps,
-        [deviceName, selectedColor, isLandscape, width, height],
+        [selectedDeviceName, selectedColor, isLandscapeChecked, width, height],
     )
 
     return (
         <div className="device-selector" {...divProps}>
             <dl>
                 <dt>
-                    <p>The Chosen: {deviceName}</p>
+                    <p>The Chosen: {selectedDeviceName}</p>
                     <span
                         className={(showMenu ? 'active' : '')}
                         onClick={() => setShowMenu(is => !is)}
                     >
                         show all devices
                     </span>
                 </dt>
-                {showMenu && deviceNames.map((devName, index) => (
+                {showMenu && deviceNames.map((devName) => (
                     <dd
                         key={devName}
-                        onClick={() => setSelectedDeviceIndex(index)}
-                        className={devName === deviceName ? 'active' : ''}
+                        data-device-name={devName}
+                        onClick={handleSelectChange}
+                        className={devName === selectedDeviceName ? 'active' : ''}
                     >
                         <input type="radio" id={devName} />
                         <label htmlFor={devName}>
@@ -66,19 +96,20 @@ export const DeviceSelector = React.memo<DeviceSelectorProps>(function DeviceSel
                                 {DeviceOptions[devName].hasLandscape && (
                                     <span
                                         className={(devName === deviceName && isLandscape) ? 'active' : ''}
-                                        onClick={() => setIsLandscape(is => !is)}
+                                        onClick={handleIsLandscapeChange}
                                     >
                                         landscape
                                     </span>
                                 )}
                             </div>
                             <ul>
                                 {DeviceOptions[devName].colors.map(
-                                    (color: string, index: number) => (
+                                    (color: string) => (
                                         <li
                                             key={color}
                                             title={color}
-                                            onClick={() => setSelectedColorIndex(index)}
+                                            data-device-color={color}
+                                            onClick={handleColorChange}
                                             className={[((devName === deviceName && color === selectedColor) ? 'active' : ''), color].join(' ')}
                                         />
                                     )

src/index.ts

@@ -1,2 +1,3 @@
-export * from './DeviceFrameset'
-export * from './DeviceSelector'
+export * from './DeviceFrameset';
+export * from './DeviceSelector';
+export * from './DeviceEmulator';