@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
26 lines • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Grid, GridItem, JumpLinks, JumpLinksItem, PageSection, } from "@patternfly/react-core";
import { Fragment, useMemo } from "react";
import { FormPanel } from "../../ui-shared/scroll-form/FormPanel";
import { ScrollPanel } from "../../ui-shared/scroll-form/ScrollPanel";
import style from "@keycloakify/keycloak-admin-ui/ui-shared/scroll-form/scroll-form.module.css";
export const mainPageContentId = "kc-main-content-page-container";
const spacesToHyphens = (string) => {
return string.replace(/\s+/g, "-");
};
export const ScrollForm = ({ label, sections, borders = false, ...rest }) => {
const shownSections = useMemo(() => sections.filter(({ isHidden }) => !isHidden), [sections]);
return (_jsxs(Grid, { hasGutter: true, ...rest, children: [_jsx(GridItem, { md: 8, sm: 12, children: shownSections.map(({ title, panel }) => {
const scrollId = spacesToHyphens(title.toLowerCase());
return (_jsx(Fragment, { children: borders ? (_jsx(FormPanel, { scrollId: scrollId, title: title, className: style.panel, children: panel })) : (_jsx(ScrollPanel, { scrollId: scrollId, title: title, children: panel })) }, title));
}) }), _jsx(GridItem, { md: 4, sm: 12, order: { default: "-1", md: "1" }, children: _jsx(PageSection, { className: style.sticky, children: _jsx(JumpLinks, { isVertical: true,
// scrollableSelector has to point to the id of the element whose scrollTop changes
// to scroll the entire main section, it has to be the pf-v5-c-page__main
scrollableSelector: `#${mainPageContentId}`, label: label, offset: 100, children: shownSections.map(({ title }) => {
const scrollId = spacesToHyphens(title.toLowerCase());
return (
// note that JumpLinks currently does not work with spaces in the href
_jsx(JumpLinksItem, { href: `#${scrollId}`, "data-testid": `jump-link-${scrollId}`, children: title }, title));
}) }) }) })] }));
};
//# sourceMappingURL=ScrollForm.js.map