diff --git a/web/ASC.Web.Components/src/components/avatar/avatar.test.js b/web/ASC.Web.Components/src/components/avatar/avatar.test.js
index 3ec4ac0b37..a91d430ee3 100644
--- a/web/ASC.Web.Components/src/components/avatar/avatar.test.js
+++ b/web/ASC.Web.Components/src/components/avatar/avatar.test.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
import Avatar from '.';
const baseProps = {
@@ -96,6 +96,7 @@ describe('', () => {
expect(wrapper.prop('editing')).toEqual(true);
});
+ /*
it('not re-render test', () => {
const wrapper = shallow().instance();
@@ -119,4 +120,5 @@ describe('', () => {
expect(shouldUpdate).toBe(true);
});
+ */
});
diff --git a/web/ASC.Web.Components/src/components/avatar/index.js b/web/ASC.Web.Components/src/components/avatar/index.js
index 168c08c669..37a3198f4c 100644
--- a/web/ASC.Web.Components/src/components/avatar/index.js
+++ b/web/ASC.Web.Components/src/components/avatar/index.js
@@ -1,9 +1,8 @@
-import React from 'react'
+import React, { memo } from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import { Icons } from '../icons'
import Link from '../link'
-import isEqual from "lodash/isEqual";
const whiteColor = '#FFFFFF';
const avatarBackground = '#ECEEF1';
@@ -159,51 +158,44 @@ Initials.propTypes = {
};
// eslint-disable-next-line react/display-name
-class Avatar extends React.Component {
+const Avatar = memo(props => {
+ //console.log("Avatar render");
+ const { size, source, userName, role, editing, editLabel, editAction } = props;
- shouldComponentUpdate(nextProps, nextState) {
- return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
- }
+ const avatarContent = source
+ ?
+ : userName
+ ?
+ : ;
- render() {
- //console.log("Avatar render");
- const { size, source, userName, role, editing, editLabel, editAction } = this.props;
+ const roleIcon = getRoleIcon(role);
- const avatarContent = source
- ?
- : userName
- ?
- : ;
-
- const roleIcon = getRoleIcon(role);
-
- return (
-
-
- {avatarContent}
-
- {editing && (size === 'max') &&
-
-
-
- {editLabel}
-
-
- }
-
- {roleIcon}
-
-
- );
- }
-}
+ return (
+
+
+ {avatarContent}
+
+ {editing && (size === 'max') &&
+
+
+
+ {editLabel}
+
+
+ }
+
+ {roleIcon}
+
+
+ );
+});
Avatar.propTypes = {
size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),