✨ Fixes following review with Helens.

ZeroGachis · Aug 18, 2023 · 8f83e55 · 8f83e55
1 parent b09e997
commit 8f83e55
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/example/src/NumberSelector/NumberSelectorPage.tsx b/example/src/NumberSelector/NumberSelectorPage.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import { NumberSelector, Screen } from 'smartway-react-native-ui';
 
 export const NumberSelectorPage = () => {
-    const [value, setValue] = useState<number>(0);
+    const [value, setValue] = useState<number>(10);
     const [otherValue, setOtherValue] = useState<number>(0);
 
     const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ export const NumberSelectorPage = () => {
                         showSoftInputOnFocus={true}
                         value={value}
                         minValue={0}
-                        maxValue={998}
+                        maxValue={999}
                         minusIcon="arrow-back"
                         plusIcon="arrow-forward"
                     />
@@ -35,7 +35,7 @@ export const NumberSelectorPage = () => {
                         value={otherValue}
                         size="s"
                         minValue={0}
-                        maxValue={998}
+                        maxValue={999}
                     />
                 </View>
             </View>

diff --git a/src/components/numberField/NumberField.tsx b/src/components/numberField/NumberField.tsx
@@ -21,6 +21,7 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
         const [focused, setFocused] = useState<boolean>(false);
         const [forcedState, setForcedState] = useState<boolean>(true);
         const [firstContentChange, setFirstContentChange] = useState<boolean>(true);
+        const [firstValue, setFirstValue] = useState<string>();
 
         useEffect(() => {
             if (forcedState) {
@@ -32,10 +33,11 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
 
         useEffect(() => {
             if (firstContentChange) {
+                setFirstValue(props.value);
                 setFirstContentChange(false);
                 return;
             }
-            setFilled(true);
+            setFilled(props.value !== firstValue);
             checkContent(props.value);
         }, [props.value]);
 
@@ -116,21 +118,31 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
                 }
             }
         };
+        let cleanContent = (text: string | undefined) => {
+            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);
-                if (props.value !== '') setLastValue(props.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?.onChangeText !== undefined && props.value === '' && lastValue !== undefined)
-                props.onChangeText(lastValue);
+            if (props.value === '' && firstValue !== undefined) onChangeText(firstValue);
+            else if (props.value === '' && lastValue !== undefined) onChangeText(lastValue);
             if (props?.onBlur !== undefined) props.onBlur(e);
         };
 
@@ -139,11 +151,12 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
                 {...props}
                 ref={ref ?? undefined}
                 style={[stateStyle(), props.style]}
-                selectTextOnFocus={true}
+                selectTextOnFocus={false}
                 onChangeText={(e) => onChangeText(e)}
                 onBlur={(e) => onBlur(e)}
                 onFocus={(e) => onFocus(e)}
                 selectionColor={theme.sw.colors.primary.main + theme.sw.transparency[16]}
+                cursorColor={theme.sw.colors.primary.main}
                 keyboardType="number-pad"
                 editable={state !== 'readonly'}
                 textAlign={'center'}

diff --git a/src/components/numberSelector/NumberSelector.tsx b/src/components/numberSelector/NumberSelector.tsx
@@ -26,7 +26,7 @@ export const NumberSelector = ({
     minusIcon = 'minus',
     plusIcon = 'add',
     showSoftInputOnFocus = false,
-    variant = 'filled',
+    variant = 'outlined',
     size = 'm',
 }: Props) => {
     let refInput = useRef<any>();
@@ -40,8 +40,8 @@ export const NumberSelector = ({
         if (!minusDisabled) onChangeText((value - 1).toString());
     };
     const onChangeText = (text: string) => {
-        refInput?.current?.focus();
         const cleanNumber = text.replace(/[^0-9]/g, '');
+        if (tempValue !== '') refInput?.current?.focus();
         if (cleanNumber !== '') {
             const parsedValue = parseInt(cleanNumber);
             if (parsedValue !== undefined && parsedValue >= minValue && parsedValue <= maxValue) {