forms TextWaitInputSelect.tsx

0% Statements 0/27
0% Branches 0/4
0% Functions 0/7
0% Lines 0/26
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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import InputPicker from "components/forms/InputPicker";
import React, { useEffect, useRef } from "react";
import { useCallback } from "react";
import l10n from "shared/lib/lang/l10n";
import styled from "styled-components";
import { FormField, FormRow } from "ui/form/layout/FormLayout";
 
interface TextWaitInputSelectProps {
  value: string[];
  onChange: (newValue: string[]) => void;
  onBlur: () => void;
}
 
const Form = styled.form`
  min-width: 200px;
  padding-top: 5px;
`;
 
export const TextWaitInputSelect = ({
  value,
  onChange,
  onBlur,
}: TextWaitInputSelectProps) => {
  const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
  const debouncedLeave = useCallback(() => {
    Iif (timerRef.current) {
      clearTimeout(timerRef.current);
    }
    timerRef.current = setTimeout(() => {
      onBlur();
    }, 250);
  }, [onBlur]);
 
  useEffect(() => {
    return () => {
      // Cleanup timer
      Iif (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);
 
  const onFocus = useCallback(() => {
    Iif (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  }, []);
 
  const onFocusOut = useCallback(
    (event: React.FocusEvent<HTMLFormElement, Element>) => {
      Iif (event.currentTarget.contains(event.relatedTarget)) {
        return;
      }
      debouncedLeave();
    },
    [debouncedLeave]
  );
 
  return (
    <Form onFocus={onFocus} onBlur={onFocusOut}>
      <FormRow>
        <FormField
          name="replaceInput"
          label={l10n("FIELD_WAIT_UNTIL_BUTTON_PRESSED")}
        >
          <InputPicker
            id="replaceInput"
            value={value}
            onChange={onChange}
            autoFocus
            multiple
          />
        </FormField>
      </FormRow>
    </Form>
  );
};