Файловый менеджер - Редактировать - /home/ephorei/www/wp-content/plugins/sureforms/modules/quick-action-sidebar/components/Sidebar.js
Назад
/** * The Quick Access Sidebar. */ import { useLayoutEffect, useState, useEffect } from '@wordpress/element'; import style from '../editor.lazy.scss'; import Blocks from './blocks'; import PopoverModal from './Modal'; import getApiData from '@Controls/getApiData'; import { __ } from '@wordpress/i18n'; import { Popover } from '@wordpress/components'; const Sidebar = () => { const [ defaultAllowedQuickSidebarBlocks, setDefaultAllowedQuickSidebarBlocks, ] = useState( srfm_quick_sidebar_blocks.allowed_blocks ); const [ isPopoverVisible, setPopoverVisible ] = useState( false ); // State to track the sorting status const [ isSorting, setSorting ] = useState( false ); const [ hovering, setHovering ] = useState( null ); // State to track the active tab const [ activeTab, setActiveTab ] = useState( 0 ); const handleMouseOver = ( button ) => setHovering( button ); const handleMouseOut = () => setHovering( false ); // Function to handle outside click useEffect( () => { const handleOutsideClick = ( event ) => { // Check if the click is outside the QAB sidebar and popover if ( document.querySelector( '.srfm-ee-quick-access' ) && ! document .querySelector( '.srfm-ee-quick-access' ) .contains( event.target ) && ! document.querySelector( '.popover' )?.contains( event.target ) ) { setPopoverVisible( false ); setSorting( false ); setActiveTab( 0 ); } }; // Add event listener when component mounts document.body.addEventListener( 'click', handleOutsideClick ); // Remove event listener when component unmounts return () => { document.body.removeEventListener( 'click', handleOutsideClick ); }; }, [] ); // Empty array ensures this effect runs only once when the component mounts // Function to handle tab click const handleTabClick = ( index ) => { setActiveTab( index ); }; useLayoutEffect( () => { style.use(); return () => { style.unuse(); }; }, [] ); // Function to open the popover const openPopover = () => { setPopoverVisible( true ); setSorting( false ); }; // Function to close the popover const closePopover = () => { setPopoverVisible( false ); setSorting( false ); }; // Function to enable re-arrange const enableRearrange = () => { setSorting( true ); }; function updateDefaultAllowedQuickSidebarBlocks( allowedBlocks ) { setDefaultAllowedQuickSidebarBlocks( allowedBlocks ); } // Saving the allowed blocks to the database. const saveOptionToDatabase = ( allowedBlocks ) => { // update allowedBlocks. updateDefaultAllowedQuickSidebarBlocks( allowedBlocks ); // Create an object with the srfm_ajax_nonce and confirmation properties. const data = { security: srfm_quick_sidebar_blocks.srfm_ajax_nonce, defaultAllowedQuickSidebarBlocks: JSON.stringify( allowedBlocks ), }; // Call the getApiData function with the specified parameters. getApiData( { url: srfm_quick_sidebar_blocks.srfm_ajax_url, action: 'srfm_global_update_allowed_block', data, } ); }; return ( <> <div className="srfm-ee-quick-access"> <div className="srfm-ee-quick-access__sidebar"> { /* The block selection buttons will come here. */ } <div className="srfm-ee-quick-access__sidebar--blocks"> <Blocks defaultAllowedQuickSidebarBlocks={ defaultAllowedQuickSidebarBlocks } updateDefaultAllowedQuickSidebarBlocks={ updateDefaultAllowedQuickSidebarBlocks } saveOptionToDatabase={ saveOptionToDatabase } enableRearrange={ isSorting } /> </div> </div> { /* The sidebar actions will come here - like the plus sign. */ } <div className="srfm-ee-quick-access__sidebar--tabs-container"> <div className="srfm-ee-quick-access__sidebar--tabs"> { /* Map over your tab items */ } { [ 'add', 'sort' ].map( ( tab, index ) => ( <div key={ index } className={ `tab ${ activeTab === index ? 'active' : '' }` } onClick={ () => handleTabClick( index ) } > { 'add' === tab && ( <div className="srfm-ee-quick-access__sidebar--actions"> <div className="srfm-ee-quick-access__sidebar--actions--plus"> <div className="srfm-quick-action-sidebar-wrap"> <div id="plus-icon" onClick={ openPopover } onMouseOver={ () => handleMouseOver( 'add' ) } onMouseOut={ handleMouseOut } onFocus={ () => handleMouseOver( 'add' ) } onBlur={ handleMouseOut } > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" fill="#fff" focusable="false" > <path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"></path> </svg> </div> { isPopoverVisible && ( <PopoverModal closePopover={ closePopover } updateDefaultAllowedQuickSidebarBlocks={ updateDefaultAllowedQuickSidebarBlocks } defaultAllowedQuickSidebarBlocks={ defaultAllowedQuickSidebarBlocks } saveOptionToDatabase={ saveOptionToDatabase } /> ) } { hovering === 'add' && ( <Popover placement="right" className="srfm-ee-quick-access__sidebar--blocks--block--icon--name" > <div className="block-title"> { __( 'Add blocks to Quick Action Bar', 'sureforms' ) } </div> </Popover> ) } </div> </div> </div> ) } { 'sort' === tab && ( <div className="srfm-ee-quick-access__sidebar--actions"> <div className="srfm-ee-quick-access__sidebar--actions--plus rearrange"> <div className="srfm-quick-action-sidebar-wrap"> <div id="rearrange-icon" onClick={ enableRearrange } onMouseOver={ () => handleMouseOver( 'sort' ) } onMouseOut={ handleMouseOut } onFocus={ () => handleMouseOver( 'sort' ) } onBlur={ handleMouseOut } > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" fill="#fff" focusable="false" > <path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"></path> </svg> { hovering === 'sort' && ( <Popover placement="right" className="srfm-ee-quick-access__sidebar--blocks--block--icon--name" > <div className="block-title"> { __( 'Re-arrange block inside Quick Action Bar', 'sureforms' ) } </div> </Popover> ) } </div> </div> </div> </div> ) } </div> ) ) } </div> </div> </div> </> ); }; export default Sidebar;
| ver. 1.4 |
Github
|
.
| PHP 8.0.30 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка