From fa308f11d15e8b71b6a276adb7509ca9563e1f74 Mon Sep 17 00:00:00 2001 From: Maximus Date: Mon, 22 Aug 2022 17:49:17 +0300 Subject: [PATCH 1/3] Created column schemd --- .../layouts/ThreeColumn/ColumnLayout.css | 35 +++++++ .../layouts/ThreeColumn/ColumnLayout.tsx | 95 +++++++++++++++++++ 2 files changed, 130 insertions(+) create mode 100644 src/components/layouts/ThreeColumn/ColumnLayout.css create mode 100644 src/components/layouts/ThreeColumn/ColumnLayout.tsx diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css new file mode 100644 index 0000000..7ad8bb3 --- /dev/null +++ b/src/components/layouts/ThreeColumn/ColumnLayout.css @@ -0,0 +1,35 @@ +.left-bar { + grid-area: lb; +} + +.main-bar { + grid-area: main; +} + +.right-bar { + grid-area: rb; +} + +.column-layout-grid { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: "main" "rb"; +} + +@media (min-width: 768px) { + .column-layout-grid { + display: grid; + grid-template-columns: minmax(300px, 1fr); + grid-template-areas: + "lb main" + "lb rb"; + } +} + +@media (min-width: 1280px) { + .column-layout-grid { + display: grid; + grid-template-columns: 300px 1fr 300px; + grid-template-areas: "lb main rb"; + } +} diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx new file mode 100644 index 0000000..ddd3d1a --- /dev/null +++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx @@ -0,0 +1,95 @@ +import React, { Fragment, useState, useRef, useEffect } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { BottomSheetModal } from "components/containers/modal/BottomSheetModal"; +import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies"; +import { Button } from "components/Button/Button"; +import classNames from "classnames"; +import "./ColumnLayout.css"; +import { container } from "webpack"; + +/* -------------------------------------------------------------------------- */ +/* Custom hook to track container width */ +/* -------------------------------------------------------------------------- */ +const useScreenWidth = () => { + const ref: any = useRef(); + const [width, setWidth] = useState(null); + + const observer = useRef( + new ResizeObserver((entries) => { + const { width } = entries[0].contentRect; + setWidth(width); + }) + ); + + useEffect(() => { + observer.current.observe(ref.current); + }, [ref, observer]); + + return [ref, width]; +}; + +/* -------------------------------------------------------------------------- */ +/* Component properties */ +/* -------------------------------------------------------------------------- */ + +/* -------------------------------------------------------------------------- */ +/* Component function */ +/* -------------------------------------------------------------------------- */ +export function ColumnLayout() { + const mdScreen = 768; + + //Hooks + const [ref, widthElement] = useScreenWidth(); // to track width of screen + const [openLeftBar, setOpenLeftBar] = useState(false); //to open or close left bar + function leftBar() { + return setOpenLeftBar(!openLeftBar); + } + // Change openLeftBar when width of screen > 768 + useEffect(() => { + if (widthElement > mdScreen) { + setOpenLeftBar(false); + } + }); + + return ( +
+ +
+ ffadfag +
+ + +
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ad, + autem quas hic architecto iusto maxime veritatis laborum. Quas ducimus + sequi impedit harum tempora est nesciunt porro assumenda animi + temporibus? +
+
+
+
+
+
+
+
dflajdfjlj
+
+ ); +} From c319c8298bf2bc1a8123c12469e0a78911e5274b Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 24 Aug 2022 22:13:47 +0300 Subject: [PATCH 2/3] added columns children and dot notation for columns --- .../layouts/ThreeColumn/ColumnLayout.tsx | 108 +++++++++++------- .../layouts/ThreeColumn/LeftColumn.tsx | 49 ++++++++ .../layouts/ThreeColumn/Maincolumn.tsx | 18 +++ .../layouts/ThreeColumn/RightColumn.tsx | 18 +++ 4 files changed, 151 insertions(+), 42 deletions(-) create mode 100644 src/components/layouts/ThreeColumn/LeftColumn.tsx create mode 100644 src/components/layouts/ThreeColumn/Maincolumn.tsx create mode 100644 src/components/layouts/ThreeColumn/RightColumn.tsx diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx index ddd3d1a..164857d 100644 --- a/src/components/layouts/ThreeColumn/ColumnLayout.tsx +++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx @@ -1,12 +1,21 @@ -import React, { Fragment, useState, useRef, useEffect } from "react"; +import React, { + Fragment, + useState, + useRef, + useEffect, + FC, + isValidElement, +} from "react"; import { Dialog, Transition } from "@headlessui/react"; import { BottomSheetModal } from "components/containers/modal/BottomSheetModal"; import { BottomBarAcceptCookies } from "components/containers/modal/BottomBarAcceptCookies"; import { Button } from "components/Button/Button"; import classNames from "classnames"; import "./ColumnLayout.css"; -import { container } from "webpack"; - +import { Children } from "react"; +import MainColumn from "./Maincolumn"; +import LeftColumn from "./LeftColumn"; +import RightColumn from "./RightColumn"; /* -------------------------------------------------------------------------- */ /* Custom hook to track container width */ /* -------------------------------------------------------------------------- */ @@ -28,14 +37,41 @@ const useScreenWidth = () => { return [ref, width]; }; +/* -------------------------------------------------------------------------- */ +/* Component extentions */ +/* -------------------------------------------------------------------------- */ + +type ColumnExtentions = { + Left: React.FC<{ + children: React.ReactNode; + openLeftBar?: boolean; + widthElement?: number; + className?: string; + }>; + Main: React.FC<{ + children: React.ReactNode; + className?: string; + }>; + Right: React.FC<{ + children: React.ReactNode; + className?: string; + }>; +}; + /* -------------------------------------------------------------------------- */ /* Component properties */ /* -------------------------------------------------------------------------- */ +type ColumnLayoutProps = { + children: React.ReactNode; //Column layout gets as children not more than three children +} & Omit, "">; + /* -------------------------------------------------------------------------- */ /* Component function */ /* -------------------------------------------------------------------------- */ -export function ColumnLayout() { +export const ColumnLayout: React.FC & ColumnExtentions = ({ + children, +}) => { const mdScreen = 768; //Hooks @@ -44,6 +80,7 @@ export function ColumnLayout() { function leftBar() { return setOpenLeftBar(!openLeftBar); } + // Change openLeftBar when width of screen > 768 useEffect(() => { if (widthElement > mdScreen) { @@ -51,45 +88,32 @@ export function ColumnLayout() { } }); - return ( -
- -
- ffadfag -
- + const countChildren = React.Children.count(children); -
- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus ad, - autem quas hic architecto iusto maxime veritatis laborum. Quas ducimus - sequi impedit harum tempora est nesciunt porro assumenda animi - temporibus? -
-
-
-
-
-
+ const columns = React.Children.map(children, (child) => { + if ( + child && + React.isValidElement(child) && + React.Children.only(child).type === LeftColumn + ) { + return React.cloneElement(child, { + openLeftBar: openLeftBar, + widthElement: widthElement, + }); + } else { + return child; + } + }); + + return ( +
+
+ {countChildren <= 3 ? columns : undefined}
-
dflajdfjlj
); -} +}; + +ColumnLayout.Left = LeftColumn; +ColumnLayout.Main = MainColumn; +ColumnLayout.Right = RightColumn; diff --git a/src/components/layouts/ThreeColumn/LeftColumn.tsx b/src/components/layouts/ThreeColumn/LeftColumn.tsx new file mode 100644 index 0000000..3acdf18 --- /dev/null +++ b/src/components/layouts/ThreeColumn/LeftColumn.tsx @@ -0,0 +1,49 @@ +import React, { Fragment, FunctionComponent as FC } from "react"; +import { Transition } from "@headlessui/react"; +import classNames from "classnames"; + +type LeftColumnProps = { + children: React.ReactNode; + openLeftBar?: boolean; + widthElement?: number; + className?: string; +} & Omit, "">; + +const LeftColumn: React.FC = ({ + className, + children, + widthElement = 0, + openLeftBar = false, +}): JSX.Element => { + const mdScreen = 768; + return ( + +
+ {children} +
+ + ); +}; + +LeftColumn.displayName = "LeftColumn"; +export default LeftColumn; diff --git a/src/components/layouts/ThreeColumn/Maincolumn.tsx b/src/components/layouts/ThreeColumn/Maincolumn.tsx new file mode 100644 index 0000000..1c81441 --- /dev/null +++ b/src/components/layouts/ThreeColumn/Maincolumn.tsx @@ -0,0 +1,18 @@ +import classNames from "classnames"; +import React from "react"; + +type MainColumnProps = { + children: React.ReactNode; + className?: string; +}; + +function MainColumn({ children, className }: MainColumnProps) { + return ( +
+ {children} +
+ ); +} + +export default MainColumn; +MainColumn.displayName = "MainColumn"; diff --git a/src/components/layouts/ThreeColumn/RightColumn.tsx b/src/components/layouts/ThreeColumn/RightColumn.tsx new file mode 100644 index 0000000..648b9a0 --- /dev/null +++ b/src/components/layouts/ThreeColumn/RightColumn.tsx @@ -0,0 +1,18 @@ +import classNames from "classnames"; +import React from "react"; + +type RightColumnProps = { + children: React.ReactNode; + className?: string; +}; + +function RightColumn({ children, className }: RightColumnProps) { + return ( +
+ {children} +
+ ); +} + +export default RightColumn; +RightColumn.displayName = "RightColumn"; From 0c34803cfb9e9786c392b709fdb8003e339d2487 Mon Sep 17 00:00:00 2001 From: Maximus Date: Wed, 24 Aug 2022 23:37:08 +0300 Subject: [PATCH 3/3] added styles for adaptive --- src/components/layouts/ThreeColumn/ColumnLayout.css | 7 ++++++- src/components/layouts/ThreeColumn/ColumnLayout.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.css b/src/components/layouts/ThreeColumn/ColumnLayout.css index 7ad8bb3..b096e2a 100644 --- a/src/components/layouts/ThreeColumn/ColumnLayout.css +++ b/src/components/layouts/ThreeColumn/ColumnLayout.css @@ -1,5 +1,6 @@ .left-bar { grid-area: lb; + max-width: 300px; } .main-bar { @@ -8,6 +9,7 @@ .right-bar { grid-area: rb; + max-width: 300px; } .column-layout-grid { @@ -17,6 +19,9 @@ } @media (min-width: 768px) { + .right-bar { + max-width: 100%; + } .column-layout-grid { display: grid; grid-template-columns: minmax(300px, 1fr); @@ -29,7 +34,7 @@ @media (min-width: 1280px) { .column-layout-grid { display: grid; - grid-template-columns: 300px 1fr 300px; + grid-template-columns: auto 1fr auto; grid-template-areas: "lb main rb"; } } diff --git a/src/components/layouts/ThreeColumn/ColumnLayout.tsx b/src/components/layouts/ThreeColumn/ColumnLayout.tsx index 164857d..2b0c11e 100644 --- a/src/components/layouts/ThreeColumn/ColumnLayout.tsx +++ b/src/components/layouts/ThreeColumn/ColumnLayout.tsx @@ -88,7 +88,11 @@ export const ColumnLayout: React.FC & ColumnExtentions = ({ } }); - const countChildren = React.Children.count(children); + // TODO + const amountChildren = React.Children.count(children); + if (amountChildren > 3) { + alert("Layout gets only 3 or lesser children"); + } const columns = React.Children.map(children, (child) => { if ( @@ -108,7 +112,7 @@ export const ColumnLayout: React.FC & ColumnExtentions = ({ return (
- {countChildren <= 3 ? columns : undefined} + {amountChildren <= 3 ? columns : undefined}
);