| System: Linux server378.web-hosting.com 4.18.0-553.80.1.lve.el8.x86_64 #1 SMP Wed Oct 22 19:29:36 UTC 2025 x86_64 Current Path : /var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/ |
| Current File : //var/softaculous/sitepad/editor/site-data/plugins/pagelayer/js/react/src/components/screen-icon.js |
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>
</>
);
}