@synerise/ds-format-picker 0.4.4 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.5.0...@synerise/ds-format-picker@0.5.1) (2024-08-06)
+
+**Note:** Version bump only for package @synerise/ds-format-picker
+
+
+
+
+
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.4.4...@synerise/ds-format-picker@0.5.0) (2024-08-01)
+
+
+### Features
+
+* **format-picker:** add disabled and onFormattedValueChange props ([fb6c748](https://github.com/Synerise/synerise-design/commit/fb6c748e6a80e9ade59999066e9272d7acd3542d))
+* **format-picker:** changes onSetDefault to optional prop ([9cec904](https://github.com/Synerise/synerise-design/commit/9cec904a3212eb5f8e64a16f0bd1964350a4aa7c))
+
+
+
+
+
 ## [0.4.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-format-picker@0.4.3...@synerise/ds-format-picker@0.4.4) (2024-07-31)
 
 **Note:** Version bump only for package @synerise/ds-format-picker

package/dist/FomartPicker.types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-export type CurrencyType = 'USD' | 'EUR' | 'PLN' | 'JPY';
+export type CurrencyType = string;
 export type FormattingDataFormat = 'numeric' | 'percent' | 'cash';
 export type FormattingValue = {
     dataFormat: FormattingDataFormat;
@@ -35,8 +35,10 @@ export type FormatPickerProps = {
     onUseSeparatorChange: (useSeparator: boolean) => void;
     onCompactNumbersChange: (useCompact: boolean) => void;
     onFixedLengthChange: (fixedLength: number) => void;
-    onSetDefault: () => void;
+    onSetDefault?: () => void;
+    onFormattedValueChange?: (formattedValue: string) => void;
     text?: Partial<FormatPickerTexts>;
     currenciesConfig?: CurrencyConfig[];
     buttonType?: string;
+    disabled?: boolean;
 };

package/dist/FormatPicker.d.ts

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

package/dist/FormatPicker.js

@@ -4,7 +4,7 @@ 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, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@synerise/ds-button';
 import Dropdown from '@synerise/ds-dropdown';
@@ -19,12 +19,14 @@ var FormatPicker = function FormatPicker(_ref) {
       onCurrencyChange = _ref.onCurrencyChange,
       onCompactNumbersChange = _ref.onCompactNumbersChange,
       onSetDefault = _ref.onSetDefault,
+      onFormattedValueChange = _ref.onFormattedValueChange,
       value = _ref.value,
       format = _ref.format,
       text = _ref.text,
       currenciesConfig = _ref.currenciesConfig,
       _ref$buttonType = _ref.buttonType,
-      buttonType = _ref$buttonType === void 0 ? 'tertiary' : _ref$buttonType;
+      buttonType = _ref$buttonType === void 0 ? 'tertiary' : _ref$buttonType,
+      disabled = _ref.disabled;
   var intl = useIntl();
   var texts = useMemo(function () {
     return _objectSpread({
@@ -62,8 +64,19 @@ var FormatPicker = function FormatPicker(_ref) {
       })
     }, text);
   }, [text, intl]);
+  var formattedValue = useMemo(function () {
+    return valueFormatter({
+      value: value,
+      formatting: format,
+      intl: intl
+    });
+  }, [value, format, intl]);
+  useEffect(function () {
+    onFormattedValueChange && onFormattedValueChange(formattedValue);
+  }, [formattedValue, onFormattedValueChange]);
   return /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
+    disabled: disabled,
     overlay: /*#__PURE__*/React.createElement(FormatSettings, {
       onCurrencyChange: onCurrencyChange,
       onFixedLengthChange: onFixedLengthChange,
@@ -74,19 +87,17 @@ var FormatPicker = function FormatPicker(_ref) {
       format: format,
       value: value,
       text: texts,
-      currenciesConfig: currenciesConfig
+      currenciesConfig: currenciesConfig,
+      disabled: disabled
     }),
     placement: "topCenter"
   }, /*#__PURE__*/React.createElement(Button, {
     type: buttonType,
-    mode: "icon-label"
+    mode: "icon-label",
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(HashM, null)
-  }), texts.format + " " + valueFormatter({
-    value: value,
-    formatting: format,
-    intl: intl
-  })));
+  }), texts.format + " " + formattedValue));
 };
 
 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, }: FormatSettingsProps) => React.JSX.Element;
+declare const FormatSettings: ({ onCompactNumbersChange, onCurrencyChange, onDataFormatChange, onFixedLengthChange, onUseSeparatorChange, onSetDefault, format, value, text, currenciesConfig, disabled, }: FormatSettingsProps) => React.JSX.Element;
 export default FormatSettings;

package/dist/FormatSettings/FormatSettings.js

@@ -16,6 +16,19 @@ 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)'
+}, {
+  currency: 'EUR',
+  label: 'Euro (EU)'
+}, {
+  currency: 'PLN',
+  label: 'Złoty (PL)'
+}, {
+  currency: 'JPY',
+  label: 'Yen (JP)'
+}];
 
 var getFormattingTypes = function getFormattingTypes(intl, text) {
   return [{
@@ -33,22 +46,6 @@ var getFormattingTypes = function getFormattingTypes(intl, text) {
   }];
 };
 
-var getCurrenciesConfig = function getCurrenciesConfig(currenciesConfig) {
-  return [{
-    currency: 'USD',
-    label: 'Dollar (US)'
-  }, {
-    currency: 'EUR',
-    label: 'Euro (EU)'
-  }, {
-    currency: 'PLN',
-    label: 'Złoty (PL)'
-  }, {
-    currency: 'JPY',
-    label: 'Yen (JP)'
-  }].concat(currenciesConfig);
-};
-
 var FormatSettings = function FormatSettings(_ref) {
   var onCompactNumbersChange = _ref.onCompactNumbersChange,
       onCurrencyChange = _ref.onCurrencyChange,
@@ -59,7 +56,9 @@ var FormatSettings = function FormatSettings(_ref) {
       format = _ref.format,
       value = _ref.value,
       text = _ref.text,
-      currenciesConfig = _ref.currenciesConfig;
+      _ref$currenciesConfig = _ref.currenciesConfig,
+      currenciesConfig = _ref$currenciesConfig === void 0 ? DEFAULT_CURRENCIES_CONFIG : _ref$currenciesConfig,
+      disabled = _ref.disabled;
   var intl = useIntl();
   var handleDecreaseFixedLength = useCallback(function () {
     if (format.fixedLength > 0) {
@@ -72,7 +71,7 @@ var FormatSettings = function FormatSettings(_ref) {
     onFixedLengthChange(format.fixedLength + 1);
   }, [onFixedLengthChange, format]);
   var selectedCurrency = useMemo(function () {
-    return getCurrenciesConfig(currenciesConfig || []).find(function (currency) {
+    return currenciesConfig.find(function (currency) {
       return currency.currency === format.currency;
     });
   }, [currenciesConfig, format]);
@@ -96,7 +95,8 @@ var FormatSettings = function FormatSettings(_ref) {
       "data-testid": "ds-format-picker-type-" + type.format,
       onClick: function onClick() {
         return onDataFormatChange(type.format);
-      }
+      },
+      disabled: disabled
     }, /*#__PURE__*/React.createElement(Icon, {
       component: type.icon
     })));
@@ -105,18 +105,21 @@ var FormatSettings = function FormatSettings(_ref) {
   }, /*#__PURE__*/React.createElement(S.FixedLengthButton, {
     type: "secondary",
     mode: "icon",
-    onClick: handleDecreaseFixedLength
+    onClick: handleDecreaseFixedLength,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CommaDecM, null)
   })), /*#__PURE__*/React.createElement(S.FixedLengthButton, {
     type: "secondary",
     mode: "icon",
-    onClick: handleIncreaseFixedLength
+    onClick: handleIncreaseFixedLength,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CommaIncM, null)
   })))), /*#__PURE__*/React.createElement(S.FormatOptions, null, format.dataFormat === 'cash' && /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
-    overlay: /*#__PURE__*/React.createElement(S.DropdownWrapper, null, getCurrenciesConfig(currenciesConfig || []).map(function (_ref2) {
+    disabled: disabled,
+    overlay: /*#__PURE__*/React.createElement(S.DropdownWrapper, null, currenciesConfig.map(function (_ref2) {
       var currency = _ref2.currency,
           label = _ref2.label;
       return /*#__PURE__*/React.createElement(S.ListItem, {
@@ -141,15 +144,18 @@ var FormatSettings = function FormatSettings(_ref) {
     onChange: function onChange(event) {
       return onUseSeparatorChange(event.target.checked);
     },
-    checked: format.useSeparator
+    checked: format.useSeparator,
+    disabled: disabled
   }, text.useSeparator), /*#__PURE__*/React.createElement(Checkbox, {
     onChange: function onChange(event) {
       return onCompactNumbersChange(event.target.checked);
     },
-    checked: format.compactNumbers
-  }, text.compactNumbers))), /*#__PURE__*/React.createElement(S.FormatFooter, null, /*#__PURE__*/React.createElement(Button, {
+    checked: format.compactNumbers,
+    disabled: disabled
+  }, text.compactNumbers))), onSetDefault && /*#__PURE__*/React.createElement(S.FormatFooter, null, /*#__PURE__*/React.createElement(Button, {
     type: "ghost",
-    onClick: onSetDefault
+    onClick: onSetDefault,
+    disabled: disabled
   }, text.setDefault)));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-format-picker",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "description": "FormatPicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,12 +34,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.21.4",
-    "@synerise/ds-button-group": "^0.7.7",
-    "@synerise/ds-checkbox": "^0.12.3",
-    "@synerise/ds-dropdown": "^0.18.7",
+    "@synerise/ds-button-group": "^0.7.8",
+    "@synerise/ds-checkbox": "^0.12.4",
+    "@synerise/ds-dropdown": "^0.18.8",
     "@synerise/ds-icon": "^0.64.1",
-    "@synerise/ds-list-item": "^0.4.3",
-    "@synerise/ds-radio": "^0.11.75",
+    "@synerise/ds-list-item": "^0.4.4",
+    "@synerise/ds-radio": "^0.11.76",
     "@synerise/ds-tooltip": "^0.14.34",
     "@synerise/ds-typography": "^0.15.1",
     "@types/numeral": "^2.0.2",
@@ -52,5 +52,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "9780605713f2ee1cb62d79a8ab027058117c4e4a"
+  "gitHead": "14a9cfb86e5d548d5511ed7cdb23088dcb8b9a2d"
 }