@widergy/mobile-ui 0.34.1 → 0.35.0

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [0.35.0](https://github.com/widergy/mobile-ui/compare/v0.34.3...v0.35.0) (2022-06-03)
+
+
+### Bug Fixes
+
+* added opacity when disabled button ([6d75fdb](https://github.com/widergy/mobile-ui/commit/6d75fdb3023308ffaa6cbd5c70d88deb338440b6))
+* adjusted loading in modal ([4b175e4](https://github.com/widergy/mobile-ui/commit/4b175e4b8f220444db5abebcee7b2a69c61f8eae))
+* avoid falsy condition in buttons and adjusted its style ([1d83ab4](https://github.com/widergy/mobile-ui/commit/1d83ab4096418c678da0988b41ef2a1c691c5759))
+* avoid falsy condition in title ([8a364dd](https://github.com/widergy/mobile-ui/commit/8a364dd3b61131ae64dca26153e79477658ded49))
+* backgroundImg prop ([ea7d415](https://github.com/widergy/mobile-ui/commit/ea7d415a14a7960252fa1ef20a73e38a5b367e69))
+* delete outsideContent prop ([5c2bbbc](https://github.com/widergy/mobile-ui/commit/5c2bbbc10057ad0ee3a4acc4c7c7acce92b70656))
+* deleted withTheme hook and left useTheme hoc ([775ca6b](https://github.com/widergy/mobile-ui/commit/775ca6bd7ddb142be721b73868ca44776b87f306))
+* separted img and backgound img styles ([e347885](https://github.com/widergy/mobile-ui/commit/e347885847883b5912624e1add844a630ab30c5b))
+* UTModal and Modal components in mobile ui ([23dc89b](https://github.com/widergy/mobile-ui/commit/23dc89b26bd3776cb78206474b95ce7c01bbdb0b))
+
+
+### Features
+
+* add UTModal component ([8303a57](https://github.com/widergy/mobile-ui/commit/8303a5732600f21f600ebecbbe37dfcc321eab90))
+
+## [0.34.3](https://github.com/widergy/mobile-ui/compare/v0.34.2...v0.34.3) (2022-05-19)
+
+
+### Bug Fixes
+
+* added host portal in example capture ([acda0b2](https://github.com/widergy/mobile-ui/commit/acda0b2f9caa78cf2a47622e20bec02613118b2e))
+* cases of the text of selection of photos in plural contemplated ([d0f0ebc](https://github.com/widergy/mobile-ui/commit/d0f0ebc2087cb3dc3f0ce10b334906effb12ade2))
+* onRequestClose added to photo application modal ([83d95f4](https://github.com/widergy/mobile-ui/commit/83d95f43a24771dc1e0aad71b70a9385465b85b6))
+* pr corrections ([e58ab51](https://github.com/widergy/mobile-ui/commit/e58ab51c3138c5bcf3463df82ffe69c1ded04c96))
+
+## [0.34.2](https://github.com/widergy/mobile-ui/compare/v0.34.1...v0.34.2) (2022-05-06)
+
+
+### Bug Fixes
+
+* modify radio button components and others ([#221](https://github.com/widergy/mobile-ui/issues/221)) ([530345a](https://github.com/widergy/mobile-ui/commit/530345a3cb103ce761a4d780544b72f101d6a5e8))
+
 ## [0.34.1](https://github.com/widergy/mobile-ui/compare/v0.34.0...v0.34.1) (2022-04-26)
 
 

package/lib/components/Button/index.js

@@ -68,7 +68,7 @@ const Button = ({
                 size={icon.size || themeStyles.fontSize}
               />
             )}
-            <Label {...labelProps} base color={textColor}>
+            <Label base color={textColor} {...labelProps}>
               {lowerCase ? title : title.toUpperCase()}
             </Label>
           </View>

package/lib/components/Capture/index.js

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import Label from '../Label';
 import PhotoAlbum from '../PhotoAlbum';
-import Portal from '../Portal';
 
 import styles from './styles';
 import propTypes from './propTypes';
@@ -20,16 +19,19 @@ const Capture = ({
   selectedMode,
   sourceCameraImage,
   sourceEditImage,
-  messageErrorPermissionCamera
+  messageErrorPermissionCamera,
+  selectionMessage
 }) => {
   const isOnlyOnePicture = maxImages === 1 && images.length === 1;
   const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
 
   return (
-    <Portal.Host>
-      <Label semiBold big style={styles.paddingText}>
-        {label}
-      </Label>
+    <Fragment>
+      {!!label && (
+        <Label semiBold big style={styles.paddingText}>
+          {label}
+        </Label>
+      )}
       <PhotoAlbum
         images={images}
         selectedImages={selectedImages}
@@ -44,9 +46,10 @@ const Capture = ({
         sourceCameraImage={sourceCameraImage}
         sourceEditImage={sourceEditImage}
         messageErrorPermissionCamera={messageErrorPermissionCamera}
+        selectionMessage={selectionMessage}
       />
-      <Label style={styles.paddingText}>{helpText}</Label>
-    </Portal.Host>
+      {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
+    </Fragment>
   );
 };
 Capture.propTypes = propTypes;

package/lib/components/PhotoAlbum/components/Photo/index.js

@@ -18,6 +18,10 @@ const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto,
     setFullScreenPhotoModalVisible(false);
     deletePhoto(uri);
   };
+  const onCloseModal = () => {
+    setFullScreenPhotoModalVisible(false);
+  };
+
   return (
     <View>
       <TouchableOpacity
@@ -40,15 +44,10 @@ const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto,
           <Image onError={onError} source={{ uri }} style={styles.image} />
         )}
       </TouchableOpacity>
-      <Modal animationType="fade" visible={fullScreenPhotoModalVisible}>
+      <Modal animationType="fade" visible={fullScreenPhotoModalVisible} onRequestClose={onCloseModal}>
         <View style={styles.modalContainer}>
           <View style={styles.headerContainerModal}>
-            <TouchableOpacity
-              onPress={() => {
-                setFullScreenPhotoModalVisible(!fullScreenPhotoModalVisible);
-              }}
-              style={styles.backButtonHeaderModal}
-            >
+            <TouchableOpacity onPress={onCloseModal} style={styles.backButtonHeaderModal}>
               <Icon name="arrowleft" type="antdesign" size={24} color="white" />
             </TouchableOpacity>
           </View>

package/lib/components/PhotoAlbum/index.js

@@ -30,7 +30,8 @@ const PhotoAlbum = ({
   isOnlyOnePicture,
   sourceCameraImage,
   sourceEditImage,
-  messageErrorPermissionCamera
+  messageErrorPermissionCamera,
+  selectionMessage
 }) => {
   const requestPermission = async () => {
     const permissionsResponse = await PermissionsAndroid.requestMultiple([
@@ -140,7 +141,7 @@ const PhotoAlbum = ({
           <Portal>
             <View style={styles.selectedModeContainer}>
               <View style={styles.selectionLabelContainer}>
-                <Label color="white">{`${selectedImages.length} selección`}</Label>
+                <Label color="white">{selectionMessage}</Label>
               </View>
               <View style={styles.buttonsContainer}>
                 {isOnlyOnePicture && (

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
+import SeparatorBar from '../../../SeparatorBar';
 import Touchable from '../../../Touchable';
 import Icon from '../../../Icon';
 import Label from '../../../Label';
@@ -18,37 +19,64 @@ class RadioButton extends Component {
   // 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
 
   render() {
-    const { status, style, label, labelValue, sublabel, theme, labelComponent } = this.props;
+    const {
+      status,
+      style,
+      label,
+      labelValue,
+      sublabel,
+      theme,
+      labelComponent,
+      descriptionComponent,
+      showSeparatorBar
+    } = this.props;
     return (
-      <Touchable onPress={this.handlePress}>
-        <View style={[styles.container, style]}>
-          <Icon
-            name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
-            color={status ? theme.colors.primary : theme.colors.disabled}
-            style={styles.iconSpacing}
-          />
-          <View style={styles.labelsContainer}>
-            <View>
-              <View style={[styles.label, labelComponent && styles.labelComponent]}>
-                <Label small bold={status} primary={status}>
-                  {label}
-                </Label>
-                {labelComponent}
+      <Fragment>
+        <Touchable onPress={this.handlePress}>
+          <View style={[styles.container, style]}>
+            {descriptionComponent ? (
+              <View style={styles.descriptionComponentContainer}>
+                {descriptionComponent}
+                <Icon
+                  name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
+                  color={theme.colors.primary}
+                  style={styles.iconSpacing}
+                  size={20}
+                />
               </View>
-              {(sublabel || sublabel === 0) && (
-                <Label disabled xsmall bold={status}>
-                  {sublabel}
-                </Label>
-              )}
-            </View>
+            ) : (
+              <Fragment>
+                <Icon
+                  name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
+                  color={status ? theme.colors.primary : theme.colors.disabled}
+                  style={styles.iconSpacing}
+                />
+                <View style={styles.labelsContainer}>
+                  <View>
+                    <View style={[styles.label, labelComponent && styles.labelComponent]}>
+                      <Label small bold={status} primary={status}>
+                        {label}
+                      </Label>
+                      {labelComponent}
+                    </View>
+                    {(sublabel || sublabel === 0) && (
+                      <Label disabled xsmall bold={status}>
+                        {sublabel}
+                      </Label>
+                    )}
+                  </View>
+                </View>
+                {labelValue && (
+                  <Label bold={status} primary={status} small>
+                    {labelValue}
+                  </Label>
+                )}
+              </Fragment>
+            )}
           </View>
-          {labelValue && (
-            <Label bold={status} primary={status} small>
-              {labelValue}
-            </Label>
-          )}
-        </View>
-      </Touchable>
+        </Touchable>
+        {showSeparatorBar && <SeparatorBar />}
+      </Fragment>
     );
   }
 }
@@ -65,7 +93,9 @@ RadioButton.propTypes = {
     sublabel: PropTypes.string
   }),
   theme: themeType,
-  labelComponent: PropTypes.node
+  labelComponent: PropTypes.node,
+  descriptionComponent: PropTypes.node,
+  showSeparatorBar: PropTypes.bool
 };
 
 export default withTheme(RadioButton);

package/lib/components/RadioGroup/components/RadioButton/styles.js

@@ -23,5 +23,11 @@ export default StyleSheet.create({
   },
   labelComponent: {
     width: '90%'
+  },
+  descriptionComponentContainer: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
   }
 });

package/lib/components/RadioGroup/index.js

@@ -26,6 +26,8 @@ class RadioGroup extends Component {
         sublabel={option.sublabel}
         onPress={this.handleOptionSelected}
         status={selectedOption === option[keyField]}
+        descriptionComponent={option?.Component}
+        showSeparatorBar={option?.showSeparatorBar}
         {...radioProps}
       />
     );

package/lib/components/UTModal/constants.js

@@ -0,0 +1 @@
+export const CLOSE_ICON = 'close';

package/lib/components/UTModal/index.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import { View, TouchableWithoutFeedback, Keyboard, Modal, ImageBackground } from 'react-native';
+import _ from 'lodash';
+
+import Label from '../Label';
+import Button from '../Button';
+import Touchable from '../Touchable';
+import Icon from '../Icon';
+import { useTheme } from '../../theming';
+import UTLoading from '../UTLoading';
+
+import ModalTypes from './proptypes';
+import ownStyles from './styles';
+import { CLOSE_ICON } from './constants';
+
+const UTModal = ({
+  children,
+  onRequestClose,
+  acceptButton,
+  cancelButton,
+  visible,
+  title,
+  loading,
+  backgroundStyles,
+  imageStyles,
+  disableTouchable,
+  loadingText,
+  modalBackgroundColor,
+  color,
+  imageComponent,
+  labelProps,
+  modalStyles,
+  backgroundImg
+}) => {
+  const theme = useTheme();
+  const themeStyles = theme.simpleButton;
+  const styles = _.merge({}, ownStyles, themeStyles);
+
+  const ParentView = disableTouchable ? View : TouchableWithoutFeedback;
+  return (
+    <Modal
+      animationType="fade"
+      transparent
+      visible={visible}
+      onRequestClose={loading ? () => {} : onRequestClose}
+    >
+      <ParentView onPress={() => Keyboard.dismiss()} style={[disableTouchable && styles.viewContainer]}>
+        <View style={styles.childView} forceInset={{ top: 'never' }}>
+          <View
+            style={[
+              styles.modalBackground,
+              modalBackgroundColor && { backgroundColor: modalBackgroundColor }
+            ]}
+          >
+            <UTLoading
+              loading={loading}
+              style={[styles.innerContainer, styles.content, styles.loading]}
+              message={loadingText}
+            >
+              <View style={[styles.innerContainer, modalStyles?.innerContainer]}>
+                {!!backgroundImg && (
+                  <ImageBackground source={backgroundImg} resizeMode="stretch" style={backgroundStyles} />
+                )}
+                {!!imageComponent && (
+                  <View style={[styles.content, imageStyles]}>
+                    <Touchable
+                      borderless
+                      style={styles.closeIcon}
+                      onPress={onRequestClose || cancelButton.onPress}
+                    >
+                      <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
+                    </Touchable>
+                    <View style={styles.imageContainer}>{imageComponent}</View>
+                  </View>
+                )}
+                <View style={styles.content}>
+                  {!backgroundImg && !imageComponent && (
+                    <Touchable borderless style={styles.closeIcon} onPress={onRequestClose}>
+                      <Icon name={CLOSE_ICON} color={color || 'black'} style={styles.iconSpacing} />
+                    </Touchable>
+                  )}
+
+                  {!!title && (
+                    <Label bold center style={styles.title}>
+                      {title}
+                    </Label>
+                  )}
+
+                  {children}
+                </View>
+                <View style={styles.buttonsContainer}>
+                  {!!cancelButton && (
+                    <Button
+                      borderless
+                      lowerCase
+                      mode="text"
+                      elevation={0}
+                      containerStyle={[
+                        styles.containerStyle,
+                        { backgroundColor: cancelButton.backgroundColor }
+                      ]}
+                      title={cancelButton.text || 'Cancelar'}
+                      onPress={cancelButton.onPress}
+                      disabled={cancelButton.disabled || loading}
+                      labelColor={cancelButton.textColor || theme.button.defaultButtonColor}
+                      titleStyle={styles.buttonText}
+                    />
+                  )}
+                  {!!acceptButton && (
+                    <Button
+                      borderless
+                      lowerCase
+                      mode="text"
+                      elevation={0}
+                      outerContainerStyles={styles.outerContainerStyles}
+                      containerStyle={[
+                        styles.containerStyle,
+                        { backgroundColor: acceptButton.backgroundColor ?? theme.button.defaultButtonColor },
+                        // eslint-disable-next-line react-native/no-inline-styles
+                        acceptButton.disabled && { opacity: 0.5 }
+                      ]}
+                      title={acceptButton.text || 'Aceptar'}
+                      onPress={acceptButton.onPress}
+                      disabled={acceptButton.disabled || loading}
+                      labelColor={acceptButton.textColor || theme.colors.buttonLabelColor}
+                      titleStyle={styles.buttonText}
+                      labelProps={labelProps}
+                    />
+                  )}
+                </View>
+              </View>
+            </UTLoading>
+          </View>
+        </View>
+      </ParentView>
+    </Modal>
+  );
+};
+
+UTModal.defaultProps = {
+  onRequestClose: () => {}
+};
+
+UTModal.propTypes = ModalTypes;
+
+export default UTModal;

package/lib/components/UTModal/proptypes.js

@@ -0,0 +1,35 @@
+import { string, func, shape, number, bool, element } from 'prop-types';
+import { ViewPropTypes } from 'react-native';
+
+import { themeType } from '../../theming';
+import { IS_ANDROID } from '../../utils/platformUtils/constants';
+
+const buttonPropType = shape({
+  backgroundColor: string,
+  text: string,
+  onPress: func,
+  disabled: bool,
+  loadingText: string,
+  textColor: string
+});
+
+export default {
+  onRequestClose: IS_ANDROID ? func.isRequired : func,
+  cancelButton: buttonPropType,
+  acceptButton: buttonPropType,
+  visible: bool.isRequired,
+  loading: bool,
+  title: string,
+  disableTouchable: bool,
+  modalBackgroundColor: string,
+  onKeyboardDismiss: func,
+  loadingText: string,
+  fill: string,
+  imageStyles: ViewPropTypes.style,
+  backgroundStyles: ViewPropTypes.style,
+  modalStyles: ViewPropTypes.style,
+  image: element,
+  backgroundImg: number,
+  labelProps: shape(bool),
+  theme: themeType
+};

package/lib/components/UTModal/styles.js

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native';
+
+import { verticalScale, moderateHorizontalScale, WINDOW_WIDTH, WINDOW_HEIGHT } from '../../utils/scaleUtils';
+import { DEFAULT_ICON_SIZE } from '../Icon/constants';
+import { ICON_MARGIN } from '../IconButton/styles';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: verticalScale(4),
+    width: '95%'
+  },
+  modalBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 15
+  },
+  childView: {
+    flex: 1
+  },
+  innerContainer: {
+    backgroundColor: 'white',
+    borderRadius: 15,
+    alignItems: 'stretch',
+    alignSelf: 'center',
+    width: WINDOW_WIDTH * 0.78
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingVertical: 20,
+    paddingHorizontal: 15
+  },
+  viewContainer: {
+    flex: 1
+  },
+  loading: {
+    height: WINDOW_HEIGHT * 0.3,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  title: {
+    marginBottom: 16
+  },
+  buttonText: {
+    fontWeight: 'normal',
+    padding: 0,
+    margin: 0
+  },
+  content: {
+    padding: 15
+  },
+  closeIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: (DEFAULT_ICON_SIZE + ICON_MARGIN) / 2,
+    height: DEFAULT_ICON_SIZE + ICON_MARGIN,
+    width: DEFAULT_ICON_SIZE + ICON_MARGIN,
+    alignSelf: 'flex-end'
+  },
+  imageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: verticalScale(25),
+    height: verticalScale(35)
+  },
+  iconSpacing: {
+    marginRight: moderateHorizontalScale(10)
+  },
+  containerStyle: {
+    borderRadius: 25,
+    justifyContent: 'center',
+    marginHorizontal: moderateHorizontalScale(5)
+  },
+  disabledContainer: { opacity: 0.5 }
+});

package/lib/index.js

@@ -7,6 +7,7 @@ export { default as ActionButton } from './components/ActionButton';
 export { default as UTSwitch } from './components/UTSwitch';
 // Feedback
 export { default as Modal } from './components/Modal';
+export { default as UTModal } from './components/UTModal';
 export { default as Snackbar } from './components/Snackbar';
 // Forms
 export { default as Checkbox } from './components/Checkbox';

package/lib/theming/DefaultTheme.js

@@ -11,7 +11,8 @@ const DefaultTheme = {
   },
   button: {
     borderWidth: 1,
-    elevation: 2
+    elevation: 2,
+    defaultButtonColor: '#0E59A3'
   },
   colors: {
     appBackgroundColor: 'white',

package/package.json

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