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

in progress of fixing auto closing on tablet to desktop resizing

Browse Source
This commit is contained in:
mushka 2022-03-16 19:12:03 +03:00
parent c858b46449
commit 77d58b43c2
7 changed files with 129 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
packages/asc-web-components/modal-dialog/index.js
View File

@ -6,10 +6,8 @@ import {
ModalContentWrapper,
ModalLoader,
} from "./modal-aside-components";
import Heading from "../heading";
import { getModalType } from "../utils/device";
import throttle from "lodash/throttle";
import Box from "../box";
import {
StyledModal,
CloseButton,
@ -18,7 +16,10 @@ import {
BodyBox,
StyledFooter,
} from "./styled-modal-dialog";
import Portal from "../portal";
import Box from "../box";
import { getModalType, isDesktop } from "../utils/device";
function Header() {
return null;
@ -38,51 +39,31 @@ Footer.displayName = "DialogFooter";
class ModalDialog extends React.Component {
static Header = Header;
static Body = Body;
constructor(props) {
super(props);
this.state = { displayType: this.getTypeByWidth() };
this.getTypeByWidth = this.getTypeByWidth.bind(this);
this.resize = this.resize.bind(this);
this.popstate = this.popstate.bind(this);
this.throttledResize = throttle(this.resize, 300);
}
getTypeByWidth() {
if (this.props.displayType !== "auto") return this.props.displayType;
return getModalType();
}
resize() {
if (this.props.displayType !== "auto") return;
const type = this.getTypeByWidth();
if (type === this.state.displayType) return;
this.setState({ displayType: type });
this.props.onResize && this.props.onResize(type);
}
popstate() {
window.removeEventListener("popstate", this.popstate, false);
this.props.onClose();
window.history.go(1);
}
componentDidUpdate(prevProps) {
if (this.props.displayType !== prevProps.displayType) {
this.setState({ displayType: this.getTypeByWidth() });
}
if (this.props.visible && this.state.displayType === "aside") {
window.addEventListener("popstate", this.popstate, false);
}
this.state = { displayType: this.props.displayType };
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
window.addEventListener("resize", this.throttledResize);
window.addEventListener("keyup", this.onKeyPress);
window.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.throttledResize);
window.removeEventListener("keyup", this.onKeyPress);
window.removeEventListener("resize", this.handleResize);
}
handleResize() {
if (this.displayType === "modal" && isDesktop()) return;
if (this.displayType === "aside" && !isDesktop()) return;
const newDisplayType = getModalType();
if (this.state.displayType.toString() !== newDisplayType) {
//this.setState({ displayType: newDisplayType });
console.log("rerender");
}
}
onKeyPress = (event) => {
@ -93,6 +74,7 @@ class ModalDialog extends React.Component {
render() {
const {
displayType,
visible,
scale,
onClose,
@ -132,87 +114,94 @@ class ModalDialog extends React.Component {
}
});
let currentDisplayType;
if (this.props.displayType === "auto" && isDesktop())
currentDisplayType = "modal";
else currentDisplayType = "aside";
console.log(visible, currentDisplayType);
const renderModal = () => {
console.log(visible, this.state.displayType);
if (visible !== true) return null;
return (
<StyledModal>
<ModalBackdrop displayType={this.state.displayType} zIndex={zIndex}>
{this.state.displayType === "aside" && !scale && (
<CloseButton
displayType={this.state.displayType}
className="modal-dialog-button_close"
onClick={onClose}
/>
)}
<ModalContentWrapper
displayType={this.state.displayType}
scale={scale}
zIndex={zIndex}
contentPaddingBottom={contentPaddingBottom}
withoutBodyScroll={removeScroll}
className={className}
id={id}
style={style}
>
<Content
contentHeight={contentHeight}
contentWidth={contentWidth}
displayType={this.state.displayType}
else
return (
<StyledModal>
<ModalBackdrop displayType={currentDisplayType} zIndex={zIndex}>
{displayType === "aside" && !scale && (
<CloseButton
displayType={currentDisplayType}
className="modal-dialog-button_close"
onClick={onClose}
/>
)}
<ModalContentWrapper
displayType={currentDisplayType}
scale={scale}
zIndex={zIndex}
contentPaddingBottom={contentPaddingBottom}
withoutBodyScroll={removeScroll}
className={className}
id={id}
style={style}
>
{isLoading ? (
<ModalLoader
displayType={this.state.displayType}
bodyHeight={modalLoaderBodyHeight}
/>
) : (
<>
<StyledHeader>
<Heading
level={1}
<Content
contentHeight={contentHeight}
contentWidth={contentWidth}
displayType={currentDisplayType}
>
{isLoading ? (
<ModalLoader
displayType={currentDisplayType}
bodyHeight={modalLoaderBodyHeight}
/>
) : (
<>
<StyledHeader>
<Heading
level={1}
className={
displayType === "modal"
? "heading"
: "heading heading-aside"
}
size="medium"
truncate={true}
>
{header ? header.props.children : null}
<CloseButton
displayType={currentDisplayType}
className="modal-dialog-button_close"
onClick={onClose}
/>
</Heading>
</StyledHeader>
<BodyBox
className={
this.state.displayType === "modal"
? "heading"
: "heading heading-aside"
displayType === "aside" &&
"modal-dialog-aside-body bodybox-aside"
}
size="medium"
truncate={true}
paddingProp={"0 16px"}
removeScroll={removeScroll}
>
{header ? header.props.children : null}
<CloseButton
displayType={this.state.displayType}
className="modal-dialog-button_close"
onClick={onClose}
/>
</Heading>
</StyledHeader>
<BodyBox
className={
this.state.displayType === "aside" &&
"modal-dialog-aside-body bodybox-aside"
}
paddingProp={"0 16px"}
removeScroll={removeScroll}
>
{body ? body.props.children : null}
</BodyBox>
<Box
className={
this.state.displayType === "aside" &&
"modal-dialog-aside-footer footer-aside"
}
>
<StyledFooter>
{footer ? footer.props.children : null}
</StyledFooter>
</Box>
</>
)}
</Content>
</ModalContentWrapper>
</ModalBackdrop>
</StyledModal>
);
{body ? body.props.children : null}
</BodyBox>
<Box
className={
displayType === "aside" &&
"modal-dialog-aside-footer footer-aside"
}
>
<StyledFooter>
{footer ? footer.props.children : null}
</StyledFooter>
</Box>
</>
)}
</Content>
</ModalContentWrapper>
</ModalBackdrop>
</StyledModal>
);
};
const modalDialog = renderModal();

1
packages/asc-web-components/modal-dialog/modal-aside-components.js
View File

@ -24,6 +24,7 @@ export const ModalBackdrop = ({ displayType, zIndex, children }) => {
<Backdrop
visible={true}
zIndex={zIndex}
withBackground={true}
isAside={true}
className="backdrop"
>

4
packages/asc-web-components/modal-dialog/modal-dialog.stories.js
View File

@ -58,7 +58,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
key="CloseBtn"
label="Cancel"
scale
size="normal"
size="big"
onClick={toggleVisible}
/>
</ModalDialog.Footer>
@ -70,7 +70,7 @@ const Template = ({ onClick, onClose, onOk, ...args }) => {
export const Default = Template.bind({});
Default.args = {
scale: false,
displayType: "auto",
displayType: "aside",
zIndex: 310,
headerContent: "Change password",
};

33
packages/asc-web-components/modal-dialog/styled-modal-dialog.js
View File

@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
import Base from "../themes/base";
import Box from "../box";
import CrossSidebarIcon from "../../../public/images/cross.sidebar.react.svg";
import { mobile, isTablet, isDesktop } from "../utils/device";
import { smallTablet, isTablet, isDesktop } from "../utils/device";
const StyledModal = styled.div`
.backdrop {
@ -54,11 +54,16 @@ const Content = styled.div`
overflow: hidden;
`}
@media ${mobile} {
position: absolute;
bottom: 0;
width: 100%;
}
${({ displayType }) =>
displayType === "modal" &&
css`
@media ${smallTablet} {
position: absolute;
bottom: 0;
width: 100%;
border-radius: 6px 6px 0 0;
}
`}
`;
const StyledHeader = styled.div`
@ -100,10 +105,10 @@ const CloseButton = styled(CrossSidebarIcon)`
right: 0;
top: 0;
${({ displayType }) =>
displayType === "modal" || (displayType === "auto" && isDesktop())
displayType === "modal"
? css`
margin-right: -23px;
@media ${mobile} {
@media ${smallTablet} {
margin-right: 10px;
margin-top: -23px;
}
@ -115,6 +120,12 @@ const CloseButton = styled(CrossSidebarIcon)`
`}
`;
const BodyBox = styled(Box)`
position: relative;
${(props) => props.removeScroll && `height: 100%;`}
margin-bottom:8px;
`;
const StyledFooter = styled.div`
display: flex;
flex-direction: row;
@ -122,12 +133,6 @@ const StyledFooter = styled.div`
padding: 16px;
`;
const BodyBox = styled(Box)`
position: relative;
${(props) => props.removeScroll && `height: 100%;`}
margin-bottom:8px;
`;
Dialog.defaultProps = { theme: Base };
StyledHeader.defaultProps = { theme: Base };
CloseButton.defaultProps = { theme: Base };

5
packages/asc-web-components/themes/base.js
View File

@ -1,3 +1,4 @@
import { smallTablet } from "../utils/device";
import globalColors from "../utils/globalColors";
const {
@ -496,7 +497,7 @@ const Base = {
modalDialog: {
width: "auto",
maxwidth: "560px",
maxwidth: "600px",
margin: " 0 auto",
minHeight: "100%",
@ -506,7 +507,7 @@ const Base = {
modalBorderRadius: "6px",
asidePadding: "0 0 -16px",
heading: {
maxWidth: "500px",
maxWidth: "600px",
margin: "8px 0 7px 16px",
modalLineHeight: "28px",
asideLineHeight: "56px",

2
products/ASC.Files/Client/src/components/dialogs/ThirdPartyDialog/index.js
View File

@ -138,7 +138,7 @@ const ThirdPartyDialog = (props) => {
isLoading={!tReady}
visible={visible}
scale={false}
displayType="auto"
displayType="modal"
zIndex={310}
onClose={onClose}
>

2
web/ASC.Web.Client/src/components/pages/Wizard/sub-components/modal-dialog-container.js
View File

@ -104,7 +104,7 @@ const ModalContainer = ({
return (
<ModalDialog
visible={visible}
displayType="auto"
displayType="modal"
zIndex={310}
onClose={onCloseModal}
>