Colocando uma Máscara no TextField em SwiftUI

Fala devs! Nesse post vamos falar da criação de uma máscara para o TextField usando o SwiftUI.

Só contextualizando uma mascará é quando você "obriga" o usuário a digitar exatamente aquilo que você quer nos seus textfields, usando exemplo bem comum é o campo de data de nascimento ou CPF onde você sabe exatamente a formatação do textfield e quantidade de caracteres necessário.

Vamos primeiramente criar nossa função que irá validar nossa mascará e ira remover os caracteres indesejados.

Nossa função recebe nossa String que será tratada:

• Primeiramente filtramos nossa string só por campos numéricos
• Depois pegamos nosso formato de máscara que pode ser ##/##/## ou ###.###.###-##, nesse exemplo adotamos esse formato para ficar genérico, no final do artigo explico como vocês podem implementar de outras formas.
• Por fim, percorremos nossa máscara e vamos adicionando nossos valores numéricos onde existe as # e onde não existe adicionamos os valores constantes da máscara

Com nossa função pronta vamos para nosso Textfield. Vamos usar a função onReceive onde precisamos passar um Publisher.

• Encapsulamos nosso text dentro do Just que é um publisher, disparado somente uma vez para cada subscribe, nesse exemplo seria o onReceive.
• Por fim atribuímos na nossa variável text o valor retornado pela função, como estamos usando o @Binding ou @State este textfield mudará de forma automática o conteúdo de texto.

Deixando nossa mascará de forma mais genérica

Desenvolvendo uma aplicação precisei criar vários campos de textos com as mais diversas máscaras possíveis, pensei em várias soluções para facilitar o reaproveitamento, como colocar na nossa função um atributo chamado mask para sabermos qual o tipo da máscara, porém sempre ao instanciar era necessário que o textfield conhecesse a função. A saída foi criar um protocol chamado mask onde temos o formato da máscara e nossa função para formatar, por fim criei uma extension com a implementação default dela:

Agora eu posso criar qualquer tipo de mascará implementando o protocolo por exemplo:

E para utilizar no textfield criei meu próprio textfield passando a mascará no init e chamando ela na função onReceive:

Como nossa máscara pode ser nil chamo o próprio text como valor default, assim não corremos o risco do nosso app quebrar.

Muito obrigado, e até o próximo artigo ;)

Pra quem quiser copiar o código, o link do gist: