Dropdown button

Props componente

Para los elementos del componente se utiliza la siguiente estructura:

// Props Componente
interface SelectDropdownProps {
  items: ListItem[];
  title?: string;
  onClick: (item: ListItem) => void;
  placeholder?: string;
  end?: boolean;
}

• onClick: Función que se ejecutará al clickear en un elemento del dropdown y toma como parámetro el elemento escogido.
• end: Prop opcional para indicar el lado para el que se desplegará el dropdown.

Props Item

// Props Items
interface ListItem {
  id: number;
  value: string;
  label?: string;
  hrEnabled?: boolean;
}

• label: El label es opcional, en caso de que un item no tenga label, entonces se mostrará el "value" en el dropdown.
• hrEnabled: Se utiliza para agregar una linea separadora entre los elementos, si es true, entonces se añadirá, si se omite o es false, entonces no lo hará.

Ejemplo de implementación

const data = [
  {
    id: 0,
    label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    hrEnabled: true,
    value: "valueTest",
  },
  { id: 1, value: "test", label: "test" },
];

const onClickItem = (item: ListItem) => {
  // Acción a realizar con el Item
  console.log(item)
}

render (
...
  <DropdownButton 
    items={data}
    onClick={onClickItem}
    placeholder={t("newVulnerability")}
  />
...
)

Ejemplo de implementación (con el prop end)