@widergy/mobile-ui 0.31.3 → 0.32.1

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 (11) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/lib/components/CheckList/components/CheckBoxRenderer/index.js +2 -1
  3. package/lib/components/CheckList/index.js +12 -3
  4. package/lib/components/CheckList/styles.js +3 -0
  5. package/lib/components/ImageRadio/index.js +42 -25
  6. package/lib/components/ImageRadio/styles.js +34 -1
  7. package/lib/components/UTDetailDrawer/index.js +6 -1
  8. package/lib/components/UTTextInput/flavors/FilledInput/index.js +2 -1
  9. package/lib/components/UTTextInput/flavors/OutlinedInput/index.js +2 -1
  10. package/lib/components/UTTextInput/flavors/StandardInput/index.js +2 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [0.32.1](https://github.com/widergy/mobile-ui/compare/v0.32.0...v0.32.1) (2022-01-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * bounce on scrollview component ([#211](https://github.com/widergy/mobile-ui/issues/211)) ([aa6249b](https://github.com/widergy/mobile-ui/commit/aa6249b3f508bdf9ad7828ab5c0fcc371d600935))
7
+
8
+ # [0.32.0](https://github.com/widergy/mobile-ui/compare/v0.31.5...v0.32.0) (2021-12-10)
9
+
10
+
11
+ ### Features
12
+
13
+ * new borderless prop for borderless searchbar ([#209](https://github.com/widergy/mobile-ui/issues/209)) ([8d5f9ae](https://github.com/widergy/mobile-ui/commit/8d5f9ae55d7e8ed6dea53d3d9e16b0a9dfcdf7b3))
14
+
15
+ ## [0.31.5](https://github.com/widergy/mobile-ui/compare/v0.31.4...v0.31.5) (2021-11-16)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * improve image radio ([#206](https://github.com/widergy/mobile-ui/issues/206)) ([dd415e4](https://github.com/widergy/mobile-ui/commit/dd415e41323c2dd3ac7d9a43a490f86fa8947400))
21
+
22
+ ## [0.31.4](https://github.com/widergy/mobile-ui/compare/v0.31.3...v0.31.4) (2021-11-09)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * add disabled props to select all checkbox ([#207](https://github.com/widergy/mobile-ui/issues/207)) ([6657729](https://github.com/widergy/mobile-ui/commit/6657729d9178d8d193459162da9ee68c6268da27))
28
+
1
29
  ## [0.31.3](https://github.com/widergy/mobile-ui/compare/v0.31.2...v0.31.3) (2021-11-09)
2
30
 
3
31
 
package/lib/components/CheckList/components/CheckBoxRenderer/index.js CHANGED
@@ -24,7 +24,8 @@ const CheckBoxRenderer = ({
24
24
  }) => {
25
25
  const { Component, label, subLabel, disabled, value, required } = item;
26
26
 
27
- const disableContainerStyle = disabledStyleEnabled && (disabled || required) ? styles.disabled : {};
27
+ const disableContainerStyle =
28
+ disabledStyleEnabled && (disabled || required) ? disabledStyle || styles.disabled : {};
28
29
  const alternateColorStyle = alternateColors && index % 2 ? coloredStyle || styles.colored : {};
29
30
  return (
30
31
  <Checkbox
package/lib/components/CheckList/index.js CHANGED
@@ -90,9 +90,13 @@ class CheckList extends PureComponent {
90
90
  separatorStyle,
91
91
  selectAllSeparator,
92
92
  includesSeparator,
93
- error
93
+ error,
94
+ disabledSelectAll,
95
+ disabledStyleEnabled,
96
+ disabledStyle
94
97
  } = this.props;
95
-
98
+ const disableContainerStyle =
99
+ disabledStyleEnabled && disabledSelectAll ? disabledStyle || styles.disabled : {};
96
100
  return (
97
101
  <View style={[styles.container, style]}>
98
102
  {!!title && <Label style={styles.title}>{title}</Label>}
@@ -105,8 +109,13 @@ class CheckList extends PureComponent {
105
109
  checkedColor={checkedColor}
106
110
  labelsContainerStyle={selectAlllabelStyle}
107
111
  reversed={reversedSelectAll}
108
- style={[selectAllContainerStyle, alternateColors ? coloredStyle || styles.colored : {}]}
112
+ style={[
113
+ selectAllContainerStyle,
114
+ alternateColors ? coloredStyle || styles.colored : {},
115
+ disableContainerStyle
116
+ ]}
109
117
  textProps={textProps}
118
+ disabled={disabledSelectAll}
110
119
  />
111
120
  )}
112
121
  {!!selectAllSeparator && !hideSelectAll && <SeparatorBar style={separatorStyle} />}
package/lib/components/CheckList/styles.js CHANGED
@@ -20,5 +20,8 @@ export default StyleSheet.create({
20
20
  },
21
21
  colored: {
22
22
  backgroundColor: transparentGray
23
+ },
24
+ disabled: {
25
+ opacity: 0.5
23
26
  }
24
27
  });
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/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.3",
5
+ "version": "0.32.1",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [