diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx index 2a6eea9525f..93e159935a0 100644 --- a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx +++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx @@ -12,7 +12,6 @@ import arrowRightIcon from './icon--arrow-right.svg'; import styles from './delete-confirmation-prompt.css'; -// TODO: Parametrize from outside if we want more custom messaging const messages = defineMessages({ shouldDeleteSpriteMessage: { defaultMessage: 'Are you sure you want to delete this sprite?', @@ -47,9 +46,16 @@ const messages = defineMessages({ }); const modalWidth = 300; -const calculateModalPosition = (relativeElemRef, modalPosition) => { +const calculateModalPosition = (relativeElemRef, modalPosition, isRTL) => { const refPosition = relativeElemRef.getBoundingClientRect(); + if (isRTL) { + return { + top: refPosition.top - refPosition.height, + left: refPosition.right + 25 + }; + } + if (modalPosition === 'left') { return { top: refPosition.top - refPosition.height, @@ -71,11 +77,9 @@ const getMessage = entityType => { if (entityType === 'COSTUME') { return messages.shouldDeleteCostumeMessage; } - if (entityType === 'SOUND') { return messages.shouldDeleteSoundMessage; } - return messages.shouldDeleteSpriteMessage; }; @@ -87,12 +91,11 @@ const DeleteConfirmationPrompt = ({ entityType, relativeElemRef }) => { - const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition); + const isRTL = document.querySelector('[dir="rtl"]') !== null; + const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition, isRTL); return ( - { modalPosition === 'right' ? - - - : null } + + + @@ -160,13 +174,6 @@ const DeleteConfirmationPrompt = ({ - {modalPosition === 'left' ? - - - : null } ); };