@widergy/mobile-ui 0.34.1 → 0.34.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [0.34.2](https://github.com/widergy/mobile-ui/compare/v0.34.1...v0.34.2) (2022-05-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * modify radio button components and others ([#221](https://github.com/widergy/mobile-ui/issues/221)) ([530345a](https://github.com/widergy/mobile-ui/commit/530345a3cb103ce761a4d780544b72f101d6a5e8))
7
+
1
8
  ## [0.34.1](https://github.com/widergy/mobile-ui/compare/v0.34.0...v0.34.1) (2022-04-26)
2
9
 
3
10
 
@@ -1,8 +1,7 @@
1
- import React from 'react';
1
+ import React, { Fragment } from 'react';
2
2
 
3
3
  import Label from '../Label';
4
4
  import PhotoAlbum from '../PhotoAlbum';
5
- import Portal from '../Portal';
6
5
 
7
6
  import styles from './styles';
8
7
  import propTypes from './propTypes';
@@ -26,10 +25,12 @@ const Capture = ({
26
25
  const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
27
26
 
28
27
  return (
29
- <Portal.Host>
30
- <Label semiBold big style={styles.paddingText}>
31
- {label}
32
- </Label>
28
+ <Fragment>
29
+ {!!label && (
30
+ <Label semiBold big style={styles.paddingText}>
31
+ {label}
32
+ </Label>
33
+ )}
33
34
  <PhotoAlbum
34
35
  images={images}
35
36
  selectedImages={selectedImages}
@@ -45,8 +46,8 @@ const Capture = ({
45
46
  sourceEditImage={sourceEditImage}
46
47
  messageErrorPermissionCamera={messageErrorPermissionCamera}
47
48
  />
48
- <Label style={styles.paddingText}>{helpText}</Label>
49
- </Portal.Host>
49
+ {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
50
+ </Fragment>
50
51
  );
51
52
  };
52
53
  Capture.propTypes = propTypes;
@@ -1,7 +1,8 @@
1
- import React, { Component } from 'react';
1
+ import React, { Component, Fragment } from 'react';
2
2
  import { View, ViewPropTypes } from 'react-native';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
+ import SeparatorBar from '../../../SeparatorBar';
5
6
  import Touchable from '../../../Touchable';
6
7
  import Icon from '../../../Icon';
7
8
  import Label from '../../../Label';
@@ -18,37 +19,64 @@ class RadioButton extends Component {
18
19
  // TODO: labelComponent is a patch to allow to use tooltips next to radio button label.Change this when mobile-ui has its own tooltip component
19
20
 
20
21
  render() {
21
- const { status, style, label, labelValue, sublabel, theme, labelComponent } = this.props;
22
+ const {
23
+ status,
24
+ style,
25
+ label,
26
+ labelValue,
27
+ sublabel,
28
+ theme,
29
+ labelComponent,
30
+ descriptionComponent,
31
+ showSeparatorBar
32
+ } = this.props;
22
33
  return (
23
- <Touchable onPress={this.handlePress}>
24
- <View style={[styles.container, style]}>
25
- <Icon
26
- name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
27
- color={status ? theme.colors.primary : theme.colors.disabled}
28
- style={styles.iconSpacing}
29
- />
30
- <View style={styles.labelsContainer}>
31
- <View>
32
- <View style={[styles.label, labelComponent && styles.labelComponent]}>
33
- <Label small bold={status} primary={status}>
34
- {label}
35
- </Label>
36
- {labelComponent}
34
+ <Fragment>
35
+ <Touchable onPress={this.handlePress}>
36
+ <View style={[styles.container, style]}>
37
+ {descriptionComponent ? (
38
+ <View style={styles.descriptionComponentContainer}>
39
+ {descriptionComponent}
40
+ <Icon
41
+ name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
42
+ color={theme.colors.primary}
43
+ style={styles.iconSpacing}
44
+ size={20}
45
+ />
37
46
  </View>
38
- {(sublabel || sublabel === 0) && (
39
- <Label disabled xsmall bold={status}>
40
- {sublabel}
41
- </Label>
42
- )}
43
- </View>
47
+ ) : (
48
+ <Fragment>
49
+ <Icon
50
+ name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
51
+ color={status ? theme.colors.primary : theme.colors.disabled}
52
+ style={styles.iconSpacing}
53
+ />
54
+ <View style={styles.labelsContainer}>
55
+ <View>
56
+ <View style={[styles.label, labelComponent && styles.labelComponent]}>
57
+ <Label small bold={status} primary={status}>
58
+ {label}
59
+ </Label>
60
+ {labelComponent}
61
+ </View>
62
+ {(sublabel || sublabel === 0) && (
63
+ <Label disabled xsmall bold={status}>
64
+ {sublabel}
65
+ </Label>
66
+ )}
67
+ </View>
68
+ </View>
69
+ {labelValue && (
70
+ <Label bold={status} primary={status} small>
71
+ {labelValue}
72
+ </Label>
73
+ )}
74
+ </Fragment>
75
+ )}
44
76
  </View>
45
- {labelValue && (
46
- <Label bold={status} primary={status} small>
47
- {labelValue}
48
- </Label>
49
- )}
50
- </View>
51
- </Touchable>
77
+ </Touchable>
78
+ {showSeparatorBar && <SeparatorBar />}
79
+ </Fragment>
52
80
  );
53
81
  }
54
82
  }
@@ -65,7 +93,9 @@ RadioButton.propTypes = {
65
93
  sublabel: PropTypes.string
66
94
  }),
67
95
  theme: themeType,
68
- labelComponent: PropTypes.node
96
+ labelComponent: PropTypes.node,
97
+ descriptionComponent: PropTypes.node,
98
+ showSeparatorBar: PropTypes.bool
69
99
  };
70
100
 
71
101
  export default withTheme(RadioButton);
@@ -23,5 +23,11 @@ export default StyleSheet.create({
23
23
  },
24
24
  labelComponent: {
25
25
  width: '90%'
26
+ },
27
+ descriptionComponentContainer: {
28
+ justifyContent: 'space-between',
29
+ flexDirection: 'row',
30
+ alignItems: 'center',
31
+ width: '100%'
26
32
  }
27
33
  });
@@ -26,6 +26,8 @@ class RadioGroup extends Component {
26
26
  sublabel={option.sublabel}
27
27
  onPress={this.handleOptionSelected}
28
28
  status={selectedOption === option[keyField]}
29
+ descriptionComponent={option?.Component}
30
+ showSeparatorBar={option?.showSeparatorBar}
29
31
  {...radioProps}
30
32
  />
31
33
  );
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.34.1",
5
+ "version": "0.34.2",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [