80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import React, { Children, Fragment } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Grid,
|
|
GridItem,
|
|
GridProps,
|
|
JumpLinks,
|
|
JumpLinksItem,
|
|
PageSection,
|
|
} from "@patternfly/react-core";
|
|
|
|
import { mainPageContentId } from "../../App";
|
|
import { ScrollPanel } from "./ScrollPanel";
|
|
import { FormPanel } from "./FormPanel";
|
|
|
|
import "./scroll-form.css";
|
|
|
|
type ScrollFormProps = GridProps & {
|
|
sections: string[];
|
|
borders?: boolean;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
const spacesToHyphens = (string: string): string => {
|
|
return string.replace(/\s+/g, "-");
|
|
};
|
|
|
|
export const ScrollForm = ({
|
|
sections,
|
|
borders = false,
|
|
children,
|
|
...rest
|
|
}: ScrollFormProps) => {
|
|
const { t } = useTranslation("common");
|
|
|
|
const nodes = Children.toArray(children);
|
|
return (
|
|
<Grid hasGutter {...rest}>
|
|
<GridItem span={8}>
|
|
{sections.map((cat, index) => (
|
|
<Fragment key={cat}>
|
|
{!borders && (
|
|
<ScrollPanel scrollId={spacesToHyphens(cat)} title={cat}>
|
|
{nodes[index]}
|
|
</ScrollPanel>
|
|
)}
|
|
{borders && (
|
|
<FormPanel
|
|
scrollId={spacesToHyphens(cat)}
|
|
title={cat}
|
|
className="kc-form-panel__panel"
|
|
>
|
|
{nodes[index]}
|
|
</FormPanel>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</GridItem>
|
|
<GridItem span={4}>
|
|
<PageSection className="kc-scroll-form--sticky">
|
|
<JumpLinks
|
|
isVertical
|
|
// 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-c-page__main
|
|
scrollableSelector={`#${mainPageContentId}`}
|
|
label={t("jumpToSection")}
|
|
offset={100}
|
|
>
|
|
{sections.map((cat) => (
|
|
// note that JumpLinks currently does not work with spaces in the href
|
|
<JumpLinksItem key={cat} href={`#${spacesToHyphens(cat)}`}>
|
|
{cat}
|
|
</JumpLinksItem>
|
|
))}
|
|
</JumpLinks>
|
|
</PageSection>
|
|
</GridItem>
|
|
</Grid>
|
|
);
|
|
};
|