@widergy/mobile-ui 0.35.2 → 0.35.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [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/package.json

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