Omat komponentit ja tyypitykset

Esimerkkejä KDS-komponenttien ja niiden tyypitysten laajentamiseen sovelluksessa.

Yleistä

Usein käytetyt KDS-komponentit voi kääriä sovelluksessa omaan komponenttiin ja tarvittaessa hyödyntää myös komponenttien tyypityksiä.

Tämä helpottaa käyttöä ja ylläpitoa:

Versiopäivitykset helpottuvat muuttuvien proppien nimien tai arvojen osalta.
Komponentin käyttö on helpompaa ja komponenttirakennetta toistava koodi vähenee, kun samaa rakennetta ei tarvitse kopioida moneen paikkaan.
Komponentin propeille voi asettaa sopivat oletusarvot, jotka toimivat sovelluksen tarpeisiin.
Komponentin käyttöön liittyvän logiikan voi kääriä kyseiseen komponenttiin.
Komponentin voi tarvittaessa vaihtaa helpommin toiseen, ilman laajempaa refaktorointia.

Tyypitysten laajentaminen

Komponentin tyypitykset voi tuoda sovellukseen ja laajentaa niitä tarvittaessa oman komponentin tarpeisiin.

type ItemProps = {
  label: string;
} & DropdownMenuItemProps<ElementType>;

type Props = {
  icon?: React.JSX.Element;
  items: ItemProps[];
  heading: string;
  toggleLabel: string;
} & Omit<DropdownProps<"div">, "onClick" | "isOpen">;

Vaihtoehtoisesti voi käyttää Reactin ComponentProps-funktiota:

type ItemProps = React.ComponentProps<typeof DropdownMenuItem>;
type Props = React.ComponentProps<typeof Dropdown>;

KDS-komponentin kääriminen omaan komponenttiin

Esimerkki toteuttaa Dropdown-komponenttiin perustuvan HeaderDropdown-komponentin, joka yksinkertaistaa pudotusvalikon käyttöä.

function HeaderDropdown({ icon, items, heading, toggleLabel, ...attrs }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const handleClick = () => setIsOpen(!isOpen);

  return (
    <Dropdown isOpen={isOpen} onClick={handleClick} {...attrs}>
      <DropdownToggle as={MainBarAction} icon={icon}>
        {toggleLabel}
      </DropdownToggle>
      <DropdownMenu>
        <DropdownMenuGroupHeading>{heading}</DropdownMenuGroupHeading>
        <DropdownMenuGroup>
          {items.map(({ as, href, label, ...attrs }) => (
            <DropdownMenuItem as={as} key={href} href={href} {...attrs}>
              {label}
            </DropdownMenuItem>
          ))}
        </DropdownMenuGroup>
      </DropdownMenu>
    </Dropdown>
  );
}

export default HeaderDropdown;

Tämän jälkeen komponentin käyttö on yksinkertaisempaa ja sovelluskohtainen logiikka on helppo yksikkötestata.

<HeaderDropdown
  heading="Vaihda sivun kieli"
  icon={<IconUiGlobe />}
  items={[
    { to: "/", label: "Suomeksi" },
    { to: "/sv", label: "På svenska" },
    { to: "/en", label: "In English" },
  ]}
  toggleLabel="Suomi"
/>