-
Notifications
You must be signed in to change notification settings - Fork 318
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(content-uploader): Migrate Footer (#3595)
- Loading branch information
1 parent
dee4eee
commit 423c6e1
Showing
7 changed files
with
161 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import * as React from 'react'; | ||
| import { FormattedMessage, useIntl } from 'react-intl'; | ||
| import { Button } from '@box/blueprint-web'; | ||
| import { ERROR_CODE_UPLOAD_FILE_LIMIT } from '../../constants'; | ||
|
|
||
| import messages from '../common/messages'; | ||
|
|
||
| import './Footer.scss'; | ||
|
|
||
| export interface FooterProps { | ||
| errorCode?: string; | ||
| fileLimit: number; | ||
| hasFiles: boolean; | ||
| isDone: boolean; | ||
| isLoading: boolean; | ||
| onCancel: () => void; | ||
| onClose?: () => void; | ||
| onUpload: () => void; | ||
| } | ||
|
|
||
| const Footer = ({ isLoading, hasFiles, errorCode, onCancel, onClose, onUpload, fileLimit, isDone }: FooterProps) => { | ||
| const intl = useIntl(); | ||
| const isCloseButtonDisabled = hasFiles; | ||
| const isCancelButtonDisabled = !hasFiles || isDone; | ||
| const isUploadButtonDisabled = !hasFiles; | ||
|
|
||
| let message; | ||
|
|
||
| if (errorCode === ERROR_CODE_UPLOAD_FILE_LIMIT) { | ||
| message = <FormattedMessage {...messages.uploadErrorTooManyFiles} values={{ fileLimit }} />; | ||
| } | ||
|
|
||
| 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; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React from 'react'; | ||
| import noop from 'lodash/noop'; | ||
| import { render, screen } from '../../../test-utils/testing-library'; | ||
| import Footer from '../Footer'; | ||
| import { ERROR_CODE_UPLOAD_FILE_LIMIT } from '../../../constants'; | ||
|
|
||
| describe('elements/content-uploader/Footer', () => { | ||
| const defaultProps = { | ||
| fileLimit: 10, | ||
| hasFiles: false, | ||
| isDone: false, | ||
| isLoading: false, | ||
| onCancel: noop, | ||
| onUpload: noop, | ||
| }; | ||
| const renderComponent = (props = {}) => render(<Footer {...defaultProps} {...props} />); | ||
|
|
||
| test('cancel button should not be disabled when hasFiles is $hasFiles and isDone is $isDone', () => { | ||
| renderComponent({ hasFiles: true, isDone: false }); | ||
| const closeButton = screen.getByRole('button', { name: 'Cancel' }); | ||
|
|
||
| expect(closeButton).not.toHaveAttribute('aria-disabled'); | ||
| }); | ||
|
|
||
| test.each` | ||
| hasFiles | isDone | ||
| ${false} | ${true} | ||
| ${false} | ${false} | ||
| ${true} | ${true} | ||
| `('cancel button should be disabled when hasFiles is $hasFiles and isDone is $isDone', ({ hasFiles, isDone }) => { | ||
| renderComponent({ hasFiles, isDone }); | ||
| const closeButton = screen.getByRole('button', { name: 'Cancel' }); | ||
|
|
||
| expect(closeButton).toHaveAttribute('aria-disabled', 'true'); | ||
| }); | ||
|
|
||
| test('upload button should not be disabled there are files', () => { | ||
| renderComponent({ hasFiles: true }); | ||
| const uploadButton = screen.getByRole('button', { name: 'Upload' }); | ||
|
|
||
| expect(uploadButton).not.toHaveAttribute('aria-disabled'); | ||
| }); | ||
|
|
||
| test('upload button should be disabled when there are not any files', () => { | ||
| renderComponent({ hasFiles: false }); | ||
| const uploadButton = screen.getByRole('button', { name: 'Upload' }); | ||
|
|
||
| expect(uploadButton).toHaveAttribute('aria-disabled'); | ||
| }); | ||
|
|
||
| test('close button should be disabled when there are files', () => { | ||
| renderComponent({ hasFiles: true, onClose: noop }); | ||
| const closeButton = screen.getByRole('button', { name: 'Close' }); | ||
|
|
||
| expect(closeButton).toHaveAttribute('aria-disabled'); | ||
| }); | ||
|
|
||
| test('close button should not be disabled when there are not any files', () => { | ||
| renderComponent({ hasFiles: false, onClose: noop }); | ||
| const closeButton = screen.getByRole('button', { name: 'Close' }); | ||
|
|
||
| expect(closeButton).not.toHaveAttribute('aria-disabled'); | ||
| }); | ||
|
|
||
| test('should render upload error message when errorCode is ERROR_CODE_UPLOAD_FILE_LIMIT', () => { | ||
| renderComponent({ errorCode: ERROR_CODE_UPLOAD_FILE_LIMIT }); | ||
|
|
||
| expect(screen.getByText('You can only upload up to 10 file(s) at a time.')).toBeInTheDocument(); | ||
| }); | ||
| }); |