chore(content-explorer): Migrate shareDialog (#3735)

src/elements/common/modal.scss

@@ -44,6 +44,7 @@
     background-color: $darker-black;
 }
 
+.be-modal-share .be-modal-dialog-content,
 .be-modal-delete .be-modal-dialog-content {
     padding: 0;
     border-radius: tokens.$radius-4;

src/elements/content-explorer/ShareDialog.js.flow

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import Modal from 'react-modal';
+import noop from 'lodash/noop';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Button, Modal as BlueprintModal, Text } from '@box/blueprint-web';
+
+import ShareAccessSelect from '../common/share-access-select';
+import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
+import type { BoxItem } from '../../common/types/core';
+
+import messages from '../common/messages';
+
+import './ShareDialog.scss';
+
+type Props = {
+    appElement: HTMLElement,
+    canSetShareAccess: boolean,
+    isLoading: boolean,
+    isOpen: boolean,
+    item: BoxItem,
+    onCancel: any,
+    onShareAccessChange: any,
+    parentElement: HTMLElement
+};
+
+const ShareDialog = ({
+     appElement,
+     canSetShareAccess,
+     isLoading,
+     isOpen,
+     item,
+     onCancel,
+     onShareAccessChange,
+     parentElement,
+ }: Props) => {
+    const { formatMessage } = useIntl();
+    let textInput = null;
+
+    const copy = () => {
+        if (textInput instanceof HTMLInputElement) {
+            textInput.select();
+            document.execCommand('copy');
+        }
+    };
+
+    const { shared_link: sharedLink }: BoxItem = item;
+    const { url } = sharedLink || {
+        url: formatMessage(messages.shareDialogNone),
+    };
+
+    return (
+        <Modal
+            appElement={appElement}
+            className={CLASS_MODAL_CONTENT}
+            contentLabel={formatMessage(messages.shareDialogLabel)}
+            isOpen={isOpen}
+            onRequestClose={onCancel}
+            overlayClassName={CLASS_MODAL_OVERLAY}
+            parentSelector={() => parentElement}
+            portalClassName={`${CLASS_MODAL} be-modal-share`}
+        >
+            <BlueprintModal.Body>
+                <Text as="label">
+                    <FormattedMessage {...messages.shareDialogText} />
+                </Text>
+                <div className="be-modal-input-group">
+                    <input
+                        ref={input => {
+                            textInput = input;
+                        }}
+                        onChange={noop}
+                        type="text"
+                        value={url}
+                    />
+                    <Button autoFocus className="be-modal-button-copy" onClick={copy} variant="primary">
+                        {formatMessage(messages.copy)}
+                    </Button>
+                </div>
+
+                <BlueprintModal.Footer className="be-modal-btns">
+                    <ShareAccessSelect
+                        canSetShareAccess={canSetShareAccess}
+                        className="bce-shared-access-select"
+                        item={item}
+                        onChange={onShareAccessChange}
+                    />
+                    <Button
+                        loading={isLoading}
+                        loadingAriaLabel={formatMessage(messages.loading)}
+                        onClick={onCancel}
+                        size="large"
+                        variant="secondary"
+                    >
+                        {formatMessage(messages.close)}
+                    </Button>
+                </BlueprintModal.Footer>
+            </BlueprintModal.Body>
+        </Modal>
+    );
+};
+
+export default ShareDialog;

src/elements/content-explorer/ShareDialog.scss

@@ -1,32 +1,28 @@
-@import '../common/variables';
+@use '@box/blueprint-web-assets/tokens/tokens.scss';
 
 .be-modal.be-modal-share {
     .bce-shared-access-select {
         height: 27px;
         line-height: 15px;
+        border-radius: tokens.$radius-2;
     }
 
-    .be-modal-content {
-        position: relative;
+    .be-modal-input-group {
+        display: flex;
 
         input[type='text'] {
             flex-grow: 1;
             max-width: 296px;
             text-overflow: ellipsis;
             border-right: 0 none;
-            border-radius: $bdl-border-radius-size 0 0 $bdl-border-radius-size;
+            border-radius: tokens.$radius-2 0 0 tokens.$radius-2;
 
             .be-is-small & {
                 width: 237px;
             }
         }
     }
 
-    .be-modal-input-group {
-        display: flex;
-        justify-content: space-between;
-    }
-
     .be-modal-button-copy {
         min-width: 70px;
         height: 36px;
@@ -37,15 +33,11 @@
         line-height: 34px;
         letter-spacing: 1px;
         text-transform: uppercase;
-        border-radius: 0 $bdl-border-radius-size $bdl-border-radius-size 0;
+        border-radius: 0 tokens.$radius-2 tokens.$radius-2 0;
     }
 
     .be-modal-btns {
         align-items: center;
         justify-content: space-between;
-
-        .btn {
-            margin: 0;
-        }
     }
 }

src/elements/content-explorer/ShareDialog.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import Modal from 'react-modal';
+import noop from 'lodash/noop';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Button, Modal as BlueprintModal, Text } from '@box/blueprint-web';
+
+import ShareAccessSelect from '../common/share-access-select';
+import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL } from '../../constants';
+import type { BoxItem } from '../../common/types/core';
+
+import messages from '../common/messages';
+
+import './ShareDialog.scss';
+
+export interface ShareDialogProps {
+    appElement: HTMLElement;
+    canSetShareAccess: boolean;
+    isLoading: boolean;
+    isOpen: boolean;
+    item: BoxItem;
+    onCancel: () => void;
+    onShareAccessChange: () => void;
+    parentElement: HTMLElement;
+}
+
+const ShareDialog = ({
+    appElement,
+    canSetShareAccess,
+    isLoading,
+    isOpen,
+    item,
+    onCancel,
+    onShareAccessChange,
+    parentElement,
+}: ShareDialogProps) => {
+    const { formatMessage } = useIntl();
+    let textInput = null;
+
+    const copy = () => {
+        if (textInput instanceof HTMLInputElement) {
+            textInput.select();
+            document.execCommand('copy');
+        }
+    };
+
+    const { shared_link: sharedLink }: BoxItem = item;
+    const { url } = sharedLink || {
+        url: formatMessage(messages.shareDialogNone),
+    };
+
+    return (
+        <Modal
+            appElement={appElement}
+            className={CLASS_MODAL_CONTENT}
+            contentLabel={formatMessage(messages.shareDialogLabel)}
+            isOpen={isOpen}
+            onRequestClose={onCancel}
+            overlayClassName={CLASS_MODAL_OVERLAY}
+            parentSelector={() => parentElement}
+            portalClassName={`${CLASS_MODAL} be-modal-share`}
+        >
+            <BlueprintModal.Body>
+                <Text as="label">
+                    <FormattedMessage {...messages.shareDialogText} />
+                </Text>
+                <div className="be-modal-input-group">
+                    <input
+                        ref={input => {
+                            textInput = input;
+                        }}
+                        onChange={noop}
+                        type="text"
+                        value={url}
+                    />
+                    <Button autoFocus className="be-modal-button-copy" onClick={copy} variant="primary">
+                        {formatMessage(messages.copy)}
+                    </Button>
+                </div>
+
+                <BlueprintModal.Footer className="be-modal-btns">
+                    <ShareAccessSelect
+                        canSetShareAccess={canSetShareAccess}
+                        className="bce-shared-access-select"
+                        item={item}
+                        onChange={onShareAccessChange}
+                    />
+                    <Button
+                        loading={isLoading}
+                        loadingAriaLabel={formatMessage(messages.loading)}
+                        onClick={onCancel}
+                        size="large"
+                        variant="secondary"
+                    >
+                        {formatMessage(messages.close)}
+                    </Button>
+                </BlueprintModal.Footer>
+            </BlueprintModal.Body>
+        </Modal>
+    );
+};
+
+export default ShareDialog;