Feat/number input 2 (#2333)

* NumberInput - initial commit

* NumberInput - complete

* Fix docs

* Improve example screen

* Fix non en languages

* Add tests

* Use TextField's formatter and the new centered prop

* Review changes

* Remove tests from npm package

* Use only one screen

* Prettify

* Improve screen (requires next commit to work)

* Add some function component support

* Support centered for validationMessage, memoize and fix typescript

* result to data

* Remove margins and fix TextField's centered

* Remove more code and fix placeholder RN bug

* Fix ExampleScreenPresenter

* Fix tests

* Last two comments

Author: M-i-k-e-l

demo/src/screens/ExampleScreenPresenter.tsx

@@ -25,6 +25,13 @@ interface RadioGroupOptions {
 interface BooleanGroupOptions {
   spread?: boolean;
   afterValueChanged?: () => void;
+  state?: boolean;
+  setState?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+interface SegmentsExtraOptions {
+  state?: string;
+  setState?: React.Dispatch<React.SetStateAction<any /** no suitable solution for enum */>>;
 }
 
 export function renderHeader(title: string, others?: TextProps) {
@@ -35,19 +42,29 @@ export function renderHeader(title: string, others?: TextProps) {
   );
 }
 
-export function renderBooleanOption(title: string, key: string, {spread, afterValueChanged}: BooleanGroupOptions = {spread: true}) {
+export function renderBooleanOption(title: string,
+  key: string,
+  {spread, afterValueChanged, state, setState}: BooleanGroupOptions = {spread: true}) {
   // @ts-ignore
-  const value = this.state[key];
+  const value = state ?? this.state[key];
   return (
     <View row centerV spread={spread} marginB-s4 key={key}>
-      <Text $textDefault flex={spread} marginR-s4={!spread}>{title}</Text>
+      <Text $textDefault flex={spread} marginR-s4={!spread}>
+        {title}
+      </Text>
       <Switch
         useCustomTheme
         key={key}
         testID={key}
         value={value}
-        // @ts-ignore
-        onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
+        onValueChange={value => {
+          if (setState) {
+            setState(value);
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value}, afterValueChanged);
+          }
+        }}
       />
     </View>
   );
@@ -130,7 +147,9 @@ export function renderColorOption(title: string,
   const value = this.state[key];
   return (
     <View marginV-s2>
-      <Text text70M $textDefault>{title}</Text>
+      <Text text70M $textDefault>
+        {title}
+      </Text>
       <ColorPalette
         value={value}
         colors={colors}
@@ -171,19 +190,34 @@ export function renderSliderOption(title: string,
   );
 }
 
-export function renderMultipleSegmentOptions(title: string, key: string, options: (SegmentedControlItemProps & {value: any})[]) {
+export function renderMultipleSegmentOptions(title: string,
+  key: string,
+  options: (SegmentedControlItemProps & {value: any})[],
+  {state, setState}: SegmentsExtraOptions = {}) {
   // @ts-ignore
-  const value = this.state[key];
+  const value = state ?? this.state[key];
   const index = _.findIndex(options, {value});
 
   return (
     <View row centerV spread marginB-s4 key={key}>
-      {!!title && <Text $textDefault marginR-s2>{title}</Text>}
+      {!!title && (
+        <Text $textDefault marginR-s2>
+          {title}
+        </Text>
+      )}
       <SegmentedControl
         initialIndex={index}
         segments={options}
         // @ts-ignore
-        onChangeIndex={index => this.setState({[key]: options[index].value})}
+        onChangeIndex={index => {
+          const value = options[index].value;
+          if (setState) {
+            setState(value);
+          } else {
+            // @ts-ignore
+            this.setState({[key]: value});
+          }
+        }}
       />
     </View>
   );

demo/src/screens/MenuStructure.js

@@ -54,6 +54,7 @@ export const navigationData = {
       {title: 'Color Picker', tags: 'color picker control', screen: 'unicorn.components.ColorPickerScreen'},
       {title: 'Color Swatch', tags: 'color swatch and palette', screen: 'unicorn.components.ColorSwatchScreen'},
       {title: 'TextField', tags: 'text input field form', screen: 'unicorn.components.TextFieldScreen'},
+      {title: 'NumberInput', tags: 'number input', screen: 'unicorn.components.NumberInputScreen'},
       {title: 'Picker', tags: 'picker form', screen: 'unicorn.components.PickerScreen'},
       {title: 'DateTimePicker', tags: 'date time picker form', screen: 'unicorn.components.DateTimePickerScreen'},
       {title: 'RadioButton', tags: 'radio button group controls', screen: 'unicorn.components.RadioButtonScreen'},

demo/src/screens/componentScreens/NumberInputScreen.tsx

@@ -0,0 +1,230 @@
+import React, {useState, useCallback, useRef, useMemo} from 'react';
+import {StyleSheet, TouchableWithoutFeedback, Keyboard as RNKeyboard} from 'react-native';
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
+import {
+  Text,
+  Spacings,
+  NumberInput,
+  NumberInputData,
+  View,
+  Typography,
+  Constants,
+  Incubator
+} from 'react-native-ui-lib';
+import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+enum ExampleTypeEnum {
+  PRICE = 'price',
+  PERCENTAGE = 'percentage',
+  ANY_NUMBER = 'number'
+}
+
+type ExampleType = ExampleTypeEnum | `${ExampleTypeEnum}`;
+
+const VALIDATION_MESSAGE = 'Please enter a valid number';
+const MINIMUM_PRICE = 5000;
+const MINIMUM_PRICE_VALIDATION_MESSAGE = `Make sure your number is above ${MINIMUM_PRICE}`;
+const DISCOUNT_PERCENTAGE = {min: 1, max: 80};
+// eslint-disable-next-line max-len
+const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`;
+
+const NumberInputScreen = () => {
+  const currentData = useRef<NumberInputData>();
+  const [text, setText] = useState<string>('');
+  const [showLabel, setShowLabel] = useState<boolean>(true);
+  const [exampleType, setExampleType] = useState<ExampleType>('price');
+
+  const processInput = useCallback(() => {
+    let newText = '';
+    if (currentData.current) {
+      switch (currentData.current.type) {
+        case 'valid':
+          newText = currentData.current.formattedNumber;
+          break;
+        case 'empty':
+          newText = 'Empty';
+          break;
+        case 'error':
+          newText = `Error: value '${currentData.current.userInput}' is invalid`;
+          break;
+      }
+    }
+
+    setText(newText);
+  }, []);
+
+  const onChangeNumber = useCallback((data: NumberInputData) => {
+    currentData.current = data;
+    processInput();
+  },
+  [processInput]);
+
+  const label = useMemo(() => {
+    if (showLabel) {
+      switch (exampleType) {
+        case 'price':
+        default:
+          return 'Enter price';
+        case 'percentage':
+          return 'Enter discount percentage';
+        case 'number':
+          return 'Enter any number';
+      }
+    }
+  }, [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':
+      case 'number':
+      default:
+        return undefined;
+      case 'percentage':
+        return 0;
+    }
+  }, [exampleType]);
+
+  const leadingText = useMemo(() => {
+    switch (exampleType) {
+      case 'price':
+        return '$';
+      case 'percentage':
+      case 'number':
+      default:
+        return undefined;
+    }
+  }, [exampleType]);
+
+  const trailingText = useMemo(() => {
+    switch (exampleType) {
+      case 'percentage':
+        return '%';
+      case 'price':
+      case 'number':
+      default:
+        return undefined;
+    }
+  }, [exampleType]);
+
+  const isValid = useCallback(() => {
+    return currentData.current?.type === 'valid';
+  }, []);
+
+  const isAboveMinimumPrice = useCallback(() => {
+    if (currentData.current?.type === 'valid') {
+      return currentData.current.number > MINIMUM_PRICE;
+    }
+  }, []);
+
+  const isWithinDiscountPercentage = useCallback(() => {
+    if (currentData.current?.type === 'valid') {
+      return (
+        currentData.current.number >= DISCOUNT_PERCENTAGE.min && currentData.current.number <= DISCOUNT_PERCENTAGE.max
+      );
+    }
+  }, []);
+
+  const validate = useMemo((): Incubator.TextFieldProps['validate'] => {
+    switch (exampleType) {
+      case 'price':
+        return [isValid, isAboveMinimumPrice];
+      case 'percentage':
+        return [isValid, isWithinDiscountPercentage];
+      default:
+        return isValid;
+    }
+  }, [exampleType, isValid, isAboveMinimumPrice, isWithinDiscountPercentage]);
+
+  const validationMessage = useMemo((): Incubator.TextFieldProps['validationMessage'] => {
+    switch (exampleType) {
+      case 'price':
+        return [VALIDATION_MESSAGE, MINIMUM_PRICE_VALIDATION_MESSAGE];
+      case 'percentage':
+        return [VALIDATION_MESSAGE, DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE];
+      default:
+        return VALIDATION_MESSAGE;
+    }
+  }, [exampleType]);
+
+  return (
+    <TouchableWithoutFeedback onPress={RNKeyboard.dismiss}>
+      <View flex centerH>
+        <Text text40 margin-s10>
+          Number Input
+        </Text>
+        {renderBooleanOption('Show label', 'showLabel', {spread: false, state: showLabel, setState: setShowLabel})}
+        {renderMultipleSegmentOptions('',
+          'exampleType',
+          [
+            {label: 'Price', value: ExampleTypeEnum.PRICE},
+            {label: 'Percentage', value: ExampleTypeEnum.PERCENTAGE},
+            {label: 'Number', value: ExampleTypeEnum.ANY_NUMBER}
+          ],
+          {state: exampleType, setState: setExampleType})}
+
+        <View flex center>
+          <NumberInput
+            key={exampleType}
+            // initialNumber={100}
+            label={label}
+            labelStyle={styles.label}
+            placeholder={placeholder}
+            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>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default gestureHandlerRootHOC(NumberInputScreen);
+
+const styles = StyleSheet.create({
+  containerStyle: {
+    marginBottom: 30,
+    marginLeft: Spacings.s5,
+    marginRight: Spacings.s5
+  },
+  mainText: {
+    height: 36,
+    marginVertical: Spacings.s1,
+    ...Typography.text30M
+  },
+  infoText: {
+    marginTop: Constants.isIOS ? Spacings.s2 : 0,
+    ...Typography.text50M
+  },
+  label: {
+    marginBottom: Spacings.s1,
+    ...Typography.text80M
+  }
+});

demo/src/screens/componentScreens/index.js

@@ -31,6 +31,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
+  registrar('unicorn.components.NumberInputScreen', () => require('./NumberInputScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);

jest-setup.js

@@ -27,3 +27,10 @@ jest.mock('react-native', () => {
   reactNative.NativeModules.KeyboardTrackingViewTempManager = {};
   return reactNative;
 });
+
+if (typeof String.prototype.replaceAll === 'undefined') {
+  // eslint-disable-next-line no-extend-native
+  String.prototype.replaceAll = function (match, replace) {
+    return this.split(match).join(replace);
+  };
+}

package.json

@@ -139,7 +139,7 @@
       "./jest-setup.js"
     ],
     "testMatch": [
-      "**/*.spec.(js|tsx)"
+      "**/*.spec.(js|ts|tsx)"
     ]
   }
 }

src/components/index.js

@@ -98,6 +98,9 @@ export default {
   get Modal() {
     return require('./modal').default;
   },
+  get NumberInput() {
+    return require('./numberInput').default;
+  },
   get ListItem() {
     return require('./listItem').default;
   },

src/components/inputs/index.js

@@ -10,5 +10,8 @@ module.exports = {
   },
   get MaskedInput() {
     return require('../maskedInput').default;
+  },
+  get NumberInput() {
+    return require('../numberInput').default;
   }
 };