homeflowjs 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/rent-yield-calculator/rent-yield-calculator.jsx

@@ -72,6 +72,7 @@ const RentYieldCalculator = ({
   currency,
   grossYieldTitle,
   netYieldTitle,
+  showThousandSeparator,
 }) => {
   const customFieldsConfigsList = useMemo(() => initialFieldsConfigsList
     .map((fieldConfig) => {
@@ -134,6 +135,7 @@ const RentYieldCalculator = ({
             rangeStylesConfigs={rangeStylesConfigs}
             inputPrefixString={currency}
             onRangeInputUpdate={onFormDataUpdate}
+            showThousandSeparator={showThousandSeparator}
           />
         </div>
       ))}
@@ -163,6 +165,7 @@ RentYieldCalculator.defaultProps = {
   currency: '£',
   grossYieldTitle: 'Gross Yield',
   netYieldTitle: 'Net Yield',
+  showThousandSeparator: true,
 };
 
 const FieldConfigType = PropTypes.shape({
@@ -182,6 +185,7 @@ RentYieldCalculator.propTypes = {
   currency: PropTypes.string,
   grossYieldTitle: PropTypes.string,
   netYieldTitle: PropTypes.string,
+  showThousandSeparator: PropTypes.bool,
 };
 
 export default memo(RentYieldCalculator);

package/search/range-input/index.jsx

@@ -18,9 +18,21 @@ const RangeInput = ({
   rangeStylesConfigs,
   inputPrefixString,
   onRangeInputUpdate,
+  showThousandSeparator,
 }) => {
+
+  const withThousandSeparator = (number) => {
+    if (!showThousandSeparator) {
+      return inputPrefixString ? `${inputPrefixString} ${number}` : `${number}`;
+    }
+
+    const separatedNumber = new Intl.NumberFormat().format(number);
+
+    return inputPrefixString ? `${inputPrefixString} ${separatedNumber}` : `${separatedNumber}`;
+  };
+
   const [valueConfig, setValueConfig] = useState({
-    inputValue: inputPrefixString ? `${inputPrefixString} 0` : '0',
+    inputValue: withThousandSeparator(0),
     rangeValue: 0,
   });
 
@@ -35,9 +47,7 @@ const RangeInput = ({
   useEffect(() => {
     const validatedValue = onValidateValue(Number(inititalValue));
     setValueConfig({
-      inputValue: inputPrefixString
-        ? `${inputPrefixString} ${validatedValue}`
-        : `${validatedValue}`,
+      inputValue: withThousandSeparator(validatedValue),
       rangeValue: validatedValue,
     });
   }, []);
@@ -47,15 +57,12 @@ const RangeInput = ({
     const currentValue = isRangeValue ? value[0] : value;
     const digitValue = isRangeValue
       ? currentValue
-      : currentValue.substring(currentValue.indexOf(inputPrefixString) + 1).trim();
+      : currentValue.replace(`${inputPrefixString} `, '').replaceAll(',', '');
+
+    if (isNaN(digitValue)) return;
 
-    if (isNaN(digitValue)) {
-      return;
-    }
     const validatedValue = onValidateValue(Number(digitValue));
-    const inputValue = inputPrefixString
-      ? `${inputPrefixString} ${validatedValue}`
-      : `${validatedValue}`;
+    const inputValue = withThousandSeparator(validatedValue);
     const rangeValue = Number(validatedValue);
 
     setValueConfig((prevState) => ({
@@ -116,6 +123,7 @@ RangeInput.propTypes = {
   inititalValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   inputPrefixString: PropTypes.string,
   onRangeInputUpdate: PropTypes.func,
+  showThousandSeparator: PropTypes.bool.isRequired,
   ...RANGE_CONTROLLER_PROP_TYPES,
 };