mg-library 1.0.798 → 1.0.800
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/blocks.js +98 -91
- package/components.js +46 -4
- package/package.json +1 -1
package/blocks.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useCallback, useState, useEffect } from 'react';
|
|
2
|
+
import { KeyboardAvoidingView, Platform } from "react-native";
|
|
2
3
|
import { useForm, Controller } from 'react-hook-form';
|
|
3
4
|
import { View, ActivityIndicator, Pressable, Image, FlatList, Keyboard, Dimensions, StyleSheet } from 'react-native';
|
|
4
5
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
@@ -116,7 +117,7 @@ export function MGBenefits(props) {
|
|
|
116
117
|
subTitle = props.subTitle;
|
|
117
118
|
|
|
118
119
|
let listHeaderComponent = (
|
|
119
|
-
<View style={{marginBottom: 10}}>
|
|
120
|
+
<View style={{ marginBottom: 10 }}>
|
|
120
121
|
<MGSessionHeader module={subTitle} person={props.person} colors={props.colors} />
|
|
121
122
|
{props.beforeBenefits != undefined &&
|
|
122
123
|
<>
|
|
@@ -222,98 +223,104 @@ export function MGLogin(props) {
|
|
|
222
223
|
|
|
223
224
|
return (
|
|
224
225
|
<View style={{ flex: 1, backgroundColor: 'white' }}>
|
|
225
|
-
<
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
226
|
+
<KeyboardAvoidingView
|
|
227
|
+
style={{ flex: 1 }}
|
|
228
|
+
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
229
|
+
keyboardVerticalOffset={0}
|
|
230
|
+
>
|
|
231
|
+
<Box style={[mgFunctionsLib.safeAreaViewStyleSheet(insets).safeAreaView, { display: 'flex', flexDirection: 'column', flex: 1 }]}>
|
|
232
|
+
<View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center' }}>
|
|
233
|
+
{isKeyboardVisible &&
|
|
234
|
+
<View style={{ flexDirection: 'column', alignItems: 'center', marginBottom: 10 }}>
|
|
235
|
+
<>
|
|
236
|
+
<Image
|
|
237
|
+
source={require('./assets/clubonline.png')}
|
|
238
|
+
style={{ width: 180, height: 90 }} />
|
|
239
|
+
</>
|
|
240
|
+
</View>
|
|
241
|
+
}
|
|
242
|
+
{!isKeyboardVisible &&
|
|
243
|
+
<View style={{ flexDirection: 'column', alignItems: 'center', marginBottom: 100 }}>
|
|
244
|
+
<>
|
|
245
|
+
<Image
|
|
246
|
+
source={require('./assets/clubonline.png')}
|
|
247
|
+
style={{ width: 300, height: 150 }} />
|
|
248
|
+
<View style={{ marginHorizontal: 10, flexDirection: 'column', alignItems: 'center' }}>
|
|
249
|
+
<MGText style={{ alignSelf: 'center', textAlign: 'center' }} category='h6'>{props.appDescription}</MGText>
|
|
250
|
+
<MGText style={{ alignSelf: 'center' }} category='p2'>{props.appVersion}</MGText>
|
|
251
|
+
</View>
|
|
252
|
+
</>
|
|
253
|
+
</View>
|
|
254
|
+
}
|
|
255
|
+
<View>
|
|
256
|
+
<MGCard style={{ flexDirection: 'column', justifyContent: 'center', alignContent: 'center', marginLeft: 30, marginRight: 30 }}
|
|
257
|
+
header={cardHeader}
|
|
258
|
+
footer={cardFooter}>
|
|
259
|
+
<Controller
|
|
260
|
+
control={control}
|
|
261
|
+
rules={{ maxLength: 50 }}
|
|
262
|
+
render={({ field: { onChange, value } }) => (
|
|
263
|
+
<Input size="lg"
|
|
264
|
+
variant="outline"
|
|
265
|
+
px="$3"
|
|
266
|
+
rounded="$md"
|
|
267
|
+
bg="$white"
|
|
268
|
+
borderColor="$gray300"
|
|
269
|
+
mb={10}>
|
|
270
|
+
<InputField
|
|
271
|
+
placeholder={mgFunctionsLib.i18nString('userName', props.language)}
|
|
272
|
+
placeholderTextColor="$gray300"
|
|
273
|
+
value={value}
|
|
274
|
+
onChangeText={onChange}
|
|
275
|
+
autoCapitalize="none"
|
|
276
|
+
/>
|
|
277
|
+
</Input>
|
|
278
|
+
)}
|
|
279
|
+
name="userName" />
|
|
280
|
+
<Controller
|
|
281
|
+
control={control}
|
|
282
|
+
rules={{ maxLength: 50 }}
|
|
283
|
+
render={({ field: { onChange, value } }) => (
|
|
284
|
+
<Input
|
|
285
|
+
size="lg"
|
|
286
|
+
variant="outline"
|
|
287
|
+
px="$3"
|
|
288
|
+
rounded="$md"
|
|
289
|
+
bg="$white"
|
|
290
|
+
borderColor="$gray300"
|
|
291
|
+
>
|
|
292
|
+
<InputField
|
|
293
|
+
placeholder={isKeyboardNumericForPassword ? mgFunctionsLib.i18nString('password', props.language) : mgFunctionsLib.i18nString('passwordAlphanumeric', props.language)}
|
|
294
|
+
placeholderTextColor="$gray300"
|
|
295
|
+
value={value}
|
|
296
|
+
onChangeText={onChange}
|
|
297
|
+
secureTextEntry
|
|
298
|
+
maxLength={12}
|
|
299
|
+
keyboardType={isKeyboardNumericForPassword ? "numeric" : "default"}
|
|
300
|
+
autoCapitalize="none"
|
|
301
|
+
autoCorrect={false}
|
|
302
|
+
returnKeyType="done"
|
|
303
|
+
/>
|
|
304
|
+
</Input>
|
|
305
|
+
)}
|
|
306
|
+
name="password" />
|
|
307
|
+
</MGCard>
|
|
308
|
+
<View style={{ flex: 1, alignItems: 'center' }}>
|
|
309
|
+
<Button
|
|
310
|
+
action="primary"
|
|
311
|
+
variant="outline"
|
|
312
|
+
onPress={() => {
|
|
313
|
+
setIsKeyboardNumericForPassword(!isKeyboardNumericForPassword)
|
|
314
|
+
}}
|
|
315
|
+
>
|
|
316
|
+
<Icon as={MaterialCommunityIcons} name="keyboard" color="$primary500" />
|
|
317
|
+
</Button>
|
|
318
|
+
</View>
|
|
312
319
|
</View>
|
|
313
320
|
</View>
|
|
314
|
-
</
|
|
315
|
-
</
|
|
316
|
-
</View>
|
|
321
|
+
</Box>
|
|
322
|
+
</KeyboardAvoidingView>
|
|
323
|
+
</View >
|
|
317
324
|
);
|
|
318
325
|
|
|
319
326
|
}
|
package/components.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useRef, useState } from "react";
|
|
2
2
|
import { Platform, Animated } from "react-native";
|
|
3
|
-
import { Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverBackdrop, PopoverContent, PopoverArrow, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
|
|
3
|
+
import { AlertDialog, AlertDialogBackdrop, AlertDialogContent, AlertDialogBody, AlertDialogFooter, Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverBackdrop, PopoverContent, PopoverArrow, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
|
|
4
4
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
5
5
|
|
|
6
6
|
import * as mgFunctionsLib from './functions.js';
|
|
@@ -167,7 +167,7 @@ export function MGButton({
|
|
|
167
167
|
);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
export function MGPopover(props) {
|
|
170
|
+
/* export function MGPopover(props) {
|
|
171
171
|
const { title, icon, language, callback } = props;
|
|
172
172
|
const [open, setOpen] = useState(false);
|
|
173
173
|
|
|
@@ -219,6 +219,48 @@ export function MGPopover(props) {
|
|
|
219
219
|
</PopoverContent>
|
|
220
220
|
</Popover>
|
|
221
221
|
);
|
|
222
|
+
} */
|
|
223
|
+
|
|
224
|
+
export function MGPopover(props) {
|
|
225
|
+
const { title, icon, language, callback } = props;
|
|
226
|
+
const [open, setOpen] = useState(false);
|
|
227
|
+
const handleConfirm = async () => {
|
|
228
|
+
try { await callback?.(); } finally { setOpen(false); }
|
|
229
|
+
};
|
|
230
|
+
return (
|
|
231
|
+
<>
|
|
232
|
+
<Button
|
|
233
|
+
action="primary"
|
|
234
|
+
variant="solid"
|
|
235
|
+
h={50}
|
|
236
|
+
onPress={() => setOpen(true)}
|
|
237
|
+
>
|
|
238
|
+
{icon ? <Icon as={MaterialCommunityIcons} name={icon} mr="$2" color="$white" /> : null}
|
|
239
|
+
<ButtonText>{title}</ButtonText>
|
|
240
|
+
</Button>
|
|
241
|
+
<AlertDialog isOpen={open} onClose={() => setOpen(false)}>
|
|
242
|
+
<AlertDialogBackdrop />
|
|
243
|
+
<AlertDialogContent>
|
|
244
|
+
<AlertDialogBody>
|
|
245
|
+
<Box alignItems="center">
|
|
246
|
+
<Icon as={MaterialCommunityIcons} name="alert-outline" size={48} mb="$3" />
|
|
247
|
+
<MGText textAlign="center">
|
|
248
|
+
{mgFunctionsLib.i18nString('confirm', language)}?
|
|
249
|
+
</MGText>
|
|
250
|
+
</Box>
|
|
251
|
+
</AlertDialogBody>
|
|
252
|
+
<AlertDialogFooter>
|
|
253
|
+
<Button onPress={handleConfirm}>
|
|
254
|
+
<ButtonText>{mgFunctionsLib.i18nString('yes', language)}</ButtonText>
|
|
255
|
+
</Button>
|
|
256
|
+
<Button variant="outline" onPress={() => setOpen(false)}>
|
|
257
|
+
<ButtonText>{mgFunctionsLib.i18nString('no', language)}</ButtonText>
|
|
258
|
+
</Button>
|
|
259
|
+
</AlertDialogFooter>
|
|
260
|
+
</AlertDialogContent>
|
|
261
|
+
</AlertDialog>
|
|
262
|
+
</>
|
|
263
|
+
);
|
|
222
264
|
}
|
|
223
265
|
|
|
224
266
|
export function MGDivider({ style, ...props }) {
|
|
@@ -227,9 +269,9 @@ export function MGDivider({ style, ...props }) {
|
|
|
227
269
|
h="$0.55"
|
|
228
270
|
flexGrow={1}
|
|
229
271
|
alignSelf="stretch"
|
|
230
|
-
style={style}
|
|
272
|
+
style={style}
|
|
231
273
|
{...props}
|
|
232
|
-
bg="$gray400"
|
|
274
|
+
bg="$gray400"
|
|
233
275
|
/>
|
|
234
276
|
);
|
|
235
277
|
}
|