Skip to content

web: usage of the conditional Wildcard component generic

Administrator requested to merge vb/codemonitorslack-conditionalbutton into jp/codemonitorslack-conditionalbutton

Created by: valerybugakov

Context

Reported issue in Slack:

I can't use conditional as in Card component (using as={Button} or as="div" works fine). This is the error I get:

The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined; }, "as"> & CardProps & { as?: "div" | undefined; }'

Changes

  1. The ForwardReferenceComponent helper is changed to allow passing generic props that would be used instead of the component own prop types. It's a copy-paste from this PR: https://github.com/sourcegraph/sourcegraph/pull/30096.
  2. The conditional as value is extracted into a variable for reusability:
const divOrButton = completed ? 'div' : Button
type DivOrButton = typeof divOrButton
  1. Then it's used to pass the right generic type to the Card component:
<Card<DivOrButton, React.ComponentProps<DivOrButton>>
  as={divOrButton}
>
  <div />
</Card>

Merge request reports