60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
import { Icon } from 'ts/components/icon';
|
|
|
|
interface InputProps {
|
|
className?: string;
|
|
name?: string;
|
|
width?: string;
|
|
type?: string;
|
|
value?: string;
|
|
defaultValue?: string;
|
|
placeholder?: string;
|
|
onChange?: (e: React.ChangeEvent) => void;
|
|
}
|
|
|
|
export const Input = React.forwardRef((props: InputProps, ref?: React.Ref<HTMLInputElement>) => {
|
|
const { name, type, placeholder, defaultValue, onChange, width, className, value } = props;
|
|
const componentType = type === 'textarea' ? 'textarea' : 'input';
|
|
const inputProps = { name, type };
|
|
|
|
return (
|
|
<InputWrapper className={className} width={width}>
|
|
<Icon size={18} name="search" />
|
|
<StyledInput
|
|
as={componentType}
|
|
ref={ref}
|
|
value={value}
|
|
id={`input-${name}`}
|
|
placeholder={placeholder}
|
|
defaultValue={defaultValue}
|
|
onChange={onChange}
|
|
{...inputProps}
|
|
/>
|
|
</InputWrapper>
|
|
);
|
|
});
|
|
|
|
const StyledInput = styled.input`
|
|
appearance: none;
|
|
border: none;
|
|
color: #000;
|
|
font-size: 22px;
|
|
padding: 10px 12px 9px;
|
|
outline: none;
|
|
width: 100%;
|
|
min-height: ${props => props.type === 'textarea' && `120px`};
|
|
|
|
&::placeholder {
|
|
color: #c3c3c3;
|
|
}
|
|
`;
|
|
|
|
const InputWrapper = styled.div<InputProps>`
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: ${props => props.width || '100%'};
|
|
border-bottom: 1px solid #d5d5d5;
|
|
`;
|