@widergy/mobile-ui 1.14.6 → 1.15.1

package/lib/components/UTPhoneInput/index.js

@@ -0,0 +1,296 @@
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import { bool, elementType, func, number, shape, string } from 'prop-types';
+
+import UTBaseInputField from '../UTBaseInputField';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { formatErrorToValidation } from '../UTValidation/utils';
+import { LABEL_VARIANTS } from '../../constants/inputs';
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+import { validationDataProptypes } from '../UTValidation/constants';
+
+import { AREA_CODES } from './constants';
+import styles from './styles';
+
+class UTPhoneInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      areaCode: '',
+      bigFocus: false,
+      areaCodeError: '',
+      firstFocus: false,
+      isValidCode: false,
+      phoneNumber: '',
+      phoneRef: null,
+      secondFocus: false
+    };
+
+    this.handleFirstBlur = this.handleBlur('firstFocus');
+    this.handleSecondBlur = this.handleBlur('secondFocus');
+    this.handleFirstFocus = this.handleFocus('firstFocus');
+    this.handleSecondFocus = this.handleFocus('secondFocus');
+  }
+
+  componentDidMount() {
+    this.updateValue();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { value } = this.props;
+    if (prevProps.value !== value) this.updateValue();
+  }
+
+  changeText = updateFunction => {
+    const { areaCode, phoneNumber } = this.state;
+    const { withAreaCode } = this.props;
+
+    if (withAreaCode && (areaCode || phoneNumber)) {
+      updateFunction(`${areaCode}-${phoneNumber}`);
+    } else if (!withAreaCode) {
+      updateFunction(phoneNumber);
+    } else {
+      updateFunction('');
+    }
+  };
+
+  getAreaCodeState = value => {
+    const {
+      translations: { areaCodeWithoutZeroError, invalidAreaCodeError }
+    } = this.props;
+    let newState = {};
+    if (value && value.slice(0, 1) === '0') {
+      newState = { areaCodeError: areaCodeWithoutZeroError };
+    } else {
+      const code = AREA_CODES.find(element => element.code === value);
+      newState = {
+        areaCodeError: value?.length && !code && invalidAreaCodeError,
+        isValidCode: !!code,
+        phoneNumber: ''
+      };
+    }
+
+    return { ...newState, areaCode: value };
+  };
+
+  handleBlur = keyname => async () => {
+    this.setState({
+      [keyname]: false
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 150));
+
+    const { secondFocus, firstFocus, bigFocus } = this.state;
+    const { onBlur } = this.props;
+
+    if (!secondFocus && !firstFocus && bigFocus) {
+      this.changeText(onBlur);
+      this.setState({
+        bigFocus: false
+      });
+    }
+  };
+
+  handleChangeAreaCode = value => {
+    this.setState(this.getAreaCodeState(value), () => {
+      const { onChange } = this.props;
+      this.changeText(onChange);
+    });
+  };
+
+  handleChangePhone = value => {
+    this.setState({ phoneNumber: value }, () => {
+      const { onChange } = this.props;
+      this.changeText(onChange);
+    });
+  };
+
+  handleFocus = keyname => () => {
+    const { onFocus } = this.props;
+    const { bigFocus } = this.state;
+
+    if (!bigFocus) {
+      onFocus();
+    }
+
+    this.setState({
+      [keyname]: true,
+      bigFocus: true
+    });
+  };
+
+  handleSubmitEditing = () => {
+    const { phoneRef, areaCodeError } = this.state;
+    if (!areaCodeError) {
+      phoneRef.focus();
+    }
+  };
+
+  phoneInputRef = ref => this.setState({ phoneRef: ref });
+
+  updateValue = () => {
+    const { value, withAreaCode } = this.props;
+    if (value) {
+      if (withAreaCode) {
+        const phone = value.split('-');
+        if (phone.length === 2) {
+          const newAreaCodeState = this.getAreaCodeState(phone[0]);
+          this.setState({
+            ...newAreaCodeState,
+            phoneNumber: phone[1]
+          });
+        }
+      } else {
+        this.setState({ phoneNumber: value });
+      }
+    } else {
+      this.setState({
+        areaCode: '',
+        phoneNumber: '',
+        areaCodeError: '',
+        isValidCode: false
+      });
+    }
+  };
+
+  render() {
+    const {
+      areaCodePlaceholder,
+      countryCode,
+      editable,
+      formError,
+      helpText,
+      InputRef,
+      label,
+      labelVariant,
+      maxLength,
+      onSubmitEditing,
+      placeholder,
+      readOnly,
+      required,
+      RightIcon,
+      validations,
+      withAreaCode
+    } = this.props;
+    const { areaCode, areaCodeError, isValidCode, phoneNumber } = this.state;
+
+    const labelColorTheme = readOnly ? 'gray' : 'dark';
+
+    const validationErrors =
+      validations ||
+      (areaCodeError && formatErrorToValidation(areaCodeError)) ||
+      (formError && formatErrorToValidation(formError));
+
+    const hasError = validationErrors?.length > 0;
+
+    return (
+      <View style={styles.container}>
+        {label && (
+          <UTFieldLabel
+            colorTheme={labelColorTheme}
+            required={required}
+            variant={LABEL_VARIANTS[labelVariant]}
+          >
+            {label}
+          </UTFieldLabel>
+        )}
+        <View style={styles.inputsContainer}>
+          {withAreaCode ? (
+            <UTBaseInputField
+              alwaysShowPlaceholder
+              disabled={!editable || readOnly}
+              error={hasError}
+              leftAdornments={[]}
+              maxLength={4}
+              onBlur={this.handleFirstBlur}
+              onChange={this.handleChangeAreaCode}
+              onFocus={this.handleFirstFocus}
+              onSubmitEditing={this.handleSubmitEditing}
+              placeholder={areaCodePlaceholder}
+              ref={InputRef}
+              returnKeyType="next"
+              rightAdornments={[
+                { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } }
+              ]}
+              style={{ container: styles.areaCode }}
+              type="number"
+              value={areaCode}
+            />
+          ) : null}
+          <View style={styles.phoneNumber}>
+            <UTBaseInputField
+              alwaysShowPlaceholder
+              disabled={(withAreaCode && !isValidCode) || !editable || readOnly}
+              error={hasError && !areaCodeError}
+              leftAdornments={
+                countryCode && !withAreaCode
+                  ? [{ name: COMPONENT_KEYS.PREFIX, props: { text: countryCode } }]
+                  : []
+              }
+              maxLength={withAreaCode ? maxLength - (areaCode?.length || 0) : maxLength}
+              onBlur={this.handleSecondBlur}
+              onChange={this.handleChangePhone}
+              onFocus={this.handleSecondFocus}
+              onSubmitEditing={onSubmitEditing}
+              placeholder={placeholder}
+              ref={this.phoneInputRef}
+              returnKeyType="done"
+              rightAdornments={[
+                { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } }
+              ]}
+              type="number"
+              value={phoneNumber}
+            />
+          </View>
+        </View>
+        {helpText && (
+          <UTLabel colorTheme="gray" variant="small">
+            {helpText}
+          </UTLabel>
+        )}
+        {validationErrors && <UTValidation validationData={validationErrors} />}
+      </View>
+    );
+  }
+}
+
+UTPhoneInput.defaultProps = {
+  labelVariant: 'large',
+  maxLength: 10,
+  translations: {
+    areaCodeWithoutZeroError: 'Ingrese el código sin 0',
+    invalidAreaCodeError: 'Código de área inválido'
+  },
+  withAreaCode: true
+};
+
+UTPhoneInput.propTypes = {
+  areaCodePlaceholder: string,
+  countryCode: string,
+  editable: bool,
+  formError: string,
+  helpText: string,
+  InputRef: func,
+  label: string,
+  labelVariant: string,
+  maxLength: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  readOnly: bool,
+  required: bool,
+  RightIcon: elementType,
+  translations: shape({
+    areaCodeWithoutZeroError: string,
+    invalidAreaCodeError: string
+  }),
+  validations: validationDataProptypes,
+  value: string,
+  withAreaCode: bool
+};
+
+export default UTPhoneInput;

package/lib/components/UTPhoneInput/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  areaCode: {
+    flex: 1
+  },
+  container: {
+    gap: 12
+  },
+  inputsContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    gap: 8
+  },
+  phoneNumber: {
+    flex: 2
+  }
+});

package/lib/components/UTSearchField/README.md

@@ -0,0 +1,42 @@
+# UTSearchField
+
+## Description
+
+`UTSearchField` is a customizable search field component that includes a search icon on the left and an optional clear button on the right.
+
+## 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`.         |
+
+## Example
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import UTSearchField from './UTSearchField';
+
+const UTSearchFieldExample = () => {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <View style={{ padding: 20 }}>
+      <UTSearchField placeholder="Search..." value={searchValue} onChange={setSearchValue} />
+      <Text>Search Value: {searchValue}</Text>
+    </View>
+  );
+};
+
+export default UTSearchFieldExample;
+```

package/lib/components/UTSearchField/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+import UTBaseInputField from '../UTBaseInputField';
+
+import { defaultProps, propTypes } from './proptypes';
+
+const UTSearchField = ({
+  disabled,
+  input,
+  inputRef,
+  onBlur,
+  onFocus,
+  onSubmitEditing,
+  placeholder,
+  returnKeyType,
+  size,
+  style,
+  type,
+  variant
+}) => {
+  const clearText = () => {
+    input.onChange('');
+  };
+
+  const action = { Icon: 'IconX', onPress: clearText, size: 'small' };
+
+  const leftAdornments = [
+    { name: COMPONENT_KEYS.ICON, props: { Icon: 'IconSearch', changeOnFocus: true, shade: '02' } }
+  ];
+
+  const rightAdornments = input.value ? [{ name: COMPONENT_KEYS.ACTION, props: { action } }] : [];
+
+  return (
+    <UTBaseInputField
+      alwaysShowPlaceholder
+      disabled={disabled}
+      input={input}
+      inputSize={size}
+      leftAdornments={leftAdornments}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={placeholder}
+      ref={inputRef}
+      returnKeyType={returnKeyType}
+      rightAdornments={rightAdornments}
+      style={{ container: style }}
+      type={type}
+      variant={variant}
+    />
+  );
+};
+
+UTSearchField.defaultProps = defaultProps;
+
+UTSearchField.propTypes = propTypes;
+
+export default UTSearchField;

package/lib/components/UTSearchField/proptypes.js

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

package/lib/components/UTSelect/index.js

@@ -1,103 +1,16 @@
-import React, { useState, useMemo } from 'react';
-import { isEmpty } from '@widergy/web-utils/lib/array';
-import { View } from 'react-native';
+import React from 'react';
+import { string } from 'prop-types';
 
-import Label from '../Label';
-import UTMenu from '../UTMenu';
-import UTTextInput from '../UTTextInput';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-import MultipleItem from './componentes/MultipleItem';
-import styles from './styles';
-import UTSelectTypes from './proptypes';
-
-const UTSelect = ({
-  options = [],
-  value,
-  onChange,
-  error,
-  UTMenuProps,
-  label,
-  styles: propStyles,
-  variant,
-  disabled,
-  UTTextInputProps,
-  isMultiple,
-  verticalOffset = 5,
-  title,
-  titleProps,
-  changeOnClose
-}) => {
-  const [focused, setFocused] = useState(false);
-
-  const selectedOption = useMemo(
-    () => (!isMultiple ? options.find(option => option.value === value) : value || []),
-    [isMultiple, options, value]
-  );
-
-  const handleChange = option => {
-    if (!changeOnClose) onChange(option.value);
-  };
-
-  const handleChangeMultiple = newValue => {
-    const newValues = !selectedOption?.find?.(elem => elem === newValue.value)
-      ? [...(selectedOption || []), newValue.value]
-      : selectedOption?.filter(elem => elem !== newValue.value);
-
-    const finalValue = isEmpty(newValues) ? null : newValues;
-    if (!changeOnClose) {
-      onChange(finalValue);
-    }
-  };
-
-  const handleOpen = () => setFocused(true);
-  // eslint-disable-next-line consistent-return
-  const handleClose = () => {
-    setFocused(false);
-    if (changeOnClose) {
-      return isMultiple
-        ? onChange(selectedOption)
-        : onChange(options.find(_option => _option.id === selectedOption.id).value);
-    }
-  };
-
-  return (
-    <View style={[styles.container, propStyles]}>
-      {title && (
-        <Label medium primary {...titleProps}>
-          {title}
-        </Label>
-      )}
-      <UTMenu
-        options={options}
-        selectedOption={isMultiple ? selectedOption : selectedOption?.id}
-        fullWidth
-        verticalOffset={verticalOffset}
-        disabled={disabled}
-        onPress={isMultiple ? handleChangeMultiple : handleChange}
-        onOpen={handleOpen}
-        onClose={handleClose}
-        withoutOpacity
-        MenuOptionComponent={isMultiple && MultipleItem}
-        isMultiple={isMultiple}
-        {...UTMenuProps}
-      >
-        <UTTextInput
-          variant={variant}
-          value={isMultiple ? value?.join(', ') || '' : selectedOption?.label || selectedOption?.value || ''}
-          error={error}
-          label={label}
-          select
-          controlledFocus={focused}
-          disabled={disabled}
-          version="V0"
-          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
-          {...UTTextInputProps}
-        />
-      </UTMenu>
-    </View>
-  );
+const UTSelect = ({ version = 'V0', ...props }) => {
+  const Component = { V0, V1 }[version];
+  return <Component {...props} />;
 };
 
-UTSelect.propTypes = UTSelectTypes;
+UTSelect.propTypes = {
+  version: string
+};
 
 export default UTSelect;

package/lib/components/UTSelect/{componentes → versions/V0/componentes}/MultipleItem/index.js

@@ -2,7 +2,7 @@
 import { any, bool, func, shape, string } from 'prop-types';
 import React, { memo } from 'react';
 
-import Checkbox from '../../../Checkbox';
+import Checkbox from '../../../../../Checkbox';
 
 import styles from './styles';
 

package/lib/components/UTSelect/versions/V0/index.js

@@ -0,0 +1,103 @@
+import React, { useState, useMemo } from 'react';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { View } from 'react-native';
+
+import Label from '../../../Label';
+import UTMenu from '../../../UTMenu';
+import UTTextInput from '../../../UTTextInput';
+
+import MultipleItem from './componentes/MultipleItem';
+import styles from './styles';
+import UTSelectTypes from './proptypes';
+
+const UTSelect = ({
+  options = [],
+  value,
+  onChange,
+  error,
+  UTMenuProps,
+  label,
+  styles: propStyles,
+  variant,
+  disabled,
+  UTTextInputProps,
+  isMultiple,
+  verticalOffset = 5,
+  title,
+  titleProps,
+  changeOnClose
+}) => {
+  const [focused, setFocused] = useState(false);
+
+  const selectedOption = useMemo(
+    () => (!isMultiple ? options.find(option => option.value === value) : value || []),
+    [isMultiple, options, value]
+  );
+
+  const handleChange = option => {
+    if (!changeOnClose) onChange(option.value);
+  };
+
+  const handleChangeMultiple = newValue => {
+    const newValues = !selectedOption?.find?.(elem => elem === newValue.value)
+      ? [...(selectedOption || []), newValue.value]
+      : selectedOption?.filter(elem => elem !== newValue.value);
+
+    const finalValue = isEmpty(newValues) ? null : newValues;
+    if (!changeOnClose) {
+      onChange(finalValue);
+    }
+  };
+
+  const handleOpen = () => setFocused(true);
+  // eslint-disable-next-line consistent-return
+  const handleClose = () => {
+    setFocused(false);
+    if (changeOnClose) {
+      return isMultiple
+        ? onChange(selectedOption)
+        : onChange(options.find(_option => _option.id === selectedOption.id).value);
+    }
+  };
+
+  return (
+    <View style={[styles.container, propStyles]}>
+      {title && (
+        <Label medium primary {...titleProps}>
+          {title}
+        </Label>
+      )}
+      <UTMenu
+        options={options}
+        selectedOption={isMultiple ? selectedOption : selectedOption?.id}
+        fullWidth
+        verticalOffset={verticalOffset}
+        disabled={disabled}
+        onPress={isMultiple ? handleChangeMultiple : handleChange}
+        onOpen={handleOpen}
+        onClose={handleClose}
+        withoutOpacity
+        MenuOptionComponent={isMultiple && MultipleItem}
+        isMultiple={isMultiple}
+        {...UTMenuProps}
+      >
+        <UTTextInput
+          variant={variant}
+          value={isMultiple ? value?.join(', ') || '' : selectedOption?.label || selectedOption?.value || ''}
+          error={error}
+          label={label}
+          select
+          controlledFocus={focused}
+          disabled={disabled}
+          version="V0"
+          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          {...UTTextInputProps}
+        />
+      </UTMenu>
+    </View>
+  );
+};
+
+UTSelect.propTypes = UTSelectTypes;
+
+export default UTSelect;