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

web: components: Performance optimization

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-24 20:43:18 +03:00
parent 0add8217cc
commit 0962f0e73b
10 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/ASC.Web.Components/src/components/combobox/index.js
View File

@ -21,7 +21,7 @@ const StyledComboBox = styled.div`
}
`;
class ComboBox extends React.Component {
class ComboBox extends React.PureComponent {
constructor(props) {
super(props);
@ -33,6 +33,10 @@ class ComboBox extends React.Component {
boxLabel: props.items[0].label,
items: props.items
};
this.handleClick.bind(this);
this.stopAction.bind(this);
this.toggle.bind(this);
}
@ -57,6 +61,7 @@ class ComboBox extends React.Component {
}
render () {
//console.log("ComboBox render");
return (
<StyledComboBox ref={this.ref} {...this.props}
onClick={

2
web/ASC.Web.Components/src/components/content-row/index.js
View File

@ -71,7 +71,7 @@ const StyledOptionButton = styled.div`
margin-right: 16px;
`;
class ContentRow extends React.Component {
class ContentRow extends React.PureComponent {
constructor(props){
super(props);
this.state = {

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

@ -11,7 +11,7 @@ const StyledOuther = styled.div`
cursor: pointer;
`;
class ContextMenuButton extends React.Component {
class ContextMenuButton extends React.PureComponent {
constructor(props) {
super(props);
@ -21,6 +21,10 @@ class ContextMenuButton extends React.Component {
isOpen: props.opened,
data: props.data
};
this.handleClick.bind(this);
this.stopAction.bind(this);
this.toggle.bind(this);
}
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
@ -46,6 +50,7 @@ class ContextMenuButton extends React.Component {
}
render() {
console.log("ContextMenuButton render");
return (
<StyledOuther ref={this.ref}>
<IconButton

5
web/ASC.Web.Components/src/components/drop-down-item/index.js
View File

@ -112,7 +112,8 @@ const UserEmailWrapper = styled.div`
${itemTruncate}
`;
const DropDownItem = props => {
const DropDownItem = React.memo(props => {
//console.log("DropDownItem render");
const {isSeparator, isUserPreview, label} = props;
return (
<StyledDropdownItem {...props} >
@ -132,7 +133,7 @@ const DropDownItem = props => {
}
</StyledDropdownItem>
);
};
});
DropDownItem.propTypes = {
isSeparator: PropTypes.bool,

6
web/ASC.Web.Components/src/components/drop-down/index.js
View File

@ -38,7 +38,9 @@ const Arrow = styled.div`
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.27954 1.12012C10.8122 -0.295972 13.1759 -0.295971 14.7086 1.12012L18.8406 4.93793C19.5796 5.62078 20.5489 6 21.5551 6H24H0H2.43299C3.4392 6 4.40845 5.62077 5.1475 4.93793L9.27954 1.12012Z' fill='%23206FA4'/%3E%3C/svg%3E");
`;
const DropDown = props => {
const DropDown = React.memo(props => {
console.log("DropDown render");
return (
<StyledDropdown {...props}>
{props.withArrow && <Arrow directionX={props.directionX} />}
@ -47,7 +49,7 @@ const DropDown = props => {
)}
</StyledDropdown>
);
};
});
DropDown.propTypes = {
directionX: PropTypes.oneOf(['left', 'right']),

10
web/ASC.Web.Components/src/components/group-button/index.js
View File

@ -82,7 +82,7 @@ const Separator = styled.div`
margin-top: 16px;
`;
class GroupButton extends React.Component {
class GroupButton extends React.PureComponent {
constructor(props) {
super(props);
@ -91,11 +91,14 @@ class GroupButton extends React.Component {
this.state = {
isOpen: props.opened
};
this.handleClick.bind(this);
this.stopAction.bind(this);
this.toggle.bind(this);
}
onOuterClick = e => this.toggle(false);
handleClick = e =>
!this.ref.current.contains(e.target) && this.onOuterClick(e);
!this.ref.current.contains(e.target) && this.toggle(false);
stopAction = e => e.preventDefault();
toggle = isOpen => this.setState({ isOpen: isOpen });
@ -118,6 +121,7 @@ class GroupButton extends React.Component {
}
render() {
//console.log("GroupButton render");
const { label, isDropdown, disabled, isSeparator } = this.props;
return (

3
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -58,7 +58,7 @@ const StyledCheckbox = styled.div`
}
`;
class GroupButtonsMenu extends React.Component {
class GroupButtonsMenu extends React.PureComponent {
constructor(props) {
super(props);
@ -116,6 +116,7 @@ class GroupButtonsMenu extends React.Component {
render() {
console.log("GroupButtonsMenu render");
const closeMenu = (e) => {
this.setState({visible: false});
this.props.onClose && this.props.onClose(e);

7
web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js
View File

@ -4,7 +4,7 @@ import Avatar from '../../avatar'
import DropDown from '../../drop-down'
import DropDownItem from '../../drop-down-item'
class ProfileActions extends React.Component {
class ProfileActions extends React.PureComponent {
constructor(props) {
super(props);
@ -16,6 +16,10 @@ class ProfileActions extends React.Component {
user: props.user,
userActions: props.userActions
};
this.handleClick.bind(this);
this.toggle.bind(this);
this.getUserRole.bind(this);
};
handleClick = (e) => {
@ -50,6 +54,7 @@ class ProfileActions extends React.Component {
};
render() {
//console.log("Layout sub-component ProfileActions render");
return (
<div ref={this.ref}>
<Avatar

8
web/ASC.Web.Components/src/components/link/index.js
View File

@ -104,7 +104,7 @@ ${props => (props.isTextOverflow && css`
`;
class Link extends React.Component {
class Link extends React.PureComponent {
constructor(props) {
super(props);
@ -116,6 +116,11 @@ class Link extends React.Component {
isHovered: props.isHovered,
isDropdown: props.dropdownType != 'none'
};
this.handleClick.bind(this);
this.stopAction.bind(this);
this.toggleDropdown.bind(this);
this.toggleHovered.bind(this);
}
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggleDropdown(false);
@ -143,6 +148,7 @@ class Link extends React.Component {
}
render() {
console.log("Link render");
return (
<span ref={this.ref}
onMouseEnter={() => {

10
web/ASC.Web.Components/src/components/main-button/index.js
View File

@ -102,7 +102,7 @@ const StyledSecondaryButton = styled(StyledMainButton)`
border-bottom-left-radius:0;
`;
class MainButton extends React.Component {
class MainButton extends React.PureComponent {
constructor(props) {
super(props);
@ -112,10 +112,13 @@ class MainButton extends React.Component {
this.state = {
isOpen: props.opened
};
this.handleClick.bind(this);
this.stopAction.bind(this);
this.toggle.bind(this);
}
onOuterClick = (e) => this.toggle(false);
handleClick = (e) => !this.ref.current.contains(e.target) && this.onOuterClick(e);
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
stopAction = (e) => e.preventDefault();
toggle = (isOpen) => this.setState({ isOpen: isOpen});
@ -138,6 +141,7 @@ class MainButton extends React.Component {
}
render() {
//console.log("MainButton render");
return (
<GroupMainButton {...this.props} ref={this.ref}>
<StyledMainButton {...this.props} onClick={