NumberInput - fix design (MaskedInput look)

demo/src/screens/componentScreens/NumberInputScreen.tsx

@@ -41,9 +41,6 @@ const NumberInputScreen = () => {
         case 'valid':
           newText = currentData.current.formattedNumber;
           break;
-        case 'empty':
-          newText = 'Empty';
-          break;
         case 'error':
           newText = `Error: value '${currentData.current.userInput}' is invalid`;
           break;
@@ -73,18 +70,6 @@ const NumberInputScreen = () => {
     }
   }, [showLabel, exampleType]);
 
-  const placeholder = useMemo(() => {
-    switch (exampleType) {
-      case 'price':
-      default:
-        return 'Price';
-      case 'percentage':
-        return 'Discount';
-      case 'number':
-        return 'Any number';
-    }
-  }, [exampleType]);
-
   const fractionDigits = useMemo(() => {
     switch (exampleType) {
       case 'price':
@@ -158,9 +143,22 @@ const NumberInputScreen = () => {
     }
   }, [exampleType]);
 
+  const textFieldProps = useMemo(() => {
+    return {
+      label,
+      labelStyle: styles.label,
+      style: [styles.mainText, !leadingText && {marginLeft: Spacings.s4}, !trailingText && {marginRight: Spacings.s4}],
+      validate,
+      validationMessage,
+      validationMessageStyle: Typography.text80M,
+      validateOnChange: true,
+      centered: true
+    };
+  }, [label, leadingText, trailingText, validate, validationMessage]);
+
   return (
     <TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
-      <View flex centerH>
+      <View centerH>
         <Text text40 margin-s10>
           Number Input
         </Text>
@@ -174,30 +172,19 @@ const NumberInputScreen = () => {
           ],
           {state: exampleType, setState: setExampleType})}
 
-        <View flex center>
+        <View marginT-50 centerH>
           <NumberInput
             key={exampleType}
-            // initialNumber={100}
-            label={label}
-            labelStyle={styles.label}
-            placeholder={placeholder}
+            // initialNumber={12.1}
+            // contextMenuHidden={false}
+            textFieldProps={textFieldProps}
             fractionDigits={fractionDigits}
             onChangeNumber={onChangeNumber}
             leadingText={leadingText}
             leadingTextStyle={leadingText && [styles.infoText, {marginLeft: Spacings.s4}]}
             trailingText={trailingText}
             trailingTextStyle={trailingText && [styles.infoText, {marginRight: Spacings.s4}]}
-            style={[
-              styles.mainText,
-              !leadingText && {marginLeft: Spacings.s4},
-              !trailingText && {marginRight: Spacings.s4}
-            ]}
             containerStyle={styles.containerStyle}
-            validate={validate}
-            validationMessage={validationMessage}
-            validationMessageStyle={Typography.text80M}
-            validateOnChange
-            centered
           />
           <Text marginT-s5>{text}</Text>
         </View>

src/components/maskedInput/new.tsx

@@ -5,7 +5,6 @@ import React, {
   useState,
   useImperativeHandle,
   forwardRef,
-  ReactElement,
   ForwardedRef
 } from 'react';
 import _ from 'lodash';
@@ -22,15 +21,15 @@ export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
   /**
    * callback for rendering the custom input out of the value returns from the actual input
    */
-  renderMaskedText?: ReactElement;
+  renderMaskedText?: (value?: string) => JSX.Element | undefined;
   /**
    * Custom formatter for the input value
    */
   formatter?: (value?: string) => string | undefined;
   /**
    * container style for the masked input container
    */
-  containerStyle: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
 }
 
 /**

src/components/numberInput/NumberInput.driver.ts

@@ -0,0 +1,23 @@
+import {NumberInputProps} from './index';
+import {ComponentDriver, ComponentDriverArgs} from '../../testkit/Component.driver';
+import {TextFieldDriver} from '../../incubator/TextField/TextField.driver';
+
+export class NumberInputDriver extends ComponentDriver<NumberInputProps> {
+  private readonly maskedInputDriver: TextFieldDriver;
+  private readonly visualTextFieldDriver: TextFieldDriver;
+
+  constructor(componentDriverArgs: ComponentDriverArgs) {
+    super(componentDriverArgs);
+
+    this.maskedInputDriver = new TextFieldDriver({...componentDriverArgs, testID: `${this.testID}`});
+    this.visualTextFieldDriver = new TextFieldDriver({...componentDriverArgs, testID: `${this.testID}.visual`});
+  }
+
+  changeText = async (text: string) => {
+    await this.maskedInputDriver.changeText(text);
+  };
+
+  getText = async () => {
+    return await this.visualTextFieldDriver.getText();
+  };
+}

src/components/numberInput/Presenter.ts

@@ -1,12 +1,7 @@
-import {isEmpty} from 'lodash';
-
 export type NumberInputData =
   | {type: 'valid'; userInput: string; number: number; formattedNumber: string}
-  | {type: 'empty'}
   | {type: 'error'; userInput: string};
 
-export const EMPTY: NumberInputData = {type: 'empty'};
-
 export interface LocaleOptions {
   locale: string;
   decimalSeparator: string;
@@ -19,20 +14,25 @@ export interface Options {
 }
 
 function formatNumber(value: number, options: Options) {
-  return value.toLocaleString(options.localeOptions.locale, {maximumFractionDigits: options.fractionDigits});
+  return value.toLocaleString(options.localeOptions.locale, {
+    maximumFractionDigits: options.fractionDigits,
+    minimumFractionDigits: options.fractionDigits
+  });
 }
 
 function generateLocaleOptions(locale: string) {
-  const options: Options = {
+  const options: Omit<Options, 'fractionDigits'> = {
     localeOptions: {
       locale,
       decimalSeparator: '', // fake decimalSeparator, we're creating it now
       thousandSeparator: '' // fake thousandSeparator, we're creating it now
-    },
-    fractionDigits: 1
+    }
   };
-  const decimalSeparator = formatNumber(1.1, options).replace(/1/g, '');
-  const thousandSeparator = formatNumber(1111, options).replace(/1/g, '');
+  const decimalOptions: Options = {...options, fractionDigits: 1};
+  const thousandOptions: Options = {...options, fractionDigits: 0};
+
+  const decimalSeparator = formatNumber(1.1, decimalOptions).replace(/1/g, '');
+  const thousandSeparator = formatNumber(1111, thousandOptions).replace(/1/g, '');
 
   return {
     locale,
@@ -45,28 +45,23 @@ export function generateOptions(locale: string, fractionDigits: number): Options
   return {localeOptions: generateLocaleOptions(locale), fractionDigits};
 }
 
-export function parseInput(text: string, options: Options): NumberInputData {
-  if (isEmpty(text)) {
-    return EMPTY;
-  }
+export function getInitialNumber(propsInitialNumber = 0, options: Options) {
+  return propsInitialNumber * Math.pow(10, options.fractionDigits);
+}
 
+export function parseInput(text: string, options: Options, initialNumber?: number): NumberInputData {
   let cleanInput: string = text.replaceAll(options.localeOptions.thousandSeparator, '');
-  cleanInput = cleanInput.replaceAll(options.localeOptions.decimalSeparator, '.');
+  cleanInput = cleanInput.replaceAll(options.localeOptions.decimalSeparator, initialNumber ? '.' : '');
   let number = Number(cleanInput);
   if (isNaN(number)) {
     return {type: 'error', userInput: text};
   }
 
   number = Number(number.toFixed(options.fractionDigits));
-  const formattedNumber = formatNumber(number, options);
-
-  return {type: 'valid', userInput: text, number, formattedNumber};
-}
-
-export function getInitialData(options: Options, initialValue?: number): NumberInputData {
-  if (initialValue === undefined) {
-    return EMPTY;
+  if (options.fractionDigits > 0) {
+    number /= Math.pow(10, options.fractionDigits);
   }
 
-  return parseInput(formatNumber(initialValue, options), options);
+  const formattedNumber = formatNumber(number, options);
+  return {type: 'valid', userInput: initialNumber ? `${initialNumber}` : cleanInput, number, formattedNumber};
 }