@widergy/mobile-ui 0.31.4 → 0.32.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [0.32.2](https://github.com/widergy/mobile-ui/compare/v0.32.1...v0.32.2) (2022-02-11)
+
+
+### Bug Fixes
+
+* deprecated keyboard ([#214](https://github.com/widergy/mobile-ui/issues/214)) ([57b3775](https://github.com/widergy/mobile-ui/commit/57b37756155c7bf759e586ce35f090e86834fa89))
+
+## [0.32.1](https://github.com/widergy/mobile-ui/compare/v0.32.0...v0.32.1) (2022-01-19)
+
+
+### Bug Fixes
+
+* bounce on scrollview component ([#211](https://github.com/widergy/mobile-ui/issues/211)) ([aa6249b](https://github.com/widergy/mobile-ui/commit/aa6249b3f508bdf9ad7828ab5c0fcc371d600935))
+
+# [0.32.0](https://github.com/widergy/mobile-ui/compare/v0.31.5...v0.32.0) (2021-12-10)
+
+
+### Features
+
+* new borderless prop for borderless searchbar ([#209](https://github.com/widergy/mobile-ui/issues/209)) ([8d5f9ae](https://github.com/widergy/mobile-ui/commit/8d5f9ae55d7e8ed6dea53d3d9e16b0a9dfcdf7b3))
+
+## [0.31.5](https://github.com/widergy/mobile-ui/compare/v0.31.4...v0.31.5) (2021-11-16)
+
+
+### Bug Fixes
+
+* improve image radio ([#206](https://github.com/widergy/mobile-ui/issues/206)) ([dd415e4](https://github.com/widergy/mobile-ui/commit/dd415e41323c2dd3ac7d9a43a490f86fa8947400))
+
 ## [0.31.4](https://github.com/widergy/mobile-ui/compare/v0.31.3...v0.31.4) (2021-11-09)
 
 

package/lib/components/ImageRadio/index.js

@@ -1,6 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { View, ViewPropTypes } from 'react-native';
-import { string, arrayOf, shape, func, number } from 'prop-types';
+import { string, arrayOf, shape, func, number, any } from 'prop-types';
 import _ from 'lodash';
 
 import Label from '../Label';
@@ -9,37 +9,53 @@ import Touchable from '../Touchable';
 
 import OwnStyles, { IMAGE_SIZE } from './styles';
 
-const ImageRadio = ({ options, title, onChange, value, style }) => {
+const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) => {
   const styles = _.merge({}, OwnStyles, style);
   const handleOnChange = option => {
     if (option) onChange(option.value);
   };
+  const { vertical, transparent_background: transparentBackground } = variant;
   const isSelected = option => option.value === value;
+
   return (
     <View style={styles.container}>
       <Label>{title}</Label>
-      {options.map(option => (
-        <Touchable
-          key={option.id}
-          onPress={() => handleOnChange(option)}
-          style={[styles.touchable, isSelected(option) && styles.selected]}
-        >
-          <Fragment>
-            <ImageIcon
-              size={IMAGE_SIZE}
-              image={isSelected(option) ? option.selectedImage : option.unselectedImage}
-            />
-            <View style={styles.labels}>
-              <Label white={isSelected(option)} style={styles.name} h4>
-                {option.name}
-              </Label>
-              <Label white={isSelected(option)} h5>
-                {option.description}
-              </Label>
+      <View style={[styles.innerContainer, vertical && styles.verticalInnerContainer]}>
+        {options.map(option => (
+          <Touchable
+            key={option.id}
+            onPress={() => handleOnChange(option)}
+            style={[
+              styles.touchable,
+              vertical && styles.verticalTouchable,
+              isSelected(option) && !vertical && styles.selected
+            ]}
+          >
+            <View style={vertical ? styles.touchableInnerContainerVertical : styles.touchableInnerContainer}>
+              <ImageIcon
+                size={IMAGE_SIZE}
+                image={isSelected(option) ? option.selectedImage : option.unselectedImage}
+              />
+              <View style={!vertical ? styles.labels : styles.verticalLabels}>
+                <Label
+                  white={!transparentBackground && isSelected(option)}
+                  style={!vertical ? styles.label : styles.verticalLabel}
+                  h4
+                >
+                  {option.name}
+                </Label>
+                <Label
+                  style={!vertical ? styles.label : styles.verticalLabel}
+                  white={!transparentBackground && isSelected(option)}
+                  h5
+                >
+                  {option.description}
+                </Label>
+              </View>
             </View>
-          </Fragment>
-        </Touchable>
-      ))}
+          </Touchable>
+        ))}
+      </View>
     </View>
   );
 };
@@ -58,7 +74,8 @@ ImageRadio.propTypes = {
   title: string,
   onChange: func,
   value: string,
-  style: ViewPropTypes.style
+  style: ViewPropTypes.style,
+  variant: shape(any)
 };
 
 export default ImageRadio;

package/lib/components/ImageRadio/styles.js

@@ -7,6 +7,16 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
+  innerContainer: {
+    alignItems: 'center',
+    width: '100%',
+    paddingVertical: 34,
+    paddingHorizontal: 34
+  },
+  verticalInnerContainer: {
+    flexDirection: 'row',
+    marginHorizontal: 50
+  },
   optionContainer: {
     marginTop: verticalScale(10)
   },
@@ -20,16 +30,39 @@ export default StyleSheet.create({
     marginTop: verticalScale(32),
     width: '100%'
   },
+  verticalTouchable: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginHorizontal: 5,
+    width: '50%',
+    borderWidth: 0.6
+  },
   selected: {
     backgroundColor: '#3FBFE7'
   },
+
+  touchableInnerContainerVertical: {
+    alignItems: 'center'
+  },
+  touchableInnerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
   labels: {
     margin: 15,
     marginLeft: horizontalScale(35),
     maxWidth: 150,
     textAlign: 'left'
   },
-  name: {
+  verticalLabels: {
+    paddingTop: 20,
+    maxWidth: 150
+  },
+  label: {
+    paddingBottom: verticalScale(5),
+    paddingLeft: horizontalScale(15)
+  },
+  verticalLabel: {
     paddingBottom: verticalScale(5)
   },
   iconBadge: {

package/lib/components/UTDetailDrawer/index.js

@@ -72,7 +72,12 @@ const UTDetailDrawer = ({
               )}
             </View>
           )}
-          <ScrollView ref={scrollViewRef} onScroll={handleOnScroll} style={mergedStyles.scrollContainer}>
+          <ScrollView
+            ref={scrollViewRef}
+            onScroll={handleOnScroll}
+            style={mergedStyles.scrollContainer}
+            bounces={false}
+          >
             {children}
           </ScrollView>
         </View>

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

@@ -37,6 +37,7 @@ const FilledInput = ({
   tooltipProps,
   multiline,
   captionLabel,
+  borderless,
   ...props
 }) => {
   const [initialHeight, setInitialHeight] = useState(inputHeight);
@@ -104,7 +105,7 @@ const FilledInput = ({
               </InputLabel>
             )}
           </View>
-          <InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />
+          {!borderless && (<InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />)}
         </View>
         {!!tooltip && (
           <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>

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

@@ -38,6 +38,7 @@ const OutlinedInput = ({
   tooltipProps,
   multiline,
   captionLabel,
+  borderless,
   ...props
 }) => {
   const focusedColor = themeStyles?.focused?.color || theme.colors.primary;
@@ -68,7 +69,7 @@ const OutlinedInput = ({
             disabled && themeStyles?.containerDisabled,
             // eslint-disable-next-line react-native/no-inline-styles
             {
-              borderWidth: 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

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

@@ -36,6 +36,7 @@ const StandardInput = ({
   tooltipIconProps,
   tooltipProps,
   captionLabel,
+  borderless,
   ...props
 }) => (
   <View style={[ownStyles.container, themeStyles?.root, styles?.container]}>
@@ -92,7 +93,7 @@ const StandardInput = ({
             </InputLabel>
           )}
         </View>
-        <InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />
+        {!borderless && (<InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />)}
       </View>
       {!!tooltip && (
         <View style={ownStyles.tooltipContainer}>

package/lib/hooks/useKeyboardHeight.js

@@ -13,12 +13,12 @@ const useKeyboardHeight = () => {
   };
 
   useEffect(() => {
-    Keyboard.addListener('keyboardDidShow', keyboardDidShow);
-    Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+    const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
 
     return () => {
-      Keyboard.removeListener('keyboardDidShow', keyboardDidShow);
-      Keyboard.removeListener('keyboardDidHide', keyboardDidHide);
+      showSubscription.remove();
+      hideSubscription.remove();
     };
   }, []);
 

package/package.json

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