Server IP : 104.21.14.103 / Your IP : 18.118.154.48 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /proc/self/root/proc/thread-self/root/home/giankuin/thietke365.net/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/noninteractive/ |
Upload File : |
/** * External dependencies */ import { useRef, useLayoutEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; import { useDebouncedCallback } from 'use-debounce'; /** * Names of control nodes which need to be disabled. */ const FOCUSABLE_NODE_NAMES = [ 'BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA', 'A', ]; /** * Noninteractive component * * Makes children elements Noninteractive, preventing both mouse and keyboard events without affecting how the elements * appear visually. Used for previews. * * Based on the <Disabled> component in WordPress. * * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/disabled/index.js */ const Noninteractive = ( { children, style = {}, ...props }: { children: React.ReactNode; style?: Record< string, string >; } ): JSX.Element => { const node = useRef< HTMLDivElement >( null ); const disableFocus = () => { if ( node.current ) { focus.focusable.find( node.current ).forEach( ( focusable ) => { if ( FOCUSABLE_NODE_NAMES.includes( focusable.nodeName ) ) { focusable.setAttribute( 'tabindex', '-1' ); } if ( focusable.hasAttribute( 'contenteditable' ) ) { focusable.setAttribute( 'contenteditable', 'false' ); } } ); } }; // Debounce re-disable since disabling process itself will incur additional mutations which should be ignored. const debounced = useDebouncedCallback( disableFocus, 0, { leading: true, } ); useLayoutEffect( () => { let observer: MutationObserver | undefined; disableFocus(); if ( node.current ) { observer = new window.MutationObserver( debounced ); observer.observe( node.current, { childList: true, attributes: true, subtree: true, } ); } return () => { if ( observer ) { observer.disconnect(); } debounced.cancel(); }; }, [ debounced ] ); return ( <div ref={ node } aria-disabled="true" style={ { userSelect: 'none', pointerEvents: 'none', cursor: 'normal', ...style, } } { ...props } > { children } </div> ); }; export default Noninteractive;