1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-24 22:14:18 +00:00
pds-2021-g2-nest/nest_frontend/components/base/InputWithIcon.js
2021-05-22 04:17:02 +02:00

49 lines
1.6 KiB
JavaScript

import React, { useState } from "react"
import Style from "./InputWithIcon.module.css"
import classNames from "classnames"
import makeIcon from "../../utils/makeIcon"
/**
* Like an {@link Input}, but with an icon on the left side.
*
* Has a state which stores whether the inner input element is focused or not to change the style of the whole element
* on focus.
*
* @param icon - The FontAwesome IconDefinition of the icon that should be rendered in the input.
* @param className - Additional class(es) to be added to the outer container.
* @param props - Additional props to be passed to the outer container.
* @returns {JSX.Element}
* @constructor
*/
export default function InputWithIcon({ icon, className, ...props }) {
const [isFocused, setFocused] = useState(false)
return (
<div className={classNames(Style.InputWithIcon, isFocused ? Style.Focused : null, className)}>
<div className={Style.IconPart}>
{makeIcon(icon)}
</div>
<input
className={Style.InputPart}
onFocus={
event => {
setFocused(true)
if(props.onFocus) {
props.onFocus(event)
}
}
}
onBlur={
event => {
setFocused(false)
if(props.onBlur) {
props.onBlur(event)
}
}
}
{...props}
/>
</div>
)
}