@widergy/mobile-ui 1.14.6 → 1.15.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.15.1](https://github.com/widergy/mobile-ui/compare/v1.15.0...v1.15.1) (2024-07-31)
+
+
+### Bug Fixes
+
+* implement select with bottom sheet ([#321](https://github.com/widergy/mobile-ui/issues/321)) ([f50e3de](https://github.com/widergy/mobile-ui/commit/f50e3de1e0310e5dbb453afdb05e792d5e8d5a15))
+
+# [1.15.0](https://github.com/widergy/mobile-ui/compare/v1.14.6...v1.15.0) (2024-07-31)
+
+
+### Features
+
+* new phone input component ([#325](https://github.com/widergy/mobile-ui/issues/325)) ([6c6d20d](https://github.com/widergy/mobile-ui/commit/6c6d20d8395e4d30a1917a5309c325c62a89e79c))
+
 ## [1.14.6](https://github.com/widergy/mobile-ui/compare/v1.14.5...v1.14.6) (2024-07-26)
 
 

package/lib/components/Button/index.js

@@ -44,7 +44,7 @@ const Button = ({
             ? NO_ELEVATION
             : mode === OUTLINED
               ? NO_ELEVATION
-              : elevation ?? themeStyles.buttonElevation
+              : (elevation ?? themeStyles.buttonElevation)
         }
         style={[
           styles.container,

package/lib/components/UTBadge/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { string } from 'prop-types';
+import { number, oneOfType, string } from 'prop-types';
 import { View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
@@ -29,7 +29,7 @@ const UTBadge = ({ children, colorTheme, style }) => {
 UTBadge.defaultProps = DEFAULT_PROPS;
 
 UTBadge.propTypes = {
-  children: string,
+  children: oneOfType([string, number]),
   colorTheme: string,
   style: ViewPropTypes.style
 };

package/lib/components/UTBadge/theme.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native';
+
 import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
 
 export const variantsColorTheme = (theme, colorTheme) => {
@@ -19,26 +21,27 @@ export const variantsColorTheme = (theme, colorTheme) => {
   };
 };
 
-const baseButtonTheme = () => ({
+const baseButtonTheme = StyleSheet.create({
   noChildren: {
     height: 10,
     width: 10
   },
   root: {
     alignItems: 'center',
-    borderRadius: 100,
+    borderRadius: 10,
     justifyContent: 'center',
-    margin: 10
+    overflow: 'hidden'
   },
   text: {
-    alignSelf: 'flex-start',
     height: 20,
-    paddingHorizontal: 6
+    minWidth: 20,
+    paddingHorizontal: 6,
+    textAlign: 'center'
   }
 });
 
 export const retrieveStyle = ({ theme, colorTheme, children }) => {
-  const baseTheme = baseButtonTheme();
+  const baseTheme = baseButtonTheme;
   const textTheme = children ? baseTheme.text : baseTheme.noChildren;
   const variantTheme = variantsColorTheme(theme, colorTheme);
 

package/lib/components/UTBaseInputField/README.md

@@ -1,31 +1,25 @@
-# UTBaseInputField
-
-## Description
-
-`UTBaseInputField` is a flexible and customizable input field component that supports various input types, adornments, and styles. It can be used to create text inputs with additional functionality such as icons, prefixes, suffixes, and action buttons.
-
-## Props
-
-| Name                  | Type   | Default | Description                                               |
-| --------------------- | ------ | ------- | --------------------------------------------------------- |
-| alwaysShowPlaceholder | bool   |         | Whether to always show the placeholder text.              |
-| disabled              | bool   |         | Whether the input field is disabled.                      |
-| error                 | string |         | Error message to display.                                 |
-| inputSize             | string |         | Size of the input field.                                  |
-| leftAdornments        | array  |         | Elements to display on the left side of the input field.  |
-| maxCount              | number |         | Maximum number of characters allowed.                     |
-| maxRows               | number |         | Maximum number of rows for multiline input.               |
-| onBlur                | func   |         | Callback function to handle blur event.                   |
-| onChange              | func   |         | Callback function to handle change event.                 |
-| onFocus               | func   |         | Callback function to handle focus event.                  |
-| onSubmitEditing       | func   |         | Callback function to handle submit editing event.         |
-| placeholder           | string |         | Placeholder text for the input field.                     |
-| readOnly              | bool   |         | Whether the input field is read-only.                     |
-| returnKeyType         | string |         | Type of return key to display on the keyboard.            |
-| rightAdornments       | array  |         | Elements to display on the right side of the input field. |
-| style                 | object |         | Custom styles to apply to the component.                  |
-| type                  | string |         | Type of the input field (e.g., email, numeric, password). |
-| value                 | string |         | Value of the input field.                                 |
+| Name                  | Type                                                           | Default                           | Description                                               |
+| --------------------- | -------------------------------------------------------------- | --------------------------------- | --------------------------------------------------------- |
+| alwaysShowPlaceholder | bool                                                           | false                             | Whether to always show the placeholder text.              |
+| disabled              | bool                                                           |                                   | Whether the input field is disabled.                      |
+| error                 | string                                                         |                                   | Error message to display.                                 |
+| id                    | oneOfType([number, string])                                    |                                   | Unique identifier for the input field.                    |
+| input                 | shape({ value: string.isRequired, onChange: func.isRequired }) | { value: '', onChange: () => {} } | Input object containing the value and onChange handler.   |
+| inputSize             | string                                                         | 'large'                           | Size of the input field. One of: `small`, `large`.        |
+| leftAdornments        | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the left side of the input field.  |
+| maxCount              | number                                                         |                                   | Maximum number of characters allowed.                     |
+| maxRows               | number                                                         |                                   | Maximum number of rows for multiline input.               |
+| onBlur                | func                                                           |                                   | Callback function to handle blur event.                   |
+| onFocus               | func                                                           |                                   | Callback function to handle focus event.                  |
+| onSubmitEditing       | func                                                           |                                   | Callback function to handle submit editing event.         |
+| placeholder           | string                                                         |                                   | Placeholder text for the input field.                     |
+| readOnly              | bool                                                           |                                   | Whether the input field is read-only.                     |
+| returnKeyType         | string                                                         |                                   | Type of return key to display on the keyboard.            |
+| rightAdornments       | arrayOf(shape({ name: string, props: object }))                |                                   | Elements to display on the right side of the input field. |
+| style                 | shape({ container: object, input: object, root: object })      | {}                                | Custom styles to apply to the component.                  |
+| type                  | string                                                         |                                   | Type of the input field (e.g., email, numeric, password). |
+| variant               | string                                                         | 'white'                           | Variant of the input field. One of: `white`, `gray`.      |
+| editable              | bool                                                           | true                              | Whether the input field is editable.                      |
 
 ## Input Types
 
@@ -101,18 +95,38 @@ Displays a suffix text after the input field.
 
 #### IconAdornment
 
-Displays an icon, with an optional change on error.
+Displays an icon, with optional changes on focus and error.
 
 - **Props passed to IconAdornment:**
   - `Icon` (elementType): The icon to display.
+  - `changeOnError` (bool): Whether to change the icon on error (default is false).
+  - `changeOnFocus` (bool): Whether to change the icon on focus (default is false).
+  - `colorTheme` (string): The color theme of the icon.
   - `error` (string): The error message (received from UTBaseInputField if an error occurs).
+  - `focused` (bool): Whether the input field is focused (received from UTBaseInputField).
   - `inputStyle` (object): The style of the input field (received from UTBaseInputField).
-  - `changeOnError` (bool): Whether to change the icon on error (default is false).
+  - `shade` (string): The shade of the icon.
+
+**Example Usage:**
+
+```javascript
+<UTBaseInputField
+  rightAdornments={[{ name: 'Icon', props: { Icon: 'search', changeOnError: true, changeOnFocus: true } }]}
+/>
+```
+
+#### BadgeAdornment
+
+Displays a badge with text.
+
+- **Props passed to BadgeAdornment:**
+  - `text` (string): The text to display inside the badge.
+  - `colorTheme` (string): The color theme of the badge.
 
 **Example Usage:**
 
 ```javascript
-<UTBaseInputField rightAdornments={[{ name: 'Icon', props: { Icon: 'search', changeOnError: true } }]} />
+<UTBaseInputField rightAdornments={[{ name: 'Badge', props: { text: 'New', colorTheme: 'red' } }]} />
 ```
 
 #### ActionAdornment

package/lib/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -1,34 +1,23 @@
 import React from 'react';
-import { string, bool, shape, func } from 'prop-types';
+import { bool, shape } from 'prop-types';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import UTButton from '../../../UTButton';
+import { propTypes as utbuttonProptypes } from '../../../UTButton/proptypes';
 
 const ActionAdornment = ({ action, disabled, actionStyle }) => {
   if (!action) return null;
 
   return (
-    <UTButton
-      colorTheme={action.colorTheme}
-      disabled={disabled}
-      Icon={action.icon}
-      onPress={action.onPress}
-      style={actionStyle}
-      variant="text"
-    >
+    <UTButton disabled={disabled} style={actionStyle} variant="text" {...action}>
       {action.text}
     </UTButton>
   );
 };
 
 ActionAdornment.propTypes = {
-  action: shape({
-    colorTheme: string,
-    icon: func,
-    onPress: func,
-    text: string
-  }),
-  actionStyle: ViewPropTypes.style,
+  action: shape(utbuttonProptypes),
+  actionStyle: shape({ object: ViewPropTypes.style }),
   disabled: bool
 };
 

package/lib/components/UTBaseInputField/components/BadgeAdornment/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { number, oneOfType, string } from 'prop-types';
+
+import UTBadge from '../../../UTBadge';
+
+const BadgeAdornment = ({ text, colorTheme }) => <UTBadge colorTheme={colorTheme}>{text}</UTBadge>;
+
+BadgeAdornment.propTypes = {
+  colorTheme: string,
+  text: oneOfType([string, number])
+};
+
+export default BadgeAdornment;

package/lib/components/UTBaseInputField/components/IconAdornment/constants.js

@@ -1 +1,3 @@
 export const ERROR_ICON = 'IconInfoCircle';
+
+export const ICON_SIZE = 20;

package/lib/components/UTBaseInputField/components/IconAdornment/index.js

@@ -1,32 +1,37 @@
 import React from 'react';
-import { shape, string, elementType, bool } from 'prop-types';
-import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
 import { isUTIcon } from '../../../UTIcon/utils';
 import UTIcon from '../../../UTIcon';
 
-import { ERROR_ICON } from './constants';
+import { ERROR_ICON, ICON_SIZE } from './constants';
 import { getIconColorProps } from './utils';
+import { defaultProps, propTypes } from './proptypes';
 
-const IconAdornment = ({ Icon, error, inputStyle, changeOnError = false }) => {
+const IconAdornment = ({
+  changeOnError,
+  changeOnFocus,
+  colorTheme,
+  error,
+  focused,
+  Icon,
+  inputStyle,
+  shade
+}) => {
   const IconToRender = error && changeOnError ? ERROR_ICON : Icon;
-
   if (!IconToRender) return null;
 
   return isUTIcon(IconToRender) ? (
-    <UTIcon name={IconToRender} {...getIconColorProps(error, changeOnError)} />
+    <UTIcon
+      name={IconToRender}
+      size={ICON_SIZE}
+      {...getIconColorProps(changeOnError, changeOnFocus, colorTheme, error, focused, shade)}
+    />
   ) : (
-    <IconToRender fill={inputStyle.root.color} />
+    <Icon size={ICON_SIZE} fill={inputStyle.root.color} />
   );
 };
 
-IconAdornment.propTypes = {
-  error: string,
-  Icon: elementType,
-  inputStyle: shape({
-    root: TextPropTypes.style
-  }),
-  changeOnError: bool
-};
+IconAdornment.propTypes = propTypes;
+IconAdornment.defaultProps = defaultProps;
 
 export default IconAdornment;

package/lib/components/UTBaseInputField/components/IconAdornment/proptypes.js

@@ -0,0 +1,20 @@
+import { shape, string, elementType, bool, oneOfType } from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
+
+export const propTypes = {
+  changeOnError: bool,
+  changeOnFocus: bool,
+  colorTheme: string,
+  error: oneOfType([bool, string]),
+  focused: bool,
+  Icon: elementType,
+  inputStyle: shape({
+    root: TextPropTypes.style
+  }),
+  shade: string
+};
+
+export const defaultProps = {
+  changeOnError: false,
+  changeOnFocus: false
+};

package/lib/components/UTBaseInputField/components/IconAdornment/utils.js

@@ -1,2 +1,7 @@
-export const getIconColorProps = (error, changeOnError) =>
-  changeOnError && error ? { colorTheme: 'error', shade: '04' } : { colorTheme: 'gray' };
+export const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) => {
+  return changeOnError && error
+    ? { colorTheme: 'error', shade: '04' }
+    : changeOnFocus && focused
+      ? { colorTheme: 'accent', shade: '04' }
+      : { colorTheme: colorTheme || 'gray', shade };
+};

package/lib/components/UTBaseInputField/constants.js

@@ -1,4 +1,5 @@
 import ActionAdornment from './components/ActionAdornment';
+import BadgeAdornment from './components/BadgeAdornment';
 import IconAdornment from './components/IconAdornment';
 import PrefixAdornment from './components/PrefixAdornment';
 import SuffixAdornment from './components/SuffixAdornment';
@@ -6,27 +7,41 @@ import TooltipAdornment from './components/TooltipAdornment';
 
 export const TYPES = {
   EMAIL: 'email',
+  NUMBER: 'number',
   NUMERIC: 'numeric',
-  PASSWORD: 'password'
+  PASSWORD: 'password',
+  PHONE: 'phone'
 };
 
 export const KEYBOARD_BY_TYPE = {
   [TYPES.EMAIL]: 'email-address',
-  [TYPES.NUMERIC]: 'numeric'
+  [TYPES.NUMBER]: 'number-pad',
+  [TYPES.NUMERIC]: 'numeric',
+  [TYPES.PHONE]: 'phone-pad'
 };
 
 export const COMPONENT_KEYS = {
   ACTION: 'Action',
+  BADGE: 'Badge',
   ICON: 'Icon',
   PREFIX: 'Prefix',
   SUFFIX: 'Suffix',
   TOOLTIP: 'Tooltip'
 };
 
-export const SMALL = 'small';
+export const SIZES = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+
+export const VARIANT = {
+  WHITE: 'white',
+  GRAY: 'gray'
+};
 
 export const COMPONENTS_MAPPER = {
   [COMPONENT_KEYS.ACTION]: ActionAdornment,
+  [COMPONENT_KEYS.BADGE]: BadgeAdornment,
   [COMPONENT_KEYS.ICON]: IconAdornment,
   [COMPONENT_KEYS.PREFIX]: PrefixAdornment,
   [COMPONENT_KEYS.SUFFIX]: SuffixAdornment,

package/lib/components/UTBaseInputField/index.js

@@ -1,41 +1,54 @@
-import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useState } from 'react';
-import { bool, func, number, string, arrayOf, shape } from 'prop-types';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react';
 import { View, TextInput } from 'react-native';
-import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { useTheme } from '../../theming';
 import UTLabel from '../UTLabel';
 
+import { defaultProps, propTypes } from './proptypes';
 import { KEYBOARD_BY_TYPE, TYPES, COMPONENTS_MAPPER } from './constants';
-import { retrieveStyle } from './theme';
+import { LINE_HEIGHT, retrieveStyle } from './theme';
 
 const UTBaseInputField = forwardRef(
   (
     {
       alwaysShowPlaceholder,
+      blurOnSubmit,
       disabled,
+      editable,
       error,
+      id,
+      input,
       inputSize,
       leftAdornments,
-      maxCount,
+      maxLength,
       maxRows,
       onBlur,
-      onChange,
       onFocus,
       onSubmitEditing,
       placeholder,
       readOnly,
       returnKeyType,
       rightAdornments,
+      showCharacterCount,
       style,
       type,
-      value
+      variant
     },
     ref
   ) => {
+    const { value, onChange } = input;
     const [displayValue, setDisplayValue] = useState(value);
     const [focused, setFocused] = useState(false);
-    const [inputWidth, setInputWidth] = useState(null);
+    const inputWidthRef = useRef(null);
+    const inputRef = useRef(null);
 
     const theme = useTheme();
     const multiline = maxRows > 1;
@@ -49,25 +62,35 @@ const UTBaseInputField = forwardRef(
       [onFocus, value, multiline]
     );
 
-    const truncateText = useCallback(
-      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;
-      },
-      [inputWidth]
-    );
+    const truncateText = (text, width) => {
+      const currentWidth = width || inputWidthRef.current;
+      if (!currentWidth || !text) return text;
+      const charWidth = 8;
+      const maxCharsPerLine = Math.floor(currentWidth / charWidth);
+      return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
+    };
 
-    const handleBlur = useCallback(
-      event => {
-        setFocused(false);
-        if (!multiline) setDisplayValue(truncateText(value));
-        onBlur?.(event);
-      },
-      [truncateText, value, multiline, onBlur]
-    );
+    useLayoutEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.measure((_x, _y, width) => {
+          inputWidthRef.current = width;
+          setDisplayValue(truncateText(value, width));
+        });
+      }
+    }, [value]);
+
+    const handleBlur = event => {
+      setFocused(false);
+      if (!multiline) setDisplayValue(truncateText(value));
+      onBlur?.(event);
+    };
+
+    const handleSubmitEditing = event => {
+      if (blurOnSubmit && inputRef.current) {
+        handleBlur();
+      }
+      onSubmitEditing?.(event);
+    };
 
     const { actionStyle, containerStyle, inputRowStyle, inputStyle, textLengthRowStyle } = retrieveStyle({
       disabled,
@@ -78,58 +101,69 @@ const UTBaseInputField = forwardRef(
       multiline,
       readOnly,
       style,
-      theme
+      theme,
+      variant
     });
 
     useEffect(() => {
       setDisplayValue(value);
     }, [value]);
 
-    useLayoutEffect(() => {
-      if (ref?.current) {
-        ref.current.measure((_x, _y, width) => {
-          setInputWidth(width);
-        });
+    useImperativeHandle(ref, () => ({
+      truncate: () => {
+        setDisplayValue(truncateText(value));
       }
-    }, [focused]);
+    }));
 
     const secureTextEntry = type === TYPES.PASSWORD;
     const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
     const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
 
-    const renderElement = useCallback(element => {
-      const Component = COMPONENTS_MAPPER[element.name];
-      return Component ? (
-        <Component
-          actionStyle={actionStyle}
-          disabled={disabled}
-          error={error}
-          inputStyle={inputStyle}
-          key={element.name}
-          {...element.props}
-        />
-      ) : null;
-    }, []);
+    const renderElement = useCallback(
+      element => {
+        const Component = COMPONENTS_MAPPER[element.name];
+        return Component ? (
+          <Component
+            actionStyle={actionStyle}
+            disabled={disabled}
+            error={error}
+            focused={focused}
+            inputStyle={inputStyle}
+            key={element.name}
+            {...element.props}
+          />
+        ) : null;
+      },
+      [actionStyle, disabled, error, focused, inputStyle]
+    );
+
+    const minHeight =
+      containerStyle.borderWidth * 2 +
+      containerStyle.paddingVertical * 2 +
+      (inputStyle.lineHeight || LINE_HEIGHT) * maxRows;
 
     return (
-      <View style={containerStyle}>
+      <View style={[containerStyle, { minHeight }]}>
         <View style={inputRowStyle}>
           {leftAdornments.map(renderElement)}
           <TextInput
             autoCapitalize={autoCapitalize}
             autoCorrect={false}
-            editable={!disabled && !readOnly}
+            editable={!disabled && !readOnly && editable}
+            id={id ? `${id}` : undefined}
             keyboardType={keyboardType}
-            maxLength={maxCount}
+            maxLength={maxLength}
             multiline={multiline}
             numberOfLines={maxRows}
             onChangeText={onChange}
             onEndEditing={handleBlur}
+            onBlur={handleBlur}
             onFocus={handleFocus}
-            onSubmitEditing={onSubmitEditing}
+            onSubmitEditing={handleSubmitEditing}
             placeholder={!focused && !alwaysShowPlaceholder ? '' : placeholder}
             placeholderTextColor={inputStyle.placeholderTextColor}
-            ref={ref}
+            pointerEvents={editable ? 'auto' : 'none'}
+            ref={inputRef}
             returnKeyType={returnKeyType}
             secureTextEntry={secureTextEntry}
             selectionColor={inputStyle.selectionColor}
@@ -139,10 +173,10 @@ const UTBaseInputField = forwardRef(
           />
           {rightAdornments.map(renderElement)}
         </View>
-        {maxCount && (
+        {maxLength && showCharacterCount && (
           <View style={textLengthRowStyle}>
             <UTLabel colorTheme="gray" variant="small">
-              {value?.length || 0}/{maxCount}
+              {value?.length || 0}/{maxLength}
             </UTLabel>
           </View>
         )}
@@ -152,40 +186,7 @@ const UTBaseInputField = forwardRef(
 );
 
 UTBaseInputField.displayName = 'UTBaseInputField';
-
-UTBaseInputField.propTypes = {
-  alwaysShowPlaceholder: bool,
-  disabled: bool,
-  error: string,
-  inputSize: string,
-  leftAdornments: arrayOf(
-    shape({
-      name: string.isRequired,
-      props: shape({})
-    })
-  ),
-  maxCount: number,
-  maxRows: number,
-  onBlur: func,
-  onChange: func,
-  onFocus: func,
-  onSubmitEditing: func,
-  placeholder: string,
-  readOnly: bool,
-  returnKeyType: string,
-  rightAdornments: arrayOf(
-    shape({
-      name: string.isRequired,
-      props: shape({})
-    })
-  ),
-  style: shape({
-    container: ViewPropTypes.style,
-    input: ViewPropTypes.style,
-    root: ViewPropTypes.style
-  }),
-  type: string,
-  value: string
-};
+UTBaseInputField.defaultProps = defaultProps;
+UTBaseInputField.propTypes = propTypes;
 
 export default UTBaseInputField;