Fix on masked text inputs

dnbexperience · Aug 16, 2023 · 3992d54 · 3992d54
1 parent 78defd3
commit 3992d54
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 89 deletions.
diff --git a/...l/src/docs/uilib/extensions/forms/Field/feature-components/BankAccountNumber/Examples.tsx b/...l/src/docs/uilib/extensions/forms/Field/feature-components/BankAccountNumber/Examples.tsx
@@ -12,6 +12,17 @@ export const Empty = () => {
   )
 }
 
+export const OmitMask = () => {
+  return (
+    <ComponentBox scope={{ Field }}>
+      <Field.BankAccountNumber
+        onChange={(value) => console.log('onChange', value)}
+        omitMask
+      />
+    </ComponentBox>
+  )
+}
+
 export const Placeholder = () => {
   return (
     <ComponentBox scope={{ Field }}>

diff --git a/...ocs/uilib/extensions/forms/Field/feature-components/BankAccountNumber/demos.mdx b/...ocs/uilib/extensions/forms/Field/feature-components/BankAccountNumber/demos.mdx
@@ -10,6 +10,10 @@ import * as Examples from './Examples'
 
 <Examples.Empty />
 
+### Omit mask
+
+<Examples.OmitMask />
+
 ### Placeholder
 
 <Examples.Placeholder />

diff --git a/.../docs/uilib/extensions/forms/Field/feature-components/NationalIdentityNumber/Examples.tsx b/.../docs/uilib/extensions/forms/Field/feature-components/NationalIdentityNumber/Examples.tsx
@@ -12,6 +12,17 @@ export const Empty = () => {
   )
 }
 
+export const OmitMask = () => {
+  return (
+    <ComponentBox scope={{ Field }}>
+      <Field.NationalIdentityNumber
+        onChange={(value) => console.log('onChange', value)}
+        omitMask
+      />
+    </ComponentBox>
+  )
+}
+
 export const Placeholder = () => {
   return (
     <ComponentBox scope={{ Field }}>

diff --git a/...ilib/extensions/forms/Field/feature-components/NationalIdentityNumber/demos.mdx b/...ilib/extensions/forms/Field/feature-components/NationalIdentityNumber/demos.mdx
@@ -10,6 +10,10 @@ import * as Examples from './Examples'
 
 <Examples.Empty />
 
+### Omit mask
+
+<Examples.OmitMask />
+
 ### Placeholder
 
 <Examples.Placeholder />

diff --git a/.../src/docs/uilib/extensions/forms/Field/feature-components/OrganizationNumber/Examples.tsx b/.../src/docs/uilib/extensions/forms/Field/feature-components/OrganizationNumber/Examples.tsx
@@ -12,6 +12,17 @@ export const Empty = () => {
   )
 }
 
+export const OmitMask = () => {
+  return (
+    <ComponentBox scope={{ Field }}>
+      <Field.OrganizationNumber
+        onChange={(value) => console.log('onChange', value)}
+        omitMask
+      />
+    </ComponentBox>
+  )
+}
+
 export const Placeholder = () => {
   return (
     <ComponentBox scope={{ Field }}>

diff --git a/...cs/uilib/extensions/forms/Field/feature-components/OrganizationNumber/demos.mdx b/...cs/uilib/extensions/forms/Field/feature-components/OrganizationNumber/demos.mdx
@@ -10,6 +10,10 @@ import * as Examples from './Examples'
 
 <Examples.Empty />
 
+### Omit mask
+
+<Examples.OmitMask />
+
 ### Placeholder
 
 <Examples.Placeholder />

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber.tsx
@@ -1,18 +1,20 @@
 import React, { useContext } from 'react'
-import classnames from 'classnames'
-import { InputMasked } from '../../../components'
-import { useField } from './hooks'
-import { forwardSpaceProps } from '../utils'
-import { Props as StringComponentProps } from './String'
+import StringComponent, { Props as StringComponentProps } from './String'
 import SharedContext from '../../../shared/Context'
 
-export type Props = StringComponentProps
+export type Props = StringComponentProps & {
+  validate?: boolean
+  omitMask?: boolean
+}
 
 export default function FieldBankAccountNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
+  const { validate = true, omitMask } = props
 
-  const preparedProps: Props = {
+  const stringComponentProps: Props = {
     ...props,
+    className: 'dnb-forms-field-bank-account-number',
+    pattern: props.pattern ?? (validate ? '^[0-9]{11}$' : undefined),
     label:
       props.label ??
       sharedContext?.translation.Forms.bankAccountNumberLabel,
@@ -23,56 +25,25 @@ export default function FieldBankAccountNumber(props: Props) {
         sharedContext?.translation.Forms.bankAccountNumberErrorPattern,
       ...props.errorMessages,
     },
-    fromInput: ({ value }: { value: string }) => {
-      if (value === '') {
-        return props.emptyValue
-      }
-      return value
-    },
+    mask: omitMask
+      ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]
+      : [
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          ' ',
+          /\d/,
+          /\d/,
+          ' ',
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+        ],
+    width: props.width ?? 'medium',
   }
-  const {
-    className,
-    placeholder,
-    label,
-    value,
-    error,
-    disabled,
-    onFocus,
-    onBlur,
-    onChange,
-  } = useField(preparedProps)
 
-  return (
-    <InputMasked
-      className={classnames(
-        'dnb-forms-field-bank-account-number',
-        className
-      )}
-      mask={[
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        ' ',
-        /\d/,
-        /\d/,
-        ' ',
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-        /\d/,
-      ]}
-      placeholder={placeholder}
-      value={value?.toString() ?? ''}
-      label={label}
-      label_direction="vertical"
-      on_focus={onFocus}
-      on_blur={onBlur}
-      on_change={onChange}
-      status={error?.message}
-      disabled={disabled}
-      {...forwardSpaceProps(props)}
-    />
-  )
+  return <StringComponent {...stringComponentProps} />
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber.tsx
@@ -3,12 +3,13 @@ import StringComponent, { Props as StringComponentProps } from './String'
 import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps & {
+  omitMask?: boolean
   validate?: boolean
 }
 
 export default function FieldNationalIdentityNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
-  const { validate = true } = props
+  const { validate = true, omitMask } = props
 
   const stringComponentProps: Props = {
     ...props,
@@ -25,6 +26,22 @@ export default function FieldNationalIdentityNumber(props: Props) {
           .nationalIdentityNumberErrorPattern,
       ...props.errorMessages,
     },
+    mask: omitMask
+      ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]
+      : [
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          ' ',
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+          /\d/,
+        ],
     width: props.width ?? 'medium',
   }
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber.tsx
@@ -4,11 +4,12 @@ import SharedContext from '../../../shared/Context'
 
 export type Props = StringComponentProps & {
   validate?: boolean
+  omitMask?: boolean
 }
 
 export default function FieldOrganizationNumber(props: Props) {
   const sharedContext = useContext(SharedContext)
-  const { validate = true } = props
+  const { validate = true, omitMask } = props
 
   const stringComponentProps: Props = {
     ...props,
@@ -24,6 +25,9 @@ export default function FieldOrganizationNumber(props: Props) {
         sharedContext?.translation.Forms.organizationNumberErrorPattern,
       ...props.errorMessages,
     },
+    mask: omitMask
+      ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]
+      : [/\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/],
     width: props.width ?? 'medium',
   }
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react'
+import React, { useContext, useCallback, useMemo } from 'react'
 import { Div } from '../../../elements'
 import { Autocomplete, Input } from '../../../components'
 import classnames from 'classnames'
@@ -45,26 +45,30 @@ export default function FieldPhoneNumber(props: Props) {
 
   // Split the value into country code and phone number correctly, even if one of them is not
   // filled in (avoiding number ending up in country code etc)
-  const [, countryCode = '', phoneNumber = ''] =
+  const [, countryCode = '+47', phoneNumber = ''] =
     (value ?? '')?.match(/^(\+[^ ]+)? ?(.*)$/) ?? []
 
-  const countriesDropdownData = countries.map((country) => ({
-    selected_key: `+${country.code}`,
-    selected_value: `+${country.code}`,
-    content: `+${country.code} ${country.name}`,
-  }))
+  const countriesDropdownData = useMemo(
+    () =>
+      countries.map((country) => ({
+        selected_key: `+${country.code}`,
+        selected_value: `${country.iso} (+${country.code})`,
+        content: `+${country.code} ${country.name}`,
+      })),
+    []
+  )
 
   const handleCountryCodeChange = useCallback(
-    ({ data: changedData }: { data: { selected_value: string } }) => {
+    ({ data: changedData }: { data: { selected_key: string } }) => {
       if (
-        (!changedData || !changedData.selected_value.trim()) &&
+        (!changedData || !changedData.selected_key.trim()) &&
         !phoneNumber.trim()
       ) {
         onChange?.(emptyValue)
         return
       }
 
-      onChange?.(`${changedData.selected_value || ''} ${phoneNumber}`)
+      onChange?.(`${changedData?.selected_key || ''} ${phoneNumber}`)
     },
     [phoneNumber, emptyValue, onChange]
   )
@@ -98,7 +102,7 @@ export default function FieldPhoneNumber(props: Props) {
         label_direction="vertical"
         label={sharedContext?.translation.Forms.countryCodeLabel}
         data={countriesDropdownData}
-        value={countryCode}
+        value={countryCode ?? '+47'}
         disabled={disabled}
         on_change={handleCountryCodeChange}
         independent_width
@@ -110,7 +114,7 @@ export default function FieldPhoneNumber(props: Props) {
         )}
         label_direction="vertical"
         label={label ?? ' '}
-        placeholder={placeholder}
+        placeholder={placeholder ?? '00 00 00 00'}
         on_change={handleNumberChange}
         on_focus={onFocus}
         on_blur={onBlur}