analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 2.56 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/MaskedInput/MaskedInput.tsx"],"sourcesContent":["import { ChangeEvent, ComponentProps, forwardRef } from 'react';\nimport Input from '../Input/Input';\nimport { MASK_TYPE, applyInputMask } from '../../utils/brazilianFormatters';\n\ntype InputProps = ComponentProps<typeof Input>;\n\n/**\n * Props do MaskedInput.\n *\n * Extende as props do `Input` adicionando o `mask` que identifica o tipo de\n * mascara a aplicar (CNPJ, CPF, Telefone ou CEP).\n *\n * O tipo de `value` e estreitado para `string | undefined` porque as mascaras\n * sao operacoes de string — aceitar `number` ou `readonly string[]` (do\n * `InputHTMLAttributes`) levaria a comportamento inconsistente.\n */\nexport type MaskedInputProps = {\n /** Tipo da mascara a ser aplicada */\n mask: MASK_TYPE;\n /** Valor mascarado (string). Pode ser passado cru ou ja mascarado (idempotente). */\n value?: string;\n} & Omit<InputProps, 'value'>;\n\n/**\n * MaskedInput - wrapper do Input com mascara progressiva aplicada\n * automaticamente no onChange.\n *\n * O valor recebido pelo consumidor no `onChange` ja vem com a mascara aplicada.\n * Alem disso, se um `value` controlado for passado \"cru\" (sem mascara), o\n * componente formata para exibicao. Como as mascaras sao idempotentes,\n * repassar o valor mascarado tambem funciona.\n *\n * @example\n * ```tsx\n * <MaskedInput\n * label=\"CNPJ\"\n * mask={MASK_TYPE.CNPJ}\n * variant=\"rounded\"\n * placeholder=\"00.000.000/0000-00\"\n * value={cnpj}\n * onChange={(e) => setCnpj(e.target.value)}\n * />\n * ```\n */\nconst MaskedInput = forwardRef<HTMLInputElement, MaskedInputProps>(\n ({ mask, value, onChange, ...rest }, ref) => {\n const maskedValue =\n value === undefined ? undefined : applyInputMask(value, mask);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n event.target.value = applyInputMask(event.target.value, mask);\n onChange?.(event);\n };\n\n return (\n <Input ref={ref} value={maskedValue} onChange={handleChange} {...rest} />\n );\n }\n);\n\nMaskedInput.displayName = 'MaskedInput';\n\nexport default MaskedInput;\n"],"mappings":";;;;;;;;AAAA,SAAsC,kBAAkB;AAuDlD;AAXN,IAAM,cAAc;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,UAAU,GAAG,KAAK,GAAG,QAAQ;AAC3C,UAAM,cACJ,UAAU,SAAY,SAAY,eAAe,OAAO,IAAI;AAE9D,UAAM,eAAe,CAAC,UAAyC;AAC7D,YAAM,OAAO,QAAQ,eAAe,MAAM,OAAO,OAAO,IAAI;AAC5D,iBAAW,KAAK;AAAA,IAClB;AAEA,WACE,oBAAC,iBAAM,KAAU,OAAO,aAAa,UAAU,cAAe,GAAG,MAAM;AAAA,EAE3E;AACF;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;","names":[]}