@superlogica/input NPM

COMPONENT INPUT

Esse package contém o componente input da Superlógica para web/desktop, seguindo nossos Tokens e padrões.

Instalação:

npm install @superlogica/input

Props

Nenhuma das props abaixo são obrigatórias, mas caso a props icon não seja declarada, nada será renderizado e em caso de alguma das outras props receber um valor inválido, o valor default daquela props será utilizado.

Props	Type	Default
`bgColor`	`String`	`null`	deve conter o Token da cor que você deseja como fundo do input, acesse os tokens de cor
`dark`	`boolean`	`false`	altera as cores do input para tons mais claros quando dark recebe true.
`icon`	`String`	`null`	deve receber o nome do ícone desejado, lista de ícones.
`type`	`String`	`text`	aceita os valores text, password e number.
`label`	`String`	`Informe o label`	label do input.
`marginTop`	`String`	`none`	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
`marginRight`	`String`	`none`	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
`marginBottom`	`String`	`md`	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
`marginLeft`	`String`	`none`	aceita os tamanhos de margin encontrados na documentação, ex: lg, md, sm.
`message`	`String`	`null`	mensagem de erro, caso alguma validação do input retorno erro.
`name`	`String`	`null`	nome do input.
`status`	`String/callback`	`0`	deve receber success ou error para sinalizar se o campo está correto ou não após uma validação.
`valor`	`String`	`null`	valor do input.
`borderColor`	`String`	`null`	deve conter o Token da cor que você deseja como borda do input, acesse os tokens de cor
`textColor`	`String`	`null`	deve conter o Token da cor que você deseja como texto do input, acesse os tokens de cor
`floatingMessage`	`boolean`	`false`	caso seja verdadeiro, mensagem de erro se torna flutuante.

Uso

Você pode criar uma const para as props de cada input:

import Icon from '@superlogica/input';

...
    const [name, setName] = useState({
        name: {
        value: "", 
        status: "", 
        message: "O Campo não pode estar em branco",
        icon: "User",
        name: "Nome",
        label: "Informe seu nome"
    });

    const handleName = event => {
        const value = event.target.value;
        setName({value:value});
    }

    const handleFocus = event => {
        const name = event.target.name;
        dataForm[name].status = "";
        setStateForm({...stateForm, ...dataForm});
    }

    return (
            <Input  {....name}
                    onChange={handleChange} 
                    onFocus={handleFocus}/>

Ou declarar as props diretamente no component.

            <Input  label="Informe o nome" 
                    icon="user"
                    name="nome"
                    onChange={handleChange} 
                    onFocus={handleFocus}/>
    );
    ...