import { STORE_NAME } from '@quantum-viewports/store'; import { Head } from './head'; import { Body } from './body'; import { Foot } from './foot'; const { data: { useSelect, }, i18n: { __, } } = window[ 'wp' ]; /** * Set component const to export inspector ui. */ export const Inspector = () => { // Set states. const { isActive, isInspecting, isSaving, } = useSelect( ( select: Function ) => { const store = select( STORE_NAME ); return { isActive: store.isActive(), isInspecting: store.isInspecting(), isSaving: store.isSaving(), } }, [] ); // Check if we need to render. if ( ! isInspecting ) { return null; } // Setup classNames. let classNamesWrap = 'qp-viewports-inspector dark'; if ( ! isActive ) { classNamesWrap = classNamesWrap + ' flyout'; } // Render component. return (
); } export * from './attributelist'; export * from './blocklist'; export * from './stylelist'; export * from './portals'; export * from './toggle';