Replace status prop with checked in ToggleButton component

Aberta
  • Algo errado?
#4,866 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 11 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
50/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
frontend, mobile

Direção de pesquisa

Localize a implementação de ToggleButton e seus usos na base de código do react-native-paper e, em seguida, inspecione como a prop status atual é tipada e consumida. O trabalho estará concluído quando o componente e seus chamadores usarem consistentemente checked como booleano, em vez de valores de string para status.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

feature request

Is your feature request related to a problem? Please describe.
The ToggleButton component currently uses a status prop with string values checked | unchecked. This adds unnecessary complexity for a binary state.

Describe the solution you'd like
Replace the status prop with a boolean checked prop.

Before:

const ToggleButtonExample = () => {
  const [status, setStatus] = React.useState('checked');

  const onButtonToggle = () => {
    setStatus(status === 'checked' ? 'unchecked' : 'checked');
  };

  return (
    <ToggleButton
      icon="bluetooth"
      value="bluetooth"
      status={status}
      onPress={onButtonToggle}
    />
  );
};

After:

const ToggleButtonExample = () => {
  const [isChecked, setIsChecked] = React.useState(true);

  const onButtonToggle = () => {
    setIsChecked(s => !s);
  };

  return (
    <ToggleButton
      icon="bluetooth"
      value="bluetooth"
      checked={isChecked}
      onPress={onButtonToggle}
    />
  );
};

Additional context
A boolean checked prop is simpler, clearer, and more consistent with common React patterns than using string values like 'checked' and 'unchecked'.

Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
13d 16h
PRs com merge (30d)
5

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.