FileChooser should provide full control over targetText/rejectText

[amcclain]

The FileChooser component accepts a targetText prop, but always shows its own text when actively hovering over the target. It does not provide any control over the text displayed when a drop is rejected.

hoist-react/desktop/cmp/filechooser/FileChooser.ts

Line 93 in 9538b51

targetTxt = isDragActive

We have a usage in a client app where we are showing the target in a tightly-managed layout and want the ability to customize both.

[amcclain]

I'd propose the following mildly-breaking (but not in a bad way) API changes:

• Existing targetText prop accepts either a string (as it does now) or a function of the form ({draggedFiles}) => ReactNode.
  • If a string, text will be shown at all times, even when a set of files is being dragged over the target. This is the mildly breaking part, as the currently generated "drop to add x files" text will not render, but the component should still apply the drag-active class and I don't think any static customized target text will appear obviously wrong.
  • If a function, app developer can customize to return the static text when draggedFiles is empty and any desired custom text when not.
  • If not specified, we should default to a function that will replicate the current defaults.
• New rejectText prop accepts either a string or function of the form ({rejectedFiles}) => ReactNode.
  • This can incorporate Enhance FileChooser to allow better app-level handling of file rejections #3350. Review that ticket - it might be possible to provide more than just rejectedFiles and instead pass some other data structure that has information about why a given file was rejected.

[leogretz2]

react-dropzone/react-dropzone#752 points to adding reasons for file rejection in the FileRejection object that onDrop and onDropRejected (of React Dropzone) take in react-dropzone version 11.0.0.