diff --git a/web/ASC.Web.Components/src/components/avatar-editor/README.md b/web/ASC.Web.Components/src/components/avatar-editor/README.md index 025fa36dd0..149ffc190b 100644 --- a/web/ASC.Web.Components/src/components/avatar-editor/README.md +++ b/web/ASC.Web.Components/src/components/avatar-editor/README.md @@ -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 {}} - 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` | - | | | | \ No newline at end of file +| 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 |