fix: add spacer translations and callback for useless refresh (#886)

* RM#90855

changelogs/unreleased/90855_formincrement.json

@@ -0,0 +1,5 @@
+{
+  "title": "FormIncrementInput: add callback on blur and focus functions to avoid useless refresh",
+  "type": "fix",
+  "packages": "ui"
+}

changelogs/unreleased/90855_spacer.json

@@ -0,0 +1,5 @@
+{
+  "title": "Distance input: add spacer translations to avoid undefined issue on format",
+  "type": "fix",
+  "packages": "hr"
+}

packages/apps/hr/src/components/templates/DistanceIncrement/DistanceIncrement.js

@@ -17,17 +17,19 @@
  */
 
 import React, {useCallback, useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
-import {useSelector} from '@axelor/aos-mobile-core';
+import {useSelector, useTranslator} from '@axelor/aos-mobile-core';
 import {FormIncrementInput} from '@axelor/aos-mobile-ui';
 
 const DistanceIncrementAux = ({
+  style,
   title = 'Hr_Distance',
-  defaultValue = null,
-  onChange = () => {},
+  defaultValue,
+  onChange,
   readonly = false,
   required = false,
 }) => {
+  const I18n = useTranslator();
+
   const [value, setValue] = useState(defaultValue);
 
   const {distance} = useSelector(state => state.distance);
@@ -49,9 +51,11 @@ const DistanceIncrementAux = ({
   return (
     <FormIncrementInput
       title={title}
-      style={styles.input}
+      style={style}
       onChange={handleChange}
       defaultValue={value}
+      decimalSpacer={I18n.t('Base_DecimalSpacer')}
+      thousandSpacer={I18n.t('Base_ThousandSpacer')}
       readOnly={readonly}
       required={required}
     />
@@ -78,11 +82,4 @@ const DistanceIncrement = ({
   );
 };
 
-const styles = StyleSheet.create({
-  input: {
-    width: '90%',
-    alignSelf: 'center',
-  },
-});
-
 export default DistanceIncrement;

packages/ui/src/components/molecules/FormIncrementInput/FormIncrementInput.tsx

@@ -16,12 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {KeyboardTypeOptions, StyleSheet, View} from 'react-native';
 import {useThemeColor, ThemeColors} from '../../../theme';
 import {Text} from '../../atoms';
+import {Increment} from '../../molecules';
 import {getCommonStyles} from '../../../utils/commons-styles';
-import Increment from '../Increment/Increment';
 
 interface FormIncrementInputProps {
   style?: any;
@@ -71,18 +71,14 @@ const FormIncrementInput = ({
     () => getCommonStyles(Colors, _required),
     [Colors, _required],
   );
+
   const styles = useMemo(
     () => getStyles(Colors, _required),
     [Colors, _required],
   );
 
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
 
   return (
     <View style={[styles.container, style]}>