🐛 Last changes to fix number field in "alone" behaviour out of number…

… selector.
ZeroGachis · Aug 18, 2023 · 24ca99f · 24ca99f
1 parent 8f83e55
commit 24ca99f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 26 deletions.
diff --git a/example/src/NumberField/NumberFieldPage.tsx b/example/src/NumberField/NumberFieldPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { NumberField, Screen, useTheme } from 'smartway-react-native-ui';
 
@@ -14,34 +14,46 @@ export const NumberFieldPage = () => {
             marginVertical: 10,
         },
     });
+    const value = '999';
 
     return (
         <Screen style={styles.container}>
             <View style={{ flexDirection: 'row' }}>
-                <NumberField style={styles.numberField} value="999" size="m" state="prefilled" />
-                <NumberField style={styles.numberField} value="999" state="prefilled-focused" />
-                <NumberField style={styles.numberField} value="999" state="filled-focused" />
-                <NumberField style={styles.numberField} value="999" state="filled" />
-                <NumberField style={styles.numberField} value="999" state="readonly" />
-                <NumberField style={styles.numberField} value="999" state="error" />
+                <NumberField
+                    style={styles.numberField}
+                    value={value}
+                    minValue={0}
+                    maxValue={100}
+                    size="m"
+                    state="prefilled"
+                />
+                <NumberField style={styles.numberField} value={value} state="prefilled-focused" />
+                <NumberField style={styles.numberField} value={value} state="filled-focused" />
+                <NumberField style={styles.numberField} value={value} state="filled" />
+                <NumberField style={styles.numberField} value={value} state="readonly" />
+                <NumberField style={styles.numberField} value={value} state="error" />
             </View>
             <View style={{ flexDirection: 'row' }}>
-                <NumberField style={styles.numberField} value="999" size="s" state="prefilled" />
+                <NumberField style={styles.numberField} value={value} size="s" state="prefilled" />
                 <NumberField
                     style={styles.numberField}
-                    value={'999'}
+                    value={value}
                     size="s"
                     state="prefilled-focused"
                 />
                 <NumberField
                     style={styles.numberField}
-                    value="999"
+                    value={value}
                     size="s"
                     state="filled-focused"
                 />
-                <NumberField style={styles.numberField} value="999" size="s" state="filled" />
-                <NumberField style={styles.numberField} value="999" size="s" state="readonly" />
-                <NumberField style={styles.numberField} value="999" size="s" state="error" />
+                <NumberField style={styles.numberField} value={value} size="s" state="filled" />
+                <NumberField style={styles.numberField} value={value} size="s" state="readonly" />
+                <NumberField style={styles.numberField} value={value} size="s" state="error" />
+            </View>
+            <View style={{ flexDirection: 'row' }}>
+                {/* Example without value to hilight the last value on cleared case */}
+                <NumberField style={styles.numberField} size="m" state="prefilled" />
             </View>
         </Screen>
     );

diff --git a/src/components/numberField/NumberField.tsx b/src/components/numberField/NumberField.tsx
@@ -1,7 +1,6 @@
-import React, { createRef, useEffect, useImperativeHandle, useState } from 'react';
-import { StyleSheet, TextInput, TextInputBase, ViewStyle } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, TextInput, TextInputBase } from 'react-native';
 import { useTheme } from '../../styles/themes';
-import { CardPage } from 'example/src/Card/CardPage';
 
 type FieldBaseProps = React.ComponentProps<typeof TextInputBase>;
 interface NumberFieldProps extends FieldBaseProps {
@@ -12,7 +11,16 @@ interface NumberFieldProps extends FieldBaseProps {
 }
 
 export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
-    ({ state = 'prefilled', size = 'm', ...props }: NumberFieldProps, ref) => {
+    (
+        {
+            state = 'prefilled',
+            size = 'm',
+            minValue = 0,
+            maxValue = 999,
+            ...props
+        }: NumberFieldProps,
+        ref,
+    ) => {
         const theme = useTheme();
 
         const [currentState, setCurrentState] = useState<string>(state);
@@ -22,6 +30,8 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
         const [forcedState, setForcedState] = useState<boolean>(true);
         const [firstContentChange, setFirstContentChange] = useState<boolean>(true);
         const [firstValue, setFirstValue] = useState<string>();
+        const [value, setValue] = useState<string>(props.value ?? '');
+        const [lastValue, setLastValue] = useState<string>();
 
         useEffect(() => {
             if (forcedState) {
@@ -34,14 +44,31 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
         useEffect(() => {
             if (firstContentChange) {
                 setFirstValue(props.value);
+                console.log('setFistvalueprops', props.value);
                 setFirstContentChange(false);
                 return;
             }
             setFilled(props.value !== firstValue);
+            if (cleanContent(props.value) !== '') setLastValue(value);
             checkContent(props.value);
         }, [props.value]);
 
-        const [lastValue, setLastValue] = useState<string>();
+        useEffect(() => {
+            if (firstContentChange) {
+                setFirstValue(value);
+                setFirstContentChange(false);
+                return;
+            }
+            setFilled(value !== firstValue);
+            if (cleanContent(value) !== '') {
+                setLastValue(value);
+            }
+            checkContent(value);
+        }, [value]);
+
+        useEffect(() => {
+            console.log('lastval', lastValue);
+        }, [lastValue]);
 
         const stateStyle = () => {
             let borderColor = undefined;
@@ -112,8 +139,8 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
                 const parsedValue = parseInt(cleanNumber);
                 if (parsedValue !== undefined) {
                     setError(
-                        (props.minValue !== undefined && parsedValue < props.minValue) ||
-                            (props.maxValue !== undefined && parsedValue > props.maxValue),
+                        (minValue !== undefined && parsedValue < minValue) ||
+                            (maxValue !== undefined && parsedValue > maxValue),
                     );
                 }
             }
@@ -122,33 +149,39 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
             if (text !== undefined && text !== '') {
                 const cleanNumber = text.replace(/[^0-9]/g, '');
                 const parsedValue = parseInt(cleanNumber);
-                console.log('>>>', parsedValue.toString());
                 return parsedValue.toString();
             }
             return '';
         };
         let onChangeText = (e: any) => {
             if (props?.onChangeText !== undefined) {
                 props.onChangeText(e);
+                checkContent(props.value);
+            } else {
+                if (e == '') setValue('');
+                else if (cleanContent(e) != '') setValue(cleanContent(e));
+                checkContent(value);
             }
-            checkContent(props.value);
-            if (props.value !== '') setLastValue(props.value);
-            props.value = e;
         };
         let onFocus = (e: any) => {
             setFocused(true);
             if (props?.onFocus !== undefined) props.onFocus(e);
         };
         let onBlur = (e: any) => {
             setFocused(false);
-            if (props.value === '' && firstValue !== undefined) onChangeText(firstValue);
-            else if (props.value === '' && lastValue !== undefined) onChangeText(lastValue);
+            console.log('vval>', value, '<firstValue >', firstValue, '<');
+            if ((value === '' || props.value === '') && firstValue !== '') onChangeText(firstValue);
+            else if ((value === '' || props.value === '') && lastValue !== '') {
+                console.log(lastValue);
+                onChangeText(lastValue);
+            }
             if (props?.onBlur !== undefined) props.onBlur(e);
         };
 
         return (
             <TextInput
                 {...props}
+                value={props.onChangeText ? props.value : value}
                 ref={ref ?? undefined}
                 style={[stateStyle(), props.style]}
                 selectTextOnFocus={false}