Merge pull request #130 from ZeroGachis/task/add-a-placeholder-for-un…

…defined-value Task/add a placeholder for undefined value
ZeroGachis · Nov 28, 2023 · 9162314 · 9162314
2 parents caeb5f5 + 25ff428
commit 9162314
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/Storybook/components/NumberSelector/NumberSelector.stories.tsx b/Storybook/components/NumberSelector/NumberSelector.stories.tsx
@@ -58,4 +58,12 @@ export const Default: Story = {
         return NumberSelectorTester(args);
     },
 };
+
+export const undefinedValue: Story = {
+    render: (args) => {
+        args.value = undefined;
+        return NumberSelectorTester(args);
+    },
+};
+
 Default.parameters = { noSafeArea: false };
diff --git a/src/components/numberField/NumberField.tsx b/src/components/numberField/NumberField.tsx
@@ -209,7 +209,6 @@ export const NumberField = React.forwardRef<TextInput, NumberFieldProps>(
                 value={props.onChangeText ? props.value : value}
                 ref={ref ?? undefined}
                 style={[stateStyle(), props.style]}
-                selectTextOnFocus={false}
                 onChangeText={(e) => onChangeText(e)}
                 onBlur={(e) => onBlur(e)}
                 onFocus={(e) => onFocus(e)}

diff --git a/src/components/numberSelector/NumberSelector.tsx b/src/components/numberSelector/NumberSelector.tsx
@@ -6,8 +6,8 @@ import { NumberField } from '../numberField/NumberField';
 import type { IconName } from '../icons/IconProps';
 
 export interface Props {
-    value: number;
-    onValueChange: (value: number) => void;
+    value: number | undefined;
+    onValueChange?: (value: number) => void;
     onEndEditing?: ((value: string | undefined) => void) | undefined
     minValue: number;
     maxValue: number;
@@ -18,11 +18,12 @@ export interface Props {
     variant?: 'filled' | 'outlined';
     size?: 'm' | 's';
     decimal?: boolean;
+    placeholder?: string;
 }
 
 export const NumberSelector = ({
     value,
-    onValueChange,
+    onValueChange= undefined,
     onEndEditing = undefined,
     minValue = 0,
     maxValue,
@@ -33,10 +34,11 @@ export const NumberSelector = ({
     variant = 'outlined',
     decimal = false,
     size = 'm',
+    placeholder = '--',
 }: Props) => {
     const refInput = useRef<any>();
     const parser = decimal ? parseFloat : parseInt;
-    const [tempValue, setTempValue] = useState<string>(value.toString());
+    const [tempValue, setTempValue] = useState<string>(value?.toString() ?? placeholder);
     const [softInputOnFocus, setSoftInputOnFocus] = useState(false);
     const allowedMinus = (): boolean => {
         return minValue !== undefined && minValue < 0;
@@ -47,23 +49,23 @@ export const NumberSelector = ({
     const onAdd = () => {
         Keyboard.dismiss();
         if (!addDisabled) {
-            const newValue = (
+            const newValue =value?  (
                 Math.round(
                     (value + 1 < maxValue ? value + 1 : maxValue) * 10
                 ) / 10
-            ).toString();
+            ).toString() : "1";
             onChangeText(newValue);
             onEndEditing && onEndEditing(newValue);
         }
     };
     const onMinus = () => {
         Keyboard.dismiss();
         if (!minusDisabled){
-            const newValue = (
+            const newValue = value ? (
                 Math.round(
                     (value - 1 > minValue ? value - 1 : minValue) * 10
                 ) / 10
-            ).toString();
+            ).toString() : "0";
             onChangeText(newValue);
             onEndEditing && onEndEditing(newValue);
         }
@@ -79,14 +81,14 @@ export const NumberSelector = ({
                 (minValue === undefined || parsedValue >= minValue) &&
                 (maxValue === undefined || parsedValue <= maxValue)
             ) {
-                onValueChange(parsedValue);
+                onValueChange && onValueChange(parsedValue);
                 setTempValue(text);
             }
         }
     };
 
-    const minusDisabled = minValue >= value;
-    const addDisabled = maxValue <= value;
+    const minusDisabled = minValue >= (value ?? 0) ;
+    const addDisabled = maxValue <= (value ?? 0);
 
     const styles = StyleSheet.create({
         container: {