diff --git a/RELEASE.md b/RELEASE.md index 3b62270c5..ef9964fad 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -39,6 +39,7 @@ ### Fix - Nei template dei feed RSS ora viene mostrata la sorgente se presente. +- Sistemata sovrapposizione della finestra di selezione blocchi con altri blocchi e con l'header del sito. ## Versione 7.22.2 (11/10/2023) diff --git a/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx b/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx new file mode 100644 index 000000000..18e9f47ed --- /dev/null +++ b/src/customizations/volto/components/manage/BlockChooser/BlockChooserButton.jsx @@ -0,0 +1,157 @@ +/* CUSTOMIZATIONS +- zindex for handling overlapping in small pages +*/ + +import React from 'react'; +import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib'; +import addSVG from '@plone/volto/icons/circle-plus.svg'; +import { blockHasValue } from '@plone/volto/helpers'; +import { Icon, BlockChooser } from '@plone/volto/components'; +import config from '@plone/volto/registry'; +import { Button, Ref } from 'semantic-ui-react'; +import { defineMessages, useIntl } from 'react-intl'; +import { usePopper } from 'react-popper'; +import { Portal } from 'react-portal'; + +const messages = defineMessages({ + addBlock: { + id: 'Add block', + defaultMessage: 'Add block', + }, +}); + +export const ButtonComponent = (props) => { + const intl = useIntl(); + const { + className = `block-add-button${ + config.experimental.addBlockButton.enabled ? ' new-add-block' : '' + }`, + size = '19px', + onShowBlockChooser, + } = props; + + return ( + + ); +}; + +const BlockChooserButton = (props) => { + const { + block, + allowedBlocks, + showRestricted, + data, + onMutateBlock, + onInsertBlock, + blocksConfig, + buttonComponent, + properties, + } = props; + const { disableNewBlocks } = data; + const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false); + + const blockChooserRef = React.useRef(); + + const handleClickOutside = React.useCallback((e) => { + if ( + blockChooserRef.current && + doesNodeContainClick(blockChooserRef.current, e) + ) + return; + setAddNewBlockOpened(false); + }, []); + + const Component = buttonComponent || ButtonComponent; + + React.useEffect(() => { + document.addEventListener('mousedown', handleClickOutside, false); + return () => { + document.removeEventListener('mousedown', handleClickOutside, false); + }; + }, [handleClickOutside]); + + const [referenceElement, setReferenceElement] = React.useState(null); + const [popperElement, setPopperElement] = React.useState(null); + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: config.experimental.addBlockButton.enabled + ? 'bottom' + : 'right-start', + modifiers: [ + { + name: 'offset', + options: { + offset: [-10, 5], + }, + }, + { + name: 'flip', + options: { + fallbackPlacements: ['right-end', 'top-start'], + }, + }, + ], + }); + + return ( + <> + {!disableNewBlocks && + (config.experimental.addBlockButton.enabled || + !blockHasValue(data)) && ( + + setAddNewBlockOpened(true)} + /> + + )} + {addNewBlockOpened && ( + +
+ { + setAddNewBlockOpened(false); + onMutateBlock(id, value); + } + : null + } + onInsertBlock={ + onInsertBlock + ? (id, value) => { + setAddNewBlockOpened(false); + onInsertBlock(id, value); + } + : null + } + currentBlock={block} + allowedBlocks={allowedBlocks} + blocksConfig={blocksConfig} + properties={properties} + showRestricted={showRestricted} + ref={blockChooserRef} + /> +
+
+ )} + + ); +}; + +export default BlockChooserButton;