Merge pull request #1389 from Datawheel/wb/1309_fe_and_css_issues

Wb/1309 fe and css issues
Datawheel · Apr 25, 2024 · 182a96a · 182a96a
2 parents 9f2c3f6 + 41b7ca8
commit 182a96a
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/packages/next/cms/components/ProfileRenderer.js b/packages/next/cms/components/ProfileRenderer.js
@@ -44,6 +44,9 @@ function ProfileRenderer({
   customSections = {},
   relatedTile,
   t,
+  searchOpened,
+  searchHandlers,
+  defaultOpened,
 }) {
   const router = useRouter();
   const {query} = router;
@@ -121,6 +124,9 @@ function ProfileRenderer({
               }}
             >
               <Hero
+                searchOpened={searchOpened}
+                searchHandlers={searchHandlers}
+                defaultOpened={defaultOpened}
                 key="cp-hero"
                 profile={profile}
                 contents={heroSection || null}
@@ -135,6 +141,9 @@ function ProfileRenderer({
               comparison
               && (
               <Hero
+                searchOpened={searchOpened}
+                searchHandlers={searchHandlers}
+                defaultOpened={defaultOpened}
                 key="cp-hero-comparison"
                 profile={comparison}
                 contents={comparison.sections.find((l) => l.type === "Hero") || null}

diff --git a/packages/next/cms/components/fields/ProfileSearch.js b/packages/next/cms/components/fields/ProfileSearch.js
@@ -26,6 +26,7 @@ import ProfileTile from "./ProfileTile";
 import groupMeta from "../../utils/groupMeta";
 import stripHTML from "../../utils/formatters/stripHTML";
 import NonIdealState from "../../../core/components/NonIdealState";
+import {useFocus} from "../../hooks/useFocus";
 
 function DimensionFilters({
   activeProfile,
@@ -266,7 +267,6 @@ export function ProfileSearch({
   const {locale} = useRouter();
 
   const resultContainer = useRef(null);
-  const textInput = useRef(null);
 
   const [query, setQuery] = useState("");
   const [active, setActive] = useState(false);
@@ -277,6 +277,9 @@ export function ProfileSearch({
 
   const [debouncedQuery] = useDebouncedValue(query, 400);
   const profiles = useCMSProfiles();
+  const [inputRef, setInputFocus] = useFocus();
+
+  React.useLayoutEffect(() => setInputFocus(), [setInputFocus]);
 
   const ignoredTermsRegex = ignoredTerms && ignoredTerms.length > 0
     ? new RegExp(`\\b(${ignoredTerms.join("|")})\\b`, "ig")
@@ -409,7 +412,7 @@ export function ProfileSearch({
             </Text>
           </Text>
           <TextInput
-            ref={textInput}
+            ref={inputRef}
             className="cp-input"
             icon={<IconSearch />}
             size="xl"

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,
+  searchOpened,
+  searchHandlers = {},
 }) {
   // 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 = () => searchOpened != null;
+
   const titleClick = (index) => {
-    setClickedIndex(index);
+    if (typeof searchHandlers.toggle === "function") {
+      searchHandlers.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() ? searchOpened : clickedIndex !== undefined,
+          onClose: isOpenControlled() ? () => searchHandlers.close() : () => setClickedIndex(undefined),
         }}
       />
     </Stack>

diff --git a/packages/next/cms/hooks/useFocus.js b/packages/next/cms/hooks/useFocus.js
@@ -0,0 +1,12 @@
+import {useCallback, useRef} from "react";
+
+const useFocus = () => {
+  const htmlElRef = useRef(null);
+  const setFocus = useCallback(() => {
+    if (htmlElRef.current) htmlElRef.current.focus();
+  }, []);
+
+  return [htmlElRef, setFocus];
+};
+
+export {useFocus};