74 lines
2.5 KiB
React
74 lines
2.5 KiB
React
import { useDispatch, useSelect } from '@wordpress/data';
|
|
import { useCallback, useEffect, useState } from '@wordpress/element';
|
|
import { acceptBlockSuggestion } from '../lib/dom';
|
|
import { recordGuidelinesEvent } from '../lib/tracks';
|
|
import { AI_STORE_NAME } from '../store';
|
|
import DiffView from './diff-view';
|
|
|
|
// Renders only the diff view. Accept/Dismiss and Improve buttons live in
|
|
// BlockSuggestionButtons, injected as a separate row above the modal action bar.
|
|
export default function BlockSuggestionActions( { blockName, blockModal } ) {
|
|
const suggestion = useSelect(
|
|
select => select( AI_STORE_NAME ).getSuggestion( blockName ),
|
|
[ blockName ]
|
|
);
|
|
const blockLoading = useSelect(
|
|
select => select( AI_STORE_NAME ).isSectionLoading( blockName ),
|
|
[ blockName ]
|
|
);
|
|
const { clearSuggestion } = useDispatch( AI_STORE_NAME );
|
|
|
|
const [ original, setOriginal ] = useState( '' );
|
|
const [ textareaHeight, setTextareaHeight ] = useState( null );
|
|
|
|
// Clear stale suggestion when the modal closes (component unmounts).
|
|
useEffect( () => {
|
|
return () => clearSuggestion( blockName );
|
|
}, [ blockName, clearSuggestion ] );
|
|
|
|
// Toggle shimmer and suggestion classes on the modal.
|
|
useEffect( () => {
|
|
if ( ! blockModal ) {
|
|
return;
|
|
}
|
|
|
|
// Capture textarea content and height before hiding it.
|
|
if ( suggestion && ! blockModal.classList.contains( 'has-jetpack-suggestion' ) ) {
|
|
const textarea = blockModal.querySelector( '.components-textarea-control__input' );
|
|
if ( textarea ) {
|
|
setOriginal( textarea.value || '' );
|
|
if ( textarea.offsetHeight > 0 ) {
|
|
setTextareaHeight( textarea.offsetHeight );
|
|
} else {
|
|
const rows = parseInt( textarea.getAttribute( 'rows' ), 10 ) || 6;
|
|
setTextareaHeight( rows * 20 + 20 );
|
|
}
|
|
}
|
|
}
|
|
|
|
blockModal.classList.toggle( 'has-jetpack-suggestion', !! suggestion );
|
|
blockModal.classList.toggle( 'is-jetpack-loading', blockLoading && ! suggestion );
|
|
return () => {
|
|
blockModal.classList.remove( 'has-jetpack-suggestion', 'is-jetpack-loading' );
|
|
};
|
|
}, [ blockModal, suggestion, blockLoading ] );
|
|
|
|
const handleAccept = useCallback( () => {
|
|
recordGuidelinesEvent( 'accept', { type: 'block', slug: blockName } );
|
|
acceptBlockSuggestion( blockModal, blockName, suggestion, clearSuggestion );
|
|
}, [ blockModal, blockName, suggestion, clearSuggestion ] );
|
|
|
|
if ( ! suggestion ) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<DiffView
|
|
original={ original }
|
|
suggestion={ suggestion }
|
|
onAccept={ handleAccept }
|
|
height={ textareaHeight }
|
|
/>
|
|
);
|
|
}
|