71 lines
1.7 KiB
TypeScript
71 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,
|
|
}): JSX.Element => {
|
|
return (
|
|
<div>
|
|
<h3>{props.title}</h3>
|
|
<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">
|
|
<p class="mb-1 h5">{this.props.title}</p>
|
|
<p class="mb-1">{this.props.extra}</p>
|
|
</div>
|
|
</HideIfFoodExcluded>
|
|
)
|
|
}
|
|
} |