@widergy/mobile-ui 0.31.4 → 0.32.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/lib/components/ImageRadio/index.js +42 -25
  3. package/lib/components/ImageRadio/styles.js +34 -1
  4. package/lib/components/UTDetailDrawer/index.js +6 -1
  5. package/lib/components/UTTextInput/flavors/FilledInput/index.js +2 -1
  6. package/lib/components/UTTextInput/flavors/OutlinedInput/index.js +2 -1
  7. package/lib/components/UTTextInput/flavors/StandardInput/index.js +2 -1
  8. package/lib/hooks/useKeyboardHeight.js +4 -4
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [0.32.2](https://github.com/widergy/mobile-ui/compare/v0.32.1...v0.32.2) (2022-02-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * deprecated keyboard ([#214](https://github.com/widergy/mobile-ui/issues/214)) ([57b3775](https://github.com/widergy/mobile-ui/commit/57b37756155c7bf759e586ce35f090e86834fa89))
7
+
8
+ ## [0.32.1](https://github.com/widergy/mobile-ui/compare/v0.32.0...v0.32.1) (2022-01-19)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * bounce on scrollview component ([#211](https://github.com/widergy/mobile-ui/issues/211)) ([aa6249b](https://github.com/widergy/mobile-ui/commit/aa6249b3f508bdf9ad7828ab5c0fcc371d600935))
14
+
15
+ # [0.32.0](https://github.com/widergy/mobile-ui/compare/v0.31.5...v0.32.0) (2021-12-10)
16
+
17
+
18
+ ### Features
19
+
20
+ * new borderless prop for borderless searchbar ([#209](https://github.com/widergy/mobile-ui/issues/209)) ([8d5f9ae](https://github.com/widergy/mobile-ui/commit/8d5f9ae55d7e8ed6dea53d3d9e16b0a9dfcdf7b3))
21
+
22
+ ## [0.31.5](https://github.com/widergy/mobile-ui/compare/v0.31.4...v0.31.5) (2021-11-16)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * improve image radio ([#206](https://github.com/widergy/mobile-ui/issues/206)) ([dd415e4](https://github.com/widergy/mobile-ui/commit/dd415e41323c2dd3ac7d9a43a490f86fa8947400))
28
+
1
29
  ## [0.31.4](https://github.com/widergy/mobile-ui/compare/v0.31.3...v0.31.4) (2021-11-09)
2
30
 
3
31
 
package/lib/components/ImageRadio/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import React, { Fragment } from 'react';
1
+ import React from 'react';
2
2
  import { View, ViewPropTypes } from 'react-native';
3
- import { string, arrayOf, shape, func, number } from 'prop-types';
3
+ import { string, arrayOf, shape, func, number, any } from 'prop-types';
4
4
  import _ from 'lodash';
5
5
 
6
6
  import Label from '../Label';
@@ -9,37 +9,53 @@ import Touchable from '../Touchable';
9
9
 
10
10
  import OwnStyles, { IMAGE_SIZE } from './styles';
11
11
 
12
- const ImageRadio = ({ options, title, onChange, value, style }) => {
12
+ const ImageRadio = ({ options, title, onChange, value, style, variant = {} }) => {
13
13
  const styles = _.merge({}, OwnStyles, style);
14
14
  const handleOnChange = option => {
15
15
  if (option) onChange(option.value);
16
16
  };
17
+ const { vertical, transparent_background: transparentBackground } = variant;
17
18
  const isSelected = option => option.value === value;
19
+
18
20
  return (
19
21
  <View style={styles.container}>
20
22
  <Label>{title}</Label>
21
- {options.map(option => (
22
- <Touchable
23
- key={option.id}
24
- onPress={() => handleOnChange(option)}
25
- style={[styles.touchable, isSelected(option) && styles.selected]}
26
- >
27
- <Fragment>
28
- <ImageIcon
29
- size={IMAGE_SIZE}
30
- image={isSelected(option) ? option.selectedImage : option.unselectedImage}
31
- />
32
- <View style={styles.labels}>
33
- <Label white={isSelected(option)} style={styles.name} h4>
34
- {option.name}
35
- </Label>
36
- <Label white={isSelected(option)} h5>
37
- {option.description}
38
- </Label>
23
+ <View style={[styles.innerContainer, vertical && styles.verticalInnerContainer]}>
24
+ {options.map(option => (
25
+ <Touchable
26
+ key={option.id}
27
+ onPress={() => handleOnChange(option)}
28
+ style={[
29
+ styles.touchable,
30
+ vertical && styles.verticalTouchable,
31
+ isSelected(option) && !vertical && styles.selected
32
+ ]}
33
+ >
34
+ <View style={vertical ? styles.touchableInnerContainerVertical : styles.touchableInnerContainer}>
35
+ <ImageIcon
36
+ size={IMAGE_SIZE}
37
+ image={isSelected(option) ? option.selectedImage : option.unselectedImage}
38
+ />
39
+ <View style={!vertical ? styles.labels : styles.verticalLabels}>
40
+ <Label
41
+ white={!transparentBackground && isSelected(option)}
42
+ style={!vertical ? styles.label : styles.verticalLabel}
43
+ h4
44
+ >
45
+ {option.name}
46
+ </Label>
47
+ <Label
48
+ style={!vertical ? styles.label : styles.verticalLabel}
49
+ white={!transparentBackground && isSelected(option)}
50
+ h5
51
+ >
52
+ {option.description}
53
+ </Label>
54
+ </View>
39
55
  </View>
40
- </Fragment>
41
- </Touchable>
42
- ))}
56
+ </Touchable>
57
+ ))}
58
+ </View>
43
59
  </View>
44
60
  );
45
61
  };
@@ -58,7 +74,8 @@ ImageRadio.propTypes = {
58
74
  title: string,
59
75
  onChange: func,
60
76
  value: string,
61
- style: ViewPropTypes.style
77
+ style: ViewPropTypes.style,
78
+ variant: shape(any)
62
79
  };
63
80
 
64
81
  export default ImageRadio;
package/lib/components/ImageRadio/styles.js CHANGED
@@ -7,6 +7,16 @@ export default StyleSheet.create({
7
7
  justifyContent: 'center',
8
8
  alignItems: 'center'
9
9
  },
10
+ innerContainer: {
11
+ alignItems: 'center',
12
+ width: '100%',
13
+ paddingVertical: 34,
14
+ paddingHorizontal: 34
15
+ },
16
+ verticalInnerContainer: {
17
+ flexDirection: 'row',
18
+ marginHorizontal: 50
19
+ },
10
20
  optionContainer: {
11
21
  marginTop: verticalScale(10)
12
22
  },
@@ -20,16 +30,39 @@ export default StyleSheet.create({
20
30
  marginTop: verticalScale(32),
21
31
  width: '100%'
22
32
  },
33
+ verticalTouchable: {
34
+ flexDirection: 'column',
35
+ alignItems: 'center',
36
+ marginHorizontal: 5,
37
+ width: '50%',
38
+ borderWidth: 0.6
39
+ },
23
40
  selected: {
24
41
  backgroundColor: '#3FBFE7'
25
42
  },
43
+
44
+ touchableInnerContainerVertical: {
45
+ alignItems: 'center'
46
+ },
47
+ touchableInnerContainer: {
48
+ flexDirection: 'row',
49
+ alignItems: 'center'
50
+ },
26
51
  labels: {
27
52
  margin: 15,
28
53
  marginLeft: horizontalScale(35),
29
54
  maxWidth: 150,
30
55
  textAlign: 'left'
31
56
  },
32
- name: {
57
+ verticalLabels: {
58
+ paddingTop: 20,
59
+ maxWidth: 150
60
+ },
61
+ label: {
62
+ paddingBottom: verticalScale(5),
63
+ paddingLeft: horizontalScale(15)
64
+ },
65
+ verticalLabel: {
33
66
  paddingBottom: verticalScale(5)
34
67
  },
35
68
  iconBadge: {
package/lib/components/UTDetailDrawer/index.js CHANGED
@@ -72,7 +72,12 @@ const UTDetailDrawer = ({
72
72
  )}
73
73
  </View>
74
74
  )}
75
- <ScrollView ref={scrollViewRef} onScroll={handleOnScroll} style={mergedStyles.scrollContainer}>
75
+ <ScrollView
76
+ ref={scrollViewRef}
77
+ onScroll={handleOnScroll}
78
+ style={mergedStyles.scrollContainer}
79
+ bounces={false}
80
+ >
76
81
  {children}
77
82
  </ScrollView>
78
83
  </View>
package/lib/components/UTTextInput/flavors/FilledInput/index.js CHANGED
@@ -37,6 +37,7 @@ const FilledInput = ({
37
37
  tooltipProps,
38
38
  multiline,
39
39
  captionLabel,
40
+ borderless,
40
41
  ...props
41
42
  }) => {
42
43
  const [initialHeight, setInitialHeight] = useState(inputHeight);
@@ -104,7 +105,7 @@ const FilledInput = ({
104
105
  </InputLabel>
105
106
  )}
106
107
  </View>
107
- <InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />
108
+ {!borderless && (<InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />)}
108
109
  </View>
109
110
  {!!tooltip && (
110
111
  <View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
package/lib/components/UTTextInput/flavors/OutlinedInput/index.js CHANGED
@@ -38,6 +38,7 @@ const OutlinedInput = ({
38
38
  tooltipProps,
39
39
  multiline,
40
40
  captionLabel,
41
+ borderless,
41
42
  ...props
42
43
  }) => {
43
44
  const focusedColor = themeStyles?.focused?.color || theme.colors.primary;
@@ -68,7 +69,7 @@ const OutlinedInput = ({
68
69
  disabled && themeStyles?.containerDisabled,
69
70
  // eslint-disable-next-line react-native/no-inline-styles
70
71
  {
71
- borderWidth: focused ? 2 : disabled ? themeStyles?.inactive?.disabledBorderWidth ?? 1 : 1,
72
+ borderWidth: borderless ? 0 : focused ? 2 : disabled ? themeStyles?.inactive?.disabledBorderWidth ?? 1 : 1,
72
73
  borderColor: active ? activeColor : inactiveColor
73
74
  },
74
75
  styles?.inputContainer
package/lib/components/UTTextInput/flavors/StandardInput/index.js CHANGED
@@ -36,6 +36,7 @@ const StandardInput = ({
36
36
  tooltipIconProps,
37
37
  tooltipProps,
38
38
  captionLabel,
39
+ borderless,
39
40
  ...props
40
41
  }) => (
41
42
  <View style={[ownStyles.container, themeStyles?.root, styles?.container]}>
@@ -92,7 +93,7 @@ const StandardInput = ({
92
93
  </InputLabel>
93
94
  )}
94
95
  </View>
95
- <InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />
96
+ {!borderless && (<InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />)}
96
97
  </View>
97
98
  {!!tooltip && (
98
99
  <View style={ownStyles.tooltipContainer}>
package/lib/hooks/useKeyboardHeight.js CHANGED
@@ -13,12 +13,12 @@ const useKeyboardHeight = () => {
13
13
  };
14
14
 
15
15
  useEffect(() => {
16
- Keyboard.addListener('keyboardDidShow', keyboardDidShow);
17
- Keyboard.addListener('keyboardDidHide', keyboardDidHide);
16
+ const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
17
+ const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
18
18
 
19
19
  return () => {
20
- Keyboard.removeListener('keyboardDidShow', keyboardDidShow);
21
- Keyboard.removeListener('keyboardDidHide', keyboardDidHide);
20
+ showSubscription.remove();
21
+ hideSubscription.remove();
22
22
  };
23
23
  }, []);
24
24
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "0.31.4",
5
+ "version": "0.32.2",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [