feat(FileUploader): add onDelete hook to standard uploader (#5935)

carbon-design-system · Apr 29, 2020 · 1fa91c6 · 1fa91c6
1 parent d865f82
commit 1fa91c6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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 })
+ }
  />
  </span>
  </span>