[#0019] Implementação de máscaras

[drisabelles]

• CEP
• Telefone
• Data (caso não implemente nativo)
• Hora (caso não implemente nativo)

[MariaGabrielaReis]

Documentação

Foram criadas várias funções para formatação do valor do input e centralizado numa função chamada formatInput, que recebe o valor do input e também seu tipo (que pode ser CEP, telefone, data ou hora).

Tecnologias: React Native, Expo

https://user-images.githubusercontent.com/69374340/236828694-e40ab18e-49fd-424c-8744-56351d203a63.mp4

Função que formata o valor do input

export function formatInput(
  value: string,
  mask: "CEP" | "date" | "phone" | "hour",
) {
  if (mask === `CEP`) return cepMask(value);
  if (mask === `phone`) return phoneMask(value);
  if (mask === `date`) return dateMask(value);
  if (mask === `hour`) return hourMask(value);
  return value;
}

Funções formatadoras para cada tipo de input

export function cepMask(value: string) {
  return value.replace(/\D/g, "").replace(/^(\d{5})(\d{3})+?$/, "$1-$2");
}

export function dateMask(value: string) {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{2})(\d)/, "$1/$2")
    .replace(/(\d{2})(\d)/, "$1/$2")
    .replace(/(\d{4})(\d)/, "$1");
}

export function hourMask(value: string) {
  return value.replace(/\D/g, "").replace(/^(\d{2})(\d{2})+?$/, "$1:$2");
}

export function phoneMask(value: string) {
  return value
    .replace(/\D/g, "")
    .replace(/(\d{2})(\d)/, "($1) $2")
    .replace(/(\d{5})(\d{4})(\d)/, "$1-$2");
}

[gioliveirass]

mto bom