add open controlled prop

Datawheel · Apr 19, 2024 · 6a2d5d9 · 6a2d5d9
1 parent 5cc2660
commit 6a2d5d9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/packages/next/cms/components/ProfileRenderer.js b/packages/next/cms/components/ProfileRenderer.js
@@ -44,6 +44,8 @@ function ProfileRenderer({
   customSections = {},
   relatedTile,
   t,
+  opened,
+  handlers,
 }) {
   const router = useRouter();
   const {query} = router;
@@ -109,7 +111,7 @@ function ProfileRenderer({
 
   return (
     <ProfileContext.Provider value={context}>
-      <div className={`cp${print ? " cp-print" : ""}`}>
+      <div id="walter" className={`cp${print ? " cp-print" : ""}`}>
 
         { !hideHero
           ? (
@@ -121,6 +123,8 @@ function ProfileRenderer({
               }}
             >
               <Hero
+                opened={opened}
+                handlers={handlers}
                 key="cp-hero"
                 profile={profile}
                 contents={heroSection || null}
@@ -135,6 +139,8 @@ function ProfileRenderer({
               comparison
               && (
               <Hero
+                opened={opened}
+                handlers={handlers}
                 key="cp-hero-comparison"
                 profile={comparison}
                 contents={comparison.sections.find((l) => l.type === "Hero") || null}

diff --git a/packages/next/cms/components/sections/Hero.js b/packages/next/cms/components/sections/Hero.js
@@ -43,18 +43,32 @@ function Hero({
   profile,
   sources,
   type,
+  defaultOpened,
+  opened,
+  handlers = {},
 }) {
   // NOTE: using color scheme here asumes there is theme switch enabled
   // const {colorScheme} = useMantineColorScheme();
-  const [clickedIndex, setClickedIndex] = useState(undefined);
+
+  const [clickedIndex, setClickedIndex] = useState(defaultOpened || undefined);
+
   const [creditsVisible, setCreditsVisible] = useState(false);
+
   const {
     formatters, searchProps, linkify, t,
   } = useContext(ProfileContext);
   const {stripHTML = (d) => d} = formatters || {};
 
+  const isOpenControlled = () => opened != null;
+
   const titleClick = (index) => {
-    setClickedIndex(index);
+    if (typeof handlers.toggle === "function") {
+      handlers.toggle();
+    }
+
+    if (!isOpenControlled()) {
+      setClickedIndex(index);
+    }
     setTimeout(() => {
       document.querySelector(".cp-hero-search .cp-input input").focus();
     }, 300);
@@ -138,7 +152,6 @@ function Hero({
   }
 
   // heading & subhead(s)
-
   const heading = (
     <div>
       <h1>
@@ -311,8 +324,8 @@ function Hero({
           ...searchProps?.modalProps || {},
           // not-overridable
           className: "cp-hero-search",
-          opened: clickedIndex !== undefined,
-          onClose: () => setClickedIndex(undefined),
+          opened: isOpenControlled() ? opened : clickedIndex !== undefined,
+          onClose: isOpenControlled() ? () => handlers.close() : () => setClickedIndex(undefined),
         }}
       />
     </Stack>