ikualo-ui-kit-mobile 1.4.1 → 1.4.2

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 (3) hide show
  1. package/assets/styles/elements/cards.ts +2 -0
  2. package/package.json +1 -1
  3. package/src/elements/dialogs/DialogGeneral.tsx +54 -27
package/assets/styles/elements/cards.ts CHANGED
@@ -15,6 +15,8 @@ export const getStylesCards = (theme: ITheme) =>
15
15
  backgroundColor: theme.colors.background_card,
16
16
  paddingTop: 16,
17
17
  paddingBottom: 16,
18
+ paddingRight: 16,
19
+ borderRadius: 8,
18
20
  },
19
21
  'card-interactive-icon': {
20
22
  marginHorizontal: 16,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ikualo-ui-kit-mobile",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "main": "src/index.ts",
5
5
  "scripts": {
6
6
  "start": "expo start",
package/src/elements/dialogs/DialogGeneral.tsx CHANGED
@@ -1,7 +1,15 @@
1
1
  import { Text, Button, Icon } from 'react-native-paper';
2
2
  import { BtnOutlined, BtnContained } from '../../';
3
3
  import { getStylesDialog } from '../../../assets/styles/elements/dialog';
4
- import { Keyboard, StyleProp, TextStyle, TouchableWithoutFeedback, View, ViewStyle, Modal } from 'react-native';
4
+ import {
5
+ Keyboard,
6
+ StyleProp,
7
+ TextStyle,
8
+ TouchableWithoutFeedback,
9
+ View,
10
+ ViewStyle,
11
+ Modal,
12
+ } from 'react-native';
5
13
  import React from 'react';
6
14
  import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
7
15
  import useStore from '../../store';
@@ -29,30 +37,44 @@ export const DialogGeneral = (props: IFDialogIcon) => {
29
37
  const theme = useStore().theme;
30
38
  const stylesDialog = getStylesDialog(theme);
31
39
 
32
- const { isLoading, isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm, textStyle, additionalTextStyle, additionalText, isDisabled, children, styleBtnContainer, showClose } = props;
40
+ const {
41
+ isLoading,
42
+ isVisible,
43
+ title,
44
+ text,
45
+ textCancel,
46
+ textOk,
47
+ icon,
48
+ onDismiss,
49
+ onConfirm,
50
+ textStyle,
51
+ additionalTextStyle,
52
+ additionalText,
53
+ isDisabled,
54
+ children,
55
+ styleBtnContainer,
56
+ showClose,
57
+ } = props;
33
58
  const icons = {
34
59
  error: <MaterialIcons name="delete-forever" size={24} color={theme.colors.error} />,
35
60
  warning: <FontAwesome name="warning" size={24} color={theme.colors.warning} />,
36
61
  info: <MaterialIcons name="info-outline" size={24} color={theme.colors.info} />,
37
- success: <MaterialIcons name="check-circle" size={24} color={theme.colors.success} />
38
- }
39
- const IconDelete = <View style={[stylesDialog['dialog-icon'], icon ? stylesDialog[`dialog-icon--${icon}`] : null]}>
40
- {icon && icons[icon]}
41
- </View>
62
+ success: <MaterialIcons name="check-circle" size={24} color={theme.colors.success} />,
63
+ };
64
+ const IconDelete = (
65
+ <View style={[stylesDialog['dialog-icon'], icon ? stylesDialog[`dialog-icon--${icon}`] : null]}>
66
+ {icon && icons[icon]}
67
+ </View>
68
+ );
42
69
  const handleDismissKeyboard = () => {
43
70
  Keyboard.dismiss();
44
71
  };
45
72
  return (
46
- <Modal
47
- visible={isVisible}
48
- transparent={true}
49
- animationType="fade"
50
- onRequestClose={onDismiss}
51
- >
73
+ <Modal visible={isVisible} transparent={true} animationType="fade" onRequestClose={onDismiss}>
52
74
  <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
53
75
  <View style={stylesDialog.modalBackground}>
54
76
  <View style={stylesDialog.dialog}>
55
- {showClose &&
77
+ {showClose && (
56
78
  <Button onPress={onDismiss} style={stylesDialog['dialog-general-close']}>
57
79
  <Icon
58
80
  source="close"
@@ -60,27 +82,32 @@ export const DialogGeneral = (props: IFDialogIcon) => {
60
82
  size={stylesDialog['dialog-down-close-icon'].width}
61
83
  />
62
84
  </Button>
63
- }
64
- {icon && (
65
- <View style={stylesDialog['dialog-container-icon']}>
66
- {IconDelete}
67
- </View>
68
85
  )}
69
- <Text style={[stylesDialog['dialog-title'], !text && !children && stylesDialog['dialog-only-title']]}>{title}</Text>
70
- <Text style={textStyle || stylesDialog['dialog-text']}>
71
- {text}
86
+ {icon && <View style={stylesDialog['dialog-container-icon']}>{IconDelete}</View>}
87
+ <Text
88
+ style={[
89
+ stylesDialog['dialog-title'],
90
+ { textAlign: 'center' },
91
+ !text && !children && stylesDialog['dialog-only-title'],
92
+ ]}
93
+ >
94
+ {title}
72
95
  </Text>
96
+ <Text style={textStyle || stylesDialog['dialog-text']}>{text}</Text>
73
97
  {children}
74
98
  <View style={stylesDialog['dialog-actions']}>
75
99
  {textCancel && (
76
- <BtnOutlined color={icon === 'error' ? 'error' : 'primary'}
77
- size='sm'
78
- onPress={onDismiss} text={textCancel} />
100
+ <BtnOutlined
101
+ color={icon === 'error' ? 'error' : 'primary'}
102
+ size="sm"
103
+ onPress={onDismiss}
104
+ text={textCancel}
105
+ />
79
106
  )}
80
107
  {textOk && (
81
108
  <BtnContained
82
109
  color={icon === 'error' ? 'error' : 'primary'}
83
- size='sm'
110
+ size="sm"
84
111
  isLoading={isLoading}
85
112
  onPress={onConfirm}
86
113
  text={textOk}
@@ -93,4 +120,4 @@ export const DialogGeneral = (props: IFDialogIcon) => {
93
120
  </TouchableWithoutFeedback>
94
121
  </Modal>
95
122
  );
96
- };
123
+ };