chore(content-explorer): migrate renameDialog

src/elements/content-explorer/ContentExplorer.js

@@ -1782,8 +1782,6 @@ class ContentExplorer extends Component<Props, State> {
                             item={selected}
                             isLoading={isLoading}
                             errorCode={errorCode}
-                            parentElement={this.rootElement}
-                            appElement={this.appElement}
                         />
                     ) : null}
                     {canShare && selected && !!this.appElement ? (

src/elements/content-explorer/RenameDialog.scss

@@ -0,0 +1,18 @@
+@import '../common/variables';
+
+.be-modal-rename {
+    width: 400px;
+
+    .be-modal-btns {
+        display: flex;
+        justify-content: center;
+    }
+
+    .be-modal-error {
+        color: $red;
+    }
+
+    input {
+        width: 100%;
+    }
+}

src/elements/content-explorer/RenameDialog.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Modal } from '@box/blueprint-web';
+import type { BoxItem } from '../../common/types/core';
+
+import { ERROR_CODE_ITEM_NAME_TOO_LONG, ERROR_CODE_ITEM_NAME_IN_USE } from '../../constants';
+
+import messages from '../common/messages';
+
+import './RenameDialog.scss';
+
+export interface RenameDialogProps {
+    errorCode: string;
+    isLoading: boolean;
+    isOpen: boolean;
+    item: BoxItem;
+    onCancel: () => void;
+    onRename: (nameWithoutExt: string, extension: string) => void;
+}
+
+/* eslint-disable jsx-a11y/label-has-for */
+const RenameDialog = ({ errorCode, isLoading, isOpen, item, onCancel, onRename }: RenameDialogProps) => {
+    const { formatMessage } = useIntl();
+
+    let textInput = null;
+    let error;
+
+    const { name = '', extension } = item;
+    const ext = extension ? `.${extension}` : '';
+    const nameWithoutExt = extension ? name.replace(ext, '') : name;
+
+    /**
+     * Appends the extension and calls rename function
+     */
+    const rename = () => {
+        if (textInput && textInput.value) {
+            if (textInput.value === nameWithoutExt) {
+                onCancel();
+            } else {
+                onRename(textInput.value, ext);
+            }
+        }
+    };
+
+    /**
+     * Grabs reference to the input element
+     */
+    const ref = input => {
+        textInput = input;
+        if (textInput instanceof HTMLInputElement) {
+            textInput.focus();
+            textInput.select();
+        }
+    };
+
+    /**
+     * Handles enter key down
+     */
+    const onKeyDown = ({ key }) => {
+        switch (key) {
+            case 'Enter':
+                rename();
+                break;
+            default:
+                break;
+        }
+    };
+
+    switch (errorCode) {
+        case ERROR_CODE_ITEM_NAME_IN_USE:
+            error = messages.renameDialogErrorInUse;
+            break;
+        case ERROR_CODE_ITEM_NAME_TOO_LONG:
+            error = messages.renameDialogErrorTooLong;
+            break;
+        default:
+            error = errorCode ? messages.renameDialogErrorInvalid : null;
+            break;
+    }
+
+    return (
+        <Modal onOpenChange={onCancel} open={isOpen}>
+            <Modal.Content
+                aria-label={formatMessage(messages.renameDialogLabel)}
+                className="be-modal-rename"
+                size="medium"
+            >
+                <Modal.Body>
+                    {error ? (
+                        <div className="be-modal-error">
+                            <FormattedMessage {...error} values={{ name: nameWithoutExt }} />
+                        </div>
+                    ) : null}
+                    <FormattedMessage tagName="div" {...messages.renameDialogText} values={{ name: nameWithoutExt }} />
+                    <input ref={ref} defaultValue={nameWithoutExt} onKeyDown={onKeyDown} required type="text" />
+                </Modal.Body>
+                <Modal.Footer className="be-modal-btns">
+                    <Modal.Footer.PrimaryButton
+                        loading={isLoading}
+                        loadingAriaLabel={formatMessage(messages.loading)}
+                        onClick={rename}
+                    >
+                        {formatMessage(messages.rename)}
+                    </Modal.Footer.PrimaryButton>
+                    <Modal.Footer.SecondaryButton disabled={isLoading} onClick={onCancel}>
+                        {formatMessage(messages.cancel)}
+                    </Modal.Footer.SecondaryButton>
+                </Modal.Footer>
+            </Modal.Content>
+        </Modal>
+    );
+};
+
+export default RenameDialog;