ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: usr / local / sitepad / editor / site-data / plugins / pagelayer / js / react / src / components

import { useState} from '@wordpress/element';
import { dispatch } from '@wordpress/data';

export const RenderScreenIcons = (props) =>{
	
	const { deviceType } = props;
	const [activeMode, setActiveMode] = useState(deviceType || 'desktop');
	const [visibleMode, setVisibleMode] = useState(false);
	
	const modes = {
		desktop: 'Desktop',
		tablet: 'Tablet',
		mobile: 'Mobile'
	};
		
	const handleModeChange = (mode) => {
		if ( null !== dispatch( 'core/edit-post' ) ) {
			const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } = dispatch( 'core/edit-post' );
			setPreviewDeviceType(modes[mode]);
		}
		setActiveMode(mode);
		setVisibleMode( !visibleMode );
	};
	
	return (
		<>
			<div className="pagelayer-elp-screen">
				{Object.keys(modes).map((mode) => (
					<i
					key={mode}
					className={`pli pli-${mode} ${visibleMode ? 'open' : ''}`}
					onClick={() => handleModeChange(mode)}
					></i>
				))}
				<i className={`pagelayer-prop-screen pli pli-${activeMode}`} onClick={() => setVisibleMode( !visibleMode ) } ></i>
			</div>
		</>
	);	
}

[+] ..
[-] typography.js [open]
[-] spinner.js [open]
[-] text-shadow.js [open]
[-] filter.js [open]
[-] multiselect.js [open]
[-] padding.js [open]
[-] select.js [open]
[-] link.js [open]
[-] color.js [open]
[-] gradient.js [open]
[-] setting-tabs-control.js [open]
[-] modal.js [open]
[-] slider.js [open]
[-] screen-icon.js [open]
[-] icon.js [open]
[-] label.js [open]
[-] image.js [open]
[-] rich_text.js [open]
[-] media.js [open]
[-] checkbox.js [open]
[-] html-to-react.js [open]
[-] textarea.js [open]
[-] datetime.js [open]
[-] font_family.js [open]
[-] dimension.js [open]
[-] box-shadow.js [open]
[-] radio.js [open]
[-] access.js [open]
[-] multi-image.js [open]