mg-library 1.0.672 → 1.0.675

package/blocks.js

@@ -5,13 +5,12 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import * as ImageManipulator from 'expo-image-manipulator';
 import { Camera, CameraType, CameraView } from 'expo-camera';
 import axios from 'axios';
-import { Button as NBButton, Icon as NBIcon, Popover as NBPopover, Input as NBInput } from 'native-base';
-import { Box, Divider } from '@gluestack-ui/themed';
+import { Box } from '@gluestack-ui/themed';
 import { uploadFile } from '@uploadcare/upload-client';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import './prototypes.js';
-import { MGText, MGCard, MGButton } from './components.js';
+import { MGText, MGCard, MGButton, MGDivider } from './components.js';
 import * as mgFunctionsLib from './functions.js';
 import * as mgConstantsLib from './constants.js';
 import * as mgLoginLib from './login.js';
@@ -436,23 +435,6 @@ export function MGCamera(props) {
         <View>
             <View style={{ flexDirection: 'row' }}>
                 <View style={{ flex: 1, alignItems: 'center' }}>
-                    {/*                     <NBButton
-                        style={{ width: 150 }} py={4} colorScheme="primary"
-                        leftIcon={
-                            <NBIcon as={MaterialCommunityIcons} name="camera-flip-outline" size="lg" color="white" />
-                        }
-                        onPress={() => {
-                            setFacing(
-                                facing === mgConstantsLib.CAMERA_FACING_BACK
-                                    ? mgConstantsLib.CAMERA_FACING_FRONT
-                                    : mgConstantsLib.CAMERA_FACING_BACK
-                            );
-                        }}
-                    >
-                        <MGText category="p1" color="white">
-                            {mgFunctionsLib.i18nString('doInvertCamera', props.language)}
-                        </MGText>
-                    </NBButton> */}
                     <MGButton
                         icon="camera-flip-outline"
                         title={mgFunctionsLib.i18nString('doInvertCamera', props.language)}
@@ -469,19 +451,6 @@ export function MGCamera(props) {
                         }}
                     />
                 </View>
-                {/*
-                <View style={{ flex: 1, alignItems: 'center' }}>
-                    <NBButton
-                        style={{ width: 150 }} py={4} colorScheme="primary"
-                        leftIcon={
-                            <NBIcon as={MaterialCommunityIcons} name="camera-outline" size="lg" color="white" />
-                        }
-                        onPress={__takePicture}>
-                        <MGText category="p1" color="white">
-                            {mgFunctionsLib.i18nString('doTakePhoto', props.language)}
-                        </MGText>
-                    </NBButton>
-                </View> */}
                 <View style={{ flex: 1, alignItems: 'center' }}>
                     <MGButton
                         icon="camera-outline"
@@ -556,24 +525,6 @@ export function MGCameraPreview(props) {
             <MGText>{mgFunctionsLib.i18nString('previewPhoto', props.language)}</MGText>
         </View>
     );
-    /*     const cardFooter = (
-            <View>
-                <View style={{ flexDirection: 'row' }}>
-                    <View style={{ flex: 1, alignItems: 'center' }}>
-                        <NBButton
-                            style={{ width: 150 }} py={4} colorScheme="primary"
-                            leftIcon={
-                                <NBIcon as={MaterialCommunityIcons} name="cloud-upload-outline" size="lg" color="white" />
-                            }
-                            onPress={__savePicture}>
-                            <MGText category="p1" color="white">
-                                {mgFunctionsLib.i18nString('doSavePhoto', props.language)}
-                            </MGText>
-                        </NBButton>
-                    </View>
-                </View>
-            </View>
-        ); */
     const cardFooter = (
         <View>
             <View style={{ flexDirection: 'row' }}>
@@ -602,79 +553,6 @@ export function MGCameraPreview(props) {
     )
 }
 
-export function MGPopover(props) {
-    const [visible, setVisible] = useState(false);
-    const footer = (
-        <View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', marginTop: 20, marginBottom: 20 }}>
-            <NBButton
-                py={4}
-                colorScheme='primary'
-                style={{ flexGrow: 0.3 }}
-                onPress={() => {
-                    setVisible(false);
-                    props.callback();
-                }}
-            >
-                <MGText color="white">
-                    {mgFunctionsLib.i18nString('yes', props.language)}
-                </MGText>
-            </NBButton>
-            <NBButton
-                py={4}
-                colorScheme='primary'
-                style={{ flexGrow: 0.3 }}
-                onPress={() => setVisible(false)}
-            >
-                <MGText color="white">
-                    {mgFunctionsLib.i18nString('no', props.language)}
-                </MGText>
-            </NBButton>
-        </View>
-    );
-    return (
-        <NBPopover
-            isOpen={visible}
-            onClose={() => setVisible(false)}
-            trigger={triggerProps => (
-                <NBButton
-                    {...triggerProps}
-                    py={4}
-                    colorScheme='primary'
-                    leftIcon={
-                        <NBIcon
-                            as={MaterialCommunityIcons}
-                            name={props.icon}
-                            size='lg'
-                            color='white'
-                        />
-                    }
-                    onPress={() => setVisible(true)}
-                >
-                    <MGText category="p1" color="white">
-                        {props.title}
-                    </MGText>
-                </NBButton>
-            )}
-        >
-            <NBPopover.Content w="300px" bg="white">
-                <NBPopover.Arrow />
-                <NBPopover.CloseButton />
-                <NBPopover.Body>
-                    <Box alignItems="center" justifyContent="center">
-                        <NBIcon as={MaterialCommunityIcons} name="alert-outline" size={16} color={props.colors.primary['500']} mb={3} />
-                        <MGText textAlign="center">
-                            {mgFunctionsLib.i18nString('confirm', props.language)}?
-                        </MGText>
-                    </Box>
-                </NBPopover.Body>
-                <NBPopover.Footer>
-                    {footer}
-                </NBPopover.Footer>
-            </NBPopover.Content>
-        </NBPopover>
-    );
-}
-
 export function MGGoBack(props) {
     return (
         <View style={{ alignItems: 'flex-start', marginTop: 10 }}>
@@ -763,19 +641,6 @@ export function MGSessionHeader(props) {
     );
 }
 
-export function MGDivider({ style, ...props }) {
-    return (
-        <Divider
-            h="$0.25"
-            flexGrow={1}
-            alignSelf="stretch"
-            bg="$trueGray400"
-            style={style}
-            {...props}
-        />
-    );
-}
-
 export function MGActivityIndicator(props) {
     return (
         <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignContent: 'center' }}>

package/components.js

@@ -1,7 +1,7 @@
-import { Box, Text, Button, ButtonText, ButtonIcon, Icon } from '@gluestack-ui/themed';
+import { Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { MGDivider } from './blocks.js';
+import * as mgFunctionsLib from './functions.js';
 
 const categoryMap = {
     h1: { size: '4xl', fontWeight: '$bold' },
@@ -131,4 +131,77 @@ export function MGButton({
             ) : null}
         </Button>
     );
+}
+
+export function MGPopover(props) {
+    const [visible, setVisible] = useState(false);
+    const footer = (
+        <View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', marginTop: 20, marginBottom: 20 }}>
+            <MGButton
+                title={mgFunctionsLib.i18nString('yes', props.language)}
+                action="primary"
+                variant="solid"
+                py="$4"
+                style={{ flexGrow: 0.3 }}
+                onPress={() => {
+                    setVisible(false);
+                    props.callback();
+                }}
+            />
+            <MGButton
+                title={mgFunctionsLib.i18nString('no', props.language)}
+                action="primary"
+                variant="solid"
+                py="$4"
+                style={{ flexGrow: 0.3 }}
+                onPress={() => setVisible(false)}
+            />
+        </View>
+    );
+    <Popover isOpen={visible} onClose={() => setVisible(false)}>
+        <PopoverTrigger>
+            <MGButton
+                icon={props.icon}
+                title={props.title}
+                action="primary"
+                variant="solid"
+                py="$4"
+                onPress={() => setVisible(true)}
+            />
+        </PopoverTrigger>
+        <PopoverContent w={300} bg="$white">
+            <PopoverArrow />
+            <PopoverCloseButton />
+            <PopoverBody>
+                <Box alignItems="center" justifyContent="center">
+                    <Icon
+                        as={MaterialCommunityIcons}
+                        name="alert-outline"
+                        size={16}
+                        color="$primary500"
+                        mb="$3"
+                    />
+                    <MGText textAlign="center">
+                        {mgFunctionsLib.i18nString('confirm', props.language)}?
+                    </MGText>
+                </Box>
+            </PopoverBody>
+            <PopoverFooter>
+                {footer}
+            </PopoverFooter>
+        </PopoverContent>
+    </Popover>
+}
+
+export function MGDivider({ style, ...props }) {
+    return (
+        <Divider
+            h="$0.25"
+            flexGrow={1}
+            alignSelf="stretch"
+            bg="$trueGray400"
+            style={style}
+            {...props}
+        />
+    );
 }

package/functions.js

@@ -1,9 +1,7 @@
 import Toast from 'react-native-root-toast';
 import { StyleSheet, View, Dimensions } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { Button as NBButton, Icon as NBIcon } from 'native-base';
 import { Box } from '@gluestack-ui/themed';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import moment from 'moment';
 import 'moment/locale/es';
 import 'moment/locale/en-gb';
@@ -14,12 +12,12 @@ import * as mgConstants from './constants.js';
 
 // Navigator
 
-export function navigatorHeader(insets, colors, onPressLogout, company) {
+export function navigatorHeader(insets, onPressLogout, company) {
     let companyDescription = company.description;
     if (companyDescription.length > 25)
         companyDescription = companyDescription.substring(0, 25) + '...';
     return (
-        <Box style={[safeAreaViewForNavigatorHeaderStyleSheet(insets).safeAreaView, { backgroundColor: colors.primary['500'], flexDirection: 'column', justifyContent: 'flex-end' }]}>
+        <Box style={[safeAreaViewForNavigatorHeaderStyleSheet(insets).safeAreaView, { backgroundColor: '$primary500', flexDirection: 'column', justifyContent: 'flex-end' }]}>
             <View style={{ flexDirection: 'row', flexGrow: 1 }}>
                 <View style={{ flexGrow: 0.9, marginLeft: 10, alignSelf: 'center' }}>
                     <MGText category='h5' style={{ color: 'white' }}>{companyDescription}</MGText>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mg-library",
-    "version": "1.0.672",
+    "version": "1.0.675",
     "description": "",
     "main": "index.js",
     "scripts": {