diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b56afbc46113..6675236119c5 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2349,6 +2349,9 @@ Map { "onClick": Object { "type": "func", }, + "onDelete": Object { + "type": "func", + }, "size": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js index 8ecfb082de2f..24e860f30fcf 100644 --- a/packages/react/src/components/FileUploader/FileUploader-story.js +++ b/packages/react/src/components/FileUploader/FileUploader-story.js @@ -94,6 +94,9 @@ const props = { 'Close button icon description (iconDescription)', 'Clear file' ), + onChange: action('onChange'), + onClick: action('onClick'), + onDelete: action('onDelete'), }; }, fileUploaderItem: () => ({ diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js index ea83632a1812..a710fcdd567f 100644 --- a/packages/react/src/components/FileUploader/FileUploader.js +++ b/packages/react/src/components/FileUploader/FileUploader.js @@ -18,6 +18,7 @@ import { import Loading from '../Loading'; import uid from '../../tools/uniqueId'; import { ButtonKinds } from '../../prop-types/types'; +import { keys, matches } from '../../internal/keyboard'; const { prefix } = settings; @@ -308,8 +309,14 @@ export default class FileUploader extends Component { onChange: PropTypes.func, /** - * Provide an optional `onClick` hook that is called each time the button is - * clicked + * Provide an optional `onDelete` hook that is called when an uploaded item + * is removed + */ + onDelete: PropTypes.func, + + /** + * Provide an optional `onClick` hook that is called each time the + * FileUploader is clicked */ onClick: PropTypes.func, @@ -372,12 +379,18 @@ export default class FileUploader extends Component { } }; - handleClick = (evt, index) => { - const filteredArray = this.state.filenames.filter( - filename => filename !== this.nodes[index].innerText.trim() - ); - this.setState({ filenames: filteredArray }); - this.props.onClick(evt); + handleClick = (evt, { index, filenameStatus }) => { + if (filenameStatus === 'edit') { + evt.stopPropagation(); + const filteredArray = this.state.filenames.filter( + filename => filename !== this.nodes[index].innerText.trim() + ); + this.setState({ filenames: filteredArray }); + if (this.props.onDelete) { + this.props.onDelete(evt); + } + this.props.onClick(evt); + } }; clearFiles = () => { @@ -398,6 +411,7 @@ export default class FileUploader extends Component { accept, name, size, + onDelete, // eslint-disable-line no-unused-vars ...other } = this.props; @@ -440,15 +454,13 @@ export default class FileUploader extends Component { iconDescription={iconDescription} status={filenameStatus} onKeyDown={evt => { - if (evt.which === 13 || evt.which === 32) { - this.handleClick(evt, index); - } - }} - onClick={evt => { - if (filenameStatus === 'edit') { - this.handleClick(evt, index); + if (matches(evt, [keys.Enter, keys.Space])) { + this.handleClick(evt, { index, filenameStatus }); } }} + onClick={evt => + this.handleClick(evt, { index, filenameStatus }) + } />