1
0
Fork 0
food-site/src/foodItems.tsx
2022-06-02 19:28:51 +01:00

73 lines
1.7 KiB
TypeScript

import { Component, JSX } from "preact"
import { FoodExcludeTypes } from "./types";
export const FoodItemsContainer = (props: {
children: JSX.Element | JSX.Element[] | null
title: string,
extra?: string,
}): JSX.Element => {
return (
<div>
<h2>{props.title}</h2>
{props.extra && <p>{props.extra}</p>}
<div class="list-group" role="list">
{props.children}
</div>
</div>
);
}
function shouldShowItem(contents, exclude: FoodExcludeTypes): boolean {
if (!exclude) return false;
for (let key of Object.keys(exclude)) {
if (Object.keys(contents).includes(key)) {
if (!exclude[key]) return false;
}
}
return true;
}
type BaseFoodItemProps = {
contents?: Partial<FoodExcludeTypes>,
exclude?: FoodExcludeTypes,
}
const HideIfFoodExcluded = (props: BaseFoodItemProps & { children: JSX.Element }) => {
if (!props.contents) {
return props.children;
} else if (shouldShowItem(props.contents, props.exclude)) {
return props.children;
} else {
return <></>;
}
}
type FoodItemProps = BaseFoodItemProps & {
title: string,
};
export class FoodItem extends Component<FoodItemProps> {
render() {
return (
<HideIfFoodExcluded {...this.props}>
<div class="list-group-item" role="listitem">
<p class="mb-1 h5">{this.props.title}</p>
</div>
</HideIfFoodExcluded>
)
}
}
export class AdvancedFoodItem extends Component<FoodItemProps & { extra: string }> {
render() {
return (
<HideIfFoodExcluded {...this.props}>
<div class="list-group-item" role="listitem">
<dt class="mb-1 h5">{this.props.title}</dt>
<dd class="mb-1">{this.props.extra}</dd>
</div>
</HideIfFoodExcluded>
)
}
}