55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import LoopIcon from "@Assets/Icons/loop.svg";
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
|
|
import Typography, { ITypo } from "../Typography";
|
|
import classes from "./classes.module.scss";
|
|
|
|
type IProps = {
|
|
onChange?: (input: string) => void;
|
|
placeholder?: string;
|
|
};
|
|
|
|
type IState = {
|
|
hasValue: boolean;
|
|
};
|
|
|
|
export default class SearchBar extends React.Component<IProps, IState> {
|
|
static defaultProps = {
|
|
placeholder: "Search",
|
|
};
|
|
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
hasValue: false,
|
|
};
|
|
this.doesInputHaveValue = this.doesInputHaveValue.bind(this);
|
|
this.onChange = this.onChange.bind(this);
|
|
}
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<Image src={LoopIcon} alt="Loop icon" />
|
|
{!this.state.hasValue && (
|
|
<Typography typo={ITypo.P_ERR_18}>
|
|
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
|
|
</Typography>
|
|
)}
|
|
<input type="text" placeholder="" className={classes["input"]} onChange={this.onChange} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private onChange(event: React.ChangeEvent<HTMLInputElement>) {
|
|
const hasValue = event.target.value.length > 0;
|
|
this.doesInputHaveValue(hasValue);
|
|
if (!this.props.onChange) return;
|
|
this.props.onChange(event.target.value);
|
|
}
|
|
|
|
private doesInputHaveValue(hasValue: boolean) {
|
|
this.setState({ hasValue });
|
|
}
|
|
}
|