Merge pull request #2756 from SUI-Components/feat/atom_input_mask_wit…

…h_addons feat(components/atom/input): Enable full input features on Mask input
SUI-Components · Sep 9, 2024 · adbab9b · adbab9b
2 parents d61308c + 5d4373b
commit adbab9b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js
@@ -151,6 +151,28 @@ const TypeDemo = () => {
               )
             }
           ],
+          [
+            'MASK WITH RIGHT ICON',
+            {
+              type: inputTypes.MASK,
+              mask: {mask: Number},
+              placeholder: 'ES00 0000 0000 00 0000000000',
+              charsSize: 31,
+              value: '100000',
+              rightIcon: '€',
+              radix: ',',
+              thousandsSeparator: '.',
+              mapToRadix: ['.']
+            },
+            {
+              description: (
+                <>
+                  Let the user define its own mask for custom purposes. More info at{' '}
+                  <Anchor href="http://shorturl.at/foBF1">http://shorturl.at/foBF1</Anchor>
+                </>
+              )
+            }
+          ],
           [
             'NUMBER',
             {

diff --git a/components/atom/input/src/Mask/iMask.js b/components/atom/input/src/Mask/iMask.js
@@ -1,6 +1,6 @@
 import {IMaskMixin} from 'react-imask'
 
-import Input from '../Input/Component/index.js'
+import Input from '../Input/index.js'
 
 const IMask = IMaskMixin(({inputRef, value, size, ...props}) => {
   return <Input type="text" ref={inputRef} size={size} value={value} {...props} />

diff --git a/components/atom/input/test/index.test.js b/components/atom/input/test/index.test.js
@@ -387,6 +387,32 @@ describe(json.name, () => {
       expect(findClassName(container.innerHTML)).to.be.null
       expect(value).to.equal('')
     })
+
+    it('should be able to display addons', () => {
+      const props = {
+        className: 'extended-classNames',
+        type: pkg.inputTypes.MASK,
+        mask: {mask: Number},
+        placeholder: 'Ex: 100.000,00',
+        charsSize: 31,
+        value: '100000',
+        rightIcon: '€',
+        radix: ',',
+        thousandsSeparator: '.',
+        mapToRadix: ['.'],
+        leftAddon: 'leftAddon',
+        rightAddon: 'rightAddon'
+      }
+
+      // When
+      const {getByRole, getByText} = setup(props)
+      const input = getByRole('textbox')
+
+      // Then
+      expect(input).to.have.value('100.000')
+      expect(getByText('leftAddon')).to.exist
+      expect(getByText('rightAddon')).to.exist
+    })
   })
 
   describe(`${Component.displayName} ${pkg.inputTypes.SUI_PASSWORD}`, () => {