Skip to content

Commit

Permalink
working with collapsing and introducing hide box to show resizing is …
Browse files Browse the repository at this point in the history 
…possible
  • Loading branch information
@nicosammito
nicosammito committed Jul 19, 2024
1 parent 18b257b commit abc9b9d
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 70 deletions.
92 changes: 57 additions & 35 deletions src/components/d-screen/DScreen.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from "react";
import DScreen from "./DScreen";
import Badge from "../badge/Badge";
import {
IconApi, IconBrandAdobe,
IconApi, IconArrowDown, IconBrandAdobe,
IconDatabase,
IconHierarchy3,
IconLayoutSidebarLeftCollapse, IconLayoutSidebarRightCollapse,
Expand Down Expand Up @@ -57,9 +57,9 @@ export const DashboardScreenExample = () => {
<Badge>Test</Badge>
</DScreen.BarContent>
</DScreen.VBar.Bottom>
<DScreen.HBar.Left>
<DScreen.HBar.Left resizeable>
<DScreen.BarContent justify={"space-between"}>
<div style={{display: "flex", flexDirection: "column", gap: ".5rem"}}>
<div style={{display: "flex", flexDirection: "column", gap: ".5rem", overflow:"hidden"}}>
<DScreen.Item>
<IconHierarchy3 size={12}/>
Flows
Expand All @@ -73,7 +73,7 @@ export const DashboardScreenExample = () => {
Database
</DScreen.Item>
</div>
<div style={{display: "flex", flexDirection: "column", gap: ".5rem"}}>
<div style={{display: "flex", flexDirection: "column", gap: ".5rem", overflow:"hidden"}}>
<DScreen.Item>
<IconSettings size={12}/>
Settings
Expand All @@ -90,37 +90,59 @@ export const DashboardScreenExample = () => {
</DScreen.HBar.Right>
<DScreen.Content>
<DScreen>
<DScreen.HBar.Left resizeable w={"300px"}>
<DScreen.BarContent p={"0"}>
<DScreen>
<DScreen.VBar.Top>
<DScreen.BarContent>
<DScreen.Item onClick={openAll}>
Open All
</DScreen.Item>
<DScreen.Item onClick={closeAll}>
Close All
</DScreen.Item>
</DScreen.BarContent>
</DScreen.VBar.Top>
<DScreen.VBar.Bottom>
<DScreen.BarContent>
<Badge>Test</Badge>
<Badge>Test</Badge>
</DScreen.BarContent>
</DScreen.VBar.Bottom>
<DScreen.Content p={0.5}>
{[1,1,1,1,1,1,1,1,1,1,1,1].map(() => {
return <DFolder controls={controls} name={"Google Cloud Flows"} defaultOpen>
<DFolder controls={controls} name={"Google Cloud Flows"}>
<DFolder.Item icon={<IconBrandAdobe size={12}/>} name={"Google Cloud Flows"}/>
<DFolder.Item active name={"Google Cloud Flows"}/>
</DFolder>
</DFolder>
})}
</DScreen.Content>
</DScreen>
</DScreen.BarContent>
<DScreen.HBar.Left resizeable>
{(collapsed, collapse) => {
return <>
{!collapsed ?
<DScreen.BarContent p={"0"}>
<DScreen>
<DScreen.VBar.Top>
<DScreen.BarContent>
<DScreen.Item onClick={openAll}>
Open All
</DScreen.Item>
<DScreen.Item onClick={closeAll}>
Close All
</DScreen.Item>
</DScreen.BarContent>
</DScreen.VBar.Top>
<DScreen.VBar.Bottom>
<DScreen.BarContent>
<DScreen.CollapsableItem onClick={collapse}>
{collapsed ? <IconLayoutSidebarRightCollapse size={16}/> : <IconLayoutSidebarLeftCollapse size={16}/>}
</DScreen.CollapsableItem>
</DScreen.BarContent>
</DScreen.VBar.Bottom>
<DScreen.Content p={0.5}>
{[1,1,1,1,1,1,1,1,1,1,1,1].map(() => {
return <DFolder controls={controls} name={"Google Cloud Flows"} defaultOpen>
<DFolder controls={controls} name={"Google Cloud Flows"}>
<DFolder.Item icon={<IconBrandAdobe size={12}/>} name={"Google Cloud Flows"}/>
<DFolder.Item active name={"Google Cloud Flows"}/>
</DFolder>
</DFolder>
})}
</DScreen.Content>
</DScreen>
</DScreen.BarContent> : <DScreen.BarContent p={"0"}>
<DScreen>
<DScreen.VBar.Bottom>
<DScreen.BarContent>
<DScreen.CollapsableItem onClick={collapse}>
{collapsed ? <IconLayoutSidebarRightCollapse size={16}/> : <IconLayoutSidebarLeftCollapse size={16}/>}
</DScreen.CollapsableItem>
</DScreen.BarContent>
</DScreen.VBar.Bottom>
<DScreen.Content>
<Button color={"info"}>
<IconArrowDown/>
</Button>
</DScreen.Content>
</DScreen>
</DScreen.BarContent>}
</>
}}

</DScreen.HBar.Left>
<DScreen.Content>
<DScreen>
Expand Down
69 changes: 58 additions & 11 deletions src/components/d-screen/DScreen.style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,28 @@
left: 0;
cursor: ns-resize;

&-label {
@include box(false);
position: absolute;
z-index: 2;
left: 50%;
display: flex;
transform: translateX(-50%);
padding: .25rem;

&--top {
border-top-right-radius: 0;
border-top-left-radius: 0;
top: $height - ($height / 4);
}

&--bottom {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
bottom: $height - ($height / 4);
}
}

&:hover {
//background: #29BF12;

Expand All @@ -50,7 +72,7 @@

&--top {
bottom: ($height / 4) * -1;
z-index: 999999;
z-index: 2;

&:hover::after {
top: $height - ($height / 4);
Expand All @@ -59,10 +81,10 @@

&--bottom {
top: ($height / 4) * -1;
z-index: 999998;
z-index: 1;

&:hover::after {
top: ($height / 4);
top: ($height / 4) - 1px;
}
}

Expand All @@ -82,6 +104,8 @@
display: none;
gap: .5rem;
align-items: start;


}

&--top {
Expand Down Expand Up @@ -109,10 +133,30 @@
height: 100%;
content: "";
top: 0;
right: ($width / 2) * -1;
z-index: 999999;
cursor: ew-resize;

&-label {
@include box(false);
position: absolute;
top: 50%;
display: flex;
z-index: 2;
transform: translateY(-50%);
padding: .25rem;

&--left {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
left: $width - ($width / 4);
}

&--right {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
right: $width - ($width / 4);
}
}

&:hover {
//background: #29BF12;

Expand All @@ -127,18 +171,20 @@
}

&--left {
right: ($width / 2) * -1;
right: ($width / 4) * -1;
z-index: 2;

&:hover::after {
left: ($width / 2) + 1;
left: $width - ($width / 4);
}
}

&--right {
left: ($width / 2) * -1;
left: ($width / 4) * -1;
z-index: 1;

&:hover::after {
left: ($width / 2) - 1;
left: ($width / 4) - 1px;
}
}

Expand All @@ -156,10 +202,10 @@
gap: .5rem;
padding: .5rem;
height: 100%;
z-index: 0;
width: 100%;
position: relative;
flex-direction: column;

}

&--left {
Expand Down Expand Up @@ -188,6 +234,7 @@

&__content {
color: white;
background: $primary;
height: 100%;
overflow: auto;
width: 100%;
Expand All @@ -214,6 +261,6 @@
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
z-index: 9999999;
}
}
70 changes: 46 additions & 24 deletions src/components/d-screen/DScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, {useEffect, useMemo, useRef, useState} from "react";
import {Code0Component} from "../../utils/types";
import "./DScreen.style.scss"
import {getChild, mergeCode0Props} from "../../utils/utils";
import {IconLayoutBottombarExpand} from "@tabler/icons-react";

export interface DScreenProps extends Code0Component<HTMLDivElement> {
children: React.ReactElement<Omit<DScreenVBarProps, "type"> & DScreenContentProps>[]
Expand Down Expand Up @@ -49,6 +50,7 @@ export interface DScreenHBarProps extends DScreenBarProps {
const Bar = <T extends DScreenBarProps>(barType: 'v' | 'h'): React.FC<T> => (props) => {
const {type, children, collapsed = false, resizeable = false, ...rest} = props
const [stateCollapsed, setStateCollapsed] = useState(collapsed)
const [sizePercent, setSizePercent] = useState<number>(Infinity)
const barRef = useRef<HTMLDivElement | null>(null)
const resizeRef = useRef<HTMLDivElement | null>(null)

Expand All @@ -62,7 +64,6 @@ const Bar = <T extends DScreenBarProps>(barType: 'v' | 'h'): React.FC<T> => (pro
const maxH = barRef.current?.style.maxHeight ? parseFloat(barRef.current.style.maxHeight) : Infinity

const mouseDown = () => {
console.log("mousedown")
const selection = document.getSelection()
if (selection) selection.removeAllRanges()

Expand All @@ -71,43 +72,50 @@ const Bar = <T extends DScreenBarProps>(barType: 'v' | 'h'): React.FC<T> => (pro
}

const mouseMove = (event: MouseEvent | TouchEvent) => {

setStateCollapsed(false)

//calculate new width
const parentOfBar = barRef.current?.parentElement
let spacing, mousePosition, widthPixel, widthPercent
let localSizePercent = Infinity

if (barType === "h" && type === "left") {
spacing = barRef.current?.getBoundingClientRect().left ?? 0
mousePosition = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
widthPixel = Math.max(Math.min((mousePosition - spacing), maxW), minW)
const spacing = barRef.current?.getBoundingClientRect().left ?? 0
const mousePosition = (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
const widthPixel = Math.max(Math.min((mousePosition - spacing), maxW), minW)
const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel
widthPercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetWidth ?? 0)) * 100), 100), 0)
localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetWidth ?? 0)) * 100), 100), 0)
} else if (barType === "h" && type === "right") {
spacing = (barRef.current?.getBoundingClientRect().right ?? 0) - (parentOfBar?.offsetWidth ?? 0)
mousePosition = (parentOfBar?.offsetWidth ?? 0) - (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
widthPixel = Math.max(Math.min((spacing + mousePosition), maxW), minW)
const spacing = (barRef.current?.getBoundingClientRect().right ?? 0) - (parentOfBar?.offsetWidth ?? 0)
const mousePosition = (parentOfBar?.offsetWidth ?? 0) - (event instanceof MouseEvent ? event.clientX : event.touches[0].clientX)
const widthPixel = Math.max(Math.min((spacing + mousePosition), maxW), minW)
const widthPixelAttaching = widthPixel <= (startW + 25) && widthPixel >= (startW - 25) ? startW : widthPixel
widthPercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetWidth ?? 0))) * 100), 100), 0)
localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetWidth ?? 0))) * 100), 100), 0)
} else if (barType === "v" && type === "top") {
spacing = barRef.current?.getBoundingClientRect().top ?? 0
mousePosition = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
widthPixel = Math.max(Math.min((mousePosition - spacing), maxH), minH)
const spacing = barRef.current?.getBoundingClientRect().top ?? 0
const mousePosition = (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
const widthPixel = Math.max(Math.min((mousePosition - spacing), maxH), minH)
const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel
widthPercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetHeight ?? 0)) * 100), 100), 0)
localSizePercent = Math.max(Math.min((((widthPixelAttaching) / (parentOfBar?.offsetHeight ?? 0)) * 100), 100), 0)
} else if (barType === "v" && type === "bottom") {
spacing = (barRef.current?.getBoundingClientRect().bottom ?? 0) - (parentOfBar?.offsetHeight ?? 0)
mousePosition = (parentOfBar?.offsetHeight ?? 0) - (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
widthPixel = Math.max(Math.min((spacing + mousePosition), maxH), minH)
const spacing = (barRef.current?.getBoundingClientRect().bottom ?? 0) - (parentOfBar?.offsetHeight ?? 0)
const mousePosition = (parentOfBar?.offsetHeight ?? 0) - (event instanceof MouseEvent ? event.clientY : event.touches[0].clientY)
const widthPixel = Math.max(Math.min((spacing + mousePosition), maxH), minH)
const widthPixelAttaching = widthPixel <= (startH + 25) && widthPixel >= (startH - 25) ? startH : widthPixel
widthPercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetHeight ?? 0))) * 100), 100), 0)
localSizePercent = Math.max(Math.min((((widthPixelAttaching) / ((parentOfBar?.offsetHeight ?? 0))) * 100), 100), 0)
}

//set to state
setSizePercent(localSizePercent)

//set new width
if (barType === "h" && barRef.current) {
barRef.current.style.minWidth = `${widthPercent}%`
barRef.current.style.width = `${widthPercent}%`
barRef.current.style.minWidth = `${localSizePercent}%`
barRef.current.style.maxWidth = `${localSizePercent}%`
barRef.current.style.width = `${localSizePercent}%`
} else if (barType === "v" && barRef.current) {
barRef.current.style.minHeight = `${widthPercent}%`
barRef.current.style.height = `${widthPercent}%`
barRef.current.style.minHeight = `${localSizePercent}%`
barRef.current.style.height = `${localSizePercent}%`
}
}

Expand Down Expand Up @@ -137,13 +145,27 @@ const Bar = <T extends DScreenBarProps>(barType: 'v' | 'h'): React.FC<T> => (pro
}, [barRef, resizeRef]);

const collapse = () => {
setStateCollapsed(prevState => !prevState)
setStateCollapsed(prevState => {
if (!prevState && resizeable && barRef.current && barType === "h") {
barRef.current.style.minWidth = ""
barRef.current.style.width = ""
} else if (!prevState && resizeable && barRef.current && barType === "v") {
barRef.current.style.minHeight = ""
barRef.current.style.height = ""
}
return !prevState
})

}

const child = typeof children === "function" ? useMemo(() => children(stateCollapsed, collapse), [stateCollapsed]) : children

return <div ref={barRef} {...mergeCode0Props(`d-screen__${barType}-bar d-screen__${barType}-bar--${type}`, rest)}>
{resizeable && <div ref={resizeRef} className={`d-screen__${barType}-bar__resizable d-screen__${barType}-bar__resizable--${type}`} {...rest}/>}
{resizeable && <div ref={resizeRef} className={`d-screen__${barType}-bar__resizable d-screen__${barType}-bar__resizable--${type}`} {...rest}>
{sizePercent <= 1 && <div className={`d-screen__${barType}-bar__resizable-label d-screen__${barType}-bar__resizable-label--${type}`}>
<IconLayoutBottombarExpand/>
</div>}
</div>}
{child}
</div>
}
Expand Down

0 comments on commit abc9b9d

Please sign in to comment.