All styleguidist examples working

examples/CustomLayout.md

@@ -0,0 +1,40 @@
+Custom `LayoutComponent`. Renders file previews above dropzone, and submit button below it. Uses `defaultClassNames` and `classNames` prop to ensure input label style doesn't change when dropzone contains files.
+
+~~~js
+const { defaultClassNames } = require('../src/Dropzone')
+
+const Layout = ({ input, previews, submitButton, dropzoneProps, files, extra: { maxFiles } }) => {
+  return (
+    <div>
+      {previews}
+
+      <div {...dropzoneProps}>
+        {files.length < maxFiles && input}
+      </div>
+
+      {files.length > 0 && submitButton}
+    </div>
+  )
+}
+
+const CustomLayout = () => {
+  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })
+
+  const handleSubmit = (files, allFiles) => {
+    console.log(files.map(f => f.meta))
+    allFiles.forEach(f => f.remove())
+  }
+
+  return (
+    <Dropzone
+      getUploadParams={getUploadParams}
+      LayoutComponent={Layout}
+      onSubmit={handleSubmit}
+      classNames={{ inputLabelWithFiles: defaultClassNames.inputLabel }}
+      inputContent="Drop Files (Custom Layout)"
+    />
+  )
+}
+
+<CustomLayout />
+~~~

examples/CustomPreview.md

@@ -0,0 +1,33 @@
+Standard file uploader with custom `PreviewComponent`. Also disables dropzone while files are being uploaded.
+
+~~~js
+const Preview = ({ meta }) => {
+  const { name, percent, status } = meta
+  return (
+    <span style={{ alignSelf: 'flex-start', margin: '10px 3%', fontFamily: 'Helvetica' }}>
+      {name}, {Math.round(percent)}%, {status}
+    </span>
+  )
+}
+
+const CustomPreview = () => {
+  const getUploadParams = () => ({ url: 'https://httpbin.org/post' })
+
+  const handleSubmit = (files, allFiles) => {
+    console.log(files.map(f => f.meta))
+    allFiles.forEach(f => f.remove())
+  }
+
+  return (
+    <Dropzone
+      getUploadParams={getUploadParams}
+      onSubmit={handleSubmit}
+      PreviewComponent={Preview}
+      inputContent="Drop Files (Custom Preview)"
+      disabled={files => files.some(f => ['uploading', 'preparing'].includes(f.meta.status))}
+    />
+  )
+}
+
+<CustomPreview />
+~~~