@widergy/mobile-ui 0.35.2 → 0.35.4

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [0.35.4](https://github.com/widergy/mobile-ui/compare/v0.35.3...v0.35.4) (2022-10-25)
+
+
+### Bug Fixes
+
+* added label to tooltip content ([#228](https://github.com/widergy/mobile-ui/issues/228)) ([dee88d6](https://github.com/widergy/mobile-ui/commit/dee88d6e9cc0e306d0efabae284b29dcb2869b9f))
+
+## [0.35.3](https://github.com/widergy/mobile-ui/compare/v0.35.2...v0.35.3) (2022-08-29)
+
+
+### Bug Fixes
+
+* pr corrections ([b5a48ff](https://github.com/widergy/mobile-ui/commit/b5a48ff9748b20a6c1f4d50eb0be9a3bee5e4882))
+* re-rendering of utmenu ([b0bd3eb](https://github.com/widergy/mobile-ui/commit/b0bd3eb868b8183a52cfd54186d6992c63966c4e))
+
 ## [0.35.2](https://github.com/widergy/mobile-ui/compare/v0.35.1...v0.35.2) (2022-08-12)
 
 

package/lib/components/UTMenu/components/ListView/index.js

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import { FlatList } from 'react-native';
+
+import propTypes from './proptypes';
+
+class ListView extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      style: {
+        maxHeight: Math.min(props.maxHeight || props.windowHeight / 3, props.usableWindowHeight)
+      }
+    };
+  }
+
+  isSelected = item => {
+    const { filteredOptions, selectedOption, query, isMultiple } = this.props;
+    return isMultiple
+      ? !!selectedOption?.find?.(elem => elem === item.value)
+      : !query
+      ? item.id === selectedOption
+      : item.id === filteredOptions[0].id;
+  };
+
+  handleOnPress = item => {
+    const { handleOptionPress, onPress } = this.props;
+    return handleOptionPress(item.action || (() => onPress(item)));
+  };
+
+  renderItem = ({ item }) => {
+    const { MenuOptionComponent, propStyles } = this.props;
+
+    return (
+      <MenuOptionComponent
+        selected={this.isSelected(item)}
+        label={item.label}
+        onPress={this.handleOnPress}
+        styles={propStyles}
+        item={item}
+      />
+    );
+  };
+
+  keyExtractor = (option, index) => option.id?.toString() || index.toString();
+
+  render() {
+    const { filteredOptions, ItemSeparatorComponent } = this.props;
+    const { style } = this.state;
+
+    return (
+      <FlatList
+        style={style}
+        data={filteredOptions}
+        keyExtractor={this.keyExtractor}
+        keyboardShouldPersistTaps="always"
+        renderItem={this.renderItem}
+        ItemSeparatorComponent={ItemSeparatorComponent}
+      />
+    );
+  }
+}
+
+ListView.propTypes = propTypes;
+
+export default ListView;

package/lib/components/UTMenu/components/ListView/proptypes.js

@@ -0,0 +1,16 @@
+import { bool, number, string, any, func } from 'prop-types';
+
+export default {
+  filteredOptions: any,
+  selectedOption: any,
+  query: string,
+  isMultiple: bool,
+  handleOptionPress: func,
+  onPress: func,
+  MenuOptionComponent: any,
+  propStyles: any,
+  maxHeight: number,
+  windowHeight: number,
+  usableWindowHeight: number,
+  ItemSeparatorComponent: any
+};

package/lib/components/UTMenu/components/MenuOption/index.js

@@ -1,12 +1,12 @@
-import { bool, func, string } from 'prop-types';
-import React from 'react';
+import { any, shape, bool, func, string } from 'prop-types';
+import React, { memo } from 'react';
 import { TouchableOpacity, Text, ViewPropTypes } from 'react-native';
 
 import styles from './styles';
 
-const MenuOption = ({ onPress, label, selected, styles: propStyles }) => (
+const MenuOption = ({ onPress, label, selected, styles: propStyles, item }) => (
   <TouchableOpacity
-    onPress={onPress}
+    onPress={() => onPress(item)}
     style={[
       styles.option,
       propStyles?.menuOptionBase,
@@ -22,7 +22,8 @@ MenuOption.propTypes = {
   onPress: func,
   label: string,
   selected: bool,
-  styles: ViewPropTypes.style
+  styles: ViewPropTypes.style,
+  item: shape(any)
 };
 
-export default MenuOption;
+export default memo(MenuOption);

package/lib/components/UTMenu/index.js

@@ -1,18 +1,11 @@
 import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import {
-  Dimensions,
-  FlatList,
-  Keyboard,
-  KeyboardAvoidingView,
-  Modal,
-  TouchableOpacity,
-  View
-} from 'react-native';
+import { Dimensions, Keyboard, KeyboardAvoidingView, Modal, TouchableOpacity, View } from 'react-native';
 
 import useKeyboardHeight from '../../hooks/useKeyboardHeight';
 import UTTextInput from '../UTTextInput';
 
 import MenuOption from './components/MenuOption';
+import ListView from './components/ListView';
 import MenuTypes from './proptypes';
 import styles from './styles';
 
@@ -97,20 +90,11 @@ const UTMenu = ({
     if (onClose) onClose();
   };
 
-  const handleOptionPress = action => () => {
+  const handleOptionPress = action => {
     action();
     if (!isMultiple) closeMenu();
   };
 
-  const defaultMaxHeight = windowHeight / 3;
-
-  const isSelected = item =>
-    isMultiple
-      ? !!selectedOption?.find?.(elem => elem === item.value)
-      : !query
-      ? item.id === selectedOption
-      : item.id === filteredOptions[0].id;
-
   const focusSearchInput = () => withAutocomplete && searchTextInputRef.current?.focus();
 
   return (
@@ -155,23 +139,19 @@ const UTMenu = ({
                 />
               </View>
             )}
-            <FlatList
-              style={{
-                maxHeight: Math.min(maxHeight || defaultMaxHeight, usableWindowHeight)
-              }}
-              data={filteredOptions}
-              keyExtractor={(option, index) => option.id?.toString() || index.toString()}
-              keyboardShouldPersistTaps="always"
-              renderItem={({ item }) => (
-                <MenuOptionComponent
-                  selected={isSelected(item)}
-                  label={item.label}
-                  onPress={handleOptionPress(item.action || (() => onPress(item)))}
-                  styles={propStyles}
-                  item={item}
-                />
-              )}
+            <ListView
+              maxHeight={maxHeight}
+              windowHeight={windowHeight}
+              usableWindowHeight={usableWindowHeight}
+              filteredOptions={filteredOptions}
               ItemSeparatorComponent={ItemSeparatorComponent}
+              MenuOptionComponent={MenuOptionComponent}
+              handleOptionPress={handleOptionPress}
+              onPress={onPress}
+              propStyles={propStyles}
+              selectedOption={selectedOption}
+              query={query}
+              isMultiple={isMultiple}
             />
           </KeyboardAvoidingView>
         </View>

package/lib/components/UTSelect/componentes/MultipleItem/index.js

@@ -1,19 +1,26 @@
 import { any, bool, func, shape, string } from 'prop-types';
-import React from 'react';
+import React, { memo } from 'react';
 
 import Checkbox from '../../../Checkbox';
 
 import styles from './styles';
 
-const MultipleItem = ({ onPress, label, selected, checkboxProps }) => (
-  <Checkbox label={label} onPress={onPress} checked={selected} style={styles.checkbox} {...checkboxProps} />
+const MultipleItem = ({ onPress, label, selected, checkboxProps, item }) => (
+  <Checkbox
+    label={label}
+    onPress={() => onPress(item)}
+    checked={selected}
+    style={styles.checkbox}
+    {...checkboxProps}
+  />
 );
 
 MultipleItem.propTypes = {
   onPress: func,
   label: string,
   selected: bool,
-  checkboxProps: shape(any)
+  checkboxProps: shape(any),
+  item: shape(any)
 };
 
-export default MultipleItem;
+export default memo(MultipleItem);

package/lib/components/UTTextInput/flavors/OutlinedInput/index.js

@@ -8,6 +8,7 @@ import InputLabel from '../../components/InputLabel';
 import InputTypes from '../../proptypes';
 import Icon from '../../../Icon';
 import UTTooltip from '../../../UTTooltip';
+import Label from '../../../Label';
 
 import ownStyles, { CONTAINER_PADDINGS } from './styles';
 
@@ -69,7 +70,13 @@ const OutlinedInput = ({
             disabled && themeStyles?.containerDisabled,
             // eslint-disable-next-line react-native/no-inline-styles
             {
-              borderWidth: borderless ? 0 : focused ? 2 : disabled ? themeStyles?.inactive?.disabledBorderWidth ?? 1 : 1,
+              borderWidth: borderless
+                ? 0
+                : focused
+                ? 2
+                : disabled
+                ? themeStyles?.inactive?.disabledBorderWidth ?? 1
+                : 1,
               borderColor: active ? activeColor : inactiveColor
             },
             styles?.inputContainer
@@ -129,7 +136,7 @@ const OutlinedInput = ({
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
-            <UTTooltip content={tooltip} position="left" {...tooltipProps}>
+            <UTTooltip content={<Label>tooltip</Label>} position="left" {...tooltipProps}>
               <Icon
                 name="questioncircleo"
                 type="antdesign"

package/lib/components/UTTooltip/styles.js

@@ -9,7 +9,14 @@ export default StyleSheet.create({
     zIndex: 0,
     backgroundColor: 'white',
     borderRadius: 8,
-    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4,
     paddingVertical: 4,
     padding: 10,
     maxWidth: 250
@@ -82,5 +89,5 @@ export default StyleSheet.create({
   bottomArrowRotation: {
     transform: [{ rotate: '0deg' }]
   },
-  arrowContainer: { position: 'absolute', elevation: 5 }
+  arrowContainer: { position: 'absolute' }
 });

package/package.json

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