Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 356x 1383x 1x 1x 1112x | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ChangeEvent, ReactElement } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { UncontrolledInput } from "client/components/UncontrolledInput";
interface Props {
type?: string;
value: string;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
placeholder: string;
resetValue?: () => void;
id?: string;
className?: string;
}
export const ControlledInput = ({
type = "text",
value,
onChange,
placeholder,
resetValue,
id,
className,
}: Props): ReactElement => {
const { t } = useTranslation();
return (
<InputContainer>
<UncontrolledInput
type={type}
value={value}
onChange={onChange}
placeholder={placeholder}
id={id}
className={className}
/>
{resetValue && (
<StyledIcon
onClick={resetValue}
icon="xmark"
aria-label={t("iconAltText.resetInput")}
/>
)}
</InputContainer>
);
};
const InputContainer = styled.div`
display: flex;
align-items: center;
`;
const StyledIcon = styled(FontAwesomeIcon)`
border-radius: 12px;
width: 18px;
height: 32px;
cursor: pointer;
font-size: ${(props) => props.theme.fontSizeLarge};
vertical-align: middle;
margin-bottom: 2px;
`;
|