@widergy/mobile-ui 1.11.2 → 1.11.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.11.4](https://github.com/widergy/mobile-ui/compare/v1.11.3...v1.11.4) (2024-06-18)
+
+
+### Bug Fixes
+
+* configurable avoid utmenu overlapping anchor ([#296](https://github.com/widergy/mobile-ui/issues/296)) ([6ab50ba](https://github.com/widergy/mobile-ui/commit/6ab50babc59deb019947c79067a010e4ddf047dc))
+
+## [1.11.3](https://github.com/widergy/mobile-ui/compare/v1.11.2...v1.11.3) (2024-06-12)
+
+
+### Bug Fixes
+
+* integrate utlabel in utbutton ([#293](https://github.com/widergy/mobile-ui/issues/293)) ([519119b](https://github.com/widergy/mobile-ui/commit/519119be6c9dc7f1daf1b0e8beb6019df66a9a71))
+
 ## [1.11.2](https://github.com/widergy/mobile-ui/compare/v1.11.1...v1.11.2) (2024-06-03)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -9,18 +9,19 @@ import UTTextInput from '../UTTextInput';
 import styles from './styles';
 
 const UTAutocomplete = ({
-  input,
-  options,
+  autoCompletePlaceholder,
+  avoidOverlappingAnchor,
   disabled,
+  error,
+  filterOptions,
+  input,
   label,
   labelBackgroundColor,
-  error,
-  variant,
-  autoCompletePlaceholder,
-  MenuOptionComponent,
   ListEmptyComponent,
-  filterOptions,
-  persistSelectedOption = false
+  MenuOptionComponent,
+  options,
+  persistSelectedOption = false,
+  variant
 }) => {
   const [selectedOption, setSelectedOption] = useState();
 
@@ -38,30 +39,31 @@ const UTAutocomplete = ({
   return (
     <View style={styles.container}>
       <UTMenu
-        options={options}
-        fullWidth
-        selectedOption={selectedOption?.id}
-        withAutocomplete
-        onPress={handleOnPress}
-        onOpen={input.onFocus}
-        onClose={input.onBlur}
-        disabled={disabled}
-        onQueryChange={input.onQueryChange}
         autoCompletePlaceholder={autoCompletePlaceholder}
+        avoidOverlappingAnchor={avoidOverlappingAnchor}
+        disabled={disabled}
+        filterOptions={filterOptions}
+        fullWidth
+        ListEmptyComponent={ListEmptyComponent}
         maxHeight={WINDOW_HEIGHT * 0.25}
         MenuOptionComponent={MenuOptionComponent}
-        ListEmptyComponent={ListEmptyComponent}
-        filterOptions={filterOptions}
+        onClose={input.onBlur}
+        onOpen={input.onFocus}
+        onPress={handleOnPress}
+        onQueryChange={input.onQueryChange}
+        options={options}
+        selectedOption={selectedOption?.id}
+        withAutocomplete
       >
         <UTTextInput
-          variant={variant}
-          value={selectedOption?.label || ''}
+          disabled={disabled}
           error={error}
           label={label}
           labelBackgroundColor={labelBackgroundColor}
-          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
           onChange={() => {}}
-          disabled={disabled}
+          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          value={selectedOption?.label || ''}
+          variant={variant}
         />
       </UTMenu>
     </View>
@@ -69,12 +71,21 @@ const UTAutocomplete = ({
 };
 
 UTAutocomplete.propTypes = {
+  avoidOverlappingAnchor: bool,
+  autoCompletePlaceholder: string,
+  disabled: bool,
+  error: oneOf([bool, string]),
+  filterOptions: bool,
   input: shape({
     onChange: func.isRequired,
     value: string.isRequired,
     onFocus: func,
     onBlur: func
   }),
+  label: string,
+  labelBackgroundColor: string,
+  ListEmptyComponent: element,
+  MenuOptionComponent: element,
   options: arrayOf(
     shape({
       value: string,
@@ -82,16 +93,8 @@ UTAutocomplete.propTypes = {
       label: string
     })
   ),
-  disabled: bool,
-  label: string,
-  labelBackgroundColor: string,
-  error: oneOf([bool, string]),
-  variant: string,
-  autoCompletePlaceholder: string,
-  MenuOptionComponent: element,
-  ListEmptyComponent: element,
-  filterOptions: bool,
-  persistSelectedOption: bool
+  persistSelectedOption: bool,
+  variant: string
 };
 
 export default UTAutocomplete;

package/lib/components/UTButton/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { bool, func, elementType, string } from 'prop-types';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import { themeType, withTheme } from '../../theming';
 import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
 import UTLoading from '../UTLoading';
 
 import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
@@ -29,7 +30,7 @@ const UTButton = ({
     childrenContainerStyles: themeChildrenContainerStyles,
     disabledStyles,
     iconStyles: themeIconStyles,
-    textStyles: themeTextStyles
+    textStyles
   } = retrieveStyle({
     style,
     colorTheme,
@@ -39,7 +40,7 @@ const UTButton = ({
     variant
   });
 
-  const iconStyle = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
+  const iconStyles = children ? themeIconStyles.icon : themeIconStyles.iconOnly;
 
   const buttonStyles = ({ pressed }) => [
     themeButtonStyles,
@@ -47,27 +48,29 @@ const UTButton = ({
     pressed ? themeButtonStyles.pressed : themeButtonStyles.notPressed
   ];
 
-  const textStyles = themeTextStyles;
-
   const IconToShow =
     Icon &&
     (isUTIcon(Icon) ? (
-      <UTIcon color={themeTextStyles.color} style={iconStyle} size={iconStyle.fontSize} name={Icon} />
+      <UTIcon color={iconStyles.color} style={iconStyles} size={iconStyles.fontSize} name={Icon} />
     ) : (
-      <Icon style={iconStyle} fill={themeTextStyles.color} />
+      <Icon style={iconStyles} fill={iconStyles.color} />
     ));
 
   const RenderedChildren = (
     <View style={themeChildrenContainerStyles}>
       {iconPlacement === ICON_PLACEMENTS.left && IconToShow}
-      {children && <Text style={textStyles}>{children}</Text>}
+      {children && (
+        <UTLabel colorTheme={textStyles.colorTheme} variant={textStyles.variant} weight={textStyles.weight}>
+          {children}
+        </UTLabel>
+      )}
       {iconPlacement !== ICON_PLACEMENTS.left && IconToShow}
     </View>
   );
 
   return (
     <Pressable disabled={disabled || loading} onPress={onPress} style={buttonStyles}>
-      <UTLoading color={themeTextStyles.color} loading={loading} size={24} thickness={2}>
+      <UTLoading color={iconStyles.color} loading={loading} size={24} thickness={2}>
         {RenderedChildren}
       </UTLoading>
     </Pressable>

package/lib/components/UTButton/theme.js

@@ -1,14 +1,12 @@
 import { getShadow } from '../../utils/styleUtils';
+import { COLOR_THEMES } from '../UTLabel/constants';
 
 import { COLORS_MAPPER, DEFAULT_PROPS, ELEVATION, PRESSED_ELEVATION } from './constants';
 
-const baseButtonTheme = theme => ({
+const baseButtonTheme = () => ({
   text: {
-    fontFamily: theme.fonts.fontFamily,
-    fontSize: 16,
-    fontWeight: '500',
-    lineHeight: 22,
-    textTransform: 'none'
+    variant: 'body',
+    weight: 'medium'
   },
   button: {
     borderRadius: 4,
@@ -37,8 +35,8 @@ const baseButtonTheme = theme => ({
 });
 
 const variantsColorTheme = (theme, colorTheme, variant) => {
-  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette[actionColorName];
+  const colorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionTheme = theme.Palette[colorName];
   const negativeTheme = theme.Palette[COLORS_MAPPER.negative];
   const neutralTheme = theme.Palette[COLORS_MAPPER.secondary];
   const shadow = getShadow(ELEVATION);
@@ -56,12 +54,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
+        colorTheme: colorTheme === COLORS_MAPPER.negative ? COLOR_THEMES.neutral : COLOR_THEMES.negative
       },
-      disabled: {
-        backgroundColor: actionTheme['04'],
-        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05']
       }
     },
     semitransparent: {
@@ -75,12 +71,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        backgroundColor: actionTheme['01'],
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     outlined: {
@@ -93,13 +87,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        borderWidth: 1,
-        borderColor: actionTheme['05'],
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     text: {
@@ -112,11 +103,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         }
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     },
     shadow: {
@@ -132,11 +122,10 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
         notPressed: shadow
       },
       text: {
-        color: actionTheme['05']
+        colorTheme: colorName
       },
-      disabled: {
-        color: actionTheme['05'],
-        opacity: 0.5
+      icon: {
+        color: actionTheme['05']
       }
     }
   };
@@ -152,8 +141,8 @@ const sizeButtonTheme = size => {
         paddingVertical: 12
       },
       text: {
-        fontSize: 16,
-        fontWeight: '500'
+        variant: 'body',
+        weight: 'medium'
       },
       icon: {
         fontSize: 20
@@ -168,8 +157,8 @@ const sizeButtonTheme = size => {
         paddingVertical: 4
       },
       text: {
-        fontSize: 14,
-        fontWeight: '500'
+        weight: 'medium',
+        variant: 'small'
       },
       icon: {
         fontSize: 20
@@ -196,7 +185,7 @@ const iconButtonPlacementTheme = iconPlacement => {
 };
 
 export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, iconPlacement }) => {
-  const baseTheme = baseButtonTheme(theme);
+  const baseTheme = baseButtonTheme();
   const variantTheme = variantsColorTheme(theme, colorTheme, variant);
   const sizeTheme = sizeButtonTheme(size);
   const iconPlacementTheme = iconButtonPlacementTheme(iconPlacement);
@@ -209,19 +198,32 @@ export const retrieveStyle = ({ style = {}, colorTheme, variant, theme, size, ic
   };
 
   const textStyles = {
-    ...baseTheme.text,
-    ...variantTheme.text,
-    ...sizeTheme.text
+    colorTheme: variantTheme.text.colorTheme,
+    variant: sizeTheme.text?.variant || baseTheme.text?.variant,
+    weight: sizeTheme.text?.weight || baseTheme.text?.weight
   };
 
   const iconStyles = {
-    icon: { ...baseTheme.icon, ...sizeTheme.icon, ...iconPlacementTheme, ...style.icon },
-    iconOnly: { ...baseTheme.iconOnly, ...sizeTheme.iconOnly, ...style.icon }
+    icon: {
+      ...baseTheme.icon,
+      ...sizeTheme.icon,
+      ...variantTheme.icon,
+      ...iconPlacementTheme,
+      ...style.icon
+    },
+    iconOnly: {
+      ...baseTheme.iconOnly,
+      ...sizeTheme.iconOnly,
+      ...variantTheme.icon,
+      ...style.icon
+    }
   };
 
   const childrenContainerStyles = { ...baseTheme.childrenContainer, ...style.childrenContainer };
 
-  const { disabled } = variantTheme;
+  const disabledStyles = {
+    opacity: 0.5
+  };
 
-  return { buttonStyles, textStyles, disabledStyles: disabled, iconStyles, childrenContainerStyles };
+  return { buttonStyles, textStyles, disabledStyles, iconStyles, childrenContainerStyles };
 };

package/lib/components/UTLabel/constants.js

@@ -32,13 +32,16 @@ export const WEIGHTS = {
 };
 
 export const COLOR_THEMES = {
+  accent: 'accent',
   dark: 'dark',
+  error: 'error',
   gray: 'gray',
+  information: 'information',
   light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
   success: 'success',
-  error: 'error',
-  warning: 'warning',
-  information: 'information'
+  warning: 'warning'
 };
 
 export const DEFAULT_PROPS = {

package/lib/components/UTMenu/index.js

@@ -10,27 +10,28 @@ import MenuTypes from './proptypes';
 import styles from './styles';
 
 const UTMenu = ({
-  options = [],
-  selectedOption,
+  autoCompletePlaceholder,
+  avoidOverlappingAnchor = true,
   children,
-  onClose,
-  onOpen,
+  disabled,
+  filterOptions = true,
   fullWidth,
-  verticalOffset = 0,
   horizontalOffset = 0,
-  onPress,
-  disabled,
-  withoutOpacity,
-  styles: propStyles,
-  MenuOptionComponent = MenuOption,
+  isMultiple,
   ItemSeparatorComponent,
   ListEmptyComponent,
   maxHeight,
-  isMultiple,
-  autoCompletePlaceholder,
+  MenuOptionComponent = MenuOption,
+  onClose,
+  onOpen,
+  onPress,
   onQueryChange,
-  filterOptions = true,
-  withAutocomplete
+  options = [],
+  selectedOption,
+  styles: propStyles,
+  verticalOffset = 0,
+  withAutocomplete,
+  withoutOpacity
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef(null);
@@ -70,8 +71,12 @@ const UTMenu = ({
     let left = x + horizontalOffset;
 
     if (top + menuHeight + height / 2 > usableWindowHeight) {
-      const upPosition = y - menuHeight - verticalOffset;
-      top = upPosition > 0 ? upPosition : top - (top + menuHeight - usableWindowHeight + height / 2);
+      if (avoidOverlappingAnchor) {
+        const upPosition = y - menuHeight - verticalOffset;
+        top = upPosition > 0 ? upPosition : top - (top + menuHeight - usableWindowHeight + height / 2);
+      } else {
+        top = usableWindowHeight - menuHeight - 10;
+      }
     }
 
     if (left - width + menuWidth > windowWidth) {
@@ -79,7 +84,15 @@ const UTMenu = ({
     }
 
     setPosition({ top, left });
-  }, [anchorMeasure, horizontalOffset, menuDimentions, verticalOffset, usableWindowHeight, windowWidth]);
+  }, [
+    anchorMeasure,
+    avoidOverlappingAnchor,
+    horizontalOffset,
+    menuDimentions,
+    usableWindowHeight,
+    verticalOffset,
+    windowWidth
+  ]);
 
   const openMenu = () => {
     Keyboard.dismiss();

package/package.json

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