reenebale minimize on flexbox

finos · Nov 13, 2024 · aac4be5 · aac4be5
1 parent ee56e7a
commit aac4be5
Show file tree

Hide file tree

Showing 17 changed files with 464 additions and 210 deletions.
diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css
diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.css b/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.css
@@ -42,3 +42,4 @@
 .vuuView.flex-fill {
   border-color: red;
 }
+
diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx b/vuu-ui/packages/vuu-layout/src/flexbox/Flexbox.tsx
@@ -12,7 +12,7 @@ const classBase = "hwFlexbox";
 
 const Flexbox = forwardRef(function Flexbox(
   props: FlexboxProps,
-  ref: ForwardedRef<HTMLDivElement>
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     breakPoints,
@@ -42,7 +42,6 @@ const Flexbox = forwardRef(function Flexbox(
 
   const { content, rootRef } = useSplitterResizing({
     children,
-    // cols: colsProp,
     onSplitterMoved,
     style,
   });

diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts b/vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts
@@ -11,6 +11,8 @@ export interface LayoutContainerProps {
   resizeable?: boolean;
 }
 
+export type SplitterMoveHandler = (content: ContentMeta[]) => void;
+
 export interface FlexboxProps
   extends LayoutContainerProps,
     HTMLAttributes<HTMLDivElement> {
@@ -21,7 +23,7 @@ export interface FlexboxProps
   fullPage?: number;
   flexFill?: boolean;
   gap?: number;
-  onSplitterMoved?: (content: ContentMeta[]) => void;
+  onSplitterMoved?: SplitterMoveHandler;
   row?: true;
   spacing?: number;
   splitterSize?: number;

diff --git a/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts b/vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts
@@ -50,9 +50,9 @@ export const useSplitterResizing = ({
       Array.isArray(childrenProp)
         ? childrenProp
         : React.isValidElement(childrenProp)
-        ? [childrenProp]
-        : [],
-    [childrenProp]
+          ? [childrenProp]
+          : [],
+    [childrenProp],
   );
 
   const handleDragStart = useCallback(
@@ -61,7 +61,7 @@ export const useSplitterResizing = ({
       if (contentMeta) {
         const [participants, bystanders] = identifyResizeParties(
           contentMeta,
-          index
+          index,
         );
         if (participants) {
           participants.forEach((index) => {
@@ -81,10 +81,14 @@ export const useSplitterResizing = ({
               }
             });
           }
+
+          if (rootRef.current) {
+            rootRef.current.classList.add("vuuSplitterResizing");
+          }
         }
       }
     },
-    [dimension]
+    [dimension],
   );
 
   const handleDrag = useCallback(
@@ -95,18 +99,21 @@ export const useSplitterResizing = ({
             contentRef.current,
             metaRef.current,
             distance,
-            dimension
-          )
+            dimension,
+          ),
         );
       }
     },
-    [dimension]
+    [dimension],
   );
 
   const handleDragEnd = useCallback(() => {
     const contentMeta = metaRef.current;
     if (contentMeta) {
       onSplitterMoved?.(contentMeta.filter(originalContentOnly));
+      if (rootRef.current) {
+        rootRef.current.classList.remove("vuuSplitterResizing");
+      }
     }
     contentMeta?.forEach((meta) => {
       meta.currentSize = undefined;
@@ -126,15 +133,15 @@ export const useSplitterResizing = ({
         onDragStart: handleDragStart,
       });
     },
-    [handleDrag, handleDragEnd, handleDragStart, isColumn]
+    [handleDrag, handleDragEnd, handleDragStart, isColumn],
   );
 
   useMemo(() => {
     const [content, meta] = buildContent(
       children,
       dimension,
       createSplitter,
-      assignedKeys.current
+      assignedKeys.current,
     );
     metaRef.current = meta;
     contentRef.current = content;
@@ -150,7 +157,7 @@ function buildContent(
   children: ReactElement[],
   dimension: "width" | "height",
   createSplitter: SplitterFactory,
-  keys: any[]
+  keys: any[],
 ): [any[], ContentMeta[]] {
   const childMeta = gatherChildMeta(children, dimension);
   const splitterAndPlaceholderPositions =
@@ -186,7 +193,7 @@ function resizeContent(
   content: ReactElement[],
   contentMeta: ContentMeta[],
   distance: number,
-  dimension: "width" | "height"
+  dimension: "width" | "height",
 ) {
   const metaUpdated = updateMeta(contentMeta, distance);
   if (!metaUpdated) {
@@ -260,7 +267,7 @@ function createPlaceholder(index: number) {
 
 function measureElement(
   el: HTMLElement,
-  dimension: "width" | "height"
+  dimension: "width" | "height",
 ): FlexSize {
   const { [dimension]: size } = el.getBoundingClientRect();
   const style = getComputedStyle(el);

diff --git a/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx b/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx
@@ -2,18 +2,9 @@ import { EditableLabel, IconButton } from "@finos/vuu-ui-controls";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import {
-  HTMLAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  cloneElement,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
+import { HTMLAttributes, MouseEvent, ReactElement, cloneElement } from "react";
 import { Contribution } from "../layout-view";
-import { useViewDispatch } from "../layout-view-actions/ViewContext";
+import { useHeader } from "./useHeader";
 
 import headerCss from "./Header.css";
 
@@ -23,7 +14,7 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
   contributions?: Contribution[];
   expanded?: boolean;
   closeable?: boolean;
-  onEditTitle: (value: string) => void;
+  onEditTitle?: (value: string) => void;
   orientation?: "horizontal" | "vertical";
   tearOut?: boolean;
 }
@@ -48,22 +39,25 @@ export const Header = ({
     window: targetWindow,
   });
 
-  const labelFieldRef = useRef<HTMLDivElement>(null);
-  const [value, setValue] = useState<string>(title);
-  const [editing, setEditing] = useState<boolean>(false);
-
-  const viewDispatch = useViewDispatch();
-  const handleClose = (evt: MouseEvent) =>
-    viewDispatch?.({ type: "remove" }, evt);
-
-  const focusTitle = useCallback(() => {
-    labelFieldRef.current?.focus();
-  }, []);
+  const {
+    editing,
+    focusTitle,
+    labelFieldRef,
+    onClickEdit,
+    onClose,
+    onExitEditMode,
+    onMouseDown,
+    onTitleKeyDown,
+    onToggleCollapse,
+    onToggleExpand,
+    setValue,
+    value,
+  } = useHeader({
+    onEditTitle,
+    title,
+  });
 
-  const handleClickEdit = useCallback(() => {
-    focusTitle();
-    setEditing((isEditing) => !isEditing);
-  }, [focusTitle]);
+  console.log(`Header ${title}`);
 
   const handleButtonMouseDown = (evt: MouseEvent) => {
     // do not allow drag to be initiated
@@ -74,37 +68,11 @@ export const Header = ({
 
   const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
 
-  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {
-    if (evt.key === "Enter") {
-      setEditing(true);
-    }
-  };
-
-  const handleExitEditMode = (
-    originalValue = "",
-    finalValue = "",
-    allowDeactivation = true,
-    editCancelled = false,
-  ) => {
-    setEditing(false);
-    if (editCancelled) {
-      setValue(originalValue);
-    } else if (finalValue !== originalValue) {
-      setValue(finalValue);
-      onEditTitle?.(finalValue);
-    }
-    if (allowDeactivation === false) {
-      labelFieldRef.current?.focus();
-    }
-  };
-
-  const handleMouseDown = (e: MouseEvent) => {
-    viewDispatch?.({ type: "mousedown" }, e);
-  };
-
   const toolbarItems: ReactElement[] = [];
   const postTitleContributedItems: ReactElement[] = [];
   const actionButtons: ReactElement[] = [];
+  const allowCollapse =
+    typeof collapsed === "boolean" || typeof collapsed === "string";
 
   contributions?.forEach((contribution, i) => {
     switch (contribution.location) {
@@ -118,6 +86,23 @@ export const Header = ({
     }
   });
 
+  allowCollapse &&
+    toolbarItems.push(
+      <IconButton
+        className={cx(`${classBase}-toggle`, {
+          [`${classBase}-collapsed`]: collapsed,
+        })}
+        data-embedded
+        icon={collapsed ? "chevron-open" : "chevron-down"}
+        key="collapse-button"
+        onClick={collapsed ? onToggleExpand : onToggleCollapse}
+        size={20}
+        tabIndex={0}
+        appearance="transparent"
+        sentiment="neutral"
+      />,
+    );
+
   title &&
     toolbarItems.push(
       <EditableLabel
@@ -127,8 +112,8 @@ export const Header = ({
         value={value}
         onChange={setValue}
         onMouseDownCapture={focusTitle}
-        onExitEditMode={handleExitEditMode}
-        onKeyDown={handleTitleKeyDown}
+        onExitEditMode={onExitEditMode}
+        onKeyDown={onTitleKeyDown}
         ref={labelFieldRef}
       />,
     );
@@ -140,7 +125,7 @@ export const Header = ({
         data-embedded
         icon="edit"
         key="edit-button"
-        onClick={handleClickEdit}
+        onClick={onClickEdit}
         onMouseDown={handleButtonMouseDown}
         tabIndex={0}
         variant="secondary"
@@ -150,12 +135,13 @@ export const Header = ({
   closeable &&
     actionButtons.push(
       <IconButton
+        appearance="transparent"
         data-embedded
         icon="close"
         key="close"
-        onClick={handleClose}
+        onClick={onClose}
         onMouseDown={handleButtonMouseDown}
-        variant="secondary"
+        sentiment="neutral"
       />,
     );
 
@@ -177,28 +163,10 @@ export const Header = ({
     <div
       className={cx("vuuToolbarProxy", className)}
       style={style}
-      onMouseDown={handleMouseDown}
+      onMouseDown={onMouseDown}
     >
       {toolbarItems}
       {/* 
-      {collapsed === false ? (
-        <ActionButton
-          aria-label="Minimize View"
-          actionId="minimize"
-          iconName="minimize"
-          onClick={handleAction}
-          onMouseDown={handleButtonMouseDown}
-        />
-      ) : null}
-      {collapsed ? (
-        <ActionButton
-          aria-label="Restore View"
-          actionId="restore"
-          iconName="double-chevron-right"
-          onClick={handleAction}
-          onMouseDown={handleButtonMouseDown}
-        />
-      ) : null}
       {expanded === false ? (
         <ActionButton
           aria-label="Maximize View"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -42,3 +42,4 @@
		.vuuView.flex-fill {
		border-color: red;
		}