@synerise/ds-format-picker 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.5.2...@synerise/ds-format-picker@0.5.3) (2024-08-27)
+
+
+### Bug Fixes
+
+* **format-picker:** use ds-data-format to format value preview ([6926f1b](https://github.com/Synerise/synerise-design/commit/6926f1ba2eb9a2314365a5203e26f67777fc4fa1))
+
+
+
+
+
 ## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.5.1...@synerise/ds-format-picker@0.5.2) (2024-08-19)
 
 **Note:** Version bump only for package @synerise/ds-format-picker

package/dist/FormatPicker.js

@@ -4,13 +4,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@synerise/ds-button';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { HashM } from '@synerise/ds-icon';
+import { useDataFormat } from '@synerise/ds-data-format';
 import FormatSettings from './FormatSettings/FormatSettings';
-import { valueFormatter } from './utils/valueFormatter';
 
 var FormatPicker = function FormatPicker(_ref) {
   var onUseSeparatorChange = _ref.onUseSeparatorChange,
@@ -28,6 +28,10 @@ var FormatPicker = function FormatPicker(_ref) {
       buttonType = _ref$buttonType === void 0 ? 'tertiary' : _ref$buttonType,
       disabled = _ref.disabled;
   var intl = useIntl();
+
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue;
+
   var texts = useMemo(function () {
     return _objectSpread({
       header: intl.formatMessage({
@@ -64,16 +68,47 @@ var FormatPicker = function FormatPicker(_ref) {
       })
     }, text);
   }, [text, intl]);
-  var formattedValue = useMemo(function () {
-    return valueFormatter({
-      value: value,
-      formatting: format,
-      intl: intl
-    });
-  }, [value, format, intl]);
+  var getFormattedValue = useCallback(function (overrideOptions) {
+    var useSeparator = format.useSeparator,
+        compactNumbers = format.compactNumbers,
+        currency = format.currency,
+        dataFormat = format.dataFormat,
+        fixedLength = format.fixedLength;
+    var options = {
+      useGrouping: useSeparator
+    };
+
+    if (compactNumbers) {
+      options = {
+        notation: 'compact'
+      };
+    }
+
+    if (dataFormat === 'cash' && currency) {
+      options = _objectSpread({}, options, {
+        currency: currency,
+        style: 'currency'
+      });
+    }
+
+    if (dataFormat === 'percent') {
+      options = _objectSpread({}, options, {
+        suffix: compactNumbers ? ' %' : '%'
+      });
+    }
+
+    if (typeof fixedLength === 'number') {
+      options = _objectSpread({}, options, {
+        minimumFractionDigits: fixedLength,
+        maximumFractionDigits: fixedLength
+      }, overrideOptions);
+    }
+
+    return formatValue(value, options);
+  }, [value, format, formatValue]);
   useEffect(function () {
-    onFormattedValueChange && onFormattedValueChange(formattedValue);
-  }, [formattedValue, onFormattedValueChange]);
+    onFormattedValueChange && onFormattedValueChange(getFormattedValue());
+  }, [getFormattedValue, onFormattedValueChange]);
   return /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
     disabled: disabled,
@@ -85,10 +120,10 @@ var FormatPicker = function FormatPicker(_ref) {
       onUseSeparatorChange: onUseSeparatorChange,
       onSetDefault: onSetDefault,
       format: format,
-      value: value,
       text: texts,
       currenciesConfig: currenciesConfig,
-      disabled: disabled
+      disabled: disabled,
+      getFormattedValue: getFormattedValue
     }),
     placement: "topCenter"
   }, /*#__PURE__*/React.createElement(Button, {
@@ -97,7 +132,7 @@ var FormatPicker = function FormatPicker(_ref) {
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(HashM, null)
-  }), texts.format + " " + formattedValue));
+  }), texts.format + " " + getFormattedValue()));
 };
 
 export default FormatPicker;

package/dist/FormatSettings/FormatSettings.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FormatSettingsProps } from './FormatSettings.types';
-declare const FormatSettings: ({ onCompactNumbersChange, onCurrencyChange, onDataFormatChange, onFixedLengthChange, onUseSeparatorChange, onSetDefault, format, value, text, currenciesConfig, disabled, }: FormatSettingsProps) => React.JSX.Element;
+declare const FormatSettings: ({ onCompactNumbersChange, onCurrencyChange, onDataFormatChange, onFixedLengthChange, onUseSeparatorChange, onSetDefault, getFormattedValue, format, text, currenciesConfig, disabled, }: FormatSettingsProps) => React.JSX.Element;
 export default FormatSettings;

package/dist/FormatSettings/FormatSettings.js

@@ -1,12 +1,6 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { useCallback, useMemo } from 'react';
-import Icon, { AngleDownS, Coin2M, CommaDecM, CommaIncM, HashM, PercentM } from '@synerise/ds-icon';
 import { useIntl } from 'react-intl';
+import Icon, { AngleDownS, Coin2M, CommaDecM, CommaIncM, HashM, PercentM } from '@synerise/ds-icon';
 import { Title } from '@synerise/ds-typography';
 import Tooltip from '@synerise/ds-tooltip';
 import Radio from '@synerise/ds-radio';
@@ -15,7 +9,6 @@ import Button from '@synerise/ds-button';
 import Checkbox from '@synerise/ds-checkbox';
 import Dropdown from '@synerise/ds-dropdown';
 import * as S from './FormatSettings.styles';
-import { valueFormatter } from '../utils/valueFormatter';
 var DEFAULT_CURRENCIES_CONFIG = [{
   currency: 'USD',
   label: 'Dollar (US)'
@@ -53,8 +46,8 @@ var FormatSettings = function FormatSettings(_ref) {
       onFixedLengthChange = _ref.onFixedLengthChange,
       onUseSeparatorChange = _ref.onUseSeparatorChange,
       onSetDefault = _ref.onSetDefault,
+      getFormattedValue = _ref.getFormattedValue,
       format = _ref.format,
-      value = _ref.value,
       text = _ref.text,
       _ref$currenciesConfig = _ref.currenciesConfig,
       currenciesConfig = _ref$currenciesConfig === void 0 ? DEFAULT_CURRENCIES_CONFIG : _ref$currenciesConfig,
@@ -124,12 +117,8 @@ var FormatSettings = function FormatSettings(_ref) {
           label = _ref2.label;
       return /*#__PURE__*/React.createElement(S.ListItem, {
         key: currency,
-        suffixel: valueFormatter({
-          value: value,
-          formatting: _objectSpread({}, format, {
-            currency: currency
-          }),
-          intl: intl
+        suffixel: getFormattedValue({
+          currency: currency
         }),
         onClick: function onClick() {
           return onCurrencyChange(currency);

package/dist/FormatSettings/FormatSettings.types.d.ts

@@ -1,4 +1,6 @@
+import { NumberToFormatOptions } from '@synerise/ds-data-format';
 import type { FormatPickerProps, FormatPickerTexts } from '../FomartPicker.types';
-export type FormatSettingsProps = Omit<FormatPickerProps, 'text'> & {
+export type FormatSettingsProps = Omit<FormatPickerProps, 'text' | 'value'> & {
+    getFormattedValue: (options: NumberToFormatOptions) => string;
     text: FormatPickerTexts;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-format-picker",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "FormatPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,18 +33,17 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.5",
-    "@synerise/ds-button-group": "^0.7.9",
+    "@synerise/ds-button": "^0.21.6",
+    "@synerise/ds-button-group": "^0.7.10",
     "@synerise/ds-checkbox": "^0.12.4",
-    "@synerise/ds-dropdown": "^0.18.9",
-    "@synerise/ds-icon": "^0.65.0",
-    "@synerise/ds-list-item": "^0.4.5",
+    "@synerise/ds-data-format": "^0.5.2",
+    "@synerise/ds-dropdown": "^0.18.10",
+    "@synerise/ds-icon": "^0.65.1",
+    "@synerise/ds-list-item": "^0.4.6",
     "@synerise/ds-radio": "^0.12.0",
-    "@synerise/ds-tooltip": "^0.14.35",
+    "@synerise/ds-tooltip": "^0.14.36",
     "@synerise/ds-typography": "^0.15.1",
-    "@types/numeral": "^2.0.2",
-    "lodash": "^4.17.19",
-    "numeral": "^2.0.6",
+    "@synerise/ds-utils": "^0.28.2",
     "react-intl": "3.12.0"
   },
   "peerDependencies": {
@@ -52,5 +51,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "2e6de17b64023536c24be8fcb67b1e53e8bffa3d"
+  "gitHead": "a035aeea499cea00e72e20e3790c0ffcad4fe956"
 }

package/dist/utils/valueFormatter.d.ts

@@ -1,9 +0,0 @@
-import { IntlShape } from 'react-intl';
-import { CurrencyType, FormattingDataFormat, FormattingValue } from '../FomartPicker.types';
-import { ValueFormatterProps } from './valueFormatter.types';
-export declare const appendZeros: (fixedLength: number) => string;
-export declare const chooseSuffix: (compactNumbers: boolean) => string;
-export declare const choosePrefix: (useSeparator: boolean) => string;
-export declare const getFormattingFormula: (formatting: FormattingValue) => string;
-export declare const appendSign: (input: string, intl: IntlShape, format: FormattingDataFormat, currency: CurrencyType) => string;
-export declare const valueFormatter: (props: ValueFormatterProps) => string;

package/dist/utils/valueFormatter.js

@@ -1,203 +0,0 @@
-// @ts-ignore
-import numeral from 'numeral';
-import { range } from 'lodash';
-var CONTAINS_LETTERS = /[^0-9,.]/;
-var DIGITS = /[0-9,.]+/;
-var ptConfig = {
-  delimiters: {
-    thousands: ' ',
-    decimal: ','
-  },
-  abbreviations: {
-    thousand: 'k',
-    million: 'm',
-    billion: 'b',
-    trillion: 't'
-  },
-  ordinal: function ordinal() {
-    return 'º';
-  },
-  currency: {
-    symbol: '€'
-  }
-};
-
-if (numeral.locales.pl === undefined) {
-  numeral.register('locale', 'pl', {
-    delimiters: {
-      thousands: ',',
-      decimal: '.'
-    },
-    abbreviations: {
-      thousand: ' tys',
-      million: ' mln',
-      billion: ' mld',
-      trillion: ' bln'
-    },
-    ordinal: function ordinal(number) {
-      return number === 1 ? 'er' : 'ème';
-    },
-    currency: {
-      symbol: '$'
-    }
-  });
-}
-
-if (numeral.locales.es === undefined) {
-  numeral.register('locale', 'es', {
-    delimiters: {
-      thousands: '.',
-      decimal: ','
-    },
-    abbreviations: {
-      thousand: 'k',
-      million: 'mm',
-      billion: 'b',
-      trillion: 't'
-    },
-    ordinal: function ordinal(number) {
-      var b = number % 10;
-      var result = ['mo', 'er', 'do', 'er', 'to', 'to', 'to', 'mo', 'mo', 'no'];
-      return result[b];
-    },
-    currency: {
-      symbol: '$'
-    }
-  });
-}
-
-if (numeral.locales.fr === undefined) {
-  numeral.register('locale', 'fr', {
-    delimiters: {
-      thousands: '.',
-      decimal: ','
-    },
-    abbreviations: {
-      thousand: 'k',
-      million: 'mm',
-      billion: 'b',
-      trillion: 't'
-    },
-    ordinal: function ordinal(number) {
-      return number === 1 ? 'er' : 'e';
-    },
-    currency: {
-      symbol: '$'
-    }
-  });
-}
-
-if (numeral.locales.pt === undefined) {
-  numeral.register('locale', 'pt', ptConfig);
-}
-
-if (numeral.locales['pt-pt'] === undefined) {
-  numeral.register('locale', 'pt-pt', ptConfig);
-}
-
-if (numeral.locales['en-gb'] === undefined) {
-  numeral.register('locale', 'en-gb', {
-    delimiters: {
-      thousands: ',',
-      decimal: '.'
-    },
-    abbreviations: {
-      thousand: 'k',
-      million: 'm',
-      billion: 'b',
-      trillion: 't'
-    },
-    ordinal: function ordinal(number) {
-      var b = number % 10;
-
-      if (Math.floor(number % 100 / 10) === 1) {
-        return 'th';
-      }
-
-      if (b === 1) return 'st';
-      if (b === 2) return 'nd';
-      if (b === 3) return 'rd';
-      return 'th';
-    },
-    currency: {
-      symbol: '£'
-    }
-  });
-}
-
-if (numeral.locales['en-us'] === undefined) {
-  numeral.register('locale', 'en-us', {
-    delimiters: {
-      thousands: ',',
-      decimal: '.'
-    },
-    abbreviations: {
-      thousand: 'k',
-      million: 'm',
-      billion: 'b',
-      trillion: 't'
-    },
-    ordinal: function ordinal(number) {
-      var b = number % 10;
-
-      if (Math.floor(number % 100 / 10) === 1) {
-        return 'th';
-      }
-
-      if (b === 1) return 'st';
-      if (b === 2) return 'nd';
-      if (b === 3) return 'rd';
-      return 'th';
-    },
-    currency: {
-      symbol: '$'
-    }
-  });
-}
-
-export var appendZeros = function appendZeros(fixedLength) {
-  if (!fixedLength) {
-    return '';
-  }
-
-  return "." + range(0, fixedLength, 0).join('');
-};
-export var chooseSuffix = function chooseSuffix(compactNumbers) {
-  return compactNumbers ? 'a' : '';
-};
-export var choosePrefix = function choosePrefix(useSeparator) {
-  return useSeparator ? '0,0' : '0';
-};
-export var getFormattingFormula = function getFormattingFormula(formatting) {
-  return "" + choosePrefix(formatting.useSeparator) + appendZeros(formatting.fixedLength) + chooseSuffix(formatting.compactNumbers);
-};
-export var appendSign = function appendSign(input, intl, format, currency) {
-  switch (format) {
-    case 'cash':
-      {
-        if (!currency) {
-          return input;
-        }
-
-        var currencyFormat = intl.formatNumber(1, {
-          style: 'currency',
-          currencyDisplay: 'symbol',
-          currency: currency
-        });
-        return CONTAINS_LETTERS.test(input) ? currencyFormat.replace(DIGITS, input + " ") : currencyFormat.replace(DIGITS, input);
-      }
-
-    case 'percent':
-      return CONTAINS_LETTERS.test(input) ? input + " %" : input + "%";
-
-    case 'numeric':
-    default:
-      return input;
-  }
-};
-export var valueFormatter = function valueFormatter(props) {
-  numeral.locale(props.intl.locale.toLowerCase());
-  var formattedValue = numeral(props.value.toFixed(props.formatting.fixedLength)).format(getFormattingFormula(props.formatting));
-  var result = appendSign(formattedValue, props.intl, props.formatting.dataFormat, props.formatting.currency);
-  return result;
-};

package/dist/utils/valueFormatter.types.d.ts

@@ -1,7 +0,0 @@
-import { IntlShape } from 'react-intl';
-import { FormattingValue } from '../FomartPicker.types';
-export type ValueFormatterProps = {
-    formatting: FormattingValue;
-    value: number;
-    intl: IntlShape;
-};

package/dist/utils/valueFormatter.types.js

@@ -1 +0,0 @@
-export {};