From fc60ab2f6b70f4867b2b916185ff5e67a42c655c Mon Sep 17 00:00:00 2001 From: scespinoza Date: Mon, 27 Mar 2023 11:13:19 -0300 Subject: [PATCH] fix subnav behavior --- example-next/pages/profile/[...members].js | 1 - .../components/sections/components/Subnav.js | 276 +++++++++--------- 2 files changed, 139 insertions(+), 138 deletions(-) diff --git a/example-next/pages/profile/[...members].js b/example-next/pages/profile/[...members].js index 5cda9fb06..68511d9d2 100644 --- a/example-next/pages/profile/[...members].js +++ b/example-next/pages/profile/[...members].js @@ -26,7 +26,6 @@ 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", filterDimensionTitle: d => "All Sectors", filterProfileTitle: (content, meta) => console.log("profile", meta), limit: 80}} customSections={customSections} t={t} /> diff --git a/packages/next/cms/components/sections/components/Subnav.js b/packages/next/cms/components/sections/components/Subnav.js index 1311c2692..108e6b206 100644 --- a/packages/next/cms/components/sections/components/Subnav.js +++ b/packages/next/cms/components/sections/components/Subnav.js @@ -1,8 +1,8 @@ import { - Anchor, Box, Flex, Popover, List, Text, Paper, + Anchor, Box, Flex, Popover, List, Paper, Menu } from "@mantine/core"; -import { - forwardRef, useMemo, useRef, useState, +import React, { + forwardRef, useMemo, useRef, useState } from "react"; import {useWindowEvent, useWindowScroll, useDisclosure} from "@mantine/hooks"; // import {AnchorLink} from "@datawheel/canon-core"; @@ -14,8 +14,9 @@ import throttle from "../../../utils/throttle"; import stripHTML from "../../../utils/formatters/stripHTML"; // https://github.com/Datawheel/canon/blob/c949c0089be9aa4ccc67fbe4737b9fd200de6dcf/packages/core/src/components/AnchorLink.jsx +// eslint-disable-next-line react/display-name const AnchorLink = forwardRef(({ - children, className, dangerouslySetInnerHTML, id, to, onFocus, onBlur, onClick, + children, className, dangerouslySetInnerHTML, id, to, onFocus, onBlur, onClick }, ref) => { if (dangerouslySetInnerHTML) { return ( @@ -25,7 +26,6 @@ const AnchorLink = forwardRef(({ href={`#${to}`} id={id} dangerouslySetInnerHTML={dangerouslySetInnerHTML} - // onClick={this.onClick.bind(this)} onBlur={onBlur} onFocus={onFocus} onClick={onClick} @@ -39,7 +39,7 @@ const AnchorLink = forwardRef(({ className={className} href={`#${to}`} id={id} - // onClick={this.onClick.bind(this)} + onClick={onClick} onBlur={onBlur} onFocus={onFocus} > @@ -48,32 +48,33 @@ const AnchorLink = forwardRef(({ ); }); +/** */ export default function Subnav(props) { const flattenSections = () => { const {sections} = props; let flattenedSections = props.sections; - if (sections - && Array.isArray(sections) - && sections[0] && sections[0][0] - && sections[0][0] === Object(sections[0][0]) + if (sections && + Array.isArray(sections) && + sections[0] && sections[0][0] && + sections[0][0] === Object(sections[0][0]) ) { // the hierarchy is flat (i.e., <= 1 grouping) if (sections.length === 1) { flattenedSections = sections[0] - .map((s) => s[0]) - .filter((s) => s.type.toLowerCase() !== "grouping"); // don't show groupings + .map(s => s[0]) + .filter(s => s.type.toLowerCase() !== "grouping"); // don't show groupings } // we got groupings else { flattenedSections = sections - .map((s) => { - const subgroups = s.filter((d) => d[0].type.toLowerCase() === "subgrouping"); + .map(s => { + const subgroups = s.filter(d => d[0].type.toLowerCase() === "subgrouping"); let children = merge(subgroups.length ? subgroups : s.slice(1)); if (subgroups.length) { - children = children.map((subgroup) => { + children = children.map(subgroup => { const obj = {...subgroup}; obj.children = []; - const currIndex = s.findIndex((d) => d[0].id === obj.id); + const currIndex = s.findIndex(d => d[0].id === obj.id); for (let i = currIndex + 1; i < s.length; i++) { if (s[i][0].type.toLowerCase() === "subgrouping") break; obj.children.push(s[i]); @@ -84,7 +85,7 @@ export default function Subnav(props) { } return {...s[0][0], children}; }) - .filter((s) => s.type.toLowerCase() === "grouping"); // only show groupings + .filter(s => s.type.toLowerCase() === "grouping"); // only show groupings } } @@ -100,7 +101,7 @@ export default function Subnav(props) { const sections = useMemo(flattenSections, [props.sections]); const hasSubgroups = useMemo(() => sections.some(s => s.children && s.children.some(c => c.children)), [JSON.stringify(sections)]); - const onBlur = (e) => { + const onBlur = e => { const {currentTarget} = e; const targetSlug = currentTarget.querySelector(".cp-subnav-link").href.split("#")[1]; @@ -116,10 +117,12 @@ export default function Subnav(props) { function getSectionWrapper(slug) { let elem = document.getElementById(slug); while ( - elem - && elem.className - && !elem.className.includes("cp-section ") - && elem.parentNode) { elem = elem.parentNode; } + elem && + elem.className && + !elem.className.includes("cp-section ") && + elem.parentNode) { + elem = elem.parentNode; + } return elem; } @@ -127,8 +130,8 @@ export default function Subnav(props) { throttle(() => { // deteremine which section we're in let newSection = false; let - newSubSection = false; - sections.forEach((section) => { + newSubSection = false; + sections.forEach(section => { const elem = getSectionWrapper(section.slug); const top = elem ? elem.getBoundingClientRect().top : 1; if (Math.floor(top) <= topBorder) { @@ -137,7 +140,7 @@ export default function Subnav(props) { }); if (newSection && newSection.children) { - newSection.children.forEach((section) => { + newSection.children.forEach(section => { const elem = getSectionWrapper(section.slug); const top = elem ? elem.getBoundingClientRect().top : 1; @@ -156,28 +159,29 @@ export default function Subnav(props) { } }); + /** */ function Popup({section}) { const [opened, {close, open}] = useDisclosure(false); return ( ({ + styles={theme => ({ dropdown: { border: "none", borderRadius: 0, marginTop: 0, boxShadow: theme.shadows.sm, top: "100% !important", - left: "0px !important", - }, + left: "0px !important" + } })} opened={opened || openSlug === section.slug} - withArrow={false} trapFocus > - + setOpenSlug(section.slug)} + onClick={() => setOpenSlug(false)} className={`cp-subnav-link ${sections.length >= 5 ? "u-font-xs" : "u-font-sm"}`} to={section.slug} > @@ -190,19 +194,19 @@ export default function Subnav(props) { - { section.children.map((child) => ( + { section.children.map(child => setOpenSlug(section.slug)} - onClick={() => close()} + onClick={() => setOpenSlug(false)} to={child.slug} > {/* i === child.icon) ? child.icon : "dot"} /> */} {child.short && stripHTML(child.short) ? stripHTML(child.short) : stripHTML(child.title)} - )) } + ) } @@ -229,125 +233,123 @@ export default function Subnav(props) { className={`cp-subnav ${fixed ? "is-fixed" : "is-static"}`} ref={subnav} key="s" - sx={(theme) => ({ + sx={theme => ({ zIndex: 20, display: "flex", flexDirection: "column", borderRadius: 0, - boxShadow: theme.shadows.sm, + boxShadow: theme.shadows.sm })} > {children} {sections.length - ? ( - ({gap: theme.spacing.md, alignItems: "center", justifyContent: "center"})} - my="0px !important" - w="100%" - listStyleType="none" - > - {sections.map((section) => ( - ({ - textTransform: "uppercase", - fontSize: 16, - "&:hover div span a": { - textDecoration: "none", - fontWeight: 700, - }, - "& div span a": { // ugh - color: currSection.slug === section.slug ? theme.colors["ds-subnav-active"] : "none", - transition: "color .45s", - }, + ? ({gap: theme.spacing.md, alignItems: "center", justifyContent: "center"})} + my="0px !important" + w="100%" + listStyleType="none" + > + {sections.map(section => + ({ + "textTransform": "uppercase", + "fontSize": 16, + "& div span a": { // ugh + color: currSection.slug === section.slug ? theme.colors["ds-subnav-active"] : "none", + transition: "color .45s" + } - })} - lts="0.05" - key={section.slug} - onBlur={onBlur} - pos="relative" - > + })} + lts="0.05" + key={section.slug} + onBlur={onBlur} + onMouseLeave={ + () => setTimeout(() => setOpenSlug(false), 500) + } + pos="relative" + > - { section.children && section.children.length - ? - : ( - setOpenSlug(section.slug)} - className={`cp-subnav-link ${sections.length >= 5 ? "u-font-xs" : "u-font-sm"}`} - to={section.slug} - > - - - {section.short && stripHTML(section.short) ? stripHTML(section.short) : stripHTML(section.title)} - - - )} - - ))} - - ) : null} + { section.children && section.children.length + ? + : setOpenSlug(section.slug)} + className={`cp-subnav-link ${sections.length >= 5 ? "u-font-xs" : "u-font-sm"}`} + to={section.slug} + > + + + {section.short && stripHTML(section.short) ? stripHTML(section.short) : stripHTML(section.title)} + + + } + + )} + + : null} {hasSubgroups && currSection - ? ( - ({gap: theme.spacing.md, alignItems: "center", justifyContent: "center"})} display="flex" className="cp-subnav-list cp-subnav-secondary" key="s" listStyleType="none"> - {(currSection ? currSection.children : []).map((section) => ( - ({ - fontWeight: currSubSection.slug === section.slug ? 700 : "none", - fontSize: 14, - "& .cp-subnav-link a": { // ugh - color: currSubSection.slug === section.slug ? theme.colors["ds-subnav-active"] : "none", - }, + ? ({gap: theme.spacing.md, alignItems: "center", justifyContent: "center"})} display="flex" className="cp-subnav-list cp-subnav-secondary" key="s" listStyleType="none"> + {(currSection ? currSection.children : []).map(section => + ({ + "fontWeight": currSubSection.slug === section.slug ? 700 : "none", + "fontSize": 14, + "& .cp-subnav-link a": { // ugh + color: currSubSection.slug === section.slug ? theme.colors["ds-subnav-active"] : "none" + } - })} - p="xs" - key={section.slug} - onBlur={onBlur} - pos="relative" - > + })} + p="xs" + key={section.slug} + onBlur={onBlur} + onMouseLeave={ + () => setTimeout(() => setOpenSlug(false), 500) + } + pos="relative" + > - { section.children && section.children.length - ? - : ( - setOpenSlug(section.slug)} - className={`cp-subnav-link ${sections.length >= 5 ? "u-font-xs" : "u-font-sm"}`} - to={section.slug} - > - {/* {section.icon && blueprintIcons.find(i => i === section.icon) && + { section.children && section.children.length + ? + : setOpenSlug(section.slug)} + className={`cp-subnav-link ${sections.length >= 5 ? "u-font-xs" : "u-font-sm"}`} + to={section.slug} + > + {/* {section.icon && blueprintIcons.find(i => i === section.icon) && } */} - {section.short && stripHTML(section.short) ? stripHTML(section.short) : stripHTML(section.title)} - - )} - - ))} - - ) : null} + {section.short && stripHTML(section.short) ? stripHTML(section.short) : stripHTML(section.title)} + + } + + )} + + : null} {/* prevent page jump */}