@widergy/mobile-ui 1.18.1 → 1.18.3

package/lib/components/UTCheckList/README.MD

@@ -6,29 +6,21 @@
 
 ## Props
 
-| Name              | Type   | Default | Description                                                                                                            |
-| ----------------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------- |
-| error             | string |         | Error message to display.                                                                                              |
-| input             | shape  |         | Input configuration object containing `value` and `onChange`.                                                          |
-| label             | string |         | Label for the checklist.                                                                                               |
-| options           | array  |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
-| required          | bool   | false   | Indicates if the checklist is required.                                                                                |
-| reversed          | bool   | false   | If true, reverses the order of label and checkbox.                                                                     |
-| selectAllLabel    | string |         | Label for the "Select All" checkbox.                                                                                   |
-| showSelectAll     | bool   | true    | Determines whether to show the "Select All" checkbox.                                                                  |
-| style             | shape  | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
-| variant           | string |         | Variant style for the checklist.                                                                                       |
-| horizontalSpacing | string | large   | Spacing between the checkbox and the label horizontally.                                                               |
-| verticalSpacing   | string | large   | Spacing between the checkbox items vertically.                                                                         |
-
-### Input Object
-
-The `input` prop is an object that should contain the following keys:
-
-| Name     | Type            | Description                                  |
-| -------- | --------------- | -------------------------------------------- |
-| value    | arrayOf(string) | Array of selected values.                    |
-| onChange | func            | Function to call when the selection changes. |
+| Name              | Type            | Default | Description                                                                                                            |
+| ----------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
+| error             | string          |         | Error message to display.                                                                                              |
+| horizontalSpacing | string          | large   | Spacing between the checkbox and the title horizontally.                                                               |
+| title             | string          |         | Title for the checklist.                                                                                               |
+| onChange          | func.isRequired |         | Function to call when the selection changes.                                                                           |
+| options           | array           |         | Array of options to be displayed as checkboxes. Each option is an object with `label` and `value`.                     |
+| required          | bool            | false   | Indicates if the checklist is required.                                                                                |
+| reversed          | bool            | false   | If true, reverses the order of title and checkbox.                                                                     |
+| selectAllLabel    | string          |         | Label for the "Select All" checkbox.                                                                                   |
+| showSelectAll     | bool            | true    | Determines whether to show the "Select All" checkbox.                                                                  |
+| style             | shape           | {}      | Custom styles to apply to the checklist. Can contain `root`, `header`, `checkboxesContainer`, `item`, and `selectAll`. |
+| value             | arrayOf(string) | []      | Array of selected values.                                                                                              |
+| variant           | string          |         | Variant style for the checklist.                                                                                       |
+| verticalSpacing   | string          | large   | Spacing between the checkbox items vertically.                                                                         |
 
 ### Option Object
 
@@ -60,15 +52,13 @@ const Example = () => {
 
   return (
     <UTCheckList
-      label="Select Options"
+      error="Please select at least one option"
+      title="Select Options"
+      onChange={setSelectedOptions}
       options={options}
-      input={{
-        value: selectedOptions,
-        onChange: setSelectedOptions
-      }}
-      selectAllLabel="Select All"
       required
-      error="Please select at least one option"
+      selectAllLabel="Select All"
+      value={selectedOptions}
     />
   );
 };
@@ -85,7 +75,7 @@ import UTCheckBox from './UTCheckBox';
 const customStyles = {
   root: { padding: 10 },
   iconContainer: { backgroundColor: 'lightgrey' },
-  label: { color: 'blue' }
+  title: { color: 'blue' }
 };
 
 const Example = () => {
@@ -94,7 +84,7 @@ const Example = () => {
   return (
     <UTCheckBox
       checked={checked}
-      label="Check me"
+      title="Check me"
       onPress={() => setChecked(!checked)}
       style={customStyles}
     />

package/lib/components/UTCheckList/index.js

@@ -14,20 +14,19 @@ import { BUTTON_VARIANT, SPACING } from './constants';
 const UTCheckList = ({
   error,
   horizontalSpacing,
-  input,
   isSimple,
-  label,
+  onChange,
   options,
   required,
   reversed,
   selectAllLabel,
   showSelectAll,
   style,
+  title,
+  value,
   variant,
   verticalSpacing
 }) => {
-  const { value, onChange } = input;
-
   const reversedBasedOnVariant = getPropValueBasedOnVariant(variant, reversed, true);
   const verticalSpacingBasedOnVariant = getPropValueBasedOnVariant(variant, verticalSpacing, SPACING.SMALL);
 
@@ -77,7 +76,7 @@ const UTCheckList = ({
       style={[styles.container, verticalSpacing === SPACING.SMALL && styles.smallVerticalSpacing, style.root]}
     >
       <View style={[styles.headerContainer, style.header]}>
-        {label && <UTFieldLabel required={required}>{label}</UTFieldLabel>}
+        {title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
         {validationData && <UTValidation validationData={validationData} />}
       </View>
       <View
@@ -92,7 +91,7 @@ const UTCheckList = ({
           <UTCheckBox
             checked={areAllSelected}
             indeterminate={isIndeterminate}
-            label={selectAllLabel}
+            title={selectAllLabel}
             onPress={handleCheckAll}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
@@ -106,7 +105,7 @@ const UTCheckList = ({
             checked={isChecked(item, value)}
             disabled={item.disabled}
             key={keyExtractor(item, index)}
-            label={item.label}
+            title={item.label}
             onPress={handleChange(item.value)}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}

package/lib/components/UTCheckList/proptypes.js

@@ -1,48 +1,36 @@
-import { arrayOf, bool, func, shape, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { arrayOf, bool, func, object, shape, string } from 'prop-types';
 
 import { SPACING } from './constants';
 
 export const defaultProps = {
   horizontalSpacing: SPACING.LARGE,
-  input: {
-    value: [],
-    onChange: () => {}
-  },
   isSimple: false,
+  onChange: () => {},
   showSelectAll: true,
   style: {},
+  value: null,
   verticalSpacing: SPACING.LARGE
 };
 
 export const propTypes = {
   error: string,
   horizontalSpacing: string,
-  input: shape({
-    value: arrayOf(string),
-    onChange: func
-  }),
   isSimple: bool,
-  label: string,
-  options: arrayOf(
-    shape({
-      checked: bool,
-      disabled: bool,
-      label: string,
-      value: string
-    })
-  ),
+  title: string,
+  onChange: func,
+  options: arrayOf(shape({ checked: bool, disabled: bool, title: string, value: string })),
   required: bool,
   reversed: bool,
   selectAllLabel: string,
   showSelectAll: bool,
   style: shape({
-    checkboxesContainer: ViewPropTypes.style,
-    header: ViewPropTypes.style,
-    item: ViewPropTypes.style,
-    root: ViewPropTypes.style,
-    selectAll: ViewPropTypes.style
+    checkboxesContainer: object,
+    header: object,
+    item: object,
+    root: object,
+    selectAll: object
   }),
+  value: arrayOf(string),
   variant: string,
   verticalSpacing: string
 };

package/lib/components/UTFieldLabel/index.js

@@ -7,20 +7,18 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTFieldLabel = ({ children, colorTheme, required, variant, weight }) => {
-  return (
-    <View style={styles.label}>
-      <UTLabel colorTheme={colorTheme} variant={variant}>
-        {children}
+const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight }) => (
+  <View style={[styles.label, style]}>
+    <UTLabel colorTheme={colorTheme} variant={variant}>
+      {children}
+    </UTLabel>
+    {required && (
+      <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
+        {REQUIRED_LABEL}
       </UTLabel>
-      {required && (
-        <UTLabel colorTheme="error" shade="04" variant={variant} weight={weight}>
-          {REQUIRED_LABEL}
-        </UTLabel>
-      )}
-    </View>
-  );
-};
+    )}
+  </View>
+);
 
 UTFieldLabel.propTypes = {
   colorTheme: string,

package/lib/components/UTIcon/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { number, string } from 'prop-types';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { number, object, string } from 'prop-types';
 import * as TablerIcons from '@tabler/icons-react-native';
 
 import { useTheme } from '../../theming';
@@ -40,7 +39,7 @@ UTIcon.propTypes = {
   name: string,
   shade: string,
   size: number,
-  style: ViewPropTypes.style
+  style: object
 };
 
 export default UTIcon;

package/lib/components/UTPasswordField/versions/V1/constants.js

@@ -1,7 +1,11 @@
 export const INPUT_TYPE = {
+  NUMERIC: 'numeric',
   PASSWORD: 'password',
+  PASSWORD_NUMERIC: 'password_numeric',
   TEXT: 'text'
 };
 
+export const KEYBOARD_TYPE_NUMERIC = 'numeric';
+
 export const ICON_EYE = 'IconEye';
 export const ICON_EYE_OFF = 'IconEyeOff';

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

@@ -3,28 +3,27 @@ import React, { useState } from 'react';
 import { propTypes, defaultProps } from '../../../UTTextInput/versions/V1/proptypes';
 import UTTextInput from '../../../UTTextInput';
 
-import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE } from './constants';
+import { ICON_EYE, ICON_EYE_OFF, INPUT_TYPE, KEYBOARD_TYPE_NUMERIC } from './constants';
 
-const UTPasswordField = props => {
+const UTPasswordField = ({ keyboardType, ...props }) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-  const toggleVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
+  const toggleVisibility = () => setIsPasswordVisible(!isPasswordVisible);
 
   const action = {
     Icon: isPasswordVisible ? ICON_EYE : ICON_EYE_OFF,
     onPress: toggleVisibility
   };
 
-  return (
-    <UTTextInput
-      action={action}
-      type={isPasswordVisible ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD}
-      version="V1"
-      {...props}
-    />
-  );
+  const textInputType = isPasswordVisible
+    ? keyboardType === KEYBOARD_TYPE_NUMERIC
+      ? INPUT_TYPE.NUMERIC
+      : INPUT_TYPE.TEXT
+    : keyboardType === KEYBOARD_TYPE_NUMERIC
+      ? INPUT_TYPE.PASSWORD_NUMERIC
+      : INPUT_TYPE.PASSWORD;
+
+  return <UTTextInput {...props} action={action} type={textInputType} version="V1" />;
 };
 
 UTPasswordField.defaultProps = defaultProps;

package/lib/components/UTPhoneInput/index.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { View } from 'react-native';
 import { bool, elementType, func, number, shape, string } from 'prop-types';
 
@@ -7,7 +7,7 @@ import UTFieldLabel from '../UTFieldLabel';
 import UTLabel from '../UTLabel';
 import UTValidation from '../UTValidation';
 import { formatErrorToValidation } from '../UTValidation/utils';
-import { LABEL_VARIANTS } from '../../constants/inputs';
+import { TITLE_VARIANTS } from '../../constants/inputs';
 import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
 import { validationDataProptypes } from '../UTValidation/constants';
 
@@ -24,7 +24,6 @@ class UTPhoneInput extends PureComponent {
       firstFocus: false,
       isValidCode: false,
       phoneNumber: '',
-      phoneRef: null,
       secondFocus: false
     };
 
@@ -32,6 +31,7 @@ class UTPhoneInput extends PureComponent {
     this.handleSecondBlur = this.handleBlur('secondFocus');
     this.handleFirstFocus = this.handleFocus('firstFocus');
     this.handleSecondFocus = this.handleFocus('secondFocus');
+    this.phoneInputRef = createRef();
   }
 
   componentDidMount() {
@@ -122,14 +122,12 @@ class UTPhoneInput extends PureComponent {
   };
 
   handleSubmitEditing = () => {
-    const { phoneRef, areaCodeError } = this.state;
+    const { areaCodeError } = this.state;
     if (!areaCodeError) {
-      phoneRef.focus();
+      this.phoneInputRef.current?.focus();
     }
   };
 
-  phoneInputRef = ref => this.setState({ phoneRef: ref });
-
   updateValue = () => {
     const { value, withAreaCode } = this.props;
     if (value) {
@@ -159,12 +157,12 @@ class UTPhoneInput extends PureComponent {
     const {
       areaCodePlaceholder,
       countryCode,
-      editable,
-      formError,
+      disabled,
+      error,
       helpText,
       InputRef,
-      label,
-      labelVariant,
+      title,
+      titleVariant,
       maxLength,
       onSubmitEditing,
       placeholder,
@@ -176,31 +174,31 @@ class UTPhoneInput extends PureComponent {
     } = this.props;
     const { areaCode, areaCodeError, isValidCode, phoneNumber } = this.state;
 
-    const labelColorTheme = readOnly ? 'gray' : 'dark';
+    const titleColorTheme = readOnly ? 'gray' : 'dark';
 
-    const validationErrors =
+    const validationData =
       validations ||
       (areaCodeError && formatErrorToValidation(areaCodeError)) ||
-      (formError && formatErrorToValidation(formError));
+      (error && formatErrorToValidation(error));
 
-    const hasError = validationErrors?.length > 0;
+    const hasError = validationData?.length > 0;
 
     return (
       <View style={styles.container}>
-        {label && (
+        {title && (
           <UTFieldLabel
-            colorTheme={labelColorTheme}
+            colorTheme={titleColorTheme}
             required={required}
-            variant={LABEL_VARIANTS[labelVariant]}
+            variant={TITLE_VARIANTS[titleVariant]}
           >
-            {label}
+            {title}
           </UTFieldLabel>
         )}
         <View style={styles.inputsContainer}>
           {withAreaCode ? (
             <UTBaseInputField
               alwaysShowPlaceholder
-              disabled={!editable || readOnly}
+              disabled={disabled}
               error={hasError}
               leftAdornments={[]}
               maxLength={4}
@@ -209,6 +207,7 @@ class UTPhoneInput extends PureComponent {
               onFocus={this.handleFirstFocus}
               onSubmitEditing={this.handleSubmitEditing}
               placeholder={areaCodePlaceholder}
+              readOnly={readOnly}
               ref={InputRef}
               returnKeyType="next"
               rightAdornments={[
@@ -222,7 +221,7 @@ class UTPhoneInput extends PureComponent {
           <View style={styles.phoneNumber}>
             <UTBaseInputField
               alwaysShowPlaceholder
-              disabled={(withAreaCode && !isValidCode) || !editable || readOnly}
+              disabled={(withAreaCode && !isValidCode) || disabled || readOnly}
               error={hasError && !areaCodeError}
               leftAdornments={
                 countryCode && !withAreaCode
@@ -250,15 +249,15 @@ class UTPhoneInput extends PureComponent {
             {helpText}
           </UTLabel>
         )}
-        {validationErrors && <UTValidation validationData={validationErrors} />}
+        {validationData && <UTValidation validationData={validationData} />}
       </View>
     );
   }
 }
 
 UTPhoneInput.defaultProps = {
-  labelVariant: 'large',
   maxLength: 10,
+  titleVariant: 'large',
   translations: {
     areaCodeWithoutZeroError: 'Ingrese el código sin 0',
     invalidAreaCodeError: 'Código de área inválido'
@@ -269,12 +268,10 @@ UTPhoneInput.defaultProps = {
 UTPhoneInput.propTypes = {
   areaCodePlaceholder: string,
   countryCode: string,
-  editable: bool,
-  formError: string,
+  disabled: bool,
+  error: string,
   helpText: string,
   InputRef: func,
-  label: string,
-  labelVariant: string,
   maxLength: number,
   onBlur: func,
   onChange: func,
@@ -284,6 +281,8 @@ UTPhoneInput.propTypes = {
   readOnly: bool,
   required: bool,
   RightIcon: elementType,
+  title: string,
+  titleVariant: string,
   translations: shape({
     areaCodeWithoutZeroError: string,
     invalidAreaCodeError: string

package/lib/components/UTProductItem/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import merge from 'lodash/merge';
-import { bool, element, number, oneOf, shape, string } from 'prop-types';
+import { bool, element, number, object, oneOf, shape, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 
 import ImageIcon from '../ImageIcon';
@@ -81,13 +81,13 @@ UTProductItem.propTypes = {
   additionalInfo: string,
   amount: number,
   counter: shape({ current: number, limit: number }),
-  counterLabelProps: shape({}),
+  counterLabelProps: object,
   discount: number,
   elevation: number,
   imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
   previousAmount: number,
   quantity: number,
-  quantityLabelProps: shape({}),
+  quantityLabelProps: object,
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
   title: string

package/lib/components/UTSearchField/README.md

@@ -6,19 +6,20 @@
 
 ## Props
 
-| Name            | Type                                                           | Default                           | Description                                                  |
-| --------------- | -------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------ |
-| inputRef        | func                                                           |                                   | Reference to the input field.                                |
-| input           | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.      |
-| onBlur          | func                                                           |                                   | Function to call when the input field loses focus.           |
-| onFocus         | func                                                           |                                   | Function to call when the input field gains focus.           |
-| onSubmitEditing | func                                                           |                                   | Function to call when the input field is submitted.          |
-| placeholder     | string                                                         |                                   | Placeholder text for the input field.                        |
-| returnKeyType   | string                                                         |                                   | Determines the return key type on the keyboard.              |
-| size            | string                                                         | medium                            | Size of the input field. One of: `small`, `medium`, `large`. |
-| style           | object                                                         |                                   | Style object to customize the input field.                   |
-| type            | string                                                         |                                   | Type of input (e.g., 'text', 'password', 'email').           |
-| variant         | string                                                         | white                             | Variant of the input field. One of: `white`, `gray`.         |
+| Name            | Type   | Default | Description                                                  |
+| --------------- | ------ | ------- | ------------------------------------------------------------ |
+| inputRef        | func   |         | Reference to the input field.                                |
+| onBlur          | func   |         | Function to call when the input field loses focus.           |
+| onChange        | func   |         | Function to call when the input field value changes.         |
+| onFocus         | func   |         | Function to call when the input field gains focus.           |
+| onSubmitEditing | func   |         | Function to call when the input field is submitted.          |
+| placeholder     | string |         | Placeholder text for the input field.                        |
+| returnKeyType   | string |         | Determines the return key type on the keyboard.              |
+| size            | string | medium  | Size of the input field. One of: `small`, `medium`, `large`. |
+| style           | object |         | Style object to customize the input field.                   |
+| type            | string |         | Type of input (e.g., 'text', 'password', 'email').           |
+| value           | string | ''      | The value of the input field.                                |
+| variant         | string | white   | Variant of the input field. One of: `white`, `gray`.         |
 
 ## Example
 

package/lib/components/UTSearchField/index.js

@@ -7,9 +7,9 @@ import { defaultProps, propTypes } from './proptypes';
 
 const UTSearchField = ({
   disabled,
-  input,
   inputRef,
   onBlur,
+  onChange,
   onFocus,
   onSubmitEditing,
   placeholder,
@@ -17,10 +17,11 @@ const UTSearchField = ({
   size,
   style,
   type,
+  value,
   variant
 }) => {
   const clearText = () => {
-    input.onChange('');
+    onChange('');
   };
 
   const action = { Icon: 'IconX', onPress: clearText, size: 'small' };
@@ -29,16 +30,16 @@ const UTSearchField = ({
     { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconSearch', changeOnFocus: true, shade: '02' } }
   ];
 
-  const rightAdornments = input.value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
+  const rightAdornments = value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
 
   return (
     <UTBaseInputField
       alwaysShowPlaceholder
       disabled={disabled}
-      input={input}
       inputSize={size}
       leftAdornments={leftAdornments}
       onBlur={onBlur}
+      onChange={onChange}
       onFocus={onFocus}
       onSubmitEditing={onSubmitEditing}
       placeholder={placeholder}
@@ -47,6 +48,7 @@ const UTSearchField = ({
       rightAdornments={rightAdornments}
       style={{ container: style }}
       type={type}
+      value={value}
       variant={variant}
     />
   );

package/lib/components/UTSearchField/proptypes.js

@@ -1,22 +1,17 @@
-import { func, oneOf, string, object, shape, instanceOf, oneOfType } from 'prop-types';
+import { func, oneOf, string, object, instanceOf, oneOfType } from 'prop-types';
 
 import { SIZES, VARIANT } from '../UTBaseInputField/constants';
 
 export const defaultProps = {
-  input: {
-    value: [],
-    onChange: () => {}
-  },
+  onChange: () => {},
+  value: '',
   variant: VARIANT.WHITE
 };
 
 export const propTypes = {
-  input: shape({
-    value: string,
-    onChange: func
-  }),
   inputRef: oneOfType([func, instanceOf(Object)]),
   onBlur: func,
+  onChange: func,
   onFocus: func,
   onSubmitEditing: func,
   placeholder: string,
@@ -24,5 +19,6 @@ export const propTypes = {
   size: oneOf(Object.values(SIZES)),
   style: object,
   type: string,
+  value: string,
   variant: oneOf(Object.values(VARIANT))
 };