Skip to content

Commit

Permalink
add open controlled prop
Browse files Browse the repository at this point in the history
  • Loading branch information
Walter Buczacka authored and Walter Buczacka committed Apr 19, 2024
1 parent 5cc2660 commit 6a2d5d9
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 6 deletions.
8 changes: 7 additions & 1 deletion packages/next/cms/components/ProfileRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ function ProfileRenderer({
customSections = {},
relatedTile,
t,
opened,
handlers,
}) {
const router = useRouter();
const {query} = router;
Expand Down Expand Up @@ -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
? (
Expand All @@ -121,6 +123,8 @@ function ProfileRenderer({
}}
>
<Hero
opened={opened}
handlers={handlers}
key="cp-hero"
profile={profile}
contents={heroSection || null}
Expand All @@ -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}
Expand Down
23 changes: 18 additions & 5 deletions packages/next/cms/components/sections/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -138,7 +152,6 @@ function Hero({
}

// heading & subhead(s)

const heading = (
<div>
<h1>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 6a2d5d9

Please sign in to comment.