@widergy/mobile-ui 1.12.4 → 1.12.6

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -1,87 +1,111 @@
-import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  useImperativeHandle,
+  forwardRef
+} from 'react';
 import { bool, elementType, func, number, string, shape } from 'prop-types';
 import { View, TextInput } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import { themeType, withTheme } from '../../../../../../theming';
+import { useTheme } from '../../../../../../theming';
 import UTButton from '../../../../../UTButton';
 import UTIcon from '../../../../../UTIcon';
 import UTLabel from '../../../../../UTLabel';
 import UTTooltip from '../../../../../UTTooltip';
 
 import { ERROR_ICON, KEYBOARD_BY_TYPE, TYPES } from './constants';
-import { iconRenderer } from './utils';
+import { renderLeftIcon, renderRightIcon } from './utils';
 import { retrieveStyle } from './theme';
 
-const TextInputField = ({
-  action,
-  alwaysShowPlaceholder,
-  disabled,
-  error,
-  inputSize,
-  LeftIcon,
-  maxCount,
-  maxRows,
-  onBlur,
-  onChange,
-  onFocus,
-  placeholder,
-  prefix,
-  readOnly,
-  RightIcon,
-  style,
-  suffix,
-  theme,
-  tooltip,
-  type,
-  value
-}) => {
-  const [displayValue, setDisplayValue] = useState(value);
-  const [focused, setFocused] = useState(false);
-  const [inputWidth, setInputWidth] = useState(null);
-  const [internalValue, setInternalValue] = useState(value);
-  const textInputRef = useRef(null);
-
-  const multiline = maxRows > 1;
-
-  const handleTextChange = useCallback(
-    text => {
-      setInternalValue(text);
-      onChange?.(text);
-    },
-    [onChange]
-  );
-
-  const handleFocus = useCallback(
-    event => {
-      setFocused(true);
-      if (!multiline) setDisplayValue(internalValue);
-      onFocus?.(event);
-    },
-    [onFocus, internalValue, multiline]
-  );
-
-  const handleBlur = useCallback(
-    event => {
-      const truncateText = text => {
-        if (!inputWidth || !text) return text;
-
-        const charWidth = 8;
-        const maxCharsPerLine = Math.floor(inputWidth / charWidth);
-        const maxLength = maxCharsPerLine;
-
-        return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
-      };
-
-      setFocused(false);
-      if (!multiline) setDisplayValue(truncateText(internalValue));
-      onBlur?.(event);
+const TextInputField = forwardRef(
+  (
+    {
+      action,
+      alwaysShowPlaceholder,
+      disabled,
+      error,
+      inputSize,
+      LeftIcon,
+      maxCount,
+      maxRows,
+      onBlur,
+      onChange,
+      onFocus,
+      onSubmitEditing,
+      placeholder,
+      prefix,
+      readOnly,
+      returnKeyType,
+      RightIcon,
+      style,
+      suffix,
+      tooltip,
+      type,
+      value
     },
-    [inputWidth, internalValue, multiline, onBlur]
-  );
-
-  const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle, placeholderColor } =
-    retrieveStyle({
+    ref
+  ) => {
+    const [displayValue, setDisplayValue] = useState(value);
+    const [focused, setFocused] = useState(false);
+    const [inputWidth, setInputWidth] = useState(null);
+    const [internalValue, setInternalValue] = useState(value);
+    const textInputRef = useRef(null);
+
+    const theme = useTheme();
+    const multiline = maxRows > 1;
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => textInputRef.current?.focus(),
+        blur: () => textInputRef.current?.blur(),
+        setValue: text => textInputRef.current?.setNativeProps({ text }),
+        clear: () => textInputRef.current?.setNativeProps({ text: '' })
+      }),
+      []
+    );
+
+    const handleTextChange = useCallback(
+      text => {
+        setInternalValue(text);
+        onChange?.(text);
+      },
+      [onChange]
+    );
+
+    const handleFocus = useCallback(
+      event => {
+        setFocused(true);
+        if (!multiline) setDisplayValue(internalValue);
+        onFocus?.(event);
+      },
+      [onFocus, internalValue, multiline]
+    );
+
+    const handleBlur = useCallback(
+      event => {
+        const truncateText = text => {
+          if (!inputWidth || !text) return text;
+
+          const charWidth = 8;
+          const maxCharsPerLine = Math.floor(inputWidth / charWidth);
+          const maxLength = maxCharsPerLine;
+
+          return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+        };
+
+        setFocused(false);
+        if (!multiline) setDisplayValue(truncateText(internalValue));
+        onBlur?.(event);
+      },
+      [inputWidth, internalValue, multiline, onBlur]
+    );
+
+    const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
       disabled,
       error,
       focused,
@@ -93,83 +117,89 @@ const TextInputField = ({
       theme
     });
 
-  useEffect(() => {
-    setInternalValue(value);
-    setDisplayValue(value);
-  }, [value]);
-
-  useLayoutEffect(() => {
-    if (textInputRef.current) {
-      textInputRef.current.measure((_x, _y, width) => {
-        setInputWidth(width);
-      });
-    }
-  }, [focused]);
-
-  const secureTextEntry = type === TYPES.PASSWORD;
-  const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
-  const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
-
-  const renderIcon = iconRenderer(error, inputStyle.color);
-
-  return (
-    <View style={containerStyle}>
-      <View style={inputRowStyle}>
-        {LeftIcon && renderIcon(LeftIcon)}
-        {prefix && <UTLabel colorTheme="gray">{prefix}</UTLabel>}
-        <TextInput
-          autoCapitalize={autoCapitalize}
-          autoCorrect={false}
-          editable={!disabled && !readOnly}
-          keyboardType={keyboardType}
-          maxLength={maxCount}
-          multiline={multiline}
-          numberOfLines={maxRows}
-          onChangeText={handleTextChange}
-          onEndEditing={handleBlur}
-          onFocus={handleFocus}
-          placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
-          placeholderTextColor={placeholderColor}
-          ref={textInputRef}
-          secureTextEntry={secureTextEntry}
-          style={inputStyle}
-          type={type}
-          value={focused || multiline ? internalValue : displayValue}
-        />
-        {suffix && (
-          <UTLabel colorTheme="gray" variant="small">
-            {suffix}
-          </UTLabel>
-        )}
-        {action && (
-          <UTButton
-            disabled={disabled}
-            style={actionStyle}
-            variant="text"
-            colorTheme={action.colorTheme}
-            Icon={action.icon}
-            onPress={action.onPress}
-          >
-            {action.text}
-          </UTButton>
-        )}
-        {error ? renderIcon(ERROR_ICON) : RightIcon && renderIcon(RightIcon)}
-        {!!tooltip && (
-          <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
-            <UTIcon name="IconInfoCircle" color="gray" />
-          </UTTooltip>
+    useEffect(() => {
+      setInternalValue(value);
+      setDisplayValue(value);
+    }, [value]);
+
+    useLayoutEffect(() => {
+      if (textInputRef.current) {
+        textInputRef.current.measure((_x, _y, width) => {
+          setInputWidth(width);
+        });
+      }
+    }, [focused]);
+
+    const secureTextEntry = type === TYPES.PASSWORD;
+    const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
+    const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
+
+    const rightIcon = error ? ERROR_ICON : RightIcon;
+
+    return (
+      <View style={containerStyle}>
+        <View style={inputRowStyle}>
+          {LeftIcon && renderLeftIcon(inputStyle.root.color, LeftIcon)}
+          {prefix && <UTLabel colorTheme="gray">{prefix}</UTLabel>}
+          <TextInput
+            autoCapitalize={autoCapitalize}
+            autoCorrect={false}
+            editable={!disabled && !readOnly}
+            keyboardType={keyboardType}
+            maxLength={maxCount}
+            multiline={multiline}
+            numberOfLines={maxRows}
+            onChangeText={handleTextChange}
+            onEndEditing={handleBlur}
+            onFocus={handleFocus}
+            onSubmitEditing={onSubmitEditing}
+            placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
+            placeholderTextColor={inputStyle.placeholderTextColor}
+            ref={textInputRef}
+            returnKeyType={returnKeyType}
+            secureTextEntry={secureTextEntry}
+            selectionColor={inputStyle.selectionColor}
+            style={inputStyle.root}
+            type={type}
+            value={focused || multiline ? internalValue : displayValue}
+          />
+          {suffix && (
+            <UTLabel colorTheme="gray" weight="medium" variant="small">
+              {suffix}
+            </UTLabel>
+          )}
+          {action && (
+            <UTButton
+              disabled={disabled}
+              style={actionStyle}
+              variant="text"
+              colorTheme={action.colorTheme}
+              Icon={action.icon}
+              onPress={action.onPress}
+            >
+              {action.text}
+            </UTButton>
+          )}
+          {rightIcon && renderRightIcon(error, inputStyle.root.color, rightIcon)}
+          {!!tooltip && (
+            <UTTooltip content={<UTLabel>{tooltip}</UTLabel>}>
+              <UTIcon name="IconInfoCircle" color="gray" />
+            </UTTooltip>
+          )}
+        </View>
+        {maxCount && (
+          <View style={textLengthRowStyle}>
+            <UTLabel colorTheme="gray" variant="small">
+              {internalValue?.length || 0}/{maxCount}
+            </UTLabel>
+          </View>
         )}
       </View>
-      {maxCount && (
-        <View style={textLengthRowStyle}>
-          <UTLabel colorTheme="gray" variant="small">
-            {internalValue?.length || 0}/{maxCount}
-          </UTLabel>
-        </View>
-      )}
-    </View>
-  );
-};
+    );
+  }
+);
+
+TextInputField.displayName = 'TextInputField';
 
 TextInputField.propTypes = {
   action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
@@ -183,9 +213,11 @@ TextInputField.propTypes = {
   onBlur: func,
   onChange: func,
   onFocus: func,
+  onSubmitEditing: func,
   placeholder: string,
   prefix: string,
   readOnly: bool,
+  returnKeyType: string,
   RightIcon: elementType,
   style: shape({
     container: ViewPropTypes.style,
@@ -193,10 +225,9 @@ TextInputField.propTypes = {
     root: ViewPropTypes.style
   }),
   suffix: string,
-  theme: themeType,
   tooltip: string,
   type: string,
   value: string
 };
 
-export default withTheme(TextInputField);
+export default TextInputField;

package/lib/components/UTTextInput/versions/V1/components/TextInputField/theme.js

@@ -1,8 +1,11 @@
-import { Platform } from 'react-native';
-
+import { getFontStyles } from '../../../../../UTLabel/theme';
 import { SMALL } from '../../constants';
 
 const LINE_HEIGHT = 22;
+const CONTAINER_PADDING = {
+  HORIZONTAL: 16,
+  VERTICAL: 12
+};
 
 const baseTextInputTheme = theme => ({
   action: {
@@ -19,25 +22,24 @@ const baseTextInputTheme = theme => ({
     borderWidth: 1,
     flex: 1,
     flexDirection: 'column',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingHorizontal: CONTAINER_PADDING.HORIZONTAL,
+    paddingVertical: CONTAINER_PADDING.VERTICAL,
     rowGap: 16,
     width: '100%'
   },
   input: {
-    color: theme.Palette.dark['05'],
-    flex: 1,
-    fontFamily: theme.fonts.fontFamily, // TODO! Change when integration of font sizes
-    fontSize: 16,
-    lineHeight: LINE_HEIGHT,
-    padding: 0,
-    zIndex: 4,
-    ...Platform.select({
-      ios: {
-        height: '100%',
-        lineHeight: LINE_HEIGHT + 4
-      }
-    })
+    root: {
+      ...getFontStyles({ theme, variant: 'body', weight: 'regular' }),
+      color: theme.Palette.dark['05'],
+      flex: 1,
+      includeFontPadding: false,
+      padding: 0,
+      paddingVertical: 0,
+      textAlignVertical: 'center',
+      zIndex: 4
+    },
+    placeholderTextColor: theme.Palette.gray['02'],
+    selectionColor: theme.Palette.accent['04']
   },
   inputRow: {
     alignItems: 'center',
@@ -51,9 +53,6 @@ const baseTextInputTheme = theme => ({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     width: '100%'
-  },
-  placeholder: {
-    color: theme.Palette.gray['02']
   }
 });
 
@@ -61,7 +60,8 @@ const conditionalContainerStyle = (focused, error, theme, readOnly, disabled, in
   ...(focused && {
     borderColor: theme.Palette.accent['04'],
     borderWidth: 2,
-    padding: -1
+    paddingHorizontal: CONTAINER_PADDING.HORIZONTAL - 1,
+    paddingVertical: CONTAINER_PADDING.VERTICAL - 1
   }),
   ...(error && {
     borderColor: theme.Palette.error['04']
@@ -108,17 +108,20 @@ export const retrieveStyle = ({
   };
 
   const inputStyle = {
-    ...baseTheme.input,
-    ...conditionalInputStyle(maxRows, multiline),
-    ...style.input
+    root: {
+      ...baseTheme.input.root,
+      ...conditionalInputStyle(maxRows, multiline),
+      ...style.input
+    },
+    placeholderTextColor: baseTheme.input.placeholderTextColor,
+    selectionColor: baseTheme.input.selectionColor
   };
 
   return {
     actionStyle: { ...baseTheme.action, ...style.action },
-    inputStyle,
     containerStyle,
     inputRowStyle: baseTheme.inputRow,
-    textLengthRowStyle: baseTheme.textLengthRow,
-    placeholderColor: baseTheme.placeholder.color
+    inputStyle,
+    textLengthRowStyle: baseTheme.textLengthRow
   };
 };

package/lib/components/UTTextInput/versions/V1/components/TextInputField/utils.js

@@ -4,8 +4,10 @@ import UTIcon from '../../../../../UTIcon';
 
 const isUTIcon = icon => typeof icon === 'string';
 
-export const iconRenderer = (error, themeColor) => Icon => {
-  const color = error ? 'error' : 'gray';
-  const shade = error && '04';
-  return isUTIcon(Icon) ? <UTIcon name={Icon} color={color} shade={shade} /> : <Icon fill={themeColor} />;
-};
+const getIconColorProps = error => (error ? { color: 'error', shade: '04' } : { color: 'gray' });
+
+export const renderLeftIcon = (themeColor, Icon) =>
+  isUTIcon(Icon) ? <UTIcon name={Icon} color="gray" /> : <Icon fill={themeColor} />;
+
+export const renderRightIcon = (error, themeColor, Icon) =>
+  isUTIcon(Icon) ? <UTIcon name={Icon} {...getIconColorProps(error)} /> : <Icon fill={themeColor} />;

package/lib/components/UTTextInput/versions/V1/index.js

@@ -16,6 +16,7 @@ const UTTextInput = ({
   disabled,
   error,
   helpText,
+  InputRef,
   inputSize,
   label,
   labelVariant,
@@ -25,10 +26,12 @@ const UTTextInput = ({
   onBlur,
   onChange,
   onFocus,
+  onSubmitEditing,
   placeholder,
   prefix,
   readOnly,
   required,
+  returnKeyType,
   RightIcon,
   style,
   suffix,
@@ -37,15 +40,15 @@ const UTTextInput = ({
   validations,
   value
 }) => {
-  const labelColorTheme = error ? 'error' : readOnly ? 'gray' : 'dark';
+  const labelColorTheme = readOnly ? 'gray' : 'dark';
   const labelComponentVariant = labelVariant === SMALL ? 'small' : 'body';
-  const validationData = validations || formatErrorToValidation(error);
+  const validationData = validations || (error && formatErrorToValidation(error));
 
   return (
     <View style={[styles.container, style.root]}>
       {label && (
         <View style={styles.label}>
-          <UTLabel colorTheme={labelColorTheme} shade={error && '04'} variant={labelComponentVariant}>
+          <UTLabel colorTheme={labelColorTheme} variant={labelComponentVariant}>
             {label}
           </UTLabel>
           {required && (
@@ -67,9 +70,12 @@ const UTTextInput = ({
         onBlur={onBlur}
         onChange={onChange}
         onFocus={onFocus}
+        onSubmitEditing={onSubmitEditing}
         placeholder={placeholder}
         prefix={prefix}
         readOnly={readOnly}
+        ref={InputRef}
+        returnKeyType={returnKeyType}
         RightIcon={RightIcon}
         style={style}
         suffix={suffix}
@@ -82,13 +88,15 @@ const UTTextInput = ({
           {helpText}
         </UTLabel>
       )}
-      {error && <UTValidation validationData={validationData} />}
+      {validationData && <UTValidation validationData={validationData} />}
     </View>
   );
 };
 
 UTTextInput.defaultProps = DEFAULT_PROPS;
 
-UTTextInput.propTypes = propTypes;
+UTTextInput.propTypes = {
+  ...propTypes
+};
 
 export default UTTextInput;

package/lib/components/UTTextInput/versions/V1/proptypes.js

@@ -9,6 +9,7 @@ export default {
   disabled: bool,
   error: string,
   helpText: string,
+  InputRef: func,
   inputSize: string,
   label: string,
   labelVariant: string,
@@ -18,10 +19,12 @@ export default {
   onBlur: func,
   onChange: func,
   onFocus: func,
+  onSubmitEditing: func,
   placeholder: string,
   prefix: string,
   readOnly: bool,
   required: bool,
+  returnKeyType: string,
   RightIcon: elementType,
   style: shape({
     container: ViewPropTypes.style,

package/lib/components/UTValidation/README.md

@@ -1,22 +1,29 @@
 # UTValidation
 
-### Description
+## Description
 
 `UTValidation` is a component designed to display input validation messages. The statuses of the messages can be information, error, or success, helping users understand the current state of their input.
 
-### Validation Data
+## Props
+
+| Name           | Type   | Default | Description                              |
+| -------------- | ------ | ------- | ---------------------------------------- |
+| style          | object |         | Custom styles to apply to the component. |
+| validationData | array  | {}      | The data to display validation messages. |
+
+## Validation Data
 
 The `validationData` prop is an array of objects, each representing a validation message or group of messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text` and `status` properties.
 
-#### Structure of validationData
+### Structure of validationData
 
-- title (optional): A string that represents the title of the validation group.
-- status (required): A string indicating the status of the validation group. Possible values are success, error, and default.
-- items (required): An array of objects, each representing an individual validation item.
-  - text (required): A string containing the validation message.
-  - status (required): A string indicating the status of the validation item. Possible values are success, error, and default.
+- **title** (optional): A string that represents the title of the validation group.
+- **status** (required): A string indicating the status of the validation group. Possible values are `success`, `error`, and `default`.
+- **items** (required): An array of objects, each representing an individual validation item.
+  - **text** (required): A string containing the validation message.
+  - **status** (required): A string indicating the status of the validation item. Possible values are `success`, `error`, and `default`.
 
-Here's an example of `validationData`:
+### Example
 
 ```javascript
 const validationData = [
@@ -29,16 +36,14 @@ const validationData = [
     ]
   },
   {
-    title: 'Debe cumplir con al menos 1 de las siguientes condiciones:',
+    title: 'Debe cumplir con al menos 2 de las siguientes condiciones:',
     status: 'error',
     items: [
       {
-        status: 'default',
-        text: 'Al menos 1 letra minúscula.'
+        text: 'Al menos 1 letra minúscula.' // Defaults to "default"
       },
       {
-        status: 'default',
-        text: 'Al menos 1 letra mayúscula.'
+        text: 'Al menos 1 letra mayúscula.' // Defaults to "default"
       },
       {
         status: 'success',
@@ -49,8 +54,18 @@ const validationData = [
 ];
 ```
 
-### Props
+## Statuses
+
+The `status` prop can be one of these values:
+
+- `success`
+- `error`
+- `default`
 
-| Name           | Description         | Default |
-| -------------- | ------------------- | ------- |
-| validationData | The data to display | {}      |
+If `status` is not provided, it defaults to `default`.
+
+## Usage
+
+```javascript
+<UTValidation validationData={validationData} />
+```