Add ReadAll functionality
This commit is contained in:
parent
ffbfdac772
commit
1a203f4f4f
|
@ -1,106 +1,140 @@
|
||||||
import React, { ReactNode, ComponentType } from "react";
|
import React, { ReactNode, ComponentType } from "react";
|
||||||
import styles from "./OrganizedContent.module.css";
|
import styles from "./OrganizedContent.module.css";
|
||||||
|
|
||||||
export interface LinkProps {
|
export interface LinkProps {
|
||||||
children: string | ReactNode | (string | ReactNode)[]
|
children: string | ReactNode | (string | ReactNode)[];
|
||||||
url: string
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Link = ComponentType<LinkProps>
|
type Link = ComponentType<LinkProps>;
|
||||||
|
|
||||||
|
interface Heading {
|
||||||
interface Heading {
|
name: string;
|
||||||
name: string;
|
url: string;
|
||||||
url: string;
|
content: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
headings: Heading[];
|
headings: Heading[];
|
||||||
currentIndex: number;
|
currentIndex: number;
|
||||||
link: Link
|
link: Link;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const OrganizedContent: React.FC<Props> = ({
|
export const OrganizedContent: React.FC<Props> = ({
|
||||||
headings,
|
headings,
|
||||||
currentIndex,
|
currentIndex,
|
||||||
children,
|
children,
|
||||||
link: Link,
|
link: Link,
|
||||||
}) => {
|
}) => {
|
||||||
const isReadAll = headings[currentIndex].name === "Read All"
|
const isReadAll = headings[currentIndex].name === "Read All";
|
||||||
const prevHeading = currentIndex > 0 && headings[currentIndex - 1].name !== "Read All" ? headings[currentIndex - 1] : undefined;
|
const prevHeading =
|
||||||
const nextHeading =
|
currentIndex > 0 && headings[currentIndex - 1].name !== "Read All"
|
||||||
currentIndex < headings.length - 1 && !isReadAll ? headings[currentIndex + 1] : undefined;
|
? headings[currentIndex - 1]
|
||||||
|
: undefined;
|
||||||
return (
|
const nextHeading =
|
||||||
<div className={styles.organizedContent}>
|
currentIndex < headings.length - 1 && !isReadAll
|
||||||
<div className={styles.nav}>
|
? headings[currentIndex + 1]
|
||||||
{headings.map((heading, index) => (
|
: undefined;
|
||||||
<div className={index === currentIndex ? styles.selectedHeadingArea : ''} key={heading.url}>
|
|
||||||
<div className={styles.navOption + ' ' + (index === currentIndex ? styles.selectedHeading :
|
return (
|
||||||
heading.name === "Read All" ? styles.readAll : '')}
|
<div className={styles.organizedContent}>
|
||||||
>
|
<div className={styles.nav}>
|
||||||
<Link url={heading.url}>{heading.name}</Link>
|
{headings.map((heading, index) => (
|
||||||
</div>
|
<div
|
||||||
<div className={styles.divider}></div>
|
className={index === currentIndex ? styles.selectedHeadingArea : ""}
|
||||||
</div>
|
key={heading.url}
|
||||||
))}
|
>
|
||||||
</div>
|
<div
|
||||||
|
className={
|
||||||
<div>
|
styles.navOption +
|
||||||
{!isReadAll &&
|
" " +
|
||||||
<h2 className={styles.contentHeading}>{headings[currentIndex].name}</h2>}
|
(index === currentIndex
|
||||||
{children}
|
? styles.selectedHeading
|
||||||
<div className={styles.footer}>
|
: heading.name === "Read All"
|
||||||
{prevHeading && (
|
? styles.readAll
|
||||||
<div className={styles.clickable}>
|
: "")
|
||||||
<Link url={prevHeading.url}>
|
}
|
||||||
<div className={styles.footerSection}>
|
>
|
||||||
<svg
|
<Link url={heading.url}>{heading.name}</Link>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</div>
|
||||||
width="14"
|
<div className={styles.divider}></div>
|
||||||
height="9"
|
</div>
|
||||||
viewBox="0 0 14 9"
|
))}
|
||||||
className={styles.arrow + ' ' + styles.prevArrow}
|
</div>
|
||||||
>
|
|
||||||
<path
|
<div>
|
||||||
d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
|
{!isReadAll ? (
|
||||||
/>
|
<h2 className={styles.contentHeading}>
|
||||||
</svg>
|
{headings[currentIndex].name}
|
||||||
<div>
|
</h2>
|
||||||
<div className={styles.prevNext}>Previous</div>
|
) : (
|
||||||
<div className={styles.arrowHeading}>{prevHeading.name}</div>
|
<div>
|
||||||
</div>
|
{headings
|
||||||
</div>
|
.filter(
|
||||||
</Link>
|
(heading: { name: string }) => heading.name !== "Read All"
|
||||||
</div>
|
)
|
||||||
)}
|
.map((heading) => (
|
||||||
<div></div>
|
<div key={heading.url}>
|
||||||
{nextHeading && (
|
<h2 className={styles.contentHeading}>{heading.name}</h2>
|
||||||
<div className={styles.clickable}>
|
{heading.content}
|
||||||
<Link url={nextHeading.url}>
|
</div>
|
||||||
<div className={styles.footerSection}>
|
))}
|
||||||
<div>
|
</div>
|
||||||
<div className={styles.prevNext + ' ' + styles.nextText}>Next</div>
|
)}
|
||||||
<div className={styles.arrowHeading}>{nextHeading.name}</div>
|
{children}
|
||||||
</div>
|
<div className={styles.footer}>
|
||||||
<svg
|
{prevHeading && (
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<div className={styles.clickable}>
|
||||||
width="14"
|
<Link url={prevHeading.url}>
|
||||||
height="9"
|
<div className={styles.footerSection}>
|
||||||
viewBox="0 0 14 9"
|
<svg
|
||||||
className={styles.arrow + ' ' + styles.nextArrow}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
width="14"
|
||||||
<path
|
height="9"
|
||||||
d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
|
viewBox="0 0 14 9"
|
||||||
/>
|
className={styles.arrow + " " + styles.prevArrow}
|
||||||
</svg>
|
>
|
||||||
</div>
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||||
</Link>
|
</svg>
|
||||||
</div>
|
<div>
|
||||||
)}
|
<div className={styles.prevNext}>Previous</div>
|
||||||
</div>
|
<div className={styles.arrowHeading}>
|
||||||
</div>
|
{prevHeading.name}
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
};
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div></div>
|
||||||
|
{nextHeading && (
|
||||||
|
<div className={styles.clickable}>
|
||||||
|
<Link url={nextHeading.url}>
|
||||||
|
<div className={styles.footerSection}>
|
||||||
|
<div>
|
||||||
|
<div className={styles.prevNext + " " + styles.nextText}>
|
||||||
|
Next
|
||||||
|
</div>
|
||||||
|
<div className={styles.arrowHeading}>
|
||||||
|
{nextHeading.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="14"
|
||||||
|
height="9"
|
||||||
|
viewBox="0 0 14 9"
|
||||||
|
className={styles.arrow + " " + styles.nextArrow}
|
||||||
|
>
|
||||||
|
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -116,7 +116,6 @@ export function OrganizedContentDemo() {
|
||||||
{
|
{
|
||||||
name: "Consequences of Unacceptable Behavior",
|
name: "Consequences of Unacceptable Behavior",
|
||||||
url: "d",
|
url: "d",
|
||||||
key: "d",
|
|
||||||
content: <div> CODEY </div>,
|
content: <div> CODEY </div>,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -124,8 +123,7 @@ export function OrganizedContentDemo() {
|
||||||
const readAllSection = {
|
const readAllSection = {
|
||||||
name: "Read All",
|
name: "Read All",
|
||||||
url: "readall",
|
url: "readall",
|
||||||
key: "readall",
|
content: <div> </div>,
|
||||||
content: <div> CODEY FAN CLUB </div>,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
sections = [readAllSection, ...sections];
|
sections = [readAllSection, ...sections];
|
||||||
|
|
Loading…
Reference in New Issue