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 { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core";
|
||||||
import { RealmSelector } from "./components/realm-selector/RealmSelector";
|
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 = () => {
|
export const PageNav: React.FunctionComponent = () => {
|
||||||
|
const httpClient = useContext(HttpClientContext)!;
|
||||||
|
const realmLoader = async () => {
|
||||||
|
const response = await httpClient.doGet<Realm[]>("/admin/realms");
|
||||||
|
return response.data;
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<PageSidebar
|
<PageSidebar
|
||||||
nav={
|
nav={
|
||||||
<Nav>
|
<Nav>
|
||||||
<NavList>
|
<NavList>
|
||||||
<RealmSelector />
|
<DataLoader loader={realmLoader}>
|
||||||
|
{(realmList) => (
|
||||||
|
<RealmSelector realm="Master" realmList={realmList || []} />
|
||||||
|
)}
|
||||||
|
</DataLoader>
|
||||||
<NavItem id="default-link1" to="/default-link1" itemId={0}>
|
<NavItem id="default-link1" to="/default-link1" itemId={0}>
|
||||||
Link 1
|
Link 1
|
||||||
</NavItem>
|
</NavItem>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,23 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Button, AlertVariant } from "@patternfly/react-core";
|
|
||||||
import { mount } from "enzyme";
|
import { mount } from "enzyme";
|
||||||
import EnzymeToJson from "enzyme-to-json";
|
import { act } from "@testing-library/react";
|
||||||
import { act } from "react-dom/test-utils";
|
|
||||||
|
|
||||||
import { AlertPanel } from "../alert/AlertPanel";
|
import { AlertPanel } from "../alert/AlertPanel";
|
||||||
import { useAlerts } from "../alert/Alerts";
|
import { useAlerts } from "../alert/Alerts";
|
||||||
|
|
||||||
import { RealmSelector } from "./RealmSelector";
|
import { RealmSelector } from "./RealmSelector";
|
||||||
|
|
||||||
const WithButton = () => {
|
it("renders realm selector", async () => {
|
||||||
const [add, alerts, hide] = useAlerts();
|
const wrapper = mount(
|
||||||
return (
|
<RealmSelector realm="test" realmList={[{ id: "321", realm: "another" }]} />
|
||||||
<>
|
|
||||||
<AlertPanel alerts={alerts} onCloseAlert={hide} />
|
|
||||||
<Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
it("renders realm selector", () => {
|
expect(wrapper.text()).toBe("test");
|
||||||
const tree = mount(<RealmSelector />);
|
|
||||||
const button = tree.find("button");
|
|
||||||
expect(button).not.toBeNull();
|
|
||||||
|
|
||||||
|
const expandButton = wrapper.find("button");
|
||||||
act(() => {
|
act(() => {
|
||||||
button!.simulate("click");
|
expandButton!.simulate("click");
|
||||||
});
|
});
|
||||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
|
||||||
|
|
||||||
act(() => {
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
jest.runAllTimers();
|
|
||||||
});
|
|
||||||
expect(EnzymeToJson(tree)).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -11,33 +11,24 @@ import {
|
||||||
} from "@patternfly/react-core";
|
} from "@patternfly/react-core";
|
||||||
|
|
||||||
import style from "./realm-selector.module.css";
|
import style from "./realm-selector.module.css";
|
||||||
import { HttpClientContext } from "../../http-service/HttpClientContext";
|
|
||||||
|
|
||||||
export const RealmSelector = () => {
|
type RealmSelectorProps = {
|
||||||
const [open, setOpen] = useState(false);
|
realm: string;
|
||||||
const history = useHistory();
|
realmList: Realm[];
|
||||||
const httpClient = useContext(HttpClientContext);
|
|
||||||
const [realms, setRealms] = useState([] as Realm[]);
|
|
||||||
const [currentRealm, setCurrentRealm] = useState("Master");
|
|
||||||
|
|
||||||
const getRealms = async () => {
|
|
||||||
return await httpClient
|
|
||||||
?.doGet("/admin/realms")
|
|
||||||
.then((r) => r.data as Realm[]);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
|
||||||
getRealms().then((result) => {
|
const [open, setOpen] = useState(false);
|
||||||
setRealms(result || []);
|
const history = useHistory();
|
||||||
});
|
const [currentRealm, setCurrentRealm] = useState(realm);
|
||||||
}, []);
|
|
||||||
|
|
||||||
const dropdownItems = realms.map((r) => (
|
const dropdownItems = realmList.map((r) => (
|
||||||
<DropdownItem
|
<DropdownItem
|
||||||
component="a"
|
|
||||||
href={"/#/realms/" + r.id}
|
|
||||||
key={r.id}
|
key={r.id}
|
||||||
onClick={() => setCurrentRealm(r.realm)}
|
onClick={() => {
|
||||||
|
setCurrentRealm(r.realm);
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
|
{r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
|
|
|
||||||
|
|
@ -1,587 +1,3 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`renders realm selector 1`] = `
|
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>"`;
|
||||||
<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>
|
|
||||||
`;
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,8 @@ type ScrollFormProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
|
export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
|
||||||
|
const [active, setActive] = useState(sections[0]);
|
||||||
|
useEffect(() => {
|
||||||
const getCurrentSection = () => {
|
const getCurrentSection = () => {
|
||||||
for (let sectionName of sections) {
|
for (let sectionName of sections) {
|
||||||
const section = document.getElementById(sectionName)!;
|
const section = document.getElementById(sectionName)!;
|
||||||
|
|
@ -24,15 +26,13 @@ export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const [active, setActive] = useState(sections[0]);
|
|
||||||
useEffect(() => {
|
|
||||||
window.addEventListener("scroll", () => {
|
window.addEventListener("scroll", () => {
|
||||||
const active = getCurrentSection();
|
const active = getCurrentSection();
|
||||||
if (active) {
|
if (active) {
|
||||||
setActive(active);
|
setActive(active);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, [active]);
|
}, [active, sections]);
|
||||||
|
|
||||||
const Nav = () => (
|
const Nav = () => (
|
||||||
<div className={style.sticky}>
|
<div className={style.sticky}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue