Skip to content

Commit

Permalink
Merge pull request #1389 from Datawheel/wb/1309_fe_and_css_issues
Browse files Browse the repository at this point in the history
Wb/1309 fe and css issues
  • Loading branch information
davelandry authored Apr 25, 2024
2 parents 9f2c3f6 + 41b7ca8 commit 182a96a
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 7 deletions.
9 changes: 9 additions & 0 deletions packages/next/cms/components/ProfileRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ function ProfileRenderer({
customSections = {},
relatedTile,
t,
searchOpened,
searchHandlers,
defaultOpened,
}) {
const router = useRouter();
const {query} = router;
Expand Down Expand Up @@ -121,6 +124,9 @@ function ProfileRenderer({
}}
>
<Hero
searchOpened={searchOpened}
searchHandlers={searchHandlers}
defaultOpened={defaultOpened}
key="cp-hero"
profile={profile}
contents={heroSection || null}
Expand All @@ -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}
Expand Down
7 changes: 5 additions & 2 deletions packages/next/cms/components/fields/ProfileSearch.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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")
Expand Down Expand Up @@ -409,7 +412,7 @@ export function ProfileSearch({
</Text>
</Text>
<TextInput
ref={textInput}
ref={inputRef}
className="cp-input"
icon={<IconSearch />}
size="xl"
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,
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);
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() ? searchOpened : clickedIndex !== undefined,
onClose: isOpenControlled() ? () => searchHandlers.close() : () => setClickedIndex(undefined),
}}
/>
</Stack>
Expand Down
12 changes: 12 additions & 0 deletions packages/next/cms/hooks/useFocus.js
Original file line number Diff line number Diff line change
@@ -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};

0 comments on commit 182a96a

Please sign in to comment.