box-ui-elements 23.4.0-beta.13 → 23.4.0-beta.15

package/src/elements/content-uploader/UploadState.js.flow

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { HatWand } from '@box/blueprint-web-assets/illustrations/Medium';
-
-import UploadEmptyState from '../../icons/states/UploadEmptyState';
-import UploadSuccessState from '../../icons/states/UploadSuccessState';
-import UploadStateContent from './UploadStateContent';
-import type { View } from '../../common/types/core';
-
-import { VIEW_ERROR, VIEW_UPLOAD_EMPTY, VIEW_UPLOAD_IN_PROGRESS, VIEW_UPLOAD_SUCCESS } from '../../constants';
-
-import messages from '../common/messages';
-
-import './UploadState.scss';
-
-type Props = {
-    canDrop: boolean,
-    hasItems: boolean,
-    isFolderUploadEnabled: boolean,
-    isOver: boolean,
-    isTouch: boolean,
-    onSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    view: View
-};
-
-const UploadState = ({
-    canDrop,
-    hasItems,
-    isOver,
-    isTouch,
-    view,
-    onSelect,
-    isFolderUploadEnabled,
-}: Props) => {
-    const intl = useIntl();
-    let icon;
-    let content;
-    switch (view) {
-        case VIEW_ERROR:
-            icon = <HatWand aria-label={intl.formatMessage(messages.uploadErrorState)} height={126} width={130} />;
-            content = <UploadStateContent message={<FormattedMessage {...messages.uploadError} />} />;
-            break;
-        case VIEW_UPLOAD_EMPTY:
-            icon = <UploadEmptyState title={<FormattedMessage {...messages.uploadEmptyState} />} />;
-            /* eslint-disable no-nested-ternary */
-            content =
-                canDrop && hasItems ? (
-                    <UploadStateContent message={<FormattedMessage {...messages.uploadInProgress} />} />
-                ) : isTouch ? (
-                    <UploadStateContent
-                        fileInputLabel={<FormattedMessage {...messages.uploadNoDragDrop} />}
-                        onChange={onSelect}
-                        useButton
-                    />
-                ) : (
-                    <UploadStateContent
-                        fileInputLabel={<FormattedMessage {...messages.uploadEmptyFileInput} />}
-                        folderInputLabel={
-                            isFolderUploadEnabled && <FormattedMessage {...messages.uploadEmptyFolderInput} />
-                        }
-                        message={
-                            isFolderUploadEnabled ? (
-                                <FormattedMessage {...messages.uploadEmptyWithFolderUploadEnabled} />
-                            ) : (
-                                <FormattedMessage {...messages.uploadEmptyWithFolderUploadDisabled} />
-                            )
-                        }
-                        onChange={onSelect}
-                    />
-                );
-            /* eslint-enable no-nested-ternary */
-            break;
-        case VIEW_UPLOAD_IN_PROGRESS:
-            icon = <UploadEmptyState title={<FormattedMessage {...messages.uploadEmptyState} />} />;
-            content = <UploadStateContent message={<FormattedMessage {...messages.uploadInProgress} />} />;
-            break;
-        case VIEW_UPLOAD_SUCCESS:
-            icon = <UploadSuccessState title={<FormattedMessage {...messages.uploadSuccessState} />} />;
-            content = (
-                <UploadStateContent
-                    fileInputLabel={<FormattedMessage {...messages.uploadSuccessFileInput} />}
-                    folderInputLabel={
-                        isFolderUploadEnabled && <FormattedMessage {...messages.uploadSuccessFolderInput} />
-                    }
-                    message={<FormattedMessage {...messages.uploadSuccess} />}
-                    onChange={onSelect}
-                    useButton={isTouch}
-                />
-            );
-            break;
-        default:
-            break;
-        /* eslint-enable jsx-a11y/label-has-for */
-    }
-
-    const className = classNames('bcu-upload-state', {
-        'bcu-is-droppable': isOver && canDrop,
-        'bcu-is-not-droppable': isOver && !canDrop,
-        'bcu-has-items': hasItems,
-    });
-
-    return (
-        <div className={className}>
-            <div>
-                {icon}
-                {content}
-            </div>
-            <div className="bcu-drag-drop-overlay" />
-        </div>
-    );
-};
-
-export default UploadState;

package/src/elements/content-uploader/UploadStateContent.js.flow

@@ -1,71 +0,0 @@
-/**
- * @flow
- * @file Upload state content component
- */
-
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from '../common/messages';
-import UploadInput from './UploadInput';
-
-type Props = {
-    fileInputLabel?: React.Node,
-    folderInputLabel?: React.Node,
-    message?: React.Node,
-    onChange?: Function,
-    useButton?: boolean,
-};
-
-const UploadStateContent = ({ fileInputLabel, folderInputLabel, message, onChange, useButton = false }: Props) => {
-    const messageContent = message ? <div className="bcu-upload-state-message">{message}</div> : null;
-    const inputLabelClass = useButton ? 'btn btn-primary be-input-btn' : 'be-input-link';
-    const shouldShowFolderUploadInput = !useButton && !!folderInputLabel;
-
-    const handleChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
-        if (!onChange) {
-            return;
-        }
-
-        onChange(event);
-
-        const currentTarget = (event.currentTarget: HTMLInputElement);
-        // resets the file input selection
-        currentTarget.value = '';
-    };
-
-    const fileInputContent = (
-        <UploadInput handleChange={handleChange} inputLabel={fileInputLabel} inputLabelClass={inputLabelClass} />
-    );
-    const folderInputContent = shouldShowFolderUploadInput ? (
-        <UploadInput
-            handleChange={handleChange}
-            inputLabel={folderInputLabel}
-            inputLabelClass={inputLabelClass}
-            isFolderUpload
-        />
-    ) : null;
-
-    let inputsContent;
-    if (fileInputContent && folderInputContent) {
-        inputsContent = (
-            <FormattedMessage
-                {...messages.uploadOptions}
-                values={{
-                    option1: fileInputContent,
-                    option2: folderInputContent,
-                }}
-            />
-        );
-    } else if (fileInputContent) {
-        inputsContent = fileInputContent;
-    }
-
-    return (
-        <div>
-            {messageContent}
-            {inputsContent && <div className="bcu-upload-input-container">{inputsContent}</div>}
-        </div>
-    );
-};
-
-export default UploadStateContent;

package/src/elements/content-uploader/UploadsManager.js.flow

@@ -1,111 +0,0 @@
-/**
- * @flow
- * @file Uploads manager
- */
-
-import * as React from 'react';
-import classNames from 'classnames';
-import ItemList from './ItemList';
-import OverallUploadsProgressBar from './OverallUploadsProgressBar';
-import { STATUS_ERROR } from '../../constants';
-import type { UploadItem } from '../../common/types/upload';
-import type { View } from '../../common/types/core';
-
-import './UploadsManager.scss';
-
-type Props = {
-    isDragging: boolean,
-    isExpanded: boolean,
-    isResumableUploadsEnabled: boolean,
-    isVisible: boolean,
-    items: UploadItem[],
-    onItemActionClick: Function,
-    onRemoveActionClick: (item: UploadItem) => void,
-    onUpgradeCTAClick?: Function,
-    onUploadsManagerActionClick: Function,
-    toggleUploadsManager: Function,
-    view: View,
-};
-
-const UploadsManager = ({
-    isExpanded,
-    isVisible,
-    isResumableUploadsEnabled,
-    isDragging,
-    items,
-    onItemActionClick,
-    onRemoveActionClick,
-    onUpgradeCTAClick,
-    onUploadsManagerActionClick,
-    toggleUploadsManager,
-    view,
-}: Props) => {
-    /**
-     * Keydown handler for progress bar
-     *
-     * @param {SyntheticKeyboardEvent} event
-     * @return {void}
-     */
-    const handleProgressBarKeyDown = (event: SyntheticKeyboardEvent<*>): void => {
-        switch (event.key) {
-            case 'Enter':
-            case 'Space':
-                toggleUploadsManager();
-                break;
-            default:
-            // noop
-        }
-    };
-
-    let numFailedUploads = 0;
-    let totalSize = 0;
-    let totalUploaded = 0;
-    items.forEach(item => {
-        if (item.status !== STATUS_ERROR && !item.isFolder) {
-            totalSize += item.size;
-            totalUploaded += (item.size * item.progress) / 100.0;
-        } else if (item.status === STATUS_ERROR) {
-            numFailedUploads += 1;
-        }
-    });
-
-    const percent = (totalUploaded / totalSize) * 100;
-    const isResumeVisible = isResumableUploadsEnabled && numFailedUploads > 0;
-    const hasMultipleFailedUploads = numFailedUploads > 1;
-
-    return (
-        <div
-            data-resin-component="uploadsmanager"
-            data-resin-feature="uploads"
-            className={classNames('be bcu-uploads-manager-container', {
-                'bcu-is-expanded': isExpanded,
-                'bcu-is-visible': isVisible,
-            })}
-        >
-            <OverallUploadsProgressBar
-                isDragging={isDragging}
-                isExpanded={isExpanded}
-                isResumeVisible={isResumeVisible}
-                isVisible={isVisible}
-                hasMultipleFailedUploads={hasMultipleFailedUploads}
-                onClick={toggleUploadsManager}
-                onKeyDown={handleProgressBarKeyDown}
-                onUploadsManagerActionClick={onUploadsManagerActionClick}
-                percent={percent}
-                view={view}
-            />
-            <div className="bcu-uploads-manager-item-list">
-                <ItemList
-                    isResumableUploadsEnabled={isResumableUploadsEnabled}
-                    items={items}
-                    onClick={onItemActionClick}
-                    onRemoveClick={onRemoveActionClick}
-                    onUpgradeCTAClick={onUpgradeCTAClick}
-                    view={view}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default UploadsManager;

package/src/elements/content-uploader/UploadsManagerAction.js.flow

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { useIntl } from 'react-intl';
-import { Button } from '@box/blueprint-web';
-
-import { RESIN_TAG_TARGET } from '../../common/variables';
-import { STATUS_ERROR } from '../../constants';
-
-import messages from '../common/messages';
-import type { UploadStatus } from '../../common/types/upload';
-
-import './UploadsManagerAction.scss';
-
-type Props = {
-    hasMultipleFailedUploads: boolean;
-    onClick: (status: UploadStatus) => void;
-}
-
-const UploadsManagerAction = ({ hasMultipleFailedUploads, onClick }: Props) => {
-    const handleResumeClick = event => {
-        event.stopPropagation();
-        onClick(STATUS_ERROR);
-    };
-    const intl = useIntl();
-    const resumeMessage = hasMultipleFailedUploads ? messages.resumeAll : messages.resume;
-    const resin = { [RESIN_TAG_TARGET]: 'uploadresumeheader' };
-
-    return (
-        <div className="bcu-uploads-manager-action">
-            <Button onClick={handleResumeClick} size="small" variant="primary" {...resin}>
-                {intl.formatMessage(resumeMessage)}
-            </Button>
-        </div>
-    );
-};
-
-export default UploadsManagerAction;

package/src/elements/content-uploader/actionCellRenderer.js.flow

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import ItemAction from './ItemAction';
-import type { UploadItem } from '../../common/types/upload';
-
-type Props = {
-    rowData: UploadItem
-};
-
-export default (isResumableUploadsEnabled: boolean, onClick: any, onUpgradeCTAClick?: any) => ({
-    rowData,
-}: Props) => (
-    <ItemAction
-        {...rowData}
-        isResumableUploadsEnabled={isResumableUploadsEnabled}
-        onClick={() => onClick(rowData)}
-        onUpgradeCTAClick={onUpgradeCTAClick}
-    />
-);

package/src/elements/content-uploader/index.js.flow

@@ -1,4 +0,0 @@
-// @flow
-export { default } from './ContentUploader';
-export type { ContentUploaderProps } from './ContentUploader';
-export { default as ContentUploaderPopup } from './ContentUploaderPopup';

package/src/elements/content-uploader/nameCellRenderer.js.flow

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import IconName from './IconName';
-import type { UploadItem } from '../../common/types/upload';
-
-type Props = {
-    rowData: UploadItem
-};
-
-export default (isResumableUploadsEnabled: boolean) => ({
-    rowData,
-}: Props) => (
-    <IconName isResumableUploadsEnabled={isResumableUploadsEnabled} {...rowData} />
-);

package/src/elements/content-uploader/progressCellRenderer.js.flow

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import Browser from '../../utils/Browser';
-import messages from '../common/messages';
-import ItemProgress from './ItemProgress';
-
-import {
-    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
-    ERROR_CODE_ITEM_NAME_IN_USE,
-    ERROR_CODE_ITEM_NAME_INVALID,
-    ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT,
-    ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED,
-    ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED,
-    ERROR_CODE_UPLOAD_BAD_DIGEST,
-    ERROR_CODE_UPLOAD_FAILED_PACKAGE,
-    STATUS_IN_PROGRESS,
-    STATUS_STAGED,
-    STATUS_ERROR,
-} from '../../constants';
-import type { UploadItem } from '../../common/types/upload';
-
-type Props = {
-    rowData: UploadItem
-};
-
-/**
- * Get error message for a specific error code
- *
- * @param {string} [errorCode]
- * @param {string} [itemName]
- * @returns {FormattedMessage}
- */
-const getErrorMessage = (errorCode?: string | null, itemName?: string | null, shouldShowUpgradeCTAMessage?: boolean) => {
-    switch (errorCode) {
-        case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:
-            return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;
-        case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:
-            if (shouldShowUpgradeCTAMessage) {
-                return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta} />;
-            }
-            return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;
-        case ERROR_CODE_ITEM_NAME_IN_USE:
-            return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;
-        case ERROR_CODE_ITEM_NAME_INVALID:
-            return (
-                <FormattedMessage {...messages.uploadsProvidedFolderNameInvalidMessage} values={{ name: itemName }} />
-            );
-        case ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED:
-            return <FormattedMessage {...messages.uploadsStorageLimitErrorMessage} />;
-        case ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT:
-            return <FormattedMessage {...messages.uploadsPendingFolderSizeLimitErrorMessage} />;
-        case ERROR_CODE_UPLOAD_FAILED_PACKAGE:
-            return <FormattedMessage {...messages.uploadsPackageUploadErrorMessage} />;
-        default:
-            return <FormattedMessage {...messages.uploadsDefaultErrorMessage} />;
-    }
-};
-
-export default (shouldShowUpgradeCTAMessage?: boolean) => ({
-    rowData,
-}: Props) => {
-    const { status, error = {}, name, isFolder, file } = rowData;
-    const { code } = error;
-
-    if (isFolder && status !== STATUS_ERROR) {
-        return null;
-    }
-
-    switch (status) {
-        case STATUS_IN_PROGRESS:
-        case STATUS_STAGED:
-            return <ItemProgress {...rowData} />;
-        case STATUS_ERROR:
-            if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {
-                return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);
-            }
-            return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);
-        default:
-            return null;
-    }
-};

package/src/elements/content-uploader/removeCellRenderer.js.flow

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import ItemRemove from './ItemRemove';
-import type { UploadItem } from '../../common/types/upload';
-
-type Props = {
-    rowData: UploadItem
-};
-
-export default (onClick: (item: UploadItem) => void) => ({
-    rowData,
-}: Props) => {
-    if (rowData.isFolder) {
-        return null;
-    }
-    return <ItemRemove status={rowData.status} onClick={() => onClick(rowData)} />;
-};