@widergy/mobile-ui 0.35.0 → 0.35.3

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [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)
+
+
+### Bug Fixes
+
+* added subtitle and separator bar ([#225](https://github.com/widergy/mobile-ui/issues/225)) ([29dc57e](https://github.com/widergy/mobile-ui/commit/29dc57e9b777228ce22f3edadf3dffb3d568a06e))
+
+## [0.35.1](https://github.com/widergy/mobile-ui/compare/v0.35.0...v0.35.1) (2022-07-14)
+
+
+### Bug Fixes
+
+* adding a parameter to utswitch ([#223](https://github.com/widergy/mobile-ui/issues/223)) ([2c3bb48](https://github.com/widergy/mobile-ui/commit/2c3bb480da94325c20480f834ffa1f166be9b135))
+
 # [0.35.0](https://github.com/widergy/mobile-ui/compare/v0.34.3...v0.35.0) (2022-06-03)
 
 

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/UTModal/index.js

@@ -8,6 +8,7 @@ import Touchable from '../Touchable';
 import Icon from '../Icon';
 import { useTheme } from '../../theming';
 import UTLoading from '../UTLoading';
+import SeparatorBar from '../SeparatorBar';
 
 import ModalTypes from './proptypes';
 import ownStyles from './styles';
@@ -20,6 +21,8 @@ const UTModal = ({
   cancelButton,
   visible,
   title,
+  subtitle,
+  subtitleProps = {},
   loading,
   backgroundStyles,
   imageStyles,
@@ -30,7 +33,8 @@ const UTModal = ({
   imageComponent,
   labelProps,
   modalStyles,
-  backgroundImg
+  backgroundImg,
+  hideSeparatorBar
 }) => {
   const theme = useTheme();
   const themeStyles = theme.simpleButton;
@@ -85,9 +89,15 @@ const UTModal = ({
                       {title}
                     </Label>
                   )}
+                  {!!subtitle && (
+                    <Label midGray {...subtitleProps} style={styles.subtitle}>
+                      {subtitle}
+                    </Label>
+                  )}
 
                   {children}
                 </View>
+                {!hideSeparatorBar && <SeparatorBar />}
                 <View style={styles.buttonsContainer}>
                   {!!cancelButton && (
                     <Button

package/lib/components/UTModal/styles.js

@@ -43,7 +43,11 @@ export default StyleSheet.create({
     alignItems: 'center'
   },
   title: {
-    marginBottom: 16
+    marginBottom: 12
+  },
+  subtitle: {
+    marginHorizontal: '4%',
+    marginBottom: 12
   },
   buttonText: {
     fontWeight: 'normal',
@@ -51,7 +55,8 @@ export default StyleSheet.create({
     margin: 0
   },
   content: {
-    padding: 15
+    padding: 15,
+    paddingBottom: 5
   },
   closeIcon: {
     alignItems: 'center',

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/UTSwitch/index.js

@@ -20,7 +20,8 @@ const UTSwitch = ({
   trackSize = 20,
   input,
   thumbSize = 10,
-  rippleSize = 3
+  rippleSize = 3,
+  movingStartPosition
 }) => {
   const theme = useTheme();
 
@@ -122,7 +123,10 @@ const UTSwitch = ({
                 {
                   translateX: switchPosition.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [thumpInitPosition, thumpFinishPosition]
+                    outputRange: [
+                      movingStartPosition ? thumpInitPosition - movingStartPosition : thumpInitPosition,
+                      thumpFinishPosition
+                    ]
                   })
                 }
               ]

package/package.json

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