Skip to content
Snippets Groups Projects
Commit 8fe92f20 authored by Alexandru Munteanu's avatar Alexandru Munteanu
Browse files

docs(faraday-ui): write props inside a table

parent 79062906
No related branches found
No related tags found
3 merge requests!222Sprint #26,!217Sprint #26,!191Hin 1116 documentation
Hide whitespace changes
Inline Side-by-side
packages/component-faraday-ui/src/helpers/README.md
+ 62
− 39
View file @ 8fe92f20
...@@ -27,8 +27,10 @@ Injects `countries` and `countryLabel` as props. ...@@ -27,8 +27,10 @@ Injects `countries` and `countryLabel` as props.
### withCountries props ### withCountries props
* `countries: [{value: string, label: string}]`: the list of countries | Name | Type | Description |
* `countryLabel: (code: string) => string`: get the name of the country with the specified code | :----------- | :--------------------------------- | :-------------------------------------------------- |
| countries | `[{value: string, label: string}]` | the list of countries |
| countryLabel | `(code: string) => string` | get the name of the country with the specified code |
```js ```js
import { Menu } from '@pubsweet/ui' import { Menu } from '@pubsweet/ui'
...@@ -51,12 +53,14 @@ Injects `isFetching`, `fetchingError`, `setFetching`, `toggleFetching`, `setErro ...@@ -51,12 +53,14 @@ Injects `isFetching`, `fetchingError`, `setFetching`, `toggleFetching`, `setErro
### withFetching props ### withFetching props
* `isFetching: bool`: value representing a pending async operation | Name | Type | Description |
* `fetchingError: string`: value representing the error | :------------- | :----------------------- | :---------------------------------------------------------- |
* `setFetching: (value: bool) => any`: function for setting the `isFetching` value | isFetching | `bool` | Pending async operation sattus |
* `toggleFetching: () => any`: function that toggle the current value of `isFetching` | fetchingError | `fetchingError` | Value representing the error |
* `setError: (error: string) => any`: function that sets `fetchingError` | setFetching | `(value: bool) => any` | Function for setting the `isFetching` value |
* `clearError: () => any`: function that resets `fetchingError` to it's original value | toggleFetching | `(value: bool) => any` | Function that toggles the current value of `isFetching` |
| setError | `(error: string) => any` | Function that sets `fetchingError` |
| clearError | `() => any` | Function that resets `fetchingError` to it's original value |
```js ```js
import { withFetching } from 'pubsweet-component-faraday-ui' import { withFetching } from 'pubsweet-component-faraday-ui'
...@@ -80,7 +84,9 @@ Injects `downloadFile` as a prop. ...@@ -80,7 +84,9 @@ Injects `downloadFile` as a prop.
### withFileDownload props ### withFileDownload props
* `downloadFile: (file: {id: string, name: string}) => any`: downloads the file specified as a parameter. The wrapped component should have the authentication token in a prop called `token` in order for this to work. | Name | Type | Description |
| :----------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| downloadFile | `(file: {id: string, name: string}) => any` | Downloads the file specified as a parameter. The wrapped component should have the authentication token in a prop called `token` in order for this to work. |
```js ```js
import { FileItem, withFileDownload } from 'pubsweet-component-faraday-ui' import { FileItem, withFileDownload } from 'pubsweet-component-faraday-ui'
...@@ -106,11 +112,15 @@ Generate a securized file URL and preview it in a new tab. Injects `previewFile` ...@@ -106,11 +112,15 @@ Generate a securized file URL and preview it in a new tab. Injects `previewFile`
This HOC assumes the following props are present on the wrapped component: This HOC assumes the following props are present on the wrapped component:
* `getSignedURL: (id: string) => Promise({signedURL: string})`: an async call that returns the securized S3 file url | Name | Type | Description |
| :----------- | :--------------------------------------------- | :------------------------------------------------ |
| getSignedURL | `(id: string) => Promise({signedURL: string})` | Async call that returns the securized S3 file url |
### withFilePreviewProps ### withFilePreviewProps
* `previewFile: (file: {id: string, ...}) => any`: opens the file preview in a new tab (only possible for PDF files and images) | Name | Type | Description |
| :---------- | :--------------------------------- | :--------------------------------------------------------------------------- |
| previewFile | `(file: {id: string, ...}) => any` | Opens the file preview in a new tab (only possible for PDF files and images) |
```javascript ```javascript
import { withProps } from 'recompose' import { withProps } from 'recompose'
...@@ -137,16 +147,19 @@ Injects `page`, `itemsPerPage`, `toFirst`, `nextPage`, `toLast`, `prevPage`, `ch ...@@ -137,16 +147,19 @@ Injects `page`, `itemsPerPage`, `toFirst`, `nextPage`, `toLast`, `prevPage`, `ch
### withPagination props ### withPagination props
* `page: number`: the current page | Name | Type | Description |
* `itemsPerPage: number`: number of items to be shown per page | :----------------- | :---------------------------------------------------------- | :------------------------------------ |
* `maxItems: number`: the total number of items | page | `number` | Current page. |
* `hasMore: bool`: if we're not at the last page yet | itemsPerPage | `number` | Number of items to be shown per page. |
* `paginatedItems: [any]`: slice of the original items | maxItems | `number` | Total number of items. |
* `toFirst: () => { page: number }`: go to the first page | maxItems | `number` | Total number of items. |
* `toLast: () => {page: number}`: go to the last page | hasMore | `bool` | If we're not at the last page yet. |
* `nextPage: () => {page: number}`: move to the next page | paginatedItems | `[any]` | Slice of the original items. |
* `prevPage: () => {page: number}`: move to the previous page | toFirst | `() => { page: number }` | Go to the first page. |
* `changeItemsPerPage: e: HTMLInputEvent => {page: number, itemsPerPage: number}`: change the number of items per page | toLast | `() => { page: number }` | Go to the last page. |
| nextPage | `() => { page: number }` | Move to the next page. |
| prevPage | `() => { page: number }` | Move to the previous page. |
| changeItemsPerPage | `e: HTMLInputEvent => {page: number, itemsPerPage: number}` | Change the number of items per page. |
```js ```js
import { withPagination } from 'pubsweet-component-faraday-ui' import { withPagination } from 'pubsweet-component-faraday-ui'
...@@ -174,7 +187,9 @@ Injects the `roles` array as a prop. The roles are parsed from the journal confi ...@@ -174,7 +187,9 @@ Injects the `roles` array as a prop. The roles are parsed from the journal confi
### withRoles props ### withRoles props
* `roles: [{value: string, label: string}]`: an array of user roles | Name | Type | Description |
| :---- | :--------------------------------- | :---------------------- |
| roles | `[{value: string, label: string}]` | An array of user roles. |
```js ```js
import { Menu } from '@pubsweet/ui' import { Menu } from '@pubsweet/ui'
...@@ -191,15 +206,19 @@ Downloads all the files of a fragment as a zip archive. Injects the `downloadFil ...@@ -191,15 +206,19 @@ Downloads all the files of a fragment as a zip archive. Injects the `downloadFil
This HOCs assumes the following props are present on the wrapped component: This HOCs assumes the following props are present on the wrapped component:
* `token: string`: authentication token (used to authorize this request) | Name | Type | Description |
* `isReview: bool`: if the user is reviewer | :---------- | :--------------------- | :----------------------------------------------------- |
* `fragmentId: string`: id of the fragment whose files we want to download | token | `string` | Authentication token (used to authorize this request). |
* `setFetching: (value: bool) => any`: a callback to set a fetching status | isReviewer | `bool` | If the user is reviewer. |
* `archiveName: string`: the name of the outputted archive file | fragmentId | `string` | Id of the fragment whose files we want to download. |
| setFetching | `(value: bool) => any` | Callback to set a fetching status. |
| archiveName | `string` | Name of the outputted archive file. |
### withZipDownload props ### withZipDownload props
* `downloadFiles: () => any`: download all the fragment's file as a zip | Name | Type | Description |
| :------------ | :---------------- | :----------------------------------------- |
| downloadFiles | `strin() => anyg` | Download all the fragment's file as a zip. |
# Files drag and drop # Files drag and drop
...@@ -209,12 +228,14 @@ HOC used to provide drop functionality to the `FileSection` component. It's main ...@@ -209,12 +228,14 @@ HOC used to provide drop functionality to the `FileSection` component. It's main
This HOC assumes the wrapped component has the following props: This HOC assumes the wrapped component has the following props:
* `files: [{id: string, ...}]`: the list of files passed to the wrapped component | Name | Type | Description |
* `setError: (error: string) => any`: error setting callback | :-------------------- | :-------------------------------------------------------------- | :------------------------------------------------- |
* `listId: string`: the current list id | files | `[{id: string, ...}]` | List of files passed to the wrapped component. |
* `allowedFileExtensions: [string]`: the allowed files | setError | `(error: string) => any` | Error setting callback. |
* `maxFiles: number`: the maximum number of files allowed | listId | `string` | Current list id. |
* `changeList: (fromListId: string, toListId: string: fileId: string)`: callback called if all the conditions are met (allowed files, number of files, etc) | allowedFileExtensions | `[string]` | Allowed file types. |
| maxFiles | `number` | Maximum number of files allowed. |
| changeList | `(fromListId: string, toListId: string: fileId: string) => any` | Callback fired when moving the file to a new list. |
```js ```js
import { compose, withHandler, withProps } from 'recompose' import { compose, withHandler, withProps } from 'recompose'
...@@ -244,11 +265,13 @@ HOC used to provide native file drop functionality to the `FileSection` componen ...@@ -244,11 +265,13 @@ HOC used to provide native file drop functionality to the `FileSection` componen
This HOC assumes the wrapped component has the following props: This HOC assumes the wrapped component has the following props:
* `files: [{id: string, ...}]`: the list of files passed to the wrapped component | Name | Type | Description |
* `setError: (error: string) => any`: error setting callback | :-------------------- | :----------------------- | :--------------------------------------------- |
* `allowedFileExtensions: [string]`: the allowed files | files | `[{id: string, ...}]` | List of files passed to the wrapped component. |
* `maxFiles: number`: the maximum number of files allowed | setError | `(error: string) => any` | Error setting callback. |
* `onFileDrop: (file: File)`: callback called when a valid file is dropped | allowedFileExtensions | `[string]` | Allowed file types. |
| maxFiles | `number` | Maximum number of files allowed. |
| onFileDrop | `(file: File) => any` | Callback fired when a valid file is dropped. |
```js ```js
import { compose, withHandler, withProps } from 'recompose' import { compose, withHandler, withProps } from 'recompose'
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment