From e0466e1b899e2246327405e010ad713609bd3671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Fri, 20 Jan 2023 12:46:33 +0100 Subject: [PATCH] feat(InputMasked): ATTENTION! make allowLeadingZeroes default to true (#1126) * feat(InputMasked): ATTENTION! make allowLeadingZeroes default to true * Update packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md Co-authored-by: Anders Co-authored-by: Anders --- .../releases/eufemia/v10-info.md | 4 ++ .../components/input-masked/properties.md | 38 +++++++++---------- .../input-masked/InputMaskedHooks.js | 3 +- .../__tests__/InputMasked.test.js | 20 +++++----- .../stories/InputMasked.stories.js | 8 ++-- 5 files changed, 38 insertions(+), 35 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md index 6c98fa55e96..99d4cf48827 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md @@ -126,6 +126,10 @@ When you convert from `` to `` – follow these steps: 1. New **Definition List** layout direction: `direction="horizontal"` including `Dl.Item` [demo](https://eufemia.dnb.no/uilib/elements/lists/#definition-list-in-horizontal-direction). +### [InputMasked](/uilib/components/input-masked) + +1. In v10, InputMasked **allows leading zeros**. To prevent that behaviour, the property `allowLeadingZeroes` has changed to `disallowLeadingZeroes`. + ### [Stopped supporting Internet Explorer (IE)](/uilib/usage/#supported-browsers-and-platforms) Stopped supporting Internet Explorer (IE), as Microsoft formally ended support for IE in June, 2022. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md index f41249362e5..daf0918a62b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md @@ -4,22 +4,22 @@ showTabs: true ## Properties -| Properties | Description | -| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `as_number` | _(optional)_ Set to `true` to automatically set a number mask based on the given or inherited locale. | -| `as_percent` | _(optional)_ Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale. | -| `as_currency` | _(optional)_ Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale. | -| `mask_options` | _(optional)_ Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `curreny_mask`. All options are listed below. | -| `number_mask` | _(optional)_ Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. | +| Properties | Description | +| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `as_number` | _(optional)_ Set to `true` to automatically set a number mask based on the given or inherited locale. | +| `as_percent` | _(optional)_ Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale. | +| `as_currency` | _(optional)_ Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale. | +| `mask_options` | _(optional)_ Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `curreny_mask`. All options are listed below. | +| `number_mask` | _(optional)_ Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. | | `currency_mask` | _(optional)_ Set to `true` or set the _valuta_ (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`. | -| `number_format` | _(optional)_ Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`. | -| `locale` | _(optional)_ Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the [Eufemia Provider](/uilib/usage/customisation/provider) if not given. Defaults to `nb-NO`. | -| `mask` | _(optional)_ A mask can be defined both as a [RegExp style of characters](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme) or a callback function. Example below. | -| `show_mask` | _(optional)_ Show mask when input is empty and has no focus. Defaults to `false`. | -| `show_guide` | _(optional)_ When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`. | -| `placeholder_char` | _(optional)_ The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space. | -| `keep_char_positions` | _(optional)_ When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`. | -| [Input](/uilib/components/input/properties) | _(optional)_ all `Input` properties are supported. | +| `number_format` | _(optional)_ Use an object with [NumberFormat](/uilib/components/number-format/properties) e.g. `{ omit_rounding: false }`. | +| `locale` | _(optional)_ Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the [Eufemia Provider](/uilib/usage/customisation/provider) if not given. Defaults to `nb-NO`. | +| `mask` | _(optional)_ A mask can be defined both as a [RegExp style of characters](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme) or a callback function. Example below. | +| `show_mask` | _(optional)_ Show mask when input is empty and has no focus. Defaults to `false`. | +| `show_guide` | _(optional)_ When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`. | +| `placeholder_char` | _(optional)_ The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space. | +| `keep_char_positions` | _(optional)_ When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`. | +| [Input](/uilib/components/input/properties) | _(optional)_ all `Input` properties are supported. | ## Number mask properties @@ -42,8 +42,8 @@ Defaults to Norwegian number format. | Properties | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| `prefix` | (string): What to display before the amount. Defaults to an empty string. | -| `suffix` | (string): What to display after the amount. Defaults to an empty string. | +| `prefix` | (string): What to display before the amount. Defaults to an empty string. | +| `suffix` | (string): What to display after the amount. Defaults to an empty string. | | `includeThousandsSeparator` | (boolean): Whether or not to separate thousands. Defaults to to `true`. | | `thousandsSeparatorSymbol` | (string): Character with which to separate thousands. Default to `' '`. | | `allowDecimal` | (boolean): Whether or not to allow the user to enter a fraction with the amount. Default to `false`. | @@ -52,7 +52,7 @@ Defaults to Norwegian number format. | `integerLimit` | (number): Limit the length of the integer number. Defaults to `null` for unlimited. | | `requireDecimal` | (boolean): Whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults to `false`. | | `allowNegative` | (boolean): Whether or not to allow negative numbers. Defaults to `true`. | -| `allowLeadingZeroes` | (boolean): Whether or not to allow leading zeroes. Defaults to `false`. | +| `disallowLeadingZeroes` | (boolean): Whether or not to allow leading zeroes. Defaults to `false`. | ### Custom number mask usage @@ -100,4 +100,4 @@ render( ) ``` -Read more about other addons [on the open-source project](https://github.com/text-mask/text-mask) \ No newline at end of file +Read more about other addons [on the open-source project](https://github.com/text-mask/text-mask) diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js index 4357c5a5b93..e0afb29447a 100644 --- a/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js +++ b/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js @@ -335,8 +335,7 @@ const useCallEvent = ({ setLocalValue }) => { if ( name === 'on_key_down' && !isUnidentified && - ((isNumberMask && !maskParams?.allowLeadingZeroes) || - (!isNumberMask && maskParams?.allowLeadingZeroes === false)) && + maskParams?.disallowLeadingZeroes && (keyCode === '0' || keyCode === 'numpad 0' || (value.replace(/[^\d]/g, '') === '' && diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js b/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js index 7de81c682ba..d36cb901eea 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js @@ -164,7 +164,7 @@ describe('InputMasked component', () => { expect(on_change.mock.calls[0][0].numberValue).toBe(123456789.678) }) - it('should prevent leading zero by default', () => { + it('should prevent leading zero when disallowLeadingZeroes is set', () => { const newValue = 'NOK 1 234,56 kr' const onKeyDown = jest.fn() @@ -208,12 +208,12 @@ describe('InputMasked component', () => { }, preventDefault, }) - expect(preventDefault).toHaveBeenCalledTimes(1) + expect(preventDefault).toHaveBeenCalledTimes(0) expect(onKeyDown).toHaveBeenCalledTimes(2) Comp.setProps({ number_mask: { - allowLeadingZeroes: true, + disallowLeadingZeroes: true, }, }) @@ -232,7 +232,7 @@ describe('InputMasked component', () => { Comp.setProps({ number_mask: { - allowLeadingZeroes: false, + disallowLeadingZeroes: false, allowDecimal: false, }, }) @@ -246,7 +246,7 @@ describe('InputMasked component', () => { }, preventDefault, }) - expect(preventDefault).toHaveBeenCalledTimes(3) + expect(preventDefault).toHaveBeenCalledTimes(2) expect(onKeyDown).toHaveBeenCalledTimes(4) }) @@ -424,7 +424,7 @@ describe('InputMasked component', () => { expect(Comp.find('input').instance().value).toBe('1 234') }) - it('should not set leading zero when entering decimal separator', () => { + it('should not set leading zero when entering decimal separator and disallowLeadingZeroes is set', () => { const onKeyDown = jest.fn() const preventDefault = jest.fn() @@ -446,12 +446,12 @@ describe('InputMasked component', () => { }, preventDefault, }) - expect(preventDefault).toHaveBeenCalledTimes(1) + expect(preventDefault).toHaveBeenCalledTimes(0) expect(onKeyDown).toHaveBeenCalledTimes(1) Comp.setProps({ number_mask: { - allowLeadingZeroes: true, + disallowLeadingZeroes: true, }, }) @@ -513,7 +513,7 @@ describe('InputMasked component', () => { Comp.setProps({ mask_options: { - allowLeadingZeroes: false, + disallowLeadingZeroes: true, }, }) @@ -1384,7 +1384,7 @@ describe('InputMasked component as_currency', () => { {JSON.stringify(floatval)}} on_change={({ numberValue }) => { setState(numberValue) @@ -101,7 +101,7 @@ function BasicCurrencyMask() { // allowDecimal: false, allowNegative: false, }} - // mask_options={{ allowLeadingZeroes: true }} + // mask_options={{ disallowLeadingZeroes: true }} suffix={
{JSON.stringify(floatval)}
} on_change={({ numberValue }) => { setState(numberValue) @@ -119,7 +119,7 @@ function CurrencyInput() { label="as_currency" value={floatval} as_currency="NOK" - // mask_options={{ allowLeadingZeroes: true }} + // mask_options={{ disallowLeadingZeroes: true }} suffix={
{JSON.stringify(floatval)}
} on_change={({ numberValue }) => { setState(numberValue) @@ -155,7 +155,7 @@ function PercentInput() { label="as_percent" value={floatval} as_percent - mask_options={{ allowDecimal: true, allowLeadingZeroes: true }} + mask_options={{ allowDecimal: true, disallowLeadingZeroes: true }} // number_mask={{ allowDecimal: true, decimalLimit: 1 }} suffix={
{JSON.stringify(floatval)}
} on_change={({ numberValue }) => {