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

web: components: Turn on console.logs and added pure to layout components

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-28 23:39:59 +03:00
parent 5be398ad02
commit a52222f81b
20 changed files with 83 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/ASC.Web.Components/src/components/layout/index.js
View File

@ -15,6 +15,10 @@ class Layout extends React.Component {
this.state = this.mapPropsToState(props);
};
/*shouldComponentUpdate() {
return false;
}*/
componentDidUpdate(prevProps, prevState) {
//console.log("Layout componentDidUpdate");
let currentHash = this.getPropsHash(this.props);
@ -66,7 +70,7 @@ class Layout extends React.Component {
}
}
let newState = {
const newState = {
isBackdropAvailable: mainModules.length > 0 || !!props.asideContent,
isHeaderNavAvailable: isolateModules.length > 0 || !!props.currentUser,
isHeaderAvailable: mainModules.length > 0,
@ -196,7 +200,7 @@ class Layout extends React.Component {
</>
);
}
}
};
Layout.propTypes = {
isBackdropVisible: PropTypes.bool,
@ -211,7 +215,7 @@ Layout.propTypes = {
currentUserActions: PropTypes.array,
availableModules: PropTypes.array,
currentModuleId: PropTypes.string
}
};
Layout.defaultProps = {
isBackdropVisible: false,
@ -222,6 +226,6 @@ Layout.defaultProps = {
currentUser: null,
currentUserActions: [],
availableModules: [],
}
};
export default Layout
export default Layout;

6
web/ASC.Web.Components/src/components/layout/sub-components/aside.js
View File

@ -16,8 +16,8 @@ const StyledAside = styled.aside`
z-index: 400;
`;
const Aside = (props) => {
//console.log("Aside render");
const Aside = React.memo(props => {
console.log("Aside render");
const { visible, children } = props;
return (
@ -27,6 +27,6 @@ const Aside = (props) => {
</Scrollbar>
</StyledAside>
);
}
});
export default Aside;

6
web/ASC.Web.Components/src/components/layout/sub-components/header-nav.js
View File

@ -19,8 +19,8 @@ const StyledNav = styled.nav`
}
`;
const HeaderNav = props => {
//console.log("HeaderNav render");
const HeaderNav = React.memo(props => {
console.log("HeaderNav render");
return (
<StyledNav>
{
@ -39,6 +39,6 @@ const HeaderNav = props => {
}
</StyledNav>
);
};
});
export default HeaderNav;

6
web/ASC.Web.Components/src/components/layout/sub-components/header.js
View File

@ -23,8 +23,8 @@ const HeaderText = styled(Text.MenuHeader)`
color: #FFFFFF;
`;
const Header = props => {
//console.log("Header render");
const Header = React.memo(props => {
console.log("Header render");
return (
<StyledHeader>
<NavItem
@ -34,6 +34,6 @@ const Header = props => {
/>
<HeaderText>{props.currentModule && props.currentModule.title}</HeaderText>
</StyledHeader>);
};
});
export default Header;

6
web/ASC.Web.Components/src/components/layout/sub-components/main.js
View File

@ -15,9 +15,9 @@ const StyledMain = styled.main`
}
`;
const Main = props => {
//console.log("Main render");
const Main = React.memo(props => {
console.log("Main render");
return (<StyledMain {...props}/>);
}
});
export default Main;

6
web/ASC.Web.Components/src/components/layout/sub-components/nav-item.js
View File

@ -41,8 +41,8 @@ const NavItemBadge = styled(Badge)`
${props => props.opened ? "" : badgeCss}
`;
const NavItem = props => {
//console.log("NavItem render");
const NavItem = React.memo(props => {
console.log("NavItem render");
const { seporator, opened, active, iconName, children, badgeNumber, onClick, onBadgeClick } = props;
const color = active ? activeColor : baseColor;
@ -55,6 +55,6 @@ const NavItem = props => {
<NavItemBadge opened={opened} number={badgeNumber} onClick={onBadgeClick}/>
</NavItemWrapper>
);
};
});
export default NavItem;

6
web/ASC.Web.Components/src/components/layout/sub-components/nav-logo-item.js
View File

@ -11,8 +11,8 @@ const LogoItem = styled.div`
cursor: pointer;
`;
const NavLogoItem = props => {
//console.log("NavLogoItem render");
const NavLogoItem = React.memo(props => {
console.log("NavLogoItem render");
const navLogoIconStyle = {
display: props.opened ? 'none' : 'block'
};
@ -29,6 +29,6 @@ const NavLogoItem = props => {
<Icons.NavLogoOpenedIcon style={navLogoOpenedIconStyle} onClick={props.onClick}/>
</LogoItem>
);
};
});
export default NavLogoItem;

6
web/ASC.Web.Components/src/components/layout/sub-components/nav.js
View File

@ -22,8 +22,8 @@ const StyledNav = styled.nav`
}
`;
const Nav = (props) => {
//console.log("Nav render");
const Nav = React.memo(props => {
console.log("Nav render");
const { opened, onMouseEnter, onMouseLeave, children } = props;
return (
@ -33,6 +33,6 @@ const Nav = (props) => {
</Scrollbar>
</StyledNav>
);
}
});
export default Nav;

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

@ -54,7 +54,7 @@ class ProfileActions extends React.PureComponent {
};
render() {
//console.log("Layout sub-component ProfileActions render");
console.log("Layout sub-component ProfileActions render");
return (
<div ref={this.ref}>
<Avatar

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-body.js
View File

@ -8,8 +8,8 @@ const StyledArticleBody = styled.div`
flex-grow: 1;
`;
const ArticleBody = (props) => {
//console.log("ArticleBody render");
const ArticleBody = React.memo(props => {
console.log("PageLayout ArticleBody render");
const { children } = props;
return (
@ -19,6 +19,6 @@ const ArticleBody = (props) => {
</Scrollbar>
</StyledArticleBody>
);
}
});
export default ArticleBody;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-header.js
View File

@ -11,9 +11,9 @@ const StyledArticleHeader = styled.div`
}
`;
const ArticleHeader = (props) => {
//console.log("ArticleHeader render");
const ArticleHeader = React.memo(props => {
console.log("PageLayout ArticleHeader render");
return (<StyledArticleHeader {...props}/>)
}
});
export default ArticleHeader;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-main-button.js
View File

@ -5,9 +5,9 @@ const StyledArticleMainButton = styled.div`
margin: 16px 0 0;
`;
const ArticleMainButton = (props) => {
//console.log("ArticleMainButton render");
const ArticleMainButton = React.memo(props => {
console.log("PageLayout ArticleMainButton render");
return (<StyledArticleMainButton {...props} />);
};
});
export default ArticleMainButton;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article-pin-panel.js
View File

@ -29,8 +29,8 @@ const StyledArticlePinPanel = styled.div`
}
`;
const ArticlePinPanel = (props) => {
//console.log("ArticlePinPanel render");
const ArticlePinPanel = React.memo(props => {
console.log("PageLayout ArticlePinPanel render");
const { pinned, pinText, onPin, unpinText, onUnpin } = props;
return (
@ -48,6 +48,6 @@ const ArticlePinPanel = (props) => {
}
</StyledArticlePinPanel>
);
}
});
export default ArticlePinPanel;

28
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js
View File

@ -14,13 +14,13 @@ const StyledArticle = styled.article`
@media ${device.tablet} {
${props => props.visible
? props.pinned
? `
? props.pinned
? `
display: flex;
width: 240px;
min-width: 240px;
`
: `
: `
width: 240px;
min-width: 240px;
position: fixed;
@ -29,19 +29,25 @@ const StyledArticle = styled.article`
left: 0;
z-index: 400;
`
: `
: `
display: none;
width: 0px;
`
}
}
}
`;
const Article = (props) => {
//console.log("Article render");
return (
<StyledArticle {...props}/>
);
}
class Article extends React.Component {
shouldComponentUpdate() {
return false;
}
render() {
console.log("PageLayout Article render");
return (
<StyledArticle {...this.props} />
);
};
};
export default Article;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-body.js
View File

@ -8,8 +8,8 @@ const StyledSectionBody = styled.div`
flex-grow: 1;
`;
const SectionBody = (props) => {
//console.log("SectionBody render");
const SectionBody = React.memo(props => {
console.log("PageLayout SectionBody render");
const { children } = props;
return (
@ -19,6 +19,6 @@ const SectionBody = (props) => {
</Scrollbar>
</StyledSectionBody>
);
}
});
export default SectionBody;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-filter.js
View File

@ -5,9 +5,9 @@ const StyledSectionFilter = styled.div`
margin: 16px 0 0;
`;
const SectionFilter = (props) => {
//console.log("SectionFilter render");
const SectionFilter = React.memo(props => {
console.log("PageLayout SectionFilter render");
return (<StyledSectionFilter {...props}/>);
}
});
export default SectionFilter;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-header.js
View File

@ -6,9 +6,9 @@ const StyledSectionHeader = styled.div`
height: 56px;
`;
const SectionHeader = (props) => {
//console.log("SectionHeader render");
const SectionHeader = React.memo(props => {
console.log("PageLayout SectionHeader render");
return (<StyledSectionHeader {...props} />);
}
});
export default SectionHeader;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-paging.js
View File

@ -5,9 +5,9 @@ const StyledSectionPaging = styled.div`
margin: 0 0 16px;
`;
const SectionPaging = (props) => {
//console.log("SectionPaging render");
const SectionPaging = React.memo(props => {
console.log("PageLayout SectionPaging render");
return (<StyledSectionPaging {...props} />);
}
});
export default SectionPaging;

6
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section-toggler.js
View File

@ -22,8 +22,8 @@ const StyledSectionToggler = styled.div`
`;
const SectionToggler = (props) => {
//console.log("SectionToggler render");
const SectionToggler = React.memo(props => {
console.log("PageLayout SectionToggler render");
const { visible, onClick } = props;
return (
@ -33,6 +33,6 @@ const SectionToggler = (props) => {
</div>
</StyledSectionToggler>
);
}
});
export default SectionToggler;

11
web/ASC.Web.Components/src/components/page-layout/sub-comoponents/section.js
View File

@ -9,9 +9,14 @@ const StyledSection = styled.section`
overflow: hidden auto;
`;
const Section = (props) => {
//console.log("Section render");
return (<StyledSection {...props} />);
class Section extends React.Component {
/*shouldComponentUpdate() {
return false;
}*/
render() {
console.log("PageLayout Section render");
return (<StyledSection {...this.props} />);
};
};
export default Section;