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

package/es/elements/content-uploader/ContentUploaderPopup.js.flow

@@ -1,11 +0,0 @@
-/**
- * @flow
- * @file Content Uploader Popup Component
- * @author Box
- */
-
-import makePopup from '../common/makePopup';
-import ContentUploader from './ContentUploader';
-import { CLIENT_NAME_CONTENT_UPLOADER } from '../../constants';
-
-export default makePopup(CLIENT_NAME_CONTENT_UPLOADER)(ContentUploader);

package/es/elements/content-uploader/DroppableContent.js.flow

@@ -1,82 +0,0 @@
-import * as React from 'react';
-
-import ItemList from './ItemList';
-import UploadState from './UploadState';
-
-import makeDroppable from '../common/droppable';
-import type { UploadFile, UploadFileWithAPIOptions, UploadItem } from '../../common/types/upload';
-import type { DOMStringList, View } from '../../common/types/core';
-
-import './DroppableContent.scss';
-
-type Props = {
-    addDataTransferItemsToUploadQueue: (droppedItems: DataTransfer) => void,
-    addFiles: (files?: Array<UploadFileWithAPIOptions | UploadFile>) => void,
-    allowedTypes: Array<string>;
-    canDrop: boolean,
-    isFolderUploadEnabled: boolean,
-    isOver: boolean,
-    isTouch: boolean,
-    items: UploadItem[],
-    onClick: (item: UploadItem) => void,
-    view: View,
-};
-
-/**
- * Definition for drag and drop behavior.
- */
-const dropDefinition = {
-    /**
-     * Validates whether a file can be dropped or not.
-     */
-    dropValidator: (
-        { allowedTypes }: { allowedTypes: Array<string> },
-        { types }: { types: Array<string> | DOMStringList },
-    ) => {
-        if (types instanceof Array) {
-            return Array.from(types).some(type => allowedTypes.indexOf(type) > -1);
-        }
-
-        const allowedList = allowedTypes.filter(allowed => types.contains(allowed));
-        return allowedList.length > 0;
-    },
-
-    /**
-     * Determines what happens after a file is dropped
-     */
-    onDrop: (event, { addDataTransferItemsToUploadQueue }: Props) => {
-        const { dataTransfer } = event;
-        addDataTransferItemsToUploadQueue(dataTransfer);
-    },
-};
-
-const DroppableContent = makeDroppable(dropDefinition)(({
-    addFiles,
-    canDrop,
-    isFolderUploadEnabled,
-    isOver,
-    isTouch,
-    items,
-    onClick,
-    view,
-}: Props) => {
-    const handleSelectFiles = ({ target: { files } }: any) => addFiles(files);
-    const hasItems = items.length > 0;
-
-    return (
-        <div className="bcu-droppable-content">
-            <ItemList items={items} onClick={onClick} />
-            <UploadState
-                canDrop={canDrop}
-                hasItems={hasItems}
-                isFolderUploadEnabled={isFolderUploadEnabled}
-                isOver={isOver}
-                isTouch={isTouch}
-                onSelect={handleSelectFiles}
-                view={view}
-            />
-        </div>
-    );
-});
-
-export default DroppableContent;

package/es/elements/content-uploader/Footer.js.flow

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { Button } from '@box/blueprint-web';
-import messages from '../common/messages';
-import { ERROR_CODE_UPLOAD_FILE_LIMIT } from '../../constants';
-import './Footer.scss';
-
-type Props = {
-    errorCode?: string,
-    fileLimit: number,
-    hasFiles: boolean,
-    isDone: boolean,
-    isLoading: boolean,
-    onCancel: any,
-    onClose?: any,
-    onUpload: any,
-};
-
-const Footer = ({ isLoading, hasFiles, errorCode, onCancel, onClose, onUpload, fileLimit, isDone }: Props) => {
-    const intl = useIntl();
-    const isCloseButtonDisabled = hasFiles;
-    const isCancelButtonDisabled = !hasFiles || isDone;
-    const isUploadButtonDisabled = !hasFiles;
-
-    let message;
-    switch (errorCode) {
-        case ERROR_CODE_UPLOAD_FILE_LIMIT:
-            message = <FormattedMessage {...messages.uploadErrorTooManyFiles} values={{ fileLimit }} />;
-            break;
-        default:
-        // ignore
-    }
-
-    return (
-        <div className="bcu-footer">
-            <div className="bcu-footer-left">
-                {onClose ? (
-                    <Button disabled={isCloseButtonDisabled} onClick={onClose} size="large" variant="secondary">
-                        {intl.formatMessage(messages.close)}
-                    </Button>
-                ) : null}
-            </div>
-            {message && <div className="bcu-footer-message">{message}</div>}
-            <div className="bcu-footer-right">
-                <Button disabled={isCancelButtonDisabled} onClick={onCancel} size="large" variant="secondary">
-                    {intl.formatMessage(messages.cancel)}
-                </Button>
-                <Button
-                    disabled={isUploadButtonDisabled}
-                    loading={isLoading}
-                    loadingAriaLabel={intl.formatMessage(messages.loading)}
-                    onClick={onUpload}
-                    size="large"
-                    variant="primary"
-                >
-                    {intl.formatMessage(messages.upload)}
-                </Button>
-            </div>
-        </div>
-    );
-};
-
-export default Footer;

package/es/elements/content-uploader/IconName.js.flow

@@ -1,45 +0,0 @@
-/**
- * @flow
- * @file Component for file icon and name
- */
-
-import * as React from 'react';
-import Badgeable from '../../components/badgeable';
-import FileIcon from '../../icons/file-icon/FileIcon';
-import IconAlertDefault from '../../icons/general/IconAlertDefault';
-import IconFolderPersonal from '../../icons/folder/IconFolderPersonal';
-import ItemName from './ItemName';
-import { STATUS_ERROR } from '../../constants';
-import type { UploadStatus } from '../../common/types/upload';
-import './IconName.scss';
-
-type Props = {
-    extension: string,
-    isFolder?: boolean,
-    isResumableUploadsEnabled: boolean,
-    name: string,
-    status: UploadStatus,
-};
-
-const IconName = ({ name, extension, isFolder = false, isResumableUploadsEnabled, status }: Props) => {
-    let icon = isFolder ? <IconFolderPersonal /> : <FileIcon extension={extension} />;
-
-    if (isResumableUploadsEnabled && status === STATUS_ERROR) {
-        icon = (
-            <Badgeable className="bcu-icon-badge" bottomRight={<IconAlertDefault height={18} width={18} />}>
-                {icon}
-            </Badgeable>
-        );
-    }
-
-    return (
-        <div className="bcu-item-icon-name">
-            <div className="bcu-item-icon">{icon}</div>
-            <div className="bcu-item-name">
-                <ItemName name={name} />
-            </div>
-        </div>
-    );
-};
-
-export default IconName;

package/es/elements/content-uploader/ItemAction.js.flow

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { injectIntl } from 'react-intl';
-import type { IntlShape } from 'react-intl';
-import { Button, IconButton, LoadingIndicator } from '@box/blueprint-web';
-import { ArrowCurveForward, Checkmark } from '@box/blueprint-web-assets/icons/Line';
-import { EllipsisBadge, XMark } from '@box/blueprint-web-assets/icons/Fill';
-
-import Tooltip, { TooltipPosition } from '../../components/tooltip';
-import {
-    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
-    STATUS_PENDING,
-    STATUS_IN_PROGRESS,
-    STATUS_STAGED,
-    STATUS_COMPLETE,
-    STATUS_ERROR,
-} from '../../constants';
-
-import messages from '../common/messages';
-
-import type { UploadStatus } from '../../common/types/upload';
-
-import './ItemAction.scss';
-import { Size5, SurfaceStatusSurfaceSuccess } from '@box/blueprint-web-assets/tokens/tokens';
-
-type ItemActionProps = {
-    error?: any,
-    intl: IntlShape,
-    isFolder?: boolean,
-    isResumableUploadsEnabled: boolean,
-    onClick: any,
-    onUpgradeCTAClick?: any,
-    status: UploadStatus,
-};
-
-const getIconWithTooltip = (
-    icon: React.ReactNode,
-    isDisabled: boolean,
-    isLoading: boolean,
-    onClick: any,
-    tooltip: boolean,
-    tooltipText: string,
-) => {
-    if (isLoading) {
-        return <LoadingIndicator aria-label="loading" />;
-    }
-
-    if (tooltip) {
-        return (
-            <Tooltip position={TooltipPosition.TOP_LEFT} text={tooltipText}>
-                <IconButton aria-label={tooltipText} disabled={isDisabled} onClick={onClick} icon={() => icon} />
-            </Tooltip>
-        );
-    }
-
-    return <>{icon}</>;
-};
-
-const ItemAction = ({
-    error,
-    intl,
-    isFolder = false,
-    isResumableUploadsEnabled,
-    onClick,
-    onUpgradeCTAClick,
-    status,
-}: ItemActionProps) => {
-    let icon: React.ReactNode = <XMark color="black" height={Size5} width={Size5} />;
-    let tooltip;
-    let isLoading = false;
-    const { code } = error || {};
-    const { formatMessage } = intl;
-
-    if (isFolder && status !== STATUS_PENDING) {
-        return null;
-    }
-
-    switch (status) {
-        case STATUS_COMPLETE:
-            icon = <Checkmark aria-label="complete" color={SurfaceStatusSurfaceSuccess} height={Size5} width={Size5} />;
-            if (!isResumableUploadsEnabled) {
-                tooltip = messages.remove;
-            }
-            break;
-        case STATUS_ERROR:
-            icon = <ArrowCurveForward aria-label="error" color="black" height={Size5} width={Size5} />;
-            tooltip = isResumableUploadsEnabled ? messages.resume : messages.retry;
-            break;
-        case STATUS_IN_PROGRESS:
-        case STATUS_STAGED:
-            if (isResumableUploadsEnabled) {
-                isLoading = true;
-            } else {
-                icon = <EllipsisBadge aria-label="staged" color="black" height={Size5} width={Size5} />;
-                tooltip = messages.uploadsCancelButtonTooltip;
-            }
-            break;
-        case STATUS_PENDING:
-        default:
-            if (isResumableUploadsEnabled) {
-                isLoading = true;
-            } else {
-                tooltip = messages.uploadsCancelButtonTooltip;
-            }
-            break;
-    }
-
-    if (status === STATUS_ERROR && code === ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED && !!onUpgradeCTAClick) {
-        return (
-            <Button
-                onClick={onUpgradeCTAClick}
-                data-resin-target="large_version_error_inline_upgrade_cta"
-                variant="primary"
-            >
-                {intl.formatMessage(messages.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta)}
-            </Button>
-        );
-    }
-    const isDisabled = status === STATUS_STAGED;
-    const tooltipText = tooltip && formatMessage(tooltip);
-
-    return (
-        <div className="bcu-item-action">
-            {getIconWithTooltip(icon, isDisabled, isLoading, onClick, tooltip, tooltipText)}
-        </div>
-    );
-};
-
-export default injectIntl(ItemAction);

package/es/elements/content-uploader/ItemList.js.flow

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import noop from 'lodash/noop';
-import { Table, Column } from '@box/react-virtualized/dist/es/Table';
-import AutoSizer from '@box/react-virtualized/dist/es/AutoSizer';
-import nameCellRenderer from './nameCellRenderer';
-import progressCellRenderer from './progressCellRenderer';
-import actionCellRenderer from './actionCellRenderer';
-import removeCellRenderer from './removeCellRenderer';
-import type { UploadItem } from '../../common/types/upload';
-import '@box/react-virtualized/styles.css';
-import './ItemList.scss';
-
-type Props = {
-    isResumableUploadsEnabled?: boolean,
-    items: UploadItem[],
-    onClick: any,
-    onRemoveClick?: (item: UploadItem) => void,
-    onUpgradeCTAClick?: any
-};
-
-const ItemList = ({
-    isResumableUploadsEnabled = false,
-    items,
-    onClick,
-    onRemoveClick = noop,
-    onUpgradeCTAClick,
-}: Props) => (
-    <AutoSizer>
-        {({ width, height }) => {
-            const nameCell = nameCellRenderer(isResumableUploadsEnabled);
-            const progressCell = progressCellRenderer(!!onUpgradeCTAClick);
-            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick, onUpgradeCTAClick);
-            const removeCell = removeCellRenderer(onRemoveClick);
-            const baseIconWidth = 32;
-
-            return (
-                <Table
-                    className="bcu-item-list"
-                    disableHeader
-                    headerHeight={0}
-                    height={height}
-                    rowClassName="bcu-item-row"
-                    rowCount={items.length}
-                    rowGetter={({ index }) => items[index]}
-                    rowHeight={50}
-                    width={width}
-                >
-                    <Column cellRenderer={nameCell} dataKey="name" flexGrow={1} flexShrink={1} width={300} />
-                    <Column
-                        cellRenderer={progressCell}
-                        dataKey="progress"
-                        flexGrow={1}
-                        flexShrink={1}
-                        style={{ textAlign: 'right' }}
-                        width={300}
-                    />
-                    <Column
-                        className={isResumableUploadsEnabled ? '' : 'bcu-item-list-action-column'}
-                        cellRenderer={actionCell}
-                        dataKey="status"
-                        flexShrink={0}
-                        width={onUpgradeCTAClick ? 100 : baseIconWidth}
-                    />
-                    {isResumableUploadsEnabled && (
-                        <Column
-                            className="bcu-item-list-action-column"
-                            cellRenderer={removeCell}
-                            dataKey="remove"
-                            flexShrink={0}
-                            width={baseIconWidth}
-                        />
-                    )}
-                </Table>
-            );
-        }}
-    </AutoSizer>
-);
-
-export default ItemList;

package/es/elements/content-uploader/ItemRemove.js.flow

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { useIntl } from 'react-intl';
-import { IconButton, Tooltip } from '@box/blueprint-web';
-import { GrayBlack, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
-import { XMark } from '@box/blueprint-web-assets/icons/Fill';
-
-import type { UploadItem, UploadStatus } from '../../common/types/upload';
-
-import { STATUS_ERROR, STATUS_IN_PROGRESS, STATUS_STAGED } from '../../constants';
-
-import messages from '../common/messages';
-
-type Props = {
-    onClick: (item: UploadItem) => void;
-    status: UploadStatus;
-}
-
-const ItemRemove = ({ onClick, status }: Props) => {
-    const resin: Record<string, string> = {};
-    let target = null;
-
-    if (status === STATUS_IN_PROGRESS) {
-        target = 'uploadcancel';
-    } else if (status === STATUS_ERROR) {
-        target = 'remove-failed';
-    }
-
-    if (target) {
-        resin['data-resin-target'] = target;
-    }
-
-    const intl = useIntl();
-    const isDisabled = status === STATUS_STAGED;
-    const tooltipText = intl.formatMessage(messages.remove);
-
-    return (
-        <div className="bcu-item-action">
-            <Tooltip content={tooltipText} variant="standard">
-                <IconButton
-                    aria-label={tooltipText}
-                    disabled={isDisabled}
-                    onClick={onClick}
-                    icon={() => <XMark color={GrayBlack} height={Size5} width={Size5} />}
-                    {...resin}
-                />
-            </Tooltip>
-        </div>
-    );
-};
-
-export default ItemRemove;

package/es/elements/content-uploader/OverallUploadsProgressBar.js.flow

@@ -1,111 +0,0 @@
-import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from '../common/messages';
-import ProgressBar from './ProgressBar';
-import UploadsManagerItemAction from './UploadsManagerAction';
-import { VIEW_UPLOAD_IN_PROGRESS, VIEW_UPLOAD_SUCCESS, VIEW_ERROR, VIEW_UPLOAD_EMPTY } from '../../constants';
-import type { View } from '../../common/types/core';
-
-import './OverallUploadsProgressBar.scss';
-
-/**
- * Get upload status
- *
- * @param {View} view
- * @return {FormattedMessage|string}
- */
-const getUploadStatus = (view: string) => {
-    switch (view) {
-        case VIEW_UPLOAD_IN_PROGRESS:
-            return <FormattedMessage {...messages.uploadsManagerUploadInProgress} />;
-        case VIEW_UPLOAD_SUCCESS:
-            return <FormattedMessage {...messages.uploadsManagerUploadComplete} />;
-        case VIEW_UPLOAD_EMPTY:
-            return <FormattedMessage {...messages.uploadsManagerUploadPrompt} />;
-        case VIEW_ERROR:
-            return <FormattedMessage {...messages.uploadsManagerUploadFailed} />;
-        default:
-            return '';
-    }
-};
-
-/**
- * Get overall upload progress percentage
- *
- * @param {string} view
- * @param {number} percent
- */
-const getPercent = (view: string, percent: number): number => {
-    switch (view) {
-        case VIEW_UPLOAD_SUCCESS:
-            return 100;
-        case VIEW_UPLOAD_EMPTY:
-        case VIEW_ERROR:
-            return 0;
-        default:
-            return percent;
-    }
-};
-
-type Props = {
-    customPrompt?: {
-        defaultMessage: string,
-        description: string,
-        id: string
-    },
-    hasMultipleFailedUploads: boolean,
-    isDragging: boolean,
-    isExpanded: boolean,
-    isResumeVisible: boolean,
-    isVisible: boolean,
-    onClick: any,
-    onKeyDown: any,
-    onUploadsManagerActionClick: any,
-    percent: number,
-    view: View
-};
-
-const OverallUploadsProgressBar = ({
-    customPrompt,
-    hasMultipleFailedUploads,
-    isDragging,
-    isExpanded,
-    isResumeVisible,
-    isVisible,
-    onClick,
-    onKeyDown,
-    onUploadsManagerActionClick,
-    percent,
-    view,
-}: Props) => {
-    // Show the upload prompt and set progress to 0 when the uploads manager
-    // is invisible or is having files dragged to it
-    const shouldShowPrompt = isDragging || !isVisible;
-    const message = customPrompt || messages.uploadsManagerUploadPrompt;
-    const status = shouldShowPrompt ? <FormattedMessage {...message} /> : getUploadStatus(view);
-    const updatedPercent = shouldShowPrompt ? 0 : getPercent(view, percent);
-
-    return (
-        <div
-            aria-hidden={!isVisible}
-            className="bcu-overall-progress-bar"
-            data-resin-target={isExpanded ? 'uploadcollapse' : 'uploadexpand'}
-            onClick={onClick}
-            onKeyDown={onKeyDown}
-            role="button"
-            tabIndex={isVisible ? '0' : '-1'}
-        >
-            <span className="bcu-upload-status">{status}</span>
-            <ProgressBar percent={updatedPercent} />
-            {isResumeVisible && (
-                <UploadsManagerItemAction
-                    hasMultipleFailedUploads={hasMultipleFailedUploads}
-                    onClick={onUploadsManagerActionClick}
-                />
-            )}
-            <span className="bcu-uploads-manager-toggle" />
-        </div>
-    );
-};
-
-export default OverallUploadsProgressBar;

package/es/elements/content-uploader/ProgressBar.js.flow

@@ -1,65 +0,0 @@
-/**
- * @flow
- * @file Component for a progress bar
- */
-
-import React, { PureComponent } from 'react';
-import './ProgressBar.scss';
-
-type Props = {
-    percent: number,
-};
-
-type State = {
-    percent: number,
-};
-
-class ProgressBar extends PureComponent<Props, State> {
-    props: Props;
-
-    state: State;
-
-    static defaultProps = {
-        percent: 0,
-    };
-
-    static getDerivedStateFromProps({ percent }: Props, state: State): any {
-        if (percent !== state.percent) {
-            return {
-                percent,
-            };
-        }
-
-        return null;
-    }
-
-    /**
-     * [constructor]
-     *
-     * @return {ProgressBar}
-     */
-    constructor(props: Props) {
-        super(props);
-        const { percent } = props;
-        this.state = { percent };
-    }
-
-    /**
-     * Renders the progress bar
-     *
-     * @return {void}
-     */
-    render() {
-        const { percent } = this.state;
-        const containerStyle = {
-            transitionDelay: percent > 0 && percent < 100 ? '0' : '0.4s',
-        };
-        return (
-            <div className="bcu-progress-container" style={containerStyle}>
-                <div className="bcu-progress" style={{ width: `${percent}%` }} />
-            </div>
-        );
-    }
-}
-
-export default ProgressBar;

package/es/elements/content-uploader/UploadInput.js.flow

@@ -1,50 +0,0 @@
-/**
- * @flow
- * @file Input element for folder/file upload
- * @author Box
- */
-
-/* eslint-disable */
-import * as React from 'react';
-
-type Props = {
-    handleChange: Function,
-    inputLabel?: React.Node,
-    inputLabelClass?: string,
-    isFolderUpload?: boolean,
-    isMultiple?: boolean,
-};
-
-const UploadInput = ({
-    handleChange,
-    inputLabel,
-    inputLabelClass = '',
-    isFolderUpload = false,
-    isMultiple = true,
-}: Props) => {
-    const inputRef = React.useRef(null);
-
-    const onKeyDown = e => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            if (inputRef.current) {
-                inputRef.current.click();
-            }
-        }
-    };
-
-    return inputLabel ? (
-        <label className={inputLabelClass} onKeyDown={onKeyDown} tabIndex={0}>
-            {inputLabel}
-            <input
-                data-testid="upload-input"
-                directory={isFolderUpload ? '' : undefined}
-                multiple={isMultiple}
-                onChange={handleChange}
-                ref={inputRef}
-                type="file"
-                webkitdirectory={isFolderUpload ? '' : undefined}
-            />
-        </label>
-    ) : null;
-};
-export default UploadInput;