diff --git a/packages/component-faraday-ui/src/helpers/helpers.md b/packages/component-faraday-ui/src/helpers/helpers.md index f8b826816dada90505d1a27434b2f28016b97ffa..15a652d3ec699c2b98c3f903793c34804a2272ae 100644 --- a/packages/component-faraday-ui/src/helpers/helpers.md +++ b/packages/component-faraday-ui/src/helpers/helpers.md @@ -2,22 +2,22 @@ _Utility HOCs_ -* [withCountries](#withCountries) -* [withFetching](#withFetching) -* [withFileDownload](#withFileDownload) -* [withFilePreview](#withFilePreview) -* [withPagination](#withPagination) -* [withRoles](#withRoles) -* [withZipDownload](#withZipDownload) +* [withCountries](#withcountries) +* [withFetching](#withfetching) +* [withFileDownload](#withfiledownload) +* [withFilePreview](#withfilepreview) +* [withPagination](#withpagination) +* [withRoles](#withroles) +* [withZipDownload](#withzipdownload) _HOCs used for files drag and drop_ -* [withFileSectionDrop](#withFileSectionDrop) -* [withNativeFileDrop](#withNativeFileDrop) +* [withFileSectionDrop](#withfilesectiondrop) +* [withNativeFileDrop](#withnativefiledrop) _Utility functions_ -* [handleError](#handleError) +* [handleError](#handleerror) # Utility HOCs @@ -97,7 +97,7 @@ const Wrapped = ({ downloadFile }) => ( </div> ) -export default Wrapped +export default withFileDownload(Wrapped) ``` ## withFilePreview @@ -112,6 +112,25 @@ This HOC assumes the following props are present on the wrapped component: * `previewFile: (file: {id: string, ...}) => any`: opens the file preview in a new tab (only possible for PDF files and images) +```javascript +import { withProps } from 'recompose' +import { FileItem, withFilePreview Wrapped} from 'pubsweet-component-faraday-ui' + +const file = { + id: 'myfile', + name: 'myfile.pdf', + size: 100231, +} + +const Wrapped = ({ previewFile }) => ( + <div> + <FileItem item={file} onPreview={previewFile} /> + </div> +) + +export default withFilePreview(Wrapped) +``` + ## withPagination Injects `page`, `itemsPerPage`, `toFirst`, `nextPage`, `toLast`, `prevPage`, `changeItemsPerPage`, `hasMore`, `maxItems` and `paginatedItems` as props.