65 lines
No EOL
1.6 KiB
TypeScript
65 lines
No EOL
1.6 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
type Props = {
|
|
placeholderText: string;
|
|
id: string;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
onFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
type?: string;
|
|
multiple?: boolean;
|
|
style?: React.CSSProperties;
|
|
search?: boolean;
|
|
onFocus?: any
|
|
onBlur?: any
|
|
$size?: string
|
|
}
|
|
|
|
const InputContainer = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
flex: 3;
|
|
|
|
`;
|
|
|
|
const StyledInput = styled.input`
|
|
padding: 8px 10px;
|
|
color: black;
|
|
border-radius: 8px;
|
|
border: 1px solid #A1A1A1;
|
|
background-color: transparent;
|
|
&:focus{
|
|
border: 1px solid #adadad;
|
|
}
|
|
width: 100%;
|
|
font-size: 18px;
|
|
color: ${props=>props.theme.textColor}
|
|
`;
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, Props>(({ placeholderText, id, value, onChange, onFileChange, type = "text", multiple, style, onFocus, onBlur }, ref) => {
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = e.target;
|
|
if (onChange) {
|
|
onChange(value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<InputContainer>
|
|
<StyledInput
|
|
type={type}
|
|
placeholder={placeholderText}
|
|
value={value}
|
|
multiple={multiple}
|
|
onChange={type === "file" && onFileChange ? onFileChange : handleInputChange}
|
|
ref={ref}
|
|
style={style}
|
|
onFocus={onFocus}
|
|
onBlur={onBlur}
|
|
/>
|
|
</InputContainer>
|
|
);
|
|
});
|
|
|
|
export default Input; |