|
1 | 1 | import { Children, PropsWithChildren } from "react" |
2 | 2 |
|
3 | 3 | export interface CondProps { |
4 | | - condition: boolean |
| 4 | + condition?: boolean |
5 | 5 | } |
6 | 6 |
|
7 | 7 | /** |
8 | 8 | * Wrapper component that attaches a condition to a child component so that ChooseOne can |
9 | | - * determine which child to render. The last Cond in a ChooseOne is the fallback case; set |
10 | | - * its `condition` to `true` to avoid confusion. |
11 | | - * @param condition boolean expression indicating whether the child should be rendered |
| 9 | + * determine which child to render. The last Cond in a ChooseOne is the fallback case and |
| 10 | + * should not have a condition. |
| 11 | + * @param condition boolean expression indicating whether the child should be rendered, or undefined |
12 | 12 | * @returns child. Note that Cond alone does not enforce the condition; it should be used inside ChooseOne. |
13 | 13 | */ |
14 | | -// eslint-disable-next-line @typescript-eslint/no-unused-vars |
15 | | -export const Cond = ({ children, condition }: PropsWithChildren<CondProps>): JSX.Element => { |
| 14 | +export const Cond = ({ children }: PropsWithChildren<CondProps>): JSX.Element => { |
16 | 15 | return <>{children}</> |
17 | 16 | } |
18 | 17 |
|
19 | 18 | /** |
20 | 19 | * Wrapper component for rendering exactly one of its children. Wrap each child in Cond to associate it |
21 | 20 | * with a condition under which it should be rendered. If no conditions are met, the final child |
22 | 21 | * will be rendered. |
23 | | - * @returns one of its children |
| 22 | + * @returns one of its children, or null if there are no children |
| 23 | + * @throws an error if its last child has a condition prop, or any non-final children do not have a condition prop |
24 | 24 | */ |
25 | | -export const ChooseOne = ({ children }: PropsWithChildren): JSX.Element => { |
| 25 | +export const ChooseOne = ({ children }: PropsWithChildren): JSX.Element | null => { |
26 | 26 | const childArray = Children.toArray(children) as JSX.Element[] |
27 | | - const chosen = childArray.find((child) => child.props.condition) |
28 | | - return chosen ?? childArray[childArray.length - 1] |
| 27 | + if (childArray.length === 0) { |
| 28 | + return null |
| 29 | + } |
| 30 | + const conditionedOptions = childArray.slice(0, childArray.length - 1) |
| 31 | + const defaultCase = childArray[childArray.length - 1] |
| 32 | + if (defaultCase.props.condition !== undefined) { |
| 33 | + throw new Error( |
| 34 | + "The last Cond in a ChooseOne was given a condition prop, but it is the default case.", |
| 35 | + ) |
| 36 | + } |
| 37 | + if (conditionedOptions.some((cond) => cond.props.condition === undefined)) { |
| 38 | + throw new Error("A non-final Cond in a ChooseOne does not have a condition prop.") |
| 39 | + } |
| 40 | + const chosen = conditionedOptions.find((child) => child.props.condition) |
| 41 | + return chosen ?? defaultCase |
29 | 42 | } |
0 commit comments