Dropdown component

[DominMFD]

Closes #47

Feature

Criação do componente Dropdown.

Changelog

Componente Dropdown criado, o componente deverá receber um objeto contendo a propriedade items que deverá ser um array de objetos contendo as propriedades label e value e retornará o value da opção selecionada.

Visual evidences 🖼️

Checklist

• Issue linked
• Build working correctly
• Tests created

Additional info

1. Como usar o componente:

• Para inicializar o componente Dropdown, é bastante simples: basta importá-lo e instanciá-lo, passando um objeto como parâmetro que deve conter a propriedade items. Esta propriedade é um array de objetos com as propriedades label e value.

import Dropdown from '../components/Dropdown'; 

const dropdown = new Dropdown(object);

Um exemplo de objeto válido para o componente:

const object = {
    items: [
      {
        label: 'Raiva',
        value: 'raiva',
      },
      {
        label: 'Sono',
        value: 'sono',
      },
      {
        label: 'Castração',
        value: 'castracao',
      },
    ],
  };

Além de items, também é possível passar a propriedade label que será como um placeholder e a propriedade width para definir um tamanho para o componente. Essas duas propriedades recebem uma string como valor.

const object = {
    items: [...],
    label: 'Selecione',
    width: '200px',
  };

2. Métodos:
O componente possui um total de 2 métodos adicionais:

• addItem()
• removeItem()

addItem(): Esse método é responsável por adicionar um único item ao dropdown de forma programática. Ele recebe como parâmetro um objeto contendo as propriedades label e value, juntamente com seus respectivos valores.

dropdown.addItem(object);

removeItem(): Método responsável por remover um item do dropdown, assim como o addItem() ele recebe como parâmetro um um objeto contendo as propriedades 'label' e 'value', juntamente com seus respectivos valores.

dropdown.removeItem(object);

3. Pegando o valor selecionado:
Para pegar o valor selecionado do componente você deve estabelecer um ouvinte de eventos, que irá aguardar o evento 'select' ocorrer. Quando esse evento é acionado, a função callback é chamada, recebendo o valor selecionado como parâmetro

dropdown.listen('select', (valor) => {
    console.log(valor);
}

[Alecell]

Precisa atualizar a branch tambem!

[Alecell]

Não especificamos antes mas esse componente vai precisar de um label, algo tipo assim:

IMPORTANTE: Não é necessário que seu componente jogue a label lá pra cima, apenas precisamos do estado inicial da label.

Seu componente visualmente não representa o debug e isso não pode acontecer pois isso leva a comportamentos inesperados do seu componente e facilita o debugging no futuro.
Perceba que vemos o componente ir além do tamanho do container do pai dos elementos.

Outra coisa importante sobre seu componente, preciso saber se ele tem essa funcionalidade. Ele consegue receber uma classe que define um min-width e baseado nisso ele sempre fica nesse mínimo? Isso é importante

[Alecell]

Alguns ajustes que deixei passar antes!

[Alecell]

Duas coisinhas

[Alecell]

Uma coisa importante que faltou checar no componente é se a propriedade items existe

Muitos lugares usando comparação simples == ou !=. SEMPRE usar === ou !==.

Outra coisa que me pega aqui é o value ser usado como key, não sei se é o ideal, se uma pessoa tiver um value: '' a gente se ferrou. Acho que seria melhor o Map onde a chave é de fato uma chave e o value é o objeto label, value pra vc trabalhar com dados mais solidos. Usar o value como key é bem ruim

[Alecell]

Só não olhei os testes pq tem bastante alteração no componente

[Alecell]

Marca a box de "tests created"

[Alecell]

Do meu lado a batalha acabou!