From f8c1141e8cc4d7ea31e5ab404791ab4c8c7793b1 Mon Sep 17 00:00:00 2001 From: Maximus Date: Sat, 20 Aug 2022 16:09:27 +0300 Subject: [PATCH 1/5] changed icon component, paddings --- src/components/drop-down-menu/ContextMenu.tsx | 110 +++++++++--------- .../drop-down-menu/ContextMenuAction.tsx | 12 +- 2 files changed, 60 insertions(+), 62 deletions(-) diff --git a/src/components/drop-down-menu/ContextMenu.tsx b/src/components/drop-down-menu/ContextMenu.tsx index 16b7c0c..804cae8 100644 --- a/src/components/drop-down-menu/ContextMenu.tsx +++ b/src/components/drop-down-menu/ContextMenu.tsx @@ -3,9 +3,9 @@ /* -------------------------------------------------------------------------- */ import React, { Fragment } from "react"; import { Menu, Transition } from "@headlessui/react"; -import { PropsPartion } from "./ContextMenuItem"; +import { PropsPartion } from "./drop-down-menu/ContextMenuItem"; import classNames from "classnames"; -import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg"; +import { SVGCaretDown } from "components/icons"; type ChildType = React.ReactElement; type ChildrenType = ChildType[] | ChildType; @@ -25,13 +25,13 @@ type MenuProps = { /* -------------------------------------------------------------------------- */ const MenuButtonStyle = ` +items-center inline-flex justify-center w-full cursor-default rounded border border-gray-100 outline-8 -bg-white py-2 pl-4 pr-1 @@ -43,7 +43,7 @@ left-0 mt-2 w-60 origin-top-left rounded -bg-white +bg-white shadow-lg focus:outline-none py-2 px-4 sm:text-sm`; @@ -51,17 +51,17 @@ py-2 px-4 sm:text-sm`; /* -------------------------------------------------------------------------- */ /* Component implementation */ /* -------------------------------------------------------------------------- */ -/** -* Use width ContextMenuAction.tsx , for example: -* -* alert('click')} -* > -* ... -* -*/ +/** + * Use width ContextMenuAction.tsx , for example: + * + * alert('click')} + * > + * ... + * + */ export default function ContextMenu({ button, children, @@ -69,48 +69,50 @@ export default function ContextMenu({ emphasis = "low", }: MenuProps) { return ( - - {({ open }) => ( - <> - + {({ open }) => ( + <> + + {button} + + + + - {button} - - - - - {children} - - - - )} - + {children} + + + + )} + ); } diff --git a/src/components/drop-down-menu/ContextMenuAction.tsx b/src/components/drop-down-menu/ContextMenuAction.tsx index 2023fb1..8d1e653 100644 --- a/src/components/drop-down-menu/ContextMenuAction.tsx +++ b/src/components/drop-down-menu/ContextMenuAction.tsx @@ -1,7 +1,6 @@ import classNames from "classnames"; import React from "react"; - type Props = { action: Function; caption: string; @@ -18,19 +17,16 @@ export default function ContextMenuAction({ className, }: Props) { return ( - - + ); } - From cc36def1b5cfc139f281fa892c7524948ba91498 Mon Sep 17 00:00:00 2001 From: Maximus Date: Sat, 20 Aug 2022 16:13:16 +0300 Subject: [PATCH 2/5] deleted unnecessary repetable components, setup imports --- src/components/ContextMenu.tsx | 115 ------------------ src/components/ContextMenuAction.tsx | 32 ----- src/components/drop-down-menu/ContextMenu.tsx | 2 +- 3 files changed, 1 insertion(+), 148 deletions(-) delete mode 100644 src/components/ContextMenu.tsx delete mode 100644 src/components/ContextMenuAction.tsx diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx deleted file mode 100644 index 0073083..0000000 --- a/src/components/ContextMenu.tsx +++ /dev/null @@ -1,115 +0,0 @@ -/* -------------------------------------------------------------------------- */ -/* Imports */ -/* -------------------------------------------------------------------------- */ -import React, { Fragment } from "react"; -import { Menu, Transition } from "@headlessui/react"; -import { PropsPartion } from "./ContextMenuItem"; -import classNames from "classnames"; -import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg"; -type ChildType = React.ReactElement; -type ChildrenType = ChildType[] | ChildType; - -/* -------------------------------------------------------------------------- */ -/* Component props */ -/* -------------------------------------------------------------------------- */ - -type MenuProps = { - emphasis?: "high" | "low"; - disabled?: boolean; - className?: string | undefined; - button: React.ReactNode; - children: ChildrenType; -}; -/* -------------------------------------------------------------------------- */ -/* Styles */ -/* -------------------------------------------------------------------------- */ - -const MenuButtonStyle = ` -inline-flex -justify-center w-full -cursor-default -rounded -border border-gray-100 -outline-8 -py-2 -px-2 -text-base`; - -const MenuItemStyle = ` -absolute -left-0 -mt-2 w-60 -origin-top-left -rounded -shadow-lg -focus:outline-none -py-2 px-4 sm:text-sm`; - -/* -------------------------------------------------------------------------- */ -/* Component implementation */ -/* -------------------------------------------------------------------------- */ -/** - * Use width ContextMenuAction.tsx , for example: - * - * alert('click')} - * > - * ... - * - */ -export default function ContextMenu({ - button, - children, - className, - emphasis = "low", -}: MenuProps) { - return ( - - {({ open }) => ( - <> - - {button} - - - - - {children} - - - - )} - - ); -} diff --git a/src/components/ContextMenuAction.tsx b/src/components/ContextMenuAction.tsx deleted file mode 100644 index 8d1e653..0000000 --- a/src/components/ContextMenuAction.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import classNames from "classnames"; -import React from "react"; - -type Props = { - action: Function; - caption: string; - disabled?: boolean; - icon?: React.ReactNode; - className?: string | undefined; -}; - -export default function ContextMenuAction({ - action, - caption, - disabled, - icon, - className, -}: Props) { - return ( - action(e)} - className={classNames([ - "group flex px-2 rounded items-center text-base hover:bg-gray-100", - className, - ])} - > - {icon &&
{icon}
} - {caption} - - ); -} diff --git a/src/components/drop-down-menu/ContextMenu.tsx b/src/components/drop-down-menu/ContextMenu.tsx index 804cae8..e3c7866 100644 --- a/src/components/drop-down-menu/ContextMenu.tsx +++ b/src/components/drop-down-menu/ContextMenu.tsx @@ -3,7 +3,7 @@ /* -------------------------------------------------------------------------- */ import React, { Fragment } from "react"; import { Menu, Transition } from "@headlessui/react"; -import { PropsPartion } from "./drop-down-menu/ContextMenuItem"; +import { PropsPartion } from "./ContextMenuItem"; import classNames from "classnames"; import { SVGCaretDown } from "components/icons"; type ChildType = React.ReactElement; From fa308f11d15e8b71b6a276adb7509ca9563e1f74 Mon Sep 17 00:00:00 2001 From: Maximus Date: Mon, 22 Aug 2022 17:49:17 +0300 Subject: [PATCH 3/5] 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 4/5] 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 5/5] 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}
);