156 lines
3.7 KiB
TypeScript
156 lines
3.7 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import styled, { css } from 'styled-components/macro';
|
|
|
|
const InputWrapper = styled.div<{ width: string }>`
|
|
position: relative;
|
|
width: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
position: relative;
|
|
justify-content: center;
|
|
|
|
margin-bottom: 2.2rem;
|
|
margin-top: 24px;
|
|
`;
|
|
|
|
const InputLabel = styled.span<{ width: string }>`
|
|
width: ${props => props.width};
|
|
padding: 0.7rem !important;
|
|
color: #c2c6dc;
|
|
left: 0;
|
|
top: 0;
|
|
transition: all 0.2s ease;
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
font-size: 0.85rem;
|
|
cursor: text;
|
|
font-size: 12px;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
|
|
const InputInput = styled.input<{
|
|
hasValue: boolean;
|
|
hasIcon: boolean;
|
|
width: string;
|
|
focusBg: string;
|
|
borderColor: string;
|
|
}>`
|
|
width: ${props => props.width};
|
|
font-size: 14px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-color: ${props => props.borderColor};
|
|
background: #262c49;
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
|
|
${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
|
|
line-height: 16px;
|
|
color: #c2c6dc;
|
|
position: relative;
|
|
border-radius: 5px;
|
|
transition: all 0.3s ease;
|
|
&:focus {
|
|
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
|
|
border: 1px solid rgba(115, 103, 240);
|
|
background: ${props => props.focusBg};
|
|
}
|
|
&:focus ~ ${InputLabel} {
|
|
color: rgba(115, 103, 240);
|
|
transform: translate(-3px, -90%);
|
|
}
|
|
${props =>
|
|
props.hasValue &&
|
|
css`
|
|
& ~ ${InputLabel} {
|
|
color: rgba(115, 103, 240);
|
|
transform: translate(-3px, -90%);
|
|
}
|
|
`}
|
|
`;
|
|
|
|
const Icon = styled.div`
|
|
display: flex;
|
|
left: 16px;
|
|
position: absolute;
|
|
`;
|
|
|
|
type ControlledInputProps = {
|
|
variant?: 'normal' | 'alternate';
|
|
label?: string;
|
|
width?: string;
|
|
floatingLabel?: boolean;
|
|
placeholder?: string;
|
|
icon?: JSX.Element;
|
|
type?: string;
|
|
autocomplete?: boolean;
|
|
autoFocus?: boolean;
|
|
id?: string;
|
|
name?: string;
|
|
className?: string;
|
|
defaultValue?: string;
|
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
value?: string;
|
|
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
|
};
|
|
|
|
const ControlledInput = ({
|
|
width = 'auto',
|
|
variant = 'normal',
|
|
type = 'text',
|
|
autocomplete,
|
|
autoFocus = false,
|
|
label,
|
|
placeholder,
|
|
icon,
|
|
name,
|
|
className,
|
|
onChange,
|
|
value,
|
|
onClick,
|
|
floatingLabel = false,
|
|
defaultValue,
|
|
id,
|
|
}: ControlledInputProps) => {
|
|
const $input = useRef<HTMLInputElement>(null);
|
|
const [hasValue, setHasValue] = useState(false);
|
|
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
|
|
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
|
|
useEffect(() => {
|
|
if (autoFocus && $input && $input.current) {
|
|
$input.current.focus();
|
|
}
|
|
}, []);
|
|
return (
|
|
<InputWrapper className={className} width={width}>
|
|
<InputInput
|
|
hasValue={hasValue}
|
|
onChange={e => {
|
|
if (onChange) {
|
|
setHasValue(e.currentTarget.value !== '' || floatingLabel);
|
|
onChange(e);
|
|
}
|
|
}}
|
|
value={value}
|
|
id={id}
|
|
type={type}
|
|
name={name}
|
|
ref={$input}
|
|
onClick={onClick}
|
|
autoComplete={autocomplete ? 'on' : 'off'}
|
|
defaultValue={defaultValue}
|
|
hasIcon={typeof icon !== 'undefined'}
|
|
width={width}
|
|
placeholder={placeholder}
|
|
focusBg={focusBg}
|
|
borderColor={borderColor}
|
|
/>
|
|
{label && <InputLabel width={width}>{label}</InputLabel>}
|
|
<Icon>{icon && icon}</Icon>
|
|
</InputWrapper>
|
|
);
|
|
};
|
|
|
|
export default ControlledInput;
|