Skip to content

Commit

Permalink
feat(InputMasked): ATTENTION! make allowLeadingZeroes default to true (…
Browse files Browse the repository at this point in the history 
…#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 <anderslangseth@gmail.com>

Co-authored-by: Anders <anderslangseth@gmail.com>
  • Loading branch information
@tujoworker @langz
tujoworker and langz committed May 31, 2023
1 parent fbc361d commit e0466e1
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 35 deletions.
4 changes: 4 additions & 0 deletions ...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,10 @@ When you convert from `<Modal />` to `<Dialog />` – 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.
Expand Down
38 changes: 19 additions & 19 deletions ...s/dnb-design-system-portal/src/docs/uilib/components/input-masked/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`. |
Expand All @@ -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

Expand Down Expand Up @@ -100,4 +100,4 @@ render(
)
```

Read more about other addons [on the open-source project](https://github.com/text-mask/text-mask)
Read more about other addons [on the open-source project](https://github.com/text-mask/text-mask)
3 changes: 1 addition & 2 deletions packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, '') === '' &&
Expand Down
20 changes: 10 additions & 10 deletions packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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,
},
})

Expand All @@ -232,7 +232,7 @@ describe('InputMasked component', () => {

Comp.setProps({
number_mask: {
allowLeadingZeroes: false,
disallowLeadingZeroes: false,
allowDecimal: false,
},
})
Expand All @@ -246,7 +246,7 @@ describe('InputMasked component', () => {
},
preventDefault,
})
expect(preventDefault).toHaveBeenCalledTimes(3)
expect(preventDefault).toHaveBeenCalledTimes(2)
expect(onKeyDown).toHaveBeenCalledTimes(4)
})

Expand Down Expand Up @@ -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()

Expand All @@ -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,
},
})

Expand Down Expand Up @@ -513,7 +513,7 @@ describe('InputMasked component', () => {

Comp.setProps({
mask_options: {
allowLeadingZeroes: false,
disallowLeadingZeroes: true,
},
})

Expand Down Expand Up @@ -1384,7 +1384,7 @@ describe('InputMasked component as_currency', () => {
<Component
value={value}
number_mask={{
allowLeadingZeroes: true,
disallowLeadingZeroes: true,
allowNegative: false,
allowDecimal: true,
}}
Expand Down
8 changes: 4 additions & 4 deletions packages/dnb-eufemia/src/components/input-masked/stories/InputMasked.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function BasicNumberMask() {
value={floatval}
// placeholder="En placeholder"
number_mask
mask_options={{ allowLeadingZeroes: true, allowNegative: false }}
mask_options={{ disallowLeadingZeroes: true, allowNegative: false }}
suffix={<Pre>{JSON.stringify(floatval)}</Pre>}
on_change={({ numberValue }) => {
setState(numberValue)
Expand All @@ -101,7 +101,7 @@ function BasicCurrencyMask() {
// allowDecimal: false,
allowNegative: false,
}}
// mask_options={{ allowLeadingZeroes: true }}
// mask_options={{ disallowLeadingZeroes: true }}
suffix={<Pre>{JSON.stringify(floatval)}</Pre>}
on_change={({ numberValue }) => {
setState(numberValue)
Expand All @@ -119,7 +119,7 @@ function CurrencyInput() {
label="as_currency"
value={floatval}
as_currency="NOK"
// mask_options={{ allowLeadingZeroes: true }}
// mask_options={{ disallowLeadingZeroes: true }}
suffix={<Pre>{JSON.stringify(floatval)}</Pre>}
on_change={({ numberValue }) => {
setState(numberValue)
Expand Down Expand Up @@ -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={<Pre>{JSON.stringify(floatval)}</Pre>}
on_change={({ numberValue }) => {
Expand Down

0 comments on commit e0466e1

Please sign in to comment.