fixes scroll area on profilesearch

Datawheel · Mar 27, 2023 · 7047021 · 7047021
1 parent b323af4
commit 7047021
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 80 deletions.
diff --git a/example-next/pages/profile/[...members].js b/example-next/pages/profile/[...members].js
@@ -26,7 +26,7 @@ function ProfilePage({profile, formatters}) {
         profile={profile}
         linkify={profile => profile.reduce((href, member) => `${href}/${member.slug}/${member.memberSlug || member.id}`, "/profile")}
         // you can also specify the configuration for ProfileSearch here:
-        // searchProps={{placeholder: "Seach profiles"}}
+        searchProps={{placeholder: "Seach profiles", filterDimensionTitle: d => "All Sectors", filterProfileTitle: (content, meta) => console.log("profile",  meta), limit: 80}}
         customSections={customSections}
         t={t}
       />

diff --git a/packages/next/cms/components/ProfileRenderer.js b/packages/next/cms/components/ProfileRenderer.js
@@ -14,7 +14,7 @@
    - [ ] test/enable PDF printing
 */
 
-import {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 // import axios from "axios";
 import {useRouter} from "next/router.js";
 import {assign} from "d3plus-common";

diff --git a/packages/next/cms/components/fields/ProfileSearch.js b/packages/next/cms/components/fields/ProfileSearch.js
@@ -1,3 +1,4 @@
+/* eslint-disable require-jsdoc */
 // Todo
 // - Keydown events
 
@@ -13,7 +14,7 @@ import {
 import {select} from "d3-selection";
 
 // import ProfileColumns from "./ProfileColumns";
-import {
+import React, {
   useState, useEffect, useRef
 } from "react";
 import {
@@ -328,7 +329,7 @@ function ProfileSearch({
   ]);
   return (
     <FocusTrap active>
-      <Box className="cms-profilesearch" h="100%">
+      <Box className="cms-profilesearch">
         <Box>
           <Text component="label">
             <Text className="u-visually-hidden" key="slt" span>
@@ -387,13 +388,12 @@ function ProfileSearch({
                   className="cms-profilesearch-filters-levels"
                 >
                   { d.levels
-                    ?                       <Anchor
+                    ? <Anchor
                       className={`cms-profilesearch-filters-dimension${filterLevels && filterLevels.includes(d.levels.join(",")) ? " active" : ""}`}
                       onClick={() => onFilterLevels(false)}
                       dangerouslySetInnerHTML={{__html: d.title}}
                     />
-
-                    :                       <Anchor
+                    : <Anchor
                       className={`cms-profilesearch-filters-dimension${filterCubes && filterCubes.includes(d.cubes.join(",")) ? " active" : ""}`}
                       onClick={() => onFilterLevels(false)}
                       dangerouslySetInnerHTML={{__html: d.title}}
@@ -415,7 +415,7 @@ function ProfileSearch({
                           filterCubes &&
                         !filterCubes.includes(d.cubes.join(",")) && filterCubes.includes(l) ? "grey" : "none"
                         }
-                        // className={`cms-profilesearch-filters-level${filterCubes && !filterCubes.includes(d.cubes.join(",")) && filterCubes.includes(l) ? " active" : ""}`}
+                        className={`cms-profilesearch-filters-level${filterCubes && !filterCubes.includes(d.cubes.join(",")) && filterCubes.includes(l) ? " active" : ""}`}
                         onClick={() => onFilterLevels(l)}
                         dangerouslySetInnerHTML={{__html: filterCubeTitle(l.split(",")[0], activeProfile[0])}}
                       />
@@ -425,25 +425,26 @@ function ProfileSearch({
             </div>
             : null }
         </Box>
-        <ScrollArea>
-          <div
-            className={`cms-profilesearch-container cms-profilesearch-container-${position}`}
-            key="container"
-            ref={resultContainer}
-          >
-            {
-              (position !== "absolute" || active) && results
-                ? (() => {
-                  if (!results.grouped.length) {
-                    return <NonIdealState message={t("CMS.Search.No results", {query: debouncedQuery})} />;
-                  }
 
-                  switch (display) {
-                    case "grid":
-                      const gridProfiles = (results.grouped || [])
-                        .filter(d => !availableProfiles.length || availableProfiles.includes(d[0].slug));
-
-                      return (
+        <div
+          className={`cms-profilesearch-container cms-profilesearch-container-${position}`}
+          key="container"
+          ref={resultContainer}
+        >
+          {
+            (position !== "absolute" || active) && results
+              ? (() => {
+                if (!results.grouped.length) {
+                  return <NonIdealState message={t("CMS.Search.No results", {query: debouncedQuery})} />;
+                }
+
+                switch (display) {
+                  case "grid":
+                    const gridProfiles = (results.grouped || [])
+                      .filter(d => !availableProfiles.length || availableProfiles.includes(d[0].slug));
+
+                    return (
+                      <ScrollArea.Autosize mah="60vh" sx={{overflow: "hidden"}}>
                         <SimpleGrid
                           key="grid"
                           breakpoints={[
@@ -458,26 +459,27 @@ function ProfileSearch({
                             joiner, subtitleFormat, titleFormat, linkify
                           }))}
                         </SimpleGrid>
-                      );
-
-                    case "columns":
-                      const filteredProfiles = Object.keys(results.profiles || {})
-                        .reduce((obj, d) => {
-                          let arr = results.profiles[d];
-                          if (availableProfiles.length) arr = arr.filter(p => availableProfiles.includes(p[0].slug));
-                          // eslint-disable-next-line no-param-reassign
-                          if (arr.length) obj[d] = arr;
-                          return obj;
-                        }, {});
-                      const columnProfiles = Object.keys(filteredProfiles || {})
-                        .sort((a, b) => {
-                          const aIndex = columnOrder.includes(a) ? columnOrder.indexOf(a) : columnOrder.length + 1;
-                          const bIndex = columnOrder.includes(b) ? columnOrder.indexOf(b) : columnOrder.length + 1;
-                          return aIndex - bIndex;
-                        })
-                        .map(profile => results.profiles[profile] || []);
-                      return (
-                        null
+                      </ScrollArea.Autosize>
+                    );
+
+                  case "columns":
+                    const filteredProfiles = Object.keys(results.profiles || {})
+                      .reduce((obj, d) => {
+                        let arr = results.profiles[d];
+                        if (availableProfiles.length) arr = arr.filter(p => availableProfiles.includes(p[0].slug));
+                        // eslint-disable-next-line no-param-reassign
+                        if (arr.length) obj[d] = arr;
+                        return obj;
+                      }, {});
+                    const columnProfiles = Object.keys(filteredProfiles || {})
+                      .sort((a, b) => {
+                        const aIndex = columnOrder.includes(a) ? columnOrder.indexOf(a) : columnOrder.length + 1;
+                        const bIndex = columnOrder.includes(b) ? columnOrder.indexOf(b) : columnOrder.length + 1;
+                        return aIndex - bIndex;
+                      })
+                      .map(profile => results.profiles[profile] || []);
+                    return (
+                      null
                       // TODO: ProfileColumns
                       // <ProfileColumns
                       //   columnFormat={subtitleFormat}
@@ -487,31 +489,30 @@ function ProfileSearch({
                       //   tileProps={{joiner, subtitleFormat, titleFormat}}
                       //   data={columnProfiles}
                       // />
-                      );
+                    );
 
-                    default:
+                  default:
                     // eslint-disable-next-line no-case-declarations
-                      const listProfiles = (results.grouped || [])
-                        .filter(d => !availableProfiles.length || availableProfiles.includes(d[0].slug));
-                      return (
-                        <ul key="list" className="cms-profilesearch-list">
-                          {listProfiles.map((result, j) => renderListItem(
-                            result,
-                            j,
-                            linkify(result),
-                            result.map(titleFormat).join(joiner),
-                            result.map(subtitleFormat).join(joiner)
-                          ))}
-                        </ul>
-                      );
-                  }
-                })()
-                : loading && (position !== "absolute" || active)
-                  ? <NonIdealState key="loading" message={t("CMS.Search.Loading")} />
-                  : position !== "absolute" ? <NonIdealState message={t("CMS.Search.Empty")} /> : null
-            }
-          </div>
-        </ScrollArea>
+                    const listProfiles = (results.grouped || [])
+                      .filter(d => !availableProfiles.length || availableProfiles.includes(d[0].slug));
+                    return (
+                      <ul key="list" className="cms-profilesearch-list">
+                        {listProfiles.map((result, j) => renderListItem(
+                          result,
+                          j,
+                          linkify(result),
+                          result.map(titleFormat).join(joiner),
+                          result.map(subtitleFormat).join(joiner)
+                        ))}
+                      </ul>
+                    );
+                }
+              })()
+              : loading && (position !== "absolute" || active)
+                ? <NonIdealState key="loading" message={t("CMS.Search.Loading")} />
+                : position !== "absolute" ? <NonIdealState message={t("CMS.Search.Empty")} /> : null
+          }
+        </div>
       </Box>
     </FocusTrap>
   );

diff --git a/packages/next/cms/components/sections/Hero.js b/packages/next/cms/components/sections/Hero.js
@@ -165,8 +165,8 @@ function Hero({
         </Stack>
 
         {/* print JUST the first visualization */}
-        {contents && contents.visualizations && contents.visualizations.length ?
-          <Box key={contents.visualizations[0].id} className="cp-hero-figure" maw={400}>
+        {contents && contents.visualizations && contents.visualizations.length
+          ? <Box key={contents.visualizations[0].id} className="cp-hero-figure" maw={400}>
             <Viz
               section={this}
               config={contents.visualizations[0]}
@@ -181,8 +181,8 @@ function Hero({
       </Flex>
 
       {/* display image credits, and images */}
-      {profile.images.length ?
-        <>
+      {profile.images.length
+        ? <>
           {/* credits */}
           {type !== "story" && hasAuthor &&
             <Stack
@@ -268,13 +268,11 @@ function Hero({
             zIndex={1}
           />
         </>
-        :
-
-          <Overlay
-            opacity={0.7}
-            blur={2}
-            zIndex={1}
-          />
+        :          <Overlay
+          opacity={0.7}
+          blur={2}
+          zIndex={1}
+        />
 
       }