4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ default double side page working

Browse Source
This commit is contained in:
Maxime Lalo 2024-07-19 14:37:44 +02:00
parent 9ecda1719c
commit 7eb775d1e3
2 changed files with 47 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
View File

@ -1,31 +1,17 @@
@import "@Themes/constants.scss";
.root {
max-height: 100vh;
min-height: 100vh;
overflow: hidden;
.content {
display: flex;
height: calc(100vh - 83px);
.side-left {
max-height: 100vh;
overflow: auto;
}
.sides {
width: 50%;
min-height: calc(100vh - 83px);
flex: 1;
@media (max-width: $screen-m) {
width: 100%;
}
&.image-container {
display: flex;
align-items: center;
justify-content: center;
@media (max-width: $screen-m) {
display: none;
}
@ -34,23 +20,19 @@
.image {
width: 100%;
height: 100%;
object-fit: contain;
}
}
&.background-image-container {
display: flex;
align-items: center;
justify-content: center;
height: 0px;
@media (max-width: $screen-m) {
display: none;
}
.background-image {
height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}

60
src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
View File

@ -2,7 +2,7 @@ import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import classNames from "classnames";
import Image, { StaticImageData } from "next/image";
import React, { ReactNode } from "react";
import React, { ReactNode, useEffect, useRef } from "react";
import classes from "./classes.module.scss";
@ -12,35 +12,47 @@ type IProps = {
/**
* @description scroll top with number or disabled with null
*/
scrollTop: number | null;
scrollTop?: number | null;
image: StaticImageData;
type: "background" | "image";
showHeader: boolean;
type?: "background" | "image";
showHeader?: boolean;
};
type IState = {};
export default function DefaultDoubleSidePage(props: IProps) {
const { title, children, scrollTop = 0, image, type = "background", showHeader = false } = props;
export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
public static defaultProps = {
scrollTop: 0,
type: "background",
showHeader: false,
};
useEffect(() => {
window.document.title = title;
if (scrollTop !== null) {
window.scrollTo(0, scrollTop);
}
}, [scrollTop, title]);
useEffect(() => {
// make second element ref height same as first element ref height
if (firstElementRef.current && secondElementRef.current) {
secondElementRef.current.style.height = `${firstElementRef.current.clientHeight}px`;
}
}, []);
const firstElementRef = useRef<HTMLDivElement>(null);
const secondElementRef = useRef<HTMLDivElement>(null);
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Header isUserConnected={this.props.showHeader} />
<Header isUserConnected={showHeader} />
<div className={classes["content"]}>
<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
{this.props.type === "image" && (
<div className={classNames(classes["sides"], classes["image-container"])}>
<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
<div className={classNames(classes["sides"], classes["side-left"])} ref={firstElementRef}>
{children}
</div>
{type === "image" && (
<div className={classNames(classes["sides"], classes["image-container"])} ref={secondElementRef}>
<Image alt={"right side image"} src={image} className={classes["image"]} />
</div>
)}
{this.props.type === "background" && (
<div className={classNames(classes["sides"], classes["background-image-container"])}>
<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} priority />
{type === "background" && (
<div className={classNames(classes["sides"], classes["background-image-container"])} ref={secondElementRef}>
<Image alt={"right side image"} src={image} className={classes["background-image"]} priority />
</div>
)}
</div>
@ -48,11 +60,3 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
</div>
);
}
public override componentDidMount() {
window.document.title = this.props.title;
if (this.props.scrollTop !== null) {
window.scrollTo(0, this.props.scrollTop);
}
}
}