@widergy/mobile-ui 1.50.0 → 1.50.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.50.1](https://github.com/widergy/mobile-ui/compare/v1.50.0...v1.50.1) (2025-09-18)
+
+
+### Bug Fixes
+
+* [CX-1130] UTCuit Field Refactor ([#456](https://github.com/widergy/mobile-ui/issues/456)) ([19cce9d](https://github.com/widergy/mobile-ui/commit/19cce9dc619a04044b662cb3e359dd755c5c4715))
+
 # [1.50.0](https://github.com/widergy/mobile-ui/compare/v1.49.7...v1.50.0) (2025-08-12)
 
 

package/lib/components/UTCuit/constants.js

@@ -0,0 +1,8 @@
+export const ID_CODE_REGEX = /(\d+)/gi;
+
+export const PREFIX_LENGTH = 2;
+export const DOCUMENT_LENGTH = 8;
+
+export const PREFIX_REGEX = /^[23]\d$/;
+
+export const TITLE = 'CUIT';

package/lib/components/UTCuit/index.js

@@ -0,0 +1,191 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { bool, func, oneOf, oneOfType, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTLabel from '../UTLabel';
+import UTTextInput from '../UTTextInput';
+
+import styles from './styles';
+import { ID_CODE_REGEX, PREFIX_LENGTH, DOCUMENT_LENGTH, TITLE } from './constants';
+
+const UTCuit = ({
+  blurOnSubmit,
+  defaultValue,
+  editable = true,
+  editableDocument = true,
+  formError,
+  onBlur,
+  onChange,
+  onFocus,
+  onSubmitEditing,
+  returnKeyType = 'done',
+  title,
+  value
+}) => {
+  const prefixRef = useRef();
+  const documentNumberRef = useRef();
+  const suffixRef = useRef();
+
+  const [documentNumber, setDocumentNumber] = useState('');
+  const [prefix, setPrefix] = useState('');
+  const [suffix, setSuffix] = useState('');
+
+  const valuesRef = useRef({ prefix: '', documentNumber: '', suffix: '' });
+  const isInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!isInitialized.current) {
+      const initialValue = value || defaultValue || '';
+      const code = initialValue.match(ID_CODE_REGEX);
+
+      let initialPrefix = '';
+      let initialDocNumber = '';
+      let initialSuffix = '';
+
+      if (code) {
+        if (code.length === 3) [initialPrefix, initialDocNumber, initialSuffix] = code;
+        else [initialDocNumber] = code;
+      }
+
+      const formattedDocumentNumber = !editableDocument
+        ? `${'0'.repeat(DOCUMENT_LENGTH - initialDocNumber.length)}${initialDocNumber}`
+        : initialDocNumber;
+
+      setDocumentNumber(formattedDocumentNumber);
+      setPrefix(initialPrefix);
+      setSuffix(initialSuffix);
+
+      valuesRef.current = {
+        prefix: initialPrefix,
+        documentNumber: formattedDocumentNumber,
+        suffix: initialSuffix
+      };
+
+      isInitialized.current = true;
+    }
+  }, [value, defaultValue, editableDocument]);
+
+  const changeDocumentNumber = newDocumentNumber => {
+    if (editableDocument) {
+      setDocumentNumber(newDocumentNumber);
+      valuesRef.current.documentNumber = newDocumentNumber;
+      if (onChange) {
+        onChange(`${valuesRef.current.prefix}-${newDocumentNumber}-${valuesRef.current.suffix}`);
+      }
+    }
+  };
+
+  const changePrefix = newPrefix => {
+    if (newPrefix.length === 1 && !['2', '3'].includes(newPrefix)) {
+      return;
+    }
+    if (newPrefix.length === 2 && !/^[23][0-9]$/.test(newPrefix)) {
+      return;
+    }
+
+    setPrefix(newPrefix);
+    valuesRef.current.prefix = newPrefix;
+    if (onChange) {
+      onChange(`${newPrefix}-${valuesRef.current.documentNumber}-${valuesRef.current.suffix}`);
+    }
+  };
+
+  const changeSuffix = newSuffix => {
+    setSuffix(newSuffix);
+    valuesRef.current.suffix = newSuffix;
+    if (onChange) {
+      onChange(`${valuesRef.current.prefix}-${valuesRef.current.documentNumber}-${newSuffix}`);
+    }
+  };
+
+  const handleBlur = () => {
+    if (onBlur) {
+      onBlur();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <UTLabel variant="medium" style={styles.title}>
+        {title || TITLE}
+      </UTLabel>
+      <View style={styles.fieldContainer}>
+        <View style={styles.input}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable}
+            error={!!formError && ' '}
+            inputRef={prefixRef}
+            maxLength={PREFIX_LENGTH}
+            onBlur={handleBlur}
+            onChange={changePrefix}
+            onFocus={onFocus}
+            placeholder="XX"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={prefix}
+            version="V1"
+          />
+        </View>
+        <View style={styles.documentContainer}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable || !editableDocument}
+            error={!!formError && ' '}
+            inputRef={documentNumberRef}
+            maxLength={DOCUMENT_LENGTH}
+            onBlur={handleBlur}
+            onChange={changeDocumentNumber}
+            onFocus={onFocus}
+            placeholder="XXXXXXXX"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={documentNumber}
+            version="V1"
+          />
+        </View>
+        <View style={styles.input}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable}
+            error={!!formError && ' '}
+            inputRef={suffixRef}
+            maxLength={1}
+            onBlur={handleBlur}
+            onChange={changeSuffix}
+            onFocus={onFocus}
+            onSubmitEditing={onSubmitEditing}
+            placeholder="X"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={suffix}
+            version="V1"
+          />
+        </View>
+      </View>
+      <UTLabel colorTheme="error" variant="xsmall" style={styles.error}>
+        {formError || ''}
+      </UTLabel>
+    </View>
+  );
+};
+
+UTCuit.propTypes = {
+  blurOnSubmit: bool,
+  defaultValue: string,
+  editable: bool,
+  editableDocument: bool,
+  formError: oneOfType([string, bool]),
+  onBlur: func,
+  onChange: func.isRequired,
+  onFocus: func,
+  onSubmitEditing: func,
+  returnKeyType: oneOf(['done', 'go', 'next', 'search']),
+  title: string,
+  value: string
+};
+
+export default UTCuit;

package/lib/components/UTCuit/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'column'
+  },
+  title: {
+    marginBottom: 8
+  },
+  fieldContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    marginTop: 6
+  },
+  documentContainer: {
+    flex: 2,
+    paddingHorizontal: 4
+  },
+  input: {
+    flex: 1
+  },
+  inputContainer: {
+    flex: 1
+  },
+  message: {
+    paddingTop: 15,
+    marginBottom: -25
+  },
+  error: {
+    marginBottom: 12,
+    marginTop: 12
+  }
+});

package/lib/index.js

@@ -44,6 +44,7 @@ export { default as UTButton } from './components/UTButton';
 export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
+export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';
 export { default as UTDataElement } from './components/UTDataElement';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.50.0",
+  "version": "1.50.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [