All files / src/components/ui/form NumberInput.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
79
80
81
82
83
84
85
86
87
88
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { UnitsSelectButtonInputOverlay } from "components/forms/UnitsSelectButtonInputOverlay";
import React, { FC, useCallback, useEffect, useRef, useState } from "react";
import { UnitType } from "shared/lib/entities/entitiesTypes";
import styled from "styled-components";
import { StyledInput } from "./style";
 
export interface NumberInputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  units?: UnitType;
  unitsAllowed?: UnitType[];
  onChangeUnits?: (newUnits: UnitType) => void;
}
 
const NumberInputWrapper = styled.div`
  position: relative;
  width: 100%;
  min-width: 45px;
`;
 
const valueToString = (value: unknown) =>
  value !== undefined && value !== null ? String(value) : "";
 
export const NumberInput: FC<NumberInputProps> = ({
  units,
  ref: _ref,
  unitsAllowed,
  onChangeUnits,
  value,
  placeholder,
  onChange,
  onBlur,
  ...props
}) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [stringValue, setStringValue] = useState(valueToString(value));
 
  const onChangeInternal = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const newStringValue = e.currentTarget.value;
      setStringValue(newStringValue);
      onChange?.(e);
    },
    [onChange]
  );
 
  const onBlurInternal = useCallback(
    (e: React.FocusEvent<HTMLInputElement>) => {
      setStringValue(valueToString(value));
      onBlur?.(e);
    },
    [onBlur, value]
  );
 
  useEffect(() => {
    const newStringValue = valueToString(value);
    Iif (
      stringValue !== newStringValue &&
      (newStringValue !== "0" || document.activeElement !== inputRef.current)
    ) {
      setStringValue(valueToString(value));
    }
  }, [stringValue, value]);
 
  return (
    <NumberInputWrapper>
      <StyledInput
        ref={inputRef}
        type="number"
        value={stringValue}
        placeholder={placeholder}
        onChange={onChangeInternal}
        onBlur={onBlurInternal}
        {...props}
      />
      {units && (
        <UnitsSelectButtonInputOverlay
          parentValue={String(stringValue || placeholder) ?? ""}
          value={units}
          allowedValues={unitsAllowed}
          onChange={onChangeUnits}
        />
      )}
    </NumberInputWrapper>
  );
};