Improve preview 166 tidy

[max-carroll]

Description

• Changed the PreviewList to use the Material UI GridList and GridListTile
• Made the Drop files message absolute postitioned so that the previews go over the top of it
• Added a function prop to calculate the number of columns for the GridList
• Added some examples to docs for better development and showcasing the capabilities of what I did
• Ensured the component looks nicer by default and is more responsive by default
• All the new MaterialUI components can have props passed to them which are spread
• Deprication of the below in favour of 'previewType' which can be 'inside' (default), 'below' or 'none'
  • showFileNamesInPreview, (this one was pointless anyway as we already have showFileNames)
  • showPreviews,
  • showPreviewsInDropzone,

• Fixes Improve Preview section #166

Type of change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)

• Props which were previously used to determine the position and behaviour of the preview have changed names and shape: -

  • showPreviewsInDropzone => now use previewType='inside' however this is default
  • showPreviews => now use previewType='below'
  • showFileNamesInPreview => you should now use showFileNames
    *showFileNames => this was previously false by default, however this looks terrible in the new design so we now default to true
  • getPreviewIcon => if you wrote your own function for this you may have to rewrite it a little bit to get it to look nice with the new PreviewList, the classnames and parameters passed to this have also changed shape a bit

How Has This Been Tested

I've tested this on various screensizes ranging from xs-xl on windows chrome,
Ive tested various configs e.g. with custom GetPreviewIcon function, with images, with non images, with mixtures, with varying file limits and up to 20 files

Test Configuration:

• Browser:

windows 10 chrome

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[max-carroll]

I get an error when running yarn build I'm going to try and diagnose it but posting in here in case anyone has any ideas

src/index.js → dist/index.js, dist/index.es.js...
[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules\@material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "@babel/runtime/helpers/esm/typeof";
2: import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE 11 support
            ^
3: // https://github.com/JamesMGreene/Function.name/blob/58b314d4a983110c3682f1228f845d39ccca1817/Function.name.js#L3
Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
    at error (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:5400:30)
    at Module.error (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:9820:16)
    at handleMissingExport (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:9721:28)
    at Module.traceVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:10159:24)
    at ModuleScope.findVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:8766:39)
    at FunctionScope.findVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at ChildScope.findVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at BlockScope.findVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at BlockScope.findVariable (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:3065:38)
    at Identifier$1.bind (C:\Users\maxym_000\material-ui-dropzone\node_modules\rollup\dist\shared\node-entry.js:4403:40)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[max-carroll]

I have figured it out its because i was referencing withStyles like

import {withStyles} from '@material-ui/core/';

instead of

import {withStyles} from '@material-ui/core/styles';

had to delete lines of code 1by 1 to find that out 🤣will issue a fix shortly

[max-carroll]

Ok have rebased a fix for this, build is working for this now

[panz3r]

@max-carroll ,

Thanks for the amazing work, LGTM 👍

Since this is a Breaking Change, this should be released with the v4.x version and so I think we should consider carefully how to proceed.

Currently we are maintaining 2 major versions (v3.x and v2.x) which have only a minor support difference so we should consider dropping v2.x and start working toward the complete migration to hooks (for the v4.x final release).

[max-carroll]

Yes that makes total sense, Thanks for reviewing the code,

[panz3r]

Hi @max-carroll ,

I recently merged some changes into master and tought about how to proceed with the development of the next version.

Since v4.x shares the same requirements of v3.x I'd go with this "plan":

• Open a new v4.x branch
• Merge new changes into that branch (such as the new preview, the migration to hooks, upgrade to react-dropzone v11, etc...)
• Merge v4.x branch into master and replace v3.x

Then I suppose we can start working toward migrating to @material-ui v5 (which will be released later this year) and release v5.x of material-ui-dropzone.

Also I'm sorry about the changes made to DropzoneArea and DropzoneDialog components, you'd have to port your changes to the new DropzoneAreaBase and DropzoneDialogBase components (which should be fairly easy since they are simplified version of the old ones).

Thanks again for your contribution.

[max-carroll]

Hi @panz3r, I'm currently a bit busy with my work at the moment, I'll update you in a week or two if I think I might be able to do some more work on this. If someone wants to fill in for me while I'm absent from contributing that's fine, if I'm in a better position to pitch in within a week or two I'll report back

[max-carroll]

Hi @panz3r, I'm going to spend a bit of time on this today

[max-carroll]

@panz3r So I will rebase 4.x into my development branch as a starting step and fix conflicts and issues etc?

[max-carroll]

Ahh I see what you mean 🤣. Don't worry I have a plan.

[panz3r]

Hi @max-carroll ,

You should be able to pull v4.x branch and rebase your changes onto that 👍

[max-carroll]

Hi @panz3r . I initially started with a rebase, however as a result of the refactor, it was easier just to do a manual line by line change. Once this has been merged into 4.x, I can begin translation of the code into functional components and implement use of hooks if you like

[panz3r]

@max-carroll can you please change the target branch of this PR to be v4.x?

[max-carroll]

@max-carroll can you please change the target branch of this PR to be v4.x?

done 😀

[panz3r]

LGTM 👍

[panz3r]

Hi @max-carroll ,

Going to merge this PR.

I'll open a new issue and assign that to you to keep track of the migration to Functional components, in the meanwhile can you have a look at PR #173 ?

Thanks again for your contribution.

[panz3r]

Opened issue #197 , @max-carroll can you please post a comment so that I can assign that to you, thanks