@onehat/ui 0.3.359 → 0.3.360

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/Field/Input.js +25 -2
  3. package/src/Components/Form/Field/TextArea.js +27 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onehat/ui",
3
- "version": "0.3.359",
3
+ "version": "0.3.360",
4
4
  "description": "Base UI for OneHat apps",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/Components/Form/Field/Input.js CHANGED
@@ -9,7 +9,7 @@ import withValue from '../../Hoc/withValue.js';
9
9
  import _ from 'lodash';
10
10
 
11
11
  function InputElement(props) {
12
- let {
12
+ let { // so localValue can be changed, if needed
13
13
  value,
14
14
  setValue,
15
15
  autoSubmit = true, // automatically setValue after user stops typing for autoSubmitDelay
@@ -25,6 +25,28 @@ function InputElement(props) {
25
25
  styles = UiGlobals.styles,
26
26
  debouncedSetValueRef = useRef(),
27
27
  [localValue, setLocalValue] = useState(value),
28
+ isTypingRef = useRef(),
29
+ isTypingTimeoutRef = useRef(),
30
+ isTyping = () => {
31
+ return isTypingRef.current;
32
+ },
33
+ setIsTyping = (isTyping) => {
34
+ isTypingRef.current = isTyping;
35
+ if (isTyping) {
36
+ startIsTypingTimeout();
37
+ }
38
+ },
39
+ startIsTypingTimeout = () => {
40
+ clearIsTypingTimeout();
41
+ isTypingTimeoutRef.current = setTimeout(() => {
42
+ setIsTyping(false);
43
+ }, 2000);
44
+ },
45
+ clearIsTypingTimeout = () => {
46
+ if (isTypingTimeoutRef.current) {
47
+ clearTimeout(isTypingTimeoutRef.current);
48
+ }
49
+ },
28
50
  onKeyPressLocal = (e) => {
29
51
  if (e.key === 'Enter') {
30
52
  debouncedSetValueRef.current?.cancel();
@@ -35,6 +57,7 @@ function InputElement(props) {
35
57
  }
36
58
  },
37
59
  onChangeTextLocal = (value) => {
60
+ setIsTyping(true);
38
61
  if (value === '') {
39
62
  value = null; // empty string makes value null
40
63
  setLocalValue(value);
@@ -60,7 +83,7 @@ function InputElement(props) {
60
83
 
61
84
  useEffect(() => {
62
85
 
63
- if (value !== localValue) {
86
+ if (!isTyping() && value !== localValue) {
64
87
  // Make local value conform to externally changed value
65
88
  setLocalValue(value);
66
89
  }
package/src/Components/Form/Field/TextArea.js CHANGED
@@ -20,7 +20,30 @@ const
20
20
  styles = UiGlobals.styles,
21
21
  debouncedSetValueRef = useRef(),
22
22
  [localValue, setLocalValue] = useState(value),
23
+ isTypingRef = useRef(),
24
+ isTypingTimeoutRef = useRef(),
25
+ isTyping = () => {
26
+ return isTypingRef.current;
27
+ },
28
+ setIsTyping = (isTyping) => {
29
+ isTypingRef.current = isTyping;
30
+ if (isTyping) {
31
+ startIsTypingTimeout();
32
+ }
33
+ },
34
+ startIsTypingTimeout = () => {
35
+ clearIsTypingTimeout();
36
+ isTypingTimeoutRef.current = setTimeout(() => {
37
+ setIsTyping(false);
38
+ }, 2000);
39
+ },
40
+ clearIsTypingTimeout = () => {
41
+ if (isTypingTimeoutRef.current) {
42
+ clearTimeout(isTypingTimeoutRef.current);
43
+ }
44
+ },
23
45
  onChangeTextLocal = (value) => {
46
+ setIsTyping(true);
24
47
  if (value === '') {
25
48
  value = null; // empty string makes value null
26
49
  }
@@ -42,8 +65,10 @@ const
42
65
 
43
66
  useEffect(() => {
44
67
 
45
- // Make local value conform to externally changed value
46
- setLocalValue(value);
68
+ if (!isTyping() && value !== localValue) {
69
+ // Make local value conform to externally changed value
70
+ setLocalValue(value);
71
+ }
47
72
 
48
73
  }, [value]);
49
74