www/components/lists.tsx

91 lines
2.4 KiB
TypeScript

import style from '../styles/lists.module.css';
import React, { ReactElement } from 'react';
interface listItem {
children?: listItem[] | string[];
url?: string;
title: string;
description?: string;
};
export function toListItem(record: Record<string, any>): listItem | null {
if (!record.title)
return null;
let children: listItem[] | string[] = [];
if (Array.isArray(record.children) && record.children.length) {
let lchildren: listItem[] = [];
let schildren: string[] = [];
for (const child of record.children) {
if (typeof child === 'string') {
schildren.push(child);
continue;
}
const lChild = toListItem(child);
if (lChild)
lchildren.push(lChild);
}
if (!lchildren.length) {
children = schildren;
}
else {
children = [...lchildren, ...schildren.map((s: string): listItem => {
return { title: s };
})];
}
}
return {
title: record.title,
url: record.url,
children: children.length ? children : undefined,
description: record.description,
};
}
export function mapChild(obj: listItem | string, level: number) {
if (typeof obj === 'string') {
if (obj === '')
return <></>
return <span className={style.listItem}>{obj}</span>
}
if (obj.title === '')
return <></>
const desc = obj.description
? <span className={style.listItemDesc}>{obj.description}</span>
: <></>;
if (obj.url)
return (
<>
<span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
{desc}
</>);
if (!obj.children)
return (
<>
<span className={style.listItem}>{obj.title}</span>
{desc}
</>);
let title: ReactElement;
if (level >= 0 && level <= 4)
title = React.createElement(`h${level + 2}`, {}, obj.title);
else
title = React.createElement('strong', {}, obj.title);
return (
<section className={level < 4 && `block ${style.block}` || ''}>
{title}
{obj.description ? <p className={style.desc}>{obj.description}</p> : <></>}
<div>
{obj.children.map(l => mapChild(l, level + 1))}
</div>
</section>
);
}