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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1x 1x 1x 1x 1x 1x 1x 7x | import React, { FC, ReactNode } from "react";
import styled from "styled-components";
import { FormField } from "./layout/FormLayout";
import { Input } from "./Input";
interface TextFieldProps {
readonly name: string;
readonly label?: string;
readonly info?: string;
readonly placeholder?: string;
readonly errorLabel?: string;
readonly value?: string;
readonly size?: "small" | "medium" | "large";
readonly maxLength?: number;
readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
readonly additionalRight?: ReactNode;
readonly disabled?: boolean;
readonly autoComplete?: string;
}
const AdditionalWrapper = styled.div`
position: relative;
`;
const AdditionalRight = styled.div`
position: absolute;
top: 3px;
bottom: 3px;
right: 3px;
display: flex;
&& > * {
height: 100%;
margin-left: 5px;
}
`;
export const TextField: FC<TextFieldProps> = ({
name,
label,
info,
placeholder,
errorLabel,
size,
value = "",
onChange,
additionalRight,
disabled,
autoComplete,
}) => (
<FormField
name={name}
label={errorLabel || label}
info={info}
variant={errorLabel ? "error" : undefined}
>
{additionalRight ? (
<AdditionalWrapper>
<Input
id={name}
name={name}
value={value}
placeholder={placeholder}
displaySize={size}
onChange={onChange}
style={{ paddingRight: 60 }}
disabled={disabled}
/>
<AdditionalRight>{additionalRight}</AdditionalRight>
</AdditionalWrapper>
) : (
<Input
id={name}
name={name}
value={value}
placeholder={placeholder}
displaySize={size}
onChange={onChange}
disabled={disabled}
autoComplete={autoComplete}
/>
)}
</FormField>
);
|