IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Fixed AvatarEditor component readme

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-19 17:25:01 +03:00
parent 4f9cc96348
commit 25a3425a00
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/ASC.Web.Components/src/components/avatar-editor/README.md
View File

@ -1,43 +1,48 @@
# Avatar Editor
## Usage
Used to display user avatar editor on page.
### Usage
```js
import { AvatarEditor } from 'asc-web-components';
import { AvatarEditor } from "asc-web-components";
```
#### Description
Required to display user avatar editor on page.
#### Usage
```js
```jsx
<AvatarEditor
visible={this.state.isOpen}
onClose={() =>{}}
onSave={(data) =>{console.log(data.isUpdate, data.croppedImageInfo)}}
onImageChange={(data) =>{console.log(croppedImageInfo)}
/>
visible={true}
onClose={() => {}}
onSave={() => {})}
onDeleteImage={() => {})}
onImageChange={() => {})}
onLoadFile={() => {}}
headerLabel="Edit Photo"
chooseFileLabel="Drop files here, or click to select files"
saveButtonLabel="Save"
maxSizeFileError="Maximum file size exceeded"
unknownTypeError="Unknown image file type"
unknownError="Error"
displayType="auto"
/>
```
#### Properties
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------ | -------- | :------: | -------------------------------- | ----------------------------- | ----------------------------------------------------- |
| `visible` | `bool` | - | | `false` | Display avatar editor or not |
| `image` | `string/file`| - | | | The URL of the image to use, or a File |
| `accept` | `array` | - | | `['image/png', 'image/jpeg']` | Accepted file types |
| `displayType` | `oneOf` | - | `auto`, `modal`, `aside` | `auto` | |
| `chooseFileLabel` | `string` | - | | `Choose a file` | |
| `headerLabel` | `string` | - | | `Edit Photo` | |
| `saveButtonLabel` | `string` | - | | `Save` | |
| `maxSizeFileError` | `string` | - | | `Maximum file size exceeded` | |
| `unknownTypeError` | `string` | - | | `Unknown image file type` | |
| `unknownError` | `string` | - | | `Error` | |
| `maxSize` | `number` | - | | `1` | Max size of image |
| `onSave` | `function` | - | | | |
| `onClose` | `function` | - | | | |
| `onDeleteImage` | `function` | - | | | |
| `onLoadFile` | `function` | - | | | |
| `onImageChange` | `function` | - | | | |
| Props | Type | Required | Values | Default | Description |
| ------------------ | :-------------: | :------: | :----------------------: | :---------------------------: | ---------------------------------------- |
| `visible` | `bool` | - | - | `false` | Display avatar editor |
| `image` | `string`,`file` | - | - | - | The URL of the image to use, or a File |
| `accept` | `array` | - | - | `['image/png', 'image/jpeg']` | Accepted file types |
| `displayType` | `oneOf` | - | `auto`, `modal`, `aside` | `auto` | Display type |
| `chooseFileLabel` | `string` | - | - | `Choose a file` | Translation string for file selection |
| `headerLabel` | `string` | - | - | `Edit Photo` | Translation string for title |
| `saveButtonLabel` | `string` | - | - | `Save` | Translation string for save button |
| `maxSizeFileError` | `string` | - | - | `Maximum file size exceeded` | Translation string for size warning |
| `unknownTypeError` | `string` | - | - | `Unknown image file type` | Translation string for file type warning |
| `unknownError` | `string` | - | - | `Error` | Translation string for warning |
| `maxSize` | `number` | - | - | `1` | Max size of image |
| `onSave` | `function` | - | - | - | Save event |
| `onClose` | `function` | - | - | - | Closing event |
| `onDeleteImage` | `function` | - | - | - | Image deletion event |
| `onLoadFile` | `function` | - | - | - | Image upload event |
| `onImageChange` | `function` | - | - | - | Image change event |