All files / src/components/ui/form TextField.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, ReactNode } from "react";
import styled from "styled-components";
import { FormField } from "./layout/FormLayout";
import { Input } from "./Input";
 
export 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;
}
 
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,
}) => (
  <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 }}
        />
        <AdditionalRight>{additionalRight}</AdditionalRight>
      </AdditionalWrapper>
    ) : (
      <Input
        id={name}
        name={name}
        value={value}
        placeholder={placeholder}
        displaySize={size}
        onChange={onChange}
      />
    )}
  </FormField>
);