Web: Common: PageLayout: Fixed displaying at "Slide Over" on iPad.

This commit is contained in:
TatianaLopaeva 2020-12-18 20:16:13 +03:00
parent ac9666918e
commit d5d71d0a7e
2 changed files with 16 additions and 7 deletions

View File

@ -117,10 +117,7 @@ class PageLayoutComponent extends React.Component {
this.updateMainHeight();
const isValueExist = !!localStorage.getItem(ARTICLE_PINNED_KEY);
const isEnoughWidth =
isIOS && isSafari
? this.windowWidth > size.smallTablet
: screen.availWidth > size.smallTablet;
const isEnoughWidth = screen.availWidth > size.smallTablet;
if (!isEnoughWidth && isValueExist) {
this.backdropClick();
@ -128,7 +125,6 @@ class PageLayoutComponent extends React.Component {
if (isEnoughWidth && isValueExist) {
this.pinArticle();
}
if (isIOS && isSafari) this.windowWidth = window.innerWidth;
};
updateMainHeight = () => {
@ -340,7 +336,11 @@ class PageLayoutComponent extends React.Component {
sectionWidth: width,
}}
>
<Section widthProp={width}>
<Section
widthProp={width}
onUnpin={this.unpinArticle}
pinned={this.state.isArticlePinned}
>
{isSectionHeaderAvailable && (
<SubSectionHeader>
{sectionHeaderContent

View File

@ -1,7 +1,8 @@
import React from "react";
import styled, { css } from "styled-components";
import { utils } from "asc-web-components";
const { tablet } = utils.device;
import { isIOS, isSafari } from "react-device-detect";
const { tablet, size } = utils.device;
const tabletProps = css`
.section-header_filter {
@ -57,8 +58,16 @@ class Section extends React.Component {
/*shouldComponentUpdate() {
return false;
}*/
componentDidUpdate() {
const { pinned } = this.props;
if (isIOS && isSafari && window.innerWidth <= size.smallTablet && pinned) {
this.props.onUnpin();
}
}
render() {
//console.log("PageLayout Section render");
return <StyledSection {...this.props} />;
}
}