@widergy/mobile-ui 1.14.2 → 1.14.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.14.4](https://github.com/widergy/mobile-ui/compare/v1.14.3...v1.14.4) (2024-07-26)
+
+
+### Bug Fixes
+
+* utlabel in header and utmodal visual fixes ([#318](https://github.com/widergy/mobile-ui/issues/318)) ([38c70a9](https://github.com/widergy/mobile-ui/commit/38c70a955814d49ae7ef2e303d4cf351ca3be1fe))
+
+## [1.14.3](https://github.com/widergy/mobile-ui/compare/v1.14.2...v1.14.3) (2024-07-23)
+
+
+### Bug Fixes
+
+* utmenu google attribution ([#320](https://github.com/widergy/mobile-ui/issues/320)) ([ea104e7](https://github.com/widergy/mobile-ui/commit/ea104e7237006a5e3c7d2c2345c48e18d35bcd4e))
+
 ## [1.14.2](https://github.com/widergy/mobile-ui/compare/v1.14.1...v1.14.2) (2024-07-22)
 
 

package/lib/components/UTAutocomplete/index.js

@@ -23,6 +23,7 @@ const UTAutocomplete = ({
   options,
   persistSelectedOption = false,
   variant,
+  withGoogleAttribution,
   styles: propStyles
 }) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -55,8 +56,9 @@ const UTAutocomplete = ({
         onQueryChange={input.onQueryChange}
         options={options}
         selectedOption={selectedOption?.id}
-        withAutocomplete
         styles={propStyles?.UTMenu}
+        withAutocomplete
+        withGoogleAttribution={withGoogleAttribution}
       >
         <UTTextInput
           disabled={disabled}
@@ -64,7 +66,7 @@ const UTAutocomplete = ({
           label={label}
           labelBackgroundColor={labelBackgroundColor}
           onChange={() => {}}
-          RightIcon={{ type: 'font-awesome', name: 'caret-down' }}
+          RightIcon={{ name: 'caret-down', type: 'font-awesome' }}
           value={selectedOption?.label || ''}
           variant={variant}
         />
@@ -74,16 +76,16 @@ const UTAutocomplete = ({
 };
 
 UTAutocomplete.propTypes = {
-  avoidOverlappingAnchor: bool,
   autoCompletePlaceholder: string,
+  avoidOverlappingAnchor: bool,
   disabled: bool,
   error: oneOf([bool, string]),
   filterOptions: bool,
   input: shape({
+    onBlur: func,
     onChange: func.isRequired,
-    value: string.isRequired,
     onFocus: func,
-    onBlur: func
+    value: string.isRequired
   }),
   label: string,
   labelBackgroundColor: string,
@@ -91,14 +93,15 @@ UTAutocomplete.propTypes = {
   MenuOptionComponent: element,
   options: arrayOf(
     shape({
-      value: string,
       id: string,
-      label: string
+      label: string,
+      value: string
     })
   ),
   persistSelectedOption: bool,
+  styles: ViewPropTypes.style,
   variant: string,
-  styles: ViewPropTypes.style
+  withGoogleAttribution: bool
 };
 
 export default UTAutocomplete;

package/lib/components/UTHeader/index.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { string, bool, shape } from 'prop-types';
 import merge from 'lodash/merge';
 
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 import UTBanner from '../UTBanner';
 import { useTheme } from '../../theming';
 
@@ -18,54 +18,63 @@ const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMa
 
   const Tagline = renderComponent(
     tagline,
-    <Label
-      color={themedStyles.taglineColor || theme.colors.disabled}
-      bold
-      useMarkdown={useMarkdown}
+    <UTLabel
+      variant="small"
+      weight="medium"
+      colorTheme={themedStyles.taglineColor || 'gray'}
+      withMarkdown={useMarkdown}
       style={[themedStyles.child, themedStyles.tagline]}
     >
       {tagline?.toUpperCase?.()}
-    </Label>
+    </UTLabel>
   );
 
   const Title = renderComponent(
     title,
-    <Label color={themedStyles.titleColor} big bold style={themedStyles.title} useMarkdown={useMarkdown}>
+    <UTLabel
+      variant="title3"
+      weight="medium"
+      colorTheme={themedStyles.titleColor}
+      style={themedStyles.title}
+      withMarkdown={useMarkdown}
+    >
       {title}
-    </Label>
+    </UTLabel>
   );
 
   const Subtitle = renderComponent(
     subtitle,
-    <Label
-      color={themedStyles.subtitleColor || theme.colors.disabled}
-      useMarkdown={useMarkdown}
+    <UTLabel
+      colorTheme={themedStyles.subtitleColor || 'gray'}
+      withMarkdown={useMarkdown}
       style={[themedStyles.child, themedStyles.subtitle]}
     >
       {subtitle}
-    </Label>
+    </UTLabel>
   );
 
   const RequiredFieldInfo = renderComponent(
     requiredFieldInfo,
-    <Label
-      color={themedStyles.requiredFieldInfoColor || theme.colors.disabled}
-      useMarkdown={useMarkdown}
+    <UTLabel
+      variant="small"
+      colorTheme={themedStyles.requiredFieldInfoColor || 'gray'}
+      withMarkdown={useMarkdown}
       style={[themedStyles.child, themedStyles.requiredFieldInfo]}
     >
       {requiredFieldInfo}
-    </Label>
+    </UTLabel>
   );
 
   const HelpText = renderComponent(
     helpText,
-    <Label
-      color={themedStyles.helpTextColor || theme.colors.disabled}
-      useMarkdown={useMarkdown}
+    <UTLabel
+      variant="small"
+      colorTheme={themedStyles.helpTextColor || theme.colors.disabled}
+      withMarkdown={useMarkdown}
       style={[themedStyles.child, themedStyles.helpText]}
     >
       {helpText}
-    </Label>
+    </UTLabel>
   );
 
   return (

package/lib/components/UTMenu/constants.js

@@ -0,0 +1 @@
+export const ATTRIBUTION = 'proporcionado por';

package/lib/components/UTMenu/index.js

@@ -1,14 +1,25 @@
 import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, View } from 'react-native';
+import {
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  TouchableOpacity,
+  View,
+  Image
+} from 'react-native';
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
 import UTTextInput from '../UTTextInput';
+import UTLabel from '../UTLabel';
 import Surface from '../Surface';
 
 import MenuOption from './components/MenuOption';
 import ListView from './components/ListView';
 import MenuTypes from './proptypes';
 import styles from './styles';
+import GoogleLogo from './assets/google_on_white.png';
+import { ATTRIBUTION } from './constants';
 
 const UTMenu = ({
   autoCompletePlaceholder,
@@ -32,14 +43,15 @@ const UTMenu = ({
   styles: propStyles,
   verticalOffset = 0,
   withAutocomplete,
-  withoutOpacity
+  withoutOpacity,
+  withGoogleAttribution = false
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef(null);
   const menuRef = useRef(null);
-  const [position, setPosition] = useState({ top: 0, right: 0 });
-  const [anchorMeasure, setAnchorMeasure] = useState({ x: 0, y: 0, width: 0, height: 0 });
-  const [menuDimentions, setMenuDimentions] = useState({ width: 0, height: 0 });
+  const [position, setPosition] = useState({ right: 0, top: 0 });
+  const [anchorMeasure, setAnchorMeasure] = useState({ height: 0, width: 0, x: 0, y: 0 });
+  const [menuDimentions, setMenuDimentions] = useState({ height: 0, width: 0 });
   const [query, setQuery] = useState('');
   const searchTextInputRef = useRef();
   const filteredOptions = useMemo(() => {
@@ -55,13 +67,13 @@ const UTMenu = ({
 
   const handleAnchorLayout = () => {
     anchorRef.current.measureInWindow((x, y, width, height) => {
-      setAnchorMeasure({ x, y, width, height });
+      setAnchorMeasure({ height, width, x, y });
     });
   };
 
   const handleMenuLayout = () =>
     menuRef.current?.measureInWindow((x, y, width, height) => {
-      setMenuDimentions({ width, height });
+      setMenuDimentions({ height, width });
     });
 
   useLayoutEffect(() => {
@@ -84,7 +96,7 @@ const UTMenu = ({
       left = x - menuWidth + width - horizontalOffset;
     }
 
-    setPosition({ top, left });
+    setPosition({ left, top });
   }, [
     anchorMeasure,
     avoidOverlappingAnchor,
@@ -123,60 +135,68 @@ const UTMenu = ({
   return (
     <Fragment>
       <TouchableOpacity
+        activeOpacity={withoutOpacity && 1}
         disabled={disabled}
         onPress={isOpen ? closeMenu : openMenu}
-        activeOpacity={withoutOpacity && 1}
       >
-        <View ref={anchorRef} onLayout={handleAnchorLayout} pointerEvents="box-only">
+        <View onLayout={handleAnchorLayout} pointerEvents="box-only" ref={anchorRef}>
           {children}
         </View>
       </TouchableOpacity>
       <Modal
         animationType="fade"
-        transparent
-        visible={isOpen}
         onRequestClose={closeMenu}
         onShow={focusSearchInput}
+        transparent
+        visible={isOpen}
       >
         <TouchableOpacity onPress={closeMenu} style={styles.overlayTouchable}>
           <View style={styles.overlay} />
         </TouchableOpacity>
         <Surface
-          style={[styles.menu, position, fullWidth && { width: anchorMeasure?.width }, propStyles?.menu]}
-          ref={menuRef}
           onLayout={handleMenuLayout}
+          ref={menuRef}
+          style={[styles.menu, position, fullWidth && { width: anchorMeasure?.width }, propStyles?.menu]}
         >
           <KeyboardAvoidingView behavior="height">
             {withAutocomplete && (
               <View style={[styles.searchContainer, propStyles?.searchContainer]}>
                 <UTTextInput
                   InputRef={searchTextInputRef}
-                  value={query}
                   onChange={handleQueryChange}
-                  placeholder={autoCompletePlaceholder}
                   onSubmitEditing={
                     query && filteredOptions[0]
                       ? () => handleOptionPress(() => onPress(filteredOptions[0]))
                       : closeMenu
                   }
+                  placeholder={autoCompletePlaceholder}
+                  value={query}
                 />
               </View>
             )}
             <ListView
-              maxHeight={maxHeight}
-              windowHeight={windowHeight}
-              usableWindowHeight={usableWindowHeight}
               filteredOptions={filteredOptions}
+              handleOptionPress={handleOptionPress}
+              isMultiple={isMultiple}
               ItemSeparatorComponent={ItemSeparatorComponent}
               ListEmptyComponent={ListEmptyComponent}
+              maxHeight={maxHeight}
               MenuOptionComponent={MenuOptionComponent}
-              handleOptionPress={handleOptionPress}
               onPress={onPress}
               propStyles={propStyles}
-              selectedOption={selectedOption}
               query={query}
-              isMultiple={isMultiple}
+              selectedOption={selectedOption}
+              usableWindowHeight={usableWindowHeight}
+              windowHeight={windowHeight}
             />
+            {withGoogleAttribution && (
+              <View style={styles.attribution}>
+                <UTLabel colorTheme="gray" variant="small">
+                  {ATTRIBUTION}
+                </UTLabel>
+                <Image source={GoogleLogo} />
+              </View>
+            )}
           </KeyboardAvoidingView>
         </Surface>
       </Modal>

package/lib/components/UTMenu/styles.js

@@ -1,21 +1,27 @@
 import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
+  attribution: {
+    flexDirection: 'row',
+    gap: 4,
+    justifyContent: 'flex-end',
+    paddingVertical: 8
+  },
   menu: {
-    position: 'absolute',
-    zIndex: 1000,
-    left: 0,
     backgroundColor: 'white',
     borderRadius: 8,
-    paddingVertical: 4
+    left: 0,
+    paddingVertical: 4,
+    position: 'absolute',
+    zIndex: 1000
   },
   overlay: {
-    position: 'absolute',
-    top: 0,
+    backgroundColor: 'transparent',
     bottom: 0,
     left: 0,
+    position: 'absolute',
     right: 0,
-    backgroundColor: 'transparent'
+    top: 0
   },
   overlayTouchable: {
     flex: 1

package/lib/components/UTModal/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale, moderateHorizontalScale, WINDOW_WIDTH, WINDOW_HEIGHT } from '../../utils/scaleUtils';
+import { verticalScale, moderateHorizontalScale, WINDOW_HEIGHT } from '../../utils/scaleUtils';
 import { DEFAULT_ICON_SIZE } from '../Icon/constants';
 import { ICON_MARGIN } from '../IconButton/styles';
 
@@ -9,13 +9,13 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginVertical: verticalScale(4),
-    width: '95%'
+    width: '100%'
   },
   modalBackground: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
     flex: 1,
     justifyContent: 'center',
-    padding: 15
+    padding: 16
   },
   childView: {
     flex: 1
@@ -25,14 +25,13 @@ export default StyleSheet.create({
     borderRadius: 15,
     alignItems: 'stretch',
     alignSelf: 'center',
-    width: WINDOW_WIDTH * 0.78
+    width: '100%'
   },
   buttonsContainer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    paddingVertical: 20,
-    paddingHorizontal: 15
+    padding: 16
   },
   viewContainer: {
     flex: 1
@@ -55,7 +54,7 @@ export default StyleSheet.create({
     margin: 0
   },
   content: {
-    padding: 15,
+    padding: 16,
     paddingBottom: 5
   },
   closeIcon: {

package/package.json

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