@widergy/mobile-ui 0.34.0 → 0.34.3

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 +24 -0
  2. package/lib/components/Capture/index.js +12 -9
  3. package/lib/components/Label/utils.js +4 -1
  4. package/lib/components/PhotoAlbum/components/Photo/index.js +6 -7
  5. package/lib/components/PhotoAlbum/index.js +3 -2
  6. package/lib/components/RadioGroup/components/RadioButton/index.js +60 -30
  7. package/lib/components/RadioGroup/components/RadioButton/styles.js +6 -0
  8. package/lib/components/RadioGroup/index.js +2 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ ## [0.34.3](https://github.com/widergy/mobile-ui/compare/v0.34.2...v0.34.3) (2022-05-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * added host portal in example capture ([acda0b2](https://github.com/widergy/mobile-ui/commit/acda0b2f9caa78cf2a47622e20bec02613118b2e))
7
+ * cases of the text of selection of photos in plural contemplated ([d0f0ebc](https://github.com/widergy/mobile-ui/commit/d0f0ebc2087cb3dc3f0ce10b334906effb12ade2))
8
+ * onRequestClose added to photo application modal ([83d95f4](https://github.com/widergy/mobile-ui/commit/83d95f43a24771dc1e0aad71b70a9385465b85b6))
9
+ * pr corrections ([e58ab51](https://github.com/widergy/mobile-ui/commit/e58ab51c3138c5bcf3463df82ffe69c1ded04c96))
10
+
11
+ ## [0.34.2](https://github.com/widergy/mobile-ui/compare/v0.34.1...v0.34.2) (2022-05-06)
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * modify radio button components and others ([#221](https://github.com/widergy/mobile-ui/issues/221)) ([530345a](https://github.com/widergy/mobile-ui/commit/530345a3cb103ce761a4d780544b72f101d6a5e8))
17
+
18
+ ## [0.34.1](https://github.com/widergy/mobile-ui/compare/v0.34.0...v0.34.1) (2022-04-26)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * undefined is not a function ([#219](https://github.com/widergy/mobile-ui/issues/219)) ([ca80c4d](https://github.com/widergy/mobile-ui/commit/ca80c4d6b90176376f980234be432da87f6ed5ff))
24
+
1
25
  # [0.34.0](https://github.com/widergy/mobile-ui/compare/v0.33.0...v0.34.0) (2022-04-11)
2
26
 
3
27
 
package/lib/components/Capture/index.js CHANGED
@@ -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';
@@ -20,16 +19,19 @@ const Capture = ({
20
19
  selectedMode,
21
20
  sourceCameraImage,
22
21
  sourceEditImage,
23
- messageErrorPermissionCamera
22
+ messageErrorPermissionCamera,
23
+ selectionMessage
24
24
  }) => {
25
25
  const isOnlyOnePicture = maxImages === 1 && images.length === 1;
26
26
  const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
27
27
 
28
28
  return (
29
- <Portal.Host>
30
- <Label semiBold big style={styles.paddingText}>
31
- {label}
32
- </Label>
29
+ <Fragment>
30
+ {!!label && (
31
+ <Label semiBold big style={styles.paddingText}>
32
+ {label}
33
+ </Label>
34
+ )}
33
35
  <PhotoAlbum
34
36
  images={images}
35
37
  selectedImages={selectedImages}
@@ -44,9 +46,10 @@ const Capture = ({
44
46
  sourceCameraImage={sourceCameraImage}
45
47
  sourceEditImage={sourceEditImage}
46
48
  messageErrorPermissionCamera={messageErrorPermissionCamera}
49
+ selectionMessage={selectionMessage}
47
50
  />
48
- <Label style={styles.paddingText}>{helpText}</Label>
49
- </Portal.Host>
51
+ {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
52
+ </Fragment>
50
53
  );
51
54
  };
52
55
  Capture.propTypes = propTypes;
package/lib/components/Label/utils.js CHANGED
@@ -48,4 +48,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
48
48
  };
49
49
 
50
50
  export const markdownFormat = content =>
51
- content?.replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n').replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;
51
+ content
52
+ ?.toString()
53
+ .replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n')
54
+ .replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;
package/lib/components/PhotoAlbum/components/Photo/index.js CHANGED
@@ -18,6 +18,10 @@ const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto,
18
18
  setFullScreenPhotoModalVisible(false);
19
19
  deletePhoto(uri);
20
20
  };
21
+ const onCloseModal = () => {
22
+ setFullScreenPhotoModalVisible(false);
23
+ };
24
+
21
25
  return (
22
26
  <View>
23
27
  <TouchableOpacity
@@ -40,15 +44,10 @@ const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto,
40
44
  <Image onError={onError} source={{ uri }} style={styles.image} />
41
45
  )}
42
46
  </TouchableOpacity>
43
- <Modal animationType="fade" visible={fullScreenPhotoModalVisible}>
47
+ <Modal animationType="fade" visible={fullScreenPhotoModalVisible} onRequestClose={onCloseModal}>
44
48
  <View style={styles.modalContainer}>
45
49
  <View style={styles.headerContainerModal}>
46
- <TouchableOpacity
47
- onPress={() => {
48
- setFullScreenPhotoModalVisible(!fullScreenPhotoModalVisible);
49
- }}
50
- style={styles.backButtonHeaderModal}
51
- >
50
+ <TouchableOpacity onPress={onCloseModal} style={styles.backButtonHeaderModal}>
52
51
  <Icon name="arrowleft" type="antdesign" size={24} color="white" />
53
52
  </TouchableOpacity>
54
53
  </View>
package/lib/components/PhotoAlbum/index.js CHANGED
@@ -30,7 +30,8 @@ const PhotoAlbum = ({
30
30
  isOnlyOnePicture,
31
31
  sourceCameraImage,
32
32
  sourceEditImage,
33
- messageErrorPermissionCamera
33
+ messageErrorPermissionCamera,
34
+ selectionMessage
34
35
  }) => {
35
36
  const requestPermission = async () => {
36
37
  const permissionsResponse = await PermissionsAndroid.requestMultiple([
@@ -140,7 +141,7 @@ const PhotoAlbum = ({
140
141
  <Portal>
141
142
  <View style={styles.selectedModeContainer}>
142
143
  <View style={styles.selectionLabelContainer}>
143
- <Label color="white">{`${selectedImages.length} selección`}</Label>
144
+ <Label color="white">{selectionMessage}</Label>
144
145
  </View>
145
146
  <View style={styles.buttonsContainer}>
146
147
  {isOnlyOnePicture && (
package/lib/components/RadioGroup/components/RadioButton/index.js CHANGED
@@ -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);
package/lib/components/RadioGroup/components/RadioButton/styles.js CHANGED
@@ -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
  });
package/lib/components/RadioGroup/index.js CHANGED
@@ -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.0",
5
+ "version": "0.34.3",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [