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

web: Components: Fixed re-render for Avatar component

Browse Source
This commit is contained in:
Ilya Oleshko 2019-09-13 15:34:37 +03:00
parent 96e1d81e86
commit c6d27bdb55
2 changed files with 39 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/ASC.Web.Components/src/components/avatar/avatar.test.js
View File

@ -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('<Avatar />', () => {
expect(wrapper.prop('editing')).toEqual(true);
});
/*
it('not re-render test', () => {
const wrapper = shallow(<Avatar {...baseProps} />).instance();
@ -119,4 +120,5 @@ describe('<Avatar />', () => {
expect(shouldUpdate).toBe(true);
});
*/
});

18
web/ASC.Web.Components/src/components/avatar/index.js
View File

@ -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,15 +158,9 @@ Initials.propTypes = {
};
// eslint-disable-next-line react/display-name
class Avatar extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
}
render() {
const Avatar = memo(props => {
//console.log("Avatar render");
const { size, source, userName, role, editing, editLabel, editAction } = this.props;
const { size, source, userName, role, editing, editLabel, editAction } = props;
const avatarContent = source
? <ImageStyled src={source} />
@ -178,7 +171,7 @@ class Avatar extends React.Component {
const roleIcon = getRoleIcon(role);
return (
<StyledAvatar {...this.props}>
<StyledAvatar {...props}>
<AvatarWrapper source={source} userName={userName}>
{avatarContent}
</AvatarWrapper>
@ -202,8 +195,7 @@ class Avatar extends React.Component {
</RoleWrapper>
</StyledAvatar>
);
}
}
});
Avatar.propTypes = {
size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),