add fold & unfold handler on dashboard

Author: softmarshmallow

editor-packages/editor-dashboard/components/icon-button.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export const IconButton = React.forwardRef(function (
+  { children, ...props }: React.PropsWithChildren<{}>,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  return (
+    <IconButtonContainer ref={ref} {...props}>
+      {children}
+    </IconButtonContainer>
+  );
+});
+
+const IconButtonContainer = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  color: white;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  &:focus {
+    outline: 1px solid rgba(255, 255, 255, 0.5);
+  }
+`;

editor-packages/editor-dashboard/components/index.ts

@@ -1,2 +1,4 @@
 export * from "./scene-card";
+export * from "./icon-button";
 export * from "./hierarchy-item";
+export * from "./section-header";

editor-packages/editor-dashboard/components/section-header.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import styled from "@emotion/styled";
+import {
+  ChevronRightIcon,
+  ChevronDownIcon,
+  DotsVerticalIcon,
+} from "@radix-ui/react-icons";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@editor-ui/dropdown-menu";
+import { IconButton } from "../components";
+import Highlighter from "react-highlight-words";
+import * as Collapsible from "@radix-ui/react-collapsible";
+
+export type SectionHeaderAction = {
+  label: string;
+  handler: () => void;
+};
+
+export function SectionHeader({
+  label,
+  expanded = true,
+  q,
+  id,
+  actions = [],
+}: {
+  expanded?: boolean;
+  label: string;
+  q?: string;
+  id: string;
+  actions?: SectionHeaderAction[];
+}) {
+  const iconprops = {
+    color: "white",
+  };
+
+  const ToggleIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <SectionHeaderContainer id={id}>
+      <Collapsible.Trigger asChild>
+        <div className="leading">
+          <div className="toggle">
+            <ToggleIcon />
+          </div>
+          <Highlighter
+            className="label"
+            highlightClassName="label"
+            searchWords={q ? [q] : []}
+            textToHighlight={label}
+            autoEscape // required to escape regex special characters, like, `+`, `(`, `)`, etc.
+          />
+          <div style={{ flex: 1 }} />
+        </div>
+      </Collapsible.Trigger>
+      <div className="actions">
+        {actions.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <IconButton>
+                <DotsVerticalIcon />
+              </IconButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {actions.map((action, i) => (
+                <DropdownMenuItem
+                  key={i}
+                  onSelect={(e) => {
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                    action.handler();
+                  }}
+                >
+                  {action.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </SectionHeaderContainer>
+  );
+}
+
+const SectionHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+
+  background: transparent;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .leading {
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+  }
+
+  .toggle {
+    margin-right: 16px;
+    color: white;
+  }
+
+  .actions {
+    padding: 16px;
+    margin-left: auto;
+  }
+
+  .label {
+    user-select: none;
+    display: inline-block;
+    opacity: 0.8;
+    color: white;
+    font-size: 18px;
+    font-weight: 500;
+    mark {
+      background: white;
+      color: black;
+    }
+  }
+`;

editor-packages/editor-dashboard/core/action.ts

@@ -1,4 +1,9 @@
-export type Action = NewSectionAction | NewFolderAction | FilterAction;
+export type Action =
+  | NewSectionAction
+  | NewFolderAction
+  | FilterAction
+  | FoldUnfoldAction
+  | FoldUnfoldAllAction;
 
 export type ActionTypes = Action["type"];
 
@@ -16,3 +21,25 @@ export type NewFolderAction = {
   type: "hierarchy/new-directory";
   path: string;
 };
+
+export type FoldUnfoldAllAction = FoldAllAction | UnfoldAllAction;
+
+export type FoldAllAction = {
+  type: "hierarchy/fold-all";
+};
+
+export type UnfoldAllAction = {
+  type: "hierarchy/unfold-all";
+};
+
+export type FoldUnfoldAction = FoldAction | UnfoldAction;
+
+export type FoldAction = {
+  type: "hierarchy/fold";
+  path: string;
+};
+
+export type UnfoldAction = {
+  type: "hierarchy/unfold";
+  path: string;
+};

editor-packages/editor-dashboard/core/initial.ts

@@ -10,12 +10,14 @@ import { group } from "../q";
 export function initialDashboardState(
   design: FigmaReflectRepository
 ): DashboardState {
+  const hierarchy = initialHierarchy(design);
   return {
     selection: [],
     filter: {
       query: "",
     },
-    hierarchy: initialHierarchy(design),
+    hierarchy: hierarchy,
+    hierarchyFoldings: [],
   };
 }
 

editor-packages/editor-dashboard/core/provider.tsx

@@ -104,12 +104,48 @@ export function useDashboard() {
     });
   }, [editordispatch]);
 
+  const foldAll = useCallback(() => {
+    dispatch({
+      type: "hierarchy/fold-all",
+    });
+  }, [dispatch]);
+
+  const unfoldAll = useCallback(() => {
+    dispatch({
+      type: "hierarchy/unfold-all",
+    });
+  }, [dispatch]);
+
+  const fold = useCallback(
+    (path: string) => {
+      dispatch({
+        type: "hierarchy/fold",
+        path,
+      });
+    },
+    [dispatch]
+  );
+
+  const unfold = useCallback(
+    (path: string) => {
+      dispatch({
+        type: "hierarchy/unfold",
+        path,
+      });
+    },
+    [dispatch]
+  );
+
   return {
     ...state,
     selection: editorState.selectedNodes,
     dispatch,
     selectNode,
     enterNode,
     blurSelection,
+    foldAll,
+    unfoldAll,
+    fold,
+    unfold,
   };
 }

editor-packages/editor-dashboard/core/reducer.ts

@@ -2,10 +2,14 @@ import produce from "immer";
 import type {
   Action,
   FilterAction,
+  FoldAction,
+  FoldAllAction,
   NewFolderAction,
   NewSectionAction,
+  UnfoldAction,
+  UnfoldAllAction,
 } from "./action";
-import type { DashboardState } from "./state";
+import type { DashboardFolderItem, DashboardState } from "./state";
 
 export function reducer(state: DashboardState, action: Action): DashboardState {
   switch (action.type) {
@@ -50,6 +54,36 @@ export function reducer(state: DashboardState, action: Action): DashboardState {
         }
       });
     }
+
+    case "hierarchy/fold": {
+      const { path } = <FoldAction>action;
+      return produce(state, (draft) => {
+        draft.hierarchyFoldings.push(path);
+      });
+    }
+
+    case "hierarchy/unfold": {
+      const { path } = <UnfoldAction>action;
+      return produce(state, (draft) => {
+        draft.hierarchyFoldings = draft.hierarchyFoldings.filter(
+          (p) => p !== path
+        );
+      });
+    }
+
+    case "hierarchy/fold-all": {
+      const {} = <FoldAllAction>action;
+      return produce(state, (draft) => {
+        draft.hierarchyFoldings = state.hierarchy.sections.map((s) => s.path);
+      });
+    }
+
+    case "hierarchy/unfold-all": {
+      const {} = <UnfoldAllAction>action;
+      return produce(state, (draft) => {
+        draft.hierarchyFoldings.length = 0;
+      });
+    }
   }
 
   throw new Error(

editor-packages/editor-dashboard/core/state.ts

@@ -1,6 +1,7 @@
 export interface DashboardState {
   selection: Array<string>;
   hierarchy: DashboardHierarchy;
+  hierarchyFoldings: ReadonlyArray<string>;
   filter: DashboardFilter;
 }