rtl support for delete-confirmation-prompt

this commit adds rtl support to the delete-confirmation-prompt of scratch-gui.

Author: pishi.ai

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css

@@ -10,17 +10,32 @@
 .arrow-container {
     display: flex;
     align-items: center;
+}
+
+[dir="ltr"] .arrow-container {
     margin-right: -7px;
 }
 
-.arrow-container-left {
+[dir="rtl"] .arrow-container {
+    margin-left: -7px;
+}
+
+[dir="ltr"] .arrow-container-left {
     margin-right: -7px;
 }
 
-.arrow-container-right {
+[dir="rtl"] .arrow-container-left {
     margin-left: -7px;
 }
 
+[dir="ltr"] .arrow-container-right {
+    margin-left: -7px;
+}
+
+[dir="rtl"] .arrow-container-right {
+    margin-right: -7px;
+}
+
 .body {
     padding: 1rem 1.5rem;
     border-radius: 0.5rem;
@@ -55,14 +70,22 @@
     margin: auto;
 }
 
-.button-row button.ok-button {
+[dir="ltr"] .button-row button.ok-button {
     margin-left: 0;
 }
 
-.button-row button.cancel-button {
+[dir="rtl"] .button-row button.ok-button {
+    margin-right: 0;
+}
+
+[dir="ltr"] .button-row button.cancel-button {
     margin-right: 0;
 }
 
+[dir="rtl"] .button-row button.cancel-button {
+    margin-left: 0;
+}
+
 .message {
     margin-top: 0.25rem;
 }
@@ -71,4 +94,3 @@
     height: 1.5rem;
     width: 1.5rem;
 }
-

packages/scratch-gui/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx

@@ -85,7 +85,8 @@ const DeleteConfirmationPrompt = ({
     onOk,
     modalPosition,
     entityType,
-    relativeElemRef
+    relativeElemRef,
+    isRtl
 }) => {
     const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition);
 
@@ -119,12 +120,15 @@ const DeleteConfirmationPrompt = ({
         contentLabel={intl.formatMessage(messages.confirmDeletionHeading)}
         onRequestClose={onCancel}
     >
-        <Box className={styles.modalContainer}>
-            { modalPosition === 'right' ?
+        <Box
+            className={styles.modalContainer}
+            dir={isRtl ? 'rtl' : 'ltr'}
+        >
+            {((modalPosition === 'right' && !isRtl) || (modalPosition === 'left' && isRtl)) ?
                 <Box className={classNames(styles.arrowContainer, styles.arrowContainerLeft)}>
                     <img
                         className={styles.deleteIcon}
-                        src={arrowLeftIcon}
+                        src={isRtl ? arrowRightIcon : arrowLeftIcon}
                     />
                 </Box> : null }
             <Box className={styles.body}>
@@ -160,11 +164,11 @@ const DeleteConfirmationPrompt = ({
                     </button>
                 </Box>
             </Box>
-            {modalPosition === 'left' ?
+            {((modalPosition === 'left' && !isRtl) || (modalPosition === 'right' && isRtl)) ?
                 <Box className={classNames(styles.arrowContainer, styles.arrowContainerRight)}>
                     <img
                         className={styles.deleteIcon}
-                        src={arrowRightIcon}
+                        src={isRtl ? arrowLeftIcon : arrowRightIcon}
                     />
                 </Box> : null }
         </Box>
@@ -177,7 +181,8 @@ DeleteConfirmationPrompt.propTypes = {
     relativeElemRef: PropTypes.object,
     entityType: PropTypes.string,
     modalPosition: PropTypes.string,
-    intl: intlShape.isRequired
+    intl: intlShape.isRequired,
+    isRtl: PropTypes.bool
 };
 
 const DeleteConfirmationPromptIntl = injectIntl(DeleteConfirmationPrompt);

packages/scratch-gui/src/components/sprite-selector/sprite-list.jsx

@@ -30,7 +30,8 @@ const SpriteList = function (props) {
         ordering,
         raised,
         selectedId,
-        items
+        items,
+        isRtl
     } = props;
 
     const isSpriteDrag = draggingType === DragConstants.SPRITE;
@@ -95,7 +96,7 @@ const SpriteList = function (props) {
                                 onDuplicateButtonClick={onDuplicateSprite}
                                 onExportButtonClick={onExportSprite}
                                 withDeleteConfirmation
-                                deleteConfirmationModalPosition={'left'}
+                                deleteConfirmationModalPosition={isRtl ? 'right' : 'left'}
                             />
                         </SortableAsset>
                     );
@@ -134,7 +135,8 @@ SpriteList.propTypes = {
     onSelectSprite: PropTypes.func,
     ordering: PropTypes.arrayOf(PropTypes.number),
     raised: PropTypes.bool,
-    selectedId: PropTypes.string
+    selectedId: PropTypes.string,
+    isRtl: PropTypes.bool
 };
 
 export default SortableHOC(SpriteList);

packages/scratch-gui/src/components/sprite-selector/sprite-selector.jsx

@@ -111,6 +111,7 @@ const SpriteSelectorComponent = function (props) {
                 onDuplicateSprite={onDuplicateSprite}
                 onExportSprite={onExportSprite}
                 onSelectSprite={onSelectSprite}
+                isRtl={isRtl(intl.locale)}
             />
             <ActionMenu
                 className={styles.addButton}

packages/scratch-gui/src/containers/delete-confirmation-prompt.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+import DeleteConfirmationPromptComponent from '../components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+
+const DeleteConfirmationPrompt = props => (
+    <DeleteConfirmationPromptComponent {...props} />
+);
+
+DeleteConfirmationPrompt.propTypes = {
+    isRtl: PropTypes.bool,
+    onCancel: PropTypes.func.isRequired,
+    onOk: PropTypes.func.isRequired,
+    modalPosition: PropTypes.string,
+    entityType: PropTypes.string.isRequired,
+    relativeElemRef: PropTypes.object.isRequired
+};
+
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+export default connect(
+    mapStateToProps
+)(DeleteConfirmationPrompt);

packages/scratch-gui/src/containers/sprite-selector-item.jsx

@@ -10,7 +10,7 @@ import getCostumeUrl from '../lib/get-costume-url';
 import DragRecognizer from '../lib/drag-recognizer';
 import {getEventXY} from '../lib/touch-utils';
 import {GUIStoragePropType} from '../gui-config';
-import DeleteConfirmationPrompt from '../components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+import DeleteConfirmationPrompt from './delete-confirmation-prompt';
 
 import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
 
@@ -155,6 +155,7 @@ class SpriteSelectorItem extends React.PureComponent {
                 relativeElemRef={this.ref}
                 entityType={this.props.dragType}
                 modalPosition={deleteConfirmationModalPosition}
+                isRtl={this.props.isRtl}
             /> : null}
             <SpriteSelectorItemComponent
                 componentRef={this.setRef}
@@ -194,15 +195,17 @@ SpriteSelectorItem.propTypes = {
     selected: PropTypes.bool,
     withDeleteConfirmation: PropTypes.bool,
     deleteConfirmationModalPosition: PropTypes.string,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    isRtl: PropTypes.bool
 };
 
 const mapStateToProps = (state, {id}) => ({
     storage: state.scratchGui.config.storage,
     dragging: state.scratchGui.assetDrag.dragging,
     receivedBlocks: state.scratchGui.hoveredTarget.receivedBlocks &&
             state.scratchGui.hoveredTarget.sprite === id,
-    vm: state.scratchGui.vm
+    vm: state.scratchGui.vm,
+    isRtl: state.locales.isRtl
 });
 const mapDispatchToProps = dispatch => ({
     dispatchSetHoveredSprite: spriteId => {

packages/scratch-gui/test/unit/containers/sprite-selector-item.test.jsx

@@ -7,7 +7,7 @@ import VM from '@scratch/scratch-vm';
 import SpriteSelectorItemContainer from '../../../src/containers/sprite-selector-item';
 import DeleteButton from '../../../src/components/delete-button/delete-button';
 import {legacyConfig} from '../../../src/legacy-config';
-import DeleteConfirmationPrompt from '../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+import DeleteConfirmationPrompt from '../../../src/containers/delete-confirmation-prompt';
 
 jest.mock('../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx', () => jest.fn(() => null));
 describe('SpriteSelectorItem Container', () => {