some small fixes to the realm selector (#74)
This commit is contained in:
Erik Jan de Wit
GitHub
parent
082682e6d3
commit
8fa720438e
5 changed files with 50 additions and 644 deletions
|
|
@ -1,14 +1,26 @@
|
|||
import React from "react";
|
||||
import React, { useContext } from "react";
|
||||
import { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core";
|
||||
import { RealmSelector } from "./components/realm-selector/RealmSelector";
|
||||
import { DataLoader } from "./components/data-loader/DataLoader";
|
||||
import { HttpClientContext } from "./http-service/HttpClientContext";
|
||||
import { Realm } from "./models/Realm";
|
||||
|
||||
export const PageNav: React.FunctionComponent = () => {
|
||||
const httpClient = useContext(HttpClientContext)!;
|
||||
const realmLoader = async () => {
|
||||
const response = await httpClient.doGet<Realm[]>("/admin/realms");
|
||||
return response.data;
|
||||
};
|
||||
return (
|
||||
<PageSidebar
|
||||
nav={
|
||||
<Nav>
|
||||
<NavList>
|
||||
<RealmSelector />
|
||||
<DataLoader loader={realmLoader}>
|
||||
{(realmList) => (
|
||||
<RealmSelector realm="Master" realmList={realmList || []} />
|
||||
)}
|
||||
</DataLoader>
|
||||
<NavItem id="default-link1" to="/default-link1" itemId={0}>
|
||||
Link 1
|
||||
</NavItem>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,23 @@
|
|||
import React from "react";
|
||||
import { Button, AlertVariant } from "@patternfly/react-core";
|
||||
import { mount } from "enzyme";
|
||||
import EnzymeToJson from "enzyme-to-json";
|
||||
import { act } from "react-dom/test-utils";
|
||||
import { act } from "@testing-library/react";
|
||||
|
||||
import { AlertPanel } from "../alert/AlertPanel";
|
||||
import { useAlerts } from "../alert/Alerts";
|
||||
|
||||
import { RealmSelector } from "./RealmSelector";
|
||||
|
||||
const WithButton = () => {
|
||||
const [add, alerts, hide] = useAlerts();
|
||||
return (
|
||||
<>
|
||||
<AlertPanel alerts={alerts} onCloseAlert={hide} />
|
||||
<Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
|
||||
</>
|
||||
it("renders realm selector", async () => {
|
||||
const wrapper = mount(
|
||||
<RealmSelector realm="test" realmList={[{ id: "321", realm: "another" }]} />
|
||||
);
|
||||
};
|
||||
|
||||
it("renders realm selector", () => {
|
||||
const tree = mount(<RealmSelector />);
|
||||
const button = tree.find("button");
|
||||
expect(button).not.toBeNull();
|
||||
expect(wrapper.text()).toBe("test");
|
||||
|
||||
const expandButton = wrapper.find("button");
|
||||
act(() => {
|
||||
button!.simulate("click");
|
||||
expandButton!.simulate("click");
|
||||
});
|
||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
||||
|
||||
act(() => {
|
||||
jest.runAllTimers();
|
||||
});
|
||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,33 +11,24 @@ import {
|
|||
} from "@patternfly/react-core";
|
||||
|
||||
import style from "./realm-selector.module.css";
|
||||
import { HttpClientContext } from "../../http-service/HttpClientContext";
|
||||
|
||||
export const RealmSelector = () => {
|
||||
type RealmSelectorProps = {
|
||||
realm: string;
|
||||
realmList: Realm[];
|
||||
};
|
||||
|
||||
export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const history = useHistory();
|
||||
const httpClient = useContext(HttpClientContext);
|
||||
const [realms, setRealms] = useState([] as Realm[]);
|
||||
const [currentRealm, setCurrentRealm] = useState("Master");
|
||||
const [currentRealm, setCurrentRealm] = useState(realm);
|
||||
|
||||
const getRealms = async () => {
|
||||
return await httpClient
|
||||
?.doGet("/admin/realms")
|
||||
.then((r) => r.data as Realm[]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getRealms().then((result) => {
|
||||
setRealms(result || []);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const dropdownItems = realms.map((r) => (
|
||||
const dropdownItems = realmList.map((r) => (
|
||||
<DropdownItem
|
||||
component="a"
|
||||
href={"/#/realms/" + r.id}
|
||||
key={r.id}
|
||||
onClick={() => setCurrentRealm(r.realm)}
|
||||
onClick={() => {
|
||||
setCurrentRealm(r.realm);
|
||||
setOpen(!open);
|
||||
}}
|
||||
>
|
||||
{r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
|
||||
</DropdownItem>
|
||||
|
|
|
|||
|
|
@ -1,587 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders realm selector 1`] = `
|
||||
<RealmSelector>
|
||||
<Dropdown
|
||||
dropdownItems={
|
||||
Array [
|
||||
<Divider />,
|
||||
<DropdownItem
|
||||
component="div"
|
||||
>
|
||||
<Button
|
||||
isBlock={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Create Realm
|
||||
</Button>
|
||||
</DropdownItem>,
|
||||
]
|
||||
}
|
||||
id="realm-select"
|
||||
isOpen={false}
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
id="realm-select-toggle"
|
||||
onToggle={[Function]}
|
||||
>
|
||||
Master
|
||||
</DropdownToggle>
|
||||
}
|
||||
>
|
||||
<DropdownWithContext
|
||||
autoFocus={true}
|
||||
className=""
|
||||
direction="down"
|
||||
dropdownItems={
|
||||
Array [
|
||||
<Divider />,
|
||||
<DropdownItem
|
||||
component="div"
|
||||
>
|
||||
<Button
|
||||
isBlock={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Create Realm
|
||||
</Button>
|
||||
</DropdownItem>,
|
||||
]
|
||||
}
|
||||
id="realm-select"
|
||||
isGrouped={false}
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
menuAppendTo="inline"
|
||||
onSelect={[Function]}
|
||||
position="left"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
id="realm-select-toggle"
|
||||
onToggle={[Function]}
|
||||
>
|
||||
Master
|
||||
</DropdownToggle>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-dropdown"
|
||||
data-ouia-component-id={0}
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe={true}
|
||||
id="realm-select"
|
||||
>
|
||||
<DropdownToggle
|
||||
aria-haspopup={true}
|
||||
getMenuRef={[Function]}
|
||||
id="realm-select-toggle"
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
key=".0"
|
||||
onEnter={[Function]}
|
||||
onToggle={[Function]}
|
||||
parentRef={
|
||||
Object {
|
||||
"current": <div
|
||||
class="pf-c-dropdown pf-m-expanded"
|
||||
data-ouia-component-id="1"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="realm-select-toggle"
|
||||
class="pf-c-dropdown__menu"
|
||||
role="menu"
|
||||
>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="0"
|
||||
/>
|
||||
<li
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-primary pf-m-block"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
type="button"
|
||||
>
|
||||
Create Realm
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Toggle
|
||||
aria-haspopup={true}
|
||||
bubbleEvent={false}
|
||||
className=""
|
||||
getMenuRef={[Function]}
|
||||
id="realm-select-toggle"
|
||||
isActive={false}
|
||||
isDisabled={false}
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
isPrimary={false}
|
||||
isSplitButton={false}
|
||||
onEnter={[Function]}
|
||||
onToggle={[Function]}
|
||||
parentRef={
|
||||
Object {
|
||||
"current": <div
|
||||
class="pf-c-dropdown pf-m-expanded"
|
||||
data-ouia-component-id="1"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="realm-select-toggle"
|
||||
class="pf-c-dropdown__menu"
|
||||
role="menu"
|
||||
>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="0"
|
||||
/>
|
||||
<li
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-primary pf-m-block"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
type="button"
|
||||
>
|
||||
Create Realm
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup={true}
|
||||
className="pf-c-dropdown__toggle"
|
||||
disabled={false}
|
||||
id="realm-select-toggle"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
className="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<CaretDownIcon
|
||||
color="currentColor"
|
||||
noVerticalAlign={false}
|
||||
size="sm"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</CaretDownIcon>
|
||||
</span>
|
||||
</button>
|
||||
</Toggle>
|
||||
</DropdownToggle>
|
||||
</div>
|
||||
</DropdownWithContext>
|
||||
</Dropdown>
|
||||
</RealmSelector>
|
||||
`;
|
||||
|
||||
exports[`renders realm selector 2`] = `
|
||||
<RealmSelector>
|
||||
<Dropdown
|
||||
dropdownItems={
|
||||
Array [
|
||||
<Divider />,
|
||||
<DropdownItem
|
||||
component="div"
|
||||
>
|
||||
<Button
|
||||
isBlock={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Create Realm
|
||||
</Button>
|
||||
</DropdownItem>,
|
||||
]
|
||||
}
|
||||
id="realm-select"
|
||||
isOpen={false}
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
id="realm-select-toggle"
|
||||
onToggle={[Function]}
|
||||
>
|
||||
Master
|
||||
</DropdownToggle>
|
||||
}
|
||||
>
|
||||
<DropdownWithContext
|
||||
autoFocus={true}
|
||||
className=""
|
||||
direction="down"
|
||||
dropdownItems={
|
||||
Array [
|
||||
<Divider />,
|
||||
<DropdownItem
|
||||
component="div"
|
||||
>
|
||||
<Button
|
||||
isBlock={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Create Realm
|
||||
</Button>
|
||||
</DropdownItem>,
|
||||
]
|
||||
}
|
||||
id="realm-select"
|
||||
isGrouped={false}
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
menuAppendTo="inline"
|
||||
onSelect={[Function]}
|
||||
position="left"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
id="realm-select-toggle"
|
||||
onToggle={[Function]}
|
||||
>
|
||||
Master
|
||||
</DropdownToggle>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-dropdown"
|
||||
data-ouia-component-id={0}
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe={true}
|
||||
id="realm-select"
|
||||
>
|
||||
<DropdownToggle
|
||||
aria-haspopup={true}
|
||||
getMenuRef={[Function]}
|
||||
id="realm-select-toggle"
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
key=".0"
|
||||
onEnter={[Function]}
|
||||
onToggle={[Function]}
|
||||
parentRef={
|
||||
Object {
|
||||
"current": <div
|
||||
class="pf-c-dropdown pf-m-expanded"
|
||||
data-ouia-component-id="1"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="realm-select-toggle"
|
||||
class="pf-c-dropdown__menu"
|
||||
role="menu"
|
||||
>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="0"
|
||||
/>
|
||||
<li
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-primary pf-m-block"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
type="button"
|
||||
>
|
||||
Create Realm
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Toggle
|
||||
aria-haspopup={true}
|
||||
bubbleEvent={false}
|
||||
className=""
|
||||
getMenuRef={[Function]}
|
||||
id="realm-select-toggle"
|
||||
isActive={false}
|
||||
isDisabled={false}
|
||||
isOpen={false}
|
||||
isPlain={false}
|
||||
isPrimary={false}
|
||||
isSplitButton={false}
|
||||
onEnter={[Function]}
|
||||
onToggle={[Function]}
|
||||
parentRef={
|
||||
Object {
|
||||
"current": <div
|
||||
class="pf-c-dropdown pf-m-expanded"
|
||||
data-ouia-component-id="1"
|
||||
data-ouia-component-type="PF4/Dropdown"
|
||||
data-ouia-safe="true"
|
||||
id="realm-select"
|
||||
>
|
||||
<button
|
||||
aria-expanded="true"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="realm-select-toggle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
class="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<ul
|
||||
aria-labelledby="realm-select-toggle"
|
||||
class="pf-c-dropdown__menu"
|
||||
role="menu"
|
||||
>
|
||||
<hr
|
||||
class="pf-c-divider"
|
||||
index="0"
|
||||
/>
|
||||
<li
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
class="pf-c-dropdown__menu-item"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="pf-c-button pf-m-primary pf-m-block"
|
||||
data-ouia-component-id="2"
|
||||
data-ouia-component-type="PF4/Button"
|
||||
data-ouia-safe="true"
|
||||
type="button"
|
||||
>
|
||||
Create Realm
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>,
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup={true}
|
||||
className="pf-c-dropdown__toggle"
|
||||
disabled={false}
|
||||
id="realm-select-toggle"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="pf-c-dropdown__toggle-text"
|
||||
>
|
||||
Master
|
||||
</span>
|
||||
<span
|
||||
className="pf-c-dropdown__toggle-icon"
|
||||
>
|
||||
<CaretDownIcon
|
||||
color="currentColor"
|
||||
noVerticalAlign={false}
|
||||
size="sm"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 320 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</CaretDownIcon>
|
||||
</span>
|
||||
</button>
|
||||
</Toggle>
|
||||
</DropdownToggle>
|
||||
</div>
|
||||
</DropdownWithContext>
|
||||
</Dropdown>
|
||||
</RealmSelector>
|
||||
`;
|
||||
exports[`renders realm selector 1`] = `"<div id=\\"realm-select\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"1\\"><button id=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">test</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\"></path></svg></span></button><ul aria-labelledby=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"menuitem\\"><a tabindex=\\"-1\\" aria-disabled=\\"false\\" class=\\"pf-c-dropdown__menu-item\\">Another</a></li><hr class=\\"pf-c-divider\\" index=\\"1\\"><li role=\\"menuitem\\"><div tabindex=\\"-1\\" class=\\"pf-c-dropdown__menu-item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary pf-m-block\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"2\\">Create Realm</button></div></li></ul></div>"`;
|
||||
|
|
|
|||
|
|
@ -10,29 +10,29 @@ type ScrollFormProps = {
|
|||
};
|
||||
|
||||
export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
|
||||
const getCurrentSection = () => {
|
||||
for (let sectionName of sections) {
|
||||
const section = document.getElementById(sectionName)!;
|
||||
const startAt = section.offsetTop;
|
||||
const endAt = startAt + section.offsetHeight;
|
||||
const currentPosition =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const isInView = currentPosition >= startAt && currentPosition < endAt;
|
||||
if (isInView) {
|
||||
return sectionName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const [active, setActive] = useState(sections[0]);
|
||||
useEffect(() => {
|
||||
const getCurrentSection = () => {
|
||||
for (let sectionName of sections) {
|
||||
const section = document.getElementById(sectionName)!;
|
||||
const startAt = section.offsetTop;
|
||||
const endAt = startAt + section.offsetHeight;
|
||||
const currentPosition =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const isInView = currentPosition >= startAt && currentPosition < endAt;
|
||||
if (isInView) {
|
||||
return sectionName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const active = getCurrentSection();
|
||||
if (active) {
|
||||
setActive(active);
|
||||
}
|
||||
});
|
||||
}, [active]);
|
||||
}, [active, sections]);
|
||||
|
||||
const Nav = () => (
|
||||
<div className={style.sticky}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue