Merge branch 'master' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.79",
+  "version": "1.0.80",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

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('<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);
   });
+  */
 });

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
+    ? <ImageStyled src={source} />
+    : userName
+      ? <Initials userName={userName} size={size} />
+      : <EmptyIcon size='scale' />;
 
-  render() {
-    //console.log("Avatar render");
-    const { size, source, userName, role, editing, editLabel, editAction } = this.props;
+  const roleIcon = getRoleIcon(role);
 
-    const avatarContent = source
-      ? <ImageStyled src={source} />
-      : userName
-        ? <Initials userName={userName} size={size} />
-        : <EmptyIcon size='scale' />;
-
-    const roleIcon = getRoleIcon(role);
-
-    return (
-      <StyledAvatar {...this.props}>
-        <AvatarWrapper source={source} userName={userName}>
-          {avatarContent}
-        </AvatarWrapper>
-        {editing && (size === 'max') &&
-          <EditContainer>
-            <EditLink>
-              <Link
-                type='action'
-                title={editLabel}
-                isTextOverflow={true}
-                fontSize={14}
-                color={whiteColor}
-                onClick={editAction}
-              >
-                {editLabel}
-              </Link>
-            </EditLink>
-          </EditContainer>}
-        <RoleWrapper size={size}>
-          {roleIcon}
-        </RoleWrapper>
-      </StyledAvatar>
-    );
-  }
-}
+  return (
+    <StyledAvatar {...props}>
+      <AvatarWrapper source={source} userName={userName}>
+        {avatarContent}
+      </AvatarWrapper>
+      {editing && (size === 'max') &&
+        <EditContainer>
+          <EditLink>
+            <Link
+              type='action'
+              title={editLabel}
+              isTextOverflow={true}
+              fontSize={14}
+              color={whiteColor}
+              onClick={editAction}
+            >
+              {editLabel}
+            </Link>
+          </EditLink>
+        </EditContainer>}
+      <RoleWrapper size={size}>
+        {roleIcon}
+      </RoleWrapper>
+    </StyledAvatar>
+  );
+});
 
 Avatar.propTypes = {
   size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),

web/ASC.Web.Components/src/components/context-menu-button/index.js

@@ -12,7 +12,7 @@ const StyledOuther = styled.div`
   cursor: pointer;
 `;
 
-class ContextMenuButton extends React.PureComponent {
+class ContextMenuButton extends React.Component {
   constructor(props) {
     super(props);
 
@@ -70,6 +70,13 @@ class ContextMenuButton extends React.PureComponent {
     this.toggle(!this.state.isOpen);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.opened === nextProps.opened && this.state.isOpen === nextState.isOpen) {
+      return false;
+    }
+    return true;
+  }
+
   render() {
     //console.log("ContextMenuButton render");
     return (

web/ASC.Web.Components/src/components/link/index.js

@@ -1,21 +1,23 @@
-import React from "react";
+import React, { memo } from "react";
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { Text } from "../text";
 
-const SimpleLink = ({
-  rel,
-  isBold,
-  fontSize,
-  isTextOverflow,
-  isHovered,
-  isSemitransparent,
-  type,
-  color,
-  title,
-  containerWidth,
-  ...props
-}) => <a {...props} />;
+// eslint-disable-next-line no-unused-vars
+const SimpleLink = ({ rel, isBold, fontSize, isTextOverflow, isHovered, isSemitransparent, type, color, title, containerWidth, ...props }) => <a {...props} />;
+
+SimpleLink.propTypes = {
+  color: PropTypes.string,
+  fontSize: PropTypes.number,
+  isBold: PropTypes.bool,
+  isHovered: PropTypes.bool,
+  isSemitransparent: PropTypes.bool,
+  isTextOverflow: PropTypes.bool,
+  rel: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(["action", "page"]),
+  containerWidth: PropTypes.string
+};
 
 
 const colorCss = css`
@@ -45,7 +47,8 @@ const StyledLink = styled(SimpleLink)`
   ${props => props.isHovered && hoveredCss}
 `;
 
-const Link = props => {
+// eslint-disable-next-line react/display-name
+const Link = memo(props => {
   const {
     isBold,
     title,
@@ -70,7 +73,7 @@ const Link = props => {
       </Text.Body>
     </StyledLink>
   );
-};
+});
 
 Link.propTypes = {
   color: PropTypes.string,
@@ -86,6 +89,7 @@ Link.propTypes = {
   target: PropTypes.oneOf(["_blank", "_self", "_parent", "_top"]),
   title: PropTypes.string,
   type: PropTypes.oneOf(["action", "page"]),
+  children: PropTypes.string
 };
 
 Link.defaultProps = {

web/ASC.Web.Components/src/components/row-container/index.js

@@ -1,8 +1,9 @@
-import React from 'react';
+/* eslint-disable react/display-name */
+import React, { memo } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import CustomScrollbarsVirtualList from '../scrollbar/custom-scrollbars-virtual-list';
-import { FixedSizeList as List } from 'react-window';
+import { FixedSizeList as List, areEqual } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import ContextMenu from '../context-menu';
 
@@ -35,6 +36,16 @@ class RowContainer extends React.PureComponent {
     window.removeEventListener('contextmenu', this.onRowContextClick);
   }
 
+  renderRow = memo(({ data, index, style }) => {
+    const options = data[index].props.contextOptions;
+    
+    return (
+      <div onContextMenu={this.onRowContextClick.bind(this, options)} style={style}>
+        {data[index]}
+      </div>
+    )
+  }, areEqual);
+
   render() {
     const { manualHeight, itemHeight, children } = this.props;
 
@@ -48,22 +59,10 @@ class RowContainer extends React.PureComponent {
         itemData={children}
         outerElementType={CustomScrollbarsVirtualList}
       >
-        {RenderRow}
+        {this.renderRow}
       </List>
     );
 
-
-    const RenderRow = ({ data, index, style }) => {
-
-      const options = data[index].props.contextOptions;
-      
-      return (
-        <div onContextMenu={this.onRowContextClick.bind(this, options)} style={style}>
-          {data[index]}
-        </div>
-      )
-    };
-
     return (
       <StyledRowContainer id='rowContainer' manualHeight={manualHeight}>
         <AutoSizer>

web/ASC.Web.Components/src/components/row/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
@@ -40,6 +40,7 @@ const StyledElement = styled.div`
   flex: 0 0 auto;
   display: flex;
   margin-right: 8px;
+  margin-left: 2px;
   user-select: none;
 `;
 
@@ -50,54 +51,39 @@ const StyledOptionButton = styled.div`
   margin-right: 16px;
 `;
 
-class Row extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: this.props.checked
-    }
-  }
-
-  changeCheckbox = (e) => {
-    this.props.onSelect && this.props.onSelect(e.target.checked, this.props.data);
+// eslint-disable-next-line react/display-name
+const Row = props => {
+  const changeCheckbox = (e) => {
+    props.onSelect && props.onSelect(e.target.checked, props.data);
   };
 
-  getOptions = () => this.props.contextOptions;
+  const getOptions = () => props.contextOptions;
+  //console.log("Row render");
+  const { checked, element, children, contextOptions } = props;
 
-  componentDidUpdate(prevProps) {
-    if (this.props.checked !== prevProps.checked) {
-      this.setState({ checked: this.props.checked });
-    }
-  }
-  
-  render() {
-    //console.log("Row render");
-    const { checked, element, children, contextOptions } = this.props;
-
-    return (
-      <StyledRow ref={this.rowRef} {...this.props}>
-        {Object.prototype.hasOwnProperty.call(this.props, 'checked') &&
-          <StyledCheckbox>
-            <Checkbox isChecked={checked} onChange={this.changeCheckbox} />
-          </StyledCheckbox>
+  return (
+    <StyledRow {...props}>
+      {Object.prototype.hasOwnProperty.call(props, 'checked') &&
+        <StyledCheckbox>
+          <Checkbox isChecked={checked} onChange={changeCheckbox} />
+        </StyledCheckbox>
+      }
+      {Object.prototype.hasOwnProperty.call(props, 'element') &&
+        <StyledElement>
+          {element}
+        </StyledElement>
+      }
+      <StyledContent>
+        {children}
+      </StyledContent>
+      <StyledOptionButton>
+        {Object.prototype.hasOwnProperty.call(props, 'contextOptions') && contextOptions.length > 0 &&
+          <ContextMenuButton directionX='right' getData={getOptions} />
         }
-        {Object.prototype.hasOwnProperty.call(this.props, 'element') &&
-          <StyledElement>
-            {element}
-          </StyledElement>
-        }
-        <StyledContent>
-          {children}
-        </StyledContent>
-        <StyledOptionButton>
-          {Object.prototype.hasOwnProperty.call(this.props, 'contextOptions') && contextOptions.length > 0 &&
-            <ContextMenuButton directionX='right' getData={this.getOptions} />
-          }
-        </StyledOptionButton>
-      </StyledRow>
-    );
-  }
-}
+      </StyledOptionButton>
+    </StyledRow>
+  );
+};
 
 Row.propTypes = {
   checked: PropTypes.bool,