Como criar um botão inteligente usando o React

Este é um conto de três botões e como uma desenvolvedora da Web que se afasta do design realizou seus sonhos de front-end.

Você deve saber antecipadamente que a maioria dos estilos aqui é Bootstrap padrão. Parece bom e é um produto interno, por isso não corrigimos algo que não está quebrado.

Nossa tarefa era criar uma interface fácil de entender para lidar com um registro. Nosso registro tem três partes - disponíveis, doentes ou vab. Não há muito estado para se comunicar uma vez, mas precisamos dessas cinco semanas em uma página.

Nota lateral: "VAB" é uma palavra sueca que se refere a ficar em casa com seu filho doente. Há uma diferença entre fazer isso e ficar doente aqui, tanto em salário quanto em folga!

Verificando um registro existente

A primeira etapa foi mostrar se o usuário tinha ou não um registro para o dia em questão. Como em todo projeto React que eu conheço, estávamos pegando uma lista de uma API (nossa) e iterando sobre ela. Como a API retornará uma lista de registros existentes e ignorará os dias sem registros, precisaremos configurar nossa própria matriz de dias.

Aqui está o nosso código para obter cinco semanas de dias:

export const dateArray = (numberOfDays, startDate) => {
  const day = momento (startDate);
  dias const = [];
  while (days.length 

Já escrevi sobre o Moment.js antes. Se você não estiver usando, entre na onda já! Isso torna o trabalho com datas estúpido e fácil, como aqui onde podemos chamar day.add (1, 'days') ou onde obtemos o dia da semana com momento (startDate) .day ().

Objetos de momento são mutáveis! Portanto, tenha cuidado em geral, mas aqui é ótimo, porque precisamos atualizar nossos dias e podemos fazê-lo com muito pouco código.

Nota lateral: os americanos naturalmente tornariam o sábado o último dia da semana - 6 - e o domingo o primeiro dia - 0. Mas não os suecos ou basicamente o resto do mundo. Para quase todo mundo que não é americano, a semana começa na segunda-feira. A programação pode ser muito estranhamente centrada na América.

Aqui você pode ver que estamos montando uma lista de datas, começando com startDate, e continuamos até chegar a numberOfDays, pulando fins de semana. Usaremos essa matriz para criar nossa lista de registros, para que possamos colocar alguns botões deliciosos nela.

Mapeando nossa matriz de dias para refletir registros reais

Agora que temos todos os dias que precisamos mostrar (abaixo chamamos dateArray), teremos que fazer um loop sobre o conjunto de dados da API para descobrir se devemos mostrar um registro ou não. Como queremos ver datas que não possuem registros, devemos configurar uma matriz com alguns registros preenchidos e alguns vazios:

const userRecords = dateArray (50, startDay) .map (date => {
  const recordToReturn = data.find (registro =>
    data.data === data
  );

  retornar {data, registro: recordToReturn};
});

Agora temos uma série de datas, algumas com registro completo e outras com registro: indefinido.

Lógica de botão disponível

Agora que podemos ver se há um registro nesse dia ou não, podemos condicionar nosso botão a ficar verde e dizer "Disponível" ou branco e "Adicionar". Novamente, estou usando o Reactstrap para obter um estilo básico. O componente Button é fornecido com espaçamento agradável, cantos arredondados e outros enfeites, além de parâmetros úteis de "cores" que eu posso definir para itens como "informações" e "sucesso".


  {this.state.buttonText}

Definir o texto do botão

Para definir o buttonText, verifico se há um registro:

const buttonText = () =>
  isEmpty (this.props.data.record)? 'Adicionar': 'Disponível'

Lembre-se de que estou passando {date: 'some date', registro: {some: 'record'}} em cada um dos componentes de meu botão. Se meus userRecords não encontrarem um registro para esse dia, não teremos nada em data.record e podemos dizer "Adicionar". IsEmpty vem da excelente biblioteca de Javascript. Mais uma vez, entre na onda. O Lodash torna o Javascript muito mais limpo e fácil de trabalhar.

Definindo a cor do botão

Nossa função setColor também verificará se o registro existe, mas será necessário examinar o estado do registro para ver qual cor precisamos exibir.

const setColor = () => {
  if (existingRecord && record.status === 'available') {
    retornar 'sucesso';
  } se if (existenteRecord)) {
    retornar 'cinza';
  } outro {
    retornar 'secundário';
  }
};

O padrão de inicialização é agradável. Substituímos essas palavras padrão por nossas próprias cores, mas as opções prontas para uso também são boas. Aqui verificamos se o registro está disponível. Se não estiver disponível, mas ainda houver um registro, ele deverá estar doente ou vab, mas, nos dois casos, o usuário não estará mais disponível nesse dia, portanto, teremos que esmaecer o botão.

Os botões coloridos demonstram quatro status.

Os outros dois botões

Posso usar a exibição condicional super útil do React para ocultar os botões "doente" e "vab" quando não há registro. Aqui está o código para os dois botões restantes:

{existingRecord && (
  
           Doente                 VAB        
)}

Para garantir que nossos botões estejam com as cores corretas, basta verificar se o registro tem o status "inválido" ou "vab", respectivamente. Se o status do registro não corresponder ao botão, garantiremos que ele não seja colorido (a cor do botão "secundário" é branca).

const setSecondaryColor = (registro, status) => {
  if (record.status! == status) {retornar 'secundário'}
  if (status === 'doente') {retorne 'perigo'}
  if (status === 'vab') {retorna 'amarelo'}
}

Ficando chique com rollovers

Nesse ponto, os botões fizeram tudo o que eu precisava que eles fizessem (além de toda a lógica de solicitação da API que estou omitindo nesta postagem - estamos criando e atualizando registros com esses botões).

Mas como uma garota pode ficar satisfeita com seus botões se não houver efeitos de sobreposição? De alguma forma, precisamos remover um registro por um dia. Em vez de criar um X e fazer com que nossos usuários cliquem nele, não seria melhor se eles pudessem clicar em um dos botões existentes para remover o registro? Eu pensei assim.

Adicionei os eventos onMouseOver e onMouseOut ao meu botão "Disponível" / "Adicionar":

const mouseOver = () => {
  if (existingRecord) {
    this.setState ({buttonText: 'Remove'});
  }
};
const mouseOut = () => this.setState ({buttonText: buttonText ()});

Agora, quando você passa o mouse sobre o botão, ele muda para "Remover" se um registro existir (e, caso contrário, permanecerá o mesmo). Quando você passa o mouse, ele volta a dizer "Disponível". Tão bonita, tão funcional!

Demonstração do mouse sobre a funcionalidade do botão

Fiquei surpreso com a quantidade de pensamento e esforço necessários para algo relativamente simples. Obter botões com a cor certa, o texto certo e fazer as coisas certas é mais complexo do que parece. Na verdade, eu mostrei esses botões para pessoas como meu marido, que apenas dão de ombros. É um fato da vida: ninguém vai gostar tanto dos seus botões quanto você.