2019-09-05 06:23:05 +00:00
|
|
|
# Avatar Editor
|
|
|
|
|
|
2019-11-19 14:25:01 +00:00
|
|
|
Used to display user avatar editor on page.
|
|
|
|
|
|
|
|
|
|
### Usage
|
2019-09-05 06:23:05 +00:00
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import AvatarEditor from "@appserver/components/avatar-editor";
|
2019-09-05 06:23:05 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-19 14:25:01 +00:00
|
|
|
```jsx
|
2019-09-05 06:23:05 +00:00
|
|
|
<AvatarEditor
|
2019-11-19 14:25:01 +00:00
|
|
|
visible={true}
|
|
|
|
|
onClose={() => {}}
|
|
|
|
|
onSave={() => {})}
|
|
|
|
|
onDeleteImage={() => {})}
|
|
|
|
|
onImageChange={() => {})}
|
|
|
|
|
onLoadFile={() => {}}
|
|
|
|
|
headerLabel="Edit Photo"
|
2020-09-16 15:08:32 +00:00
|
|
|
selectNewPhotoLabel="Select new photo"
|
|
|
|
|
orDropFileHereLabel="or drop file here"
|
2019-11-19 14:25:01 +00:00
|
|
|
saveButtonLabel="Save"
|
|
|
|
|
maxSizeFileError="Maximum file size exceeded"
|
|
|
|
|
unknownTypeError="Unknown image file type"
|
|
|
|
|
unknownError="Error"
|
|
|
|
|
displayType="auto"
|
|
|
|
|
/>
|
2019-09-05 06:23:05 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-19 14:25:01 +00:00
|
|
|
### Properties
|
|
|
|
|
|
2020-09-16 15:08:32 +00:00
|
|
|
| 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 |
|
|
|
|
|
| `selectNewPhotoLabel` | `string` | - | - | `Select new photo` | Translation string for file selection |
|
|
|
|
|
| `orDropFileHereLabel` | `string` | - | - | `or drop file here` | Translation string for file dropping (concat with selectNewPhotoLabel prop) |
|
|
|
|
|
| `headerLabel` | `string` | - | - | `Edit Photo` | Translation string for title |
|
|
|
|
|
| `saveButtonLabel` | `string` | - | - | `Save` | Translation string for save button |
|
|
|
|
|
| `saveButtonLoading` | `bool` | - | - | - | Tells when the button should show loader icon |
|
|
|
|
|
| `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 |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
