@widergy/mobile-ui 0.34.2 → 0.35.1

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [0.35.1](https://github.com/widergy/mobile-ui/compare/v0.35.0...v0.35.1) (2022-07-14)
+
+
+### Bug Fixes
+
+* adding a parameter to utswitch ([#223](https://github.com/widergy/mobile-ui/issues/223)) ([2c3bb48](https://github.com/widergy/mobile-ui/commit/2c3bb480da94325c20480f834ffa1f166be9b135))
+
+# [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)
 
 

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

@@ -19,7 +19,8 @@ const Capture = ({
   selectedMode,
   sourceCameraImage,
   sourceEditImage,
-  messageErrorPermissionCamera
+  messageErrorPermissionCamera,
+  selectionMessage
 }) => {
   const isOnlyOnePicture = maxImages === 1 && images.length === 1;
   const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
@@ -45,6 +46,7 @@ const Capture = ({
         sourceCameraImage={sourceCameraImage}
         sourceEditImage={sourceEditImage}
         messageErrorPermissionCamera={messageErrorPermissionCamera}
+        selectionMessage={selectionMessage}
       />
       {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
     </Fragment>

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/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/components/UTSwitch/index.js

@@ -20,7 +20,8 @@ const UTSwitch = ({
   trackSize = 20,
   input,
   thumbSize = 10,
-  rippleSize = 3
+  rippleSize = 3,
+  movingStartPosition
 }) => {
   const theme = useTheme();
 
@@ -122,7 +123,10 @@ const UTSwitch = ({
                 {
                   translateX: switchPosition.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [thumpInitPosition, thumpFinishPosition]
+                    outputRange: [
+                      movingStartPosition ? thumpInitPosition - movingStartPosition : thumpInitPosition,
+                      thumpFinishPosition
+                    ]
                   })
                 }
               ]

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.2",
+  "version": "0.35.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [