@controleonline/ui-default 1.0.265 → 1.0.266
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/package.json +1 -1
- package/src/react/components/table/DefaultDebug.js +234 -233
- package/src/react/components/table/DefaultTable.js +429 -396
- package/src/react/components/table/DefaultTable.styles.js +17 -5
- package/src/react/components/table/DefaultTableControls.js +205 -208
- package/src/react/components/table/DefaultTableRows.js +344 -340
- package/src/react/components/table/useDefaultTableTheme.js +52 -58
- package/src/tests/react/components/table/DefaultTable.test.js +376 -241
package/package.json
CHANGED
|
@@ -1,233 +1,234 @@
|
|
|
1
|
-
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
|
-
import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
|
3
|
-
import Icon from 'react-native-vector-icons/Feather';
|
|
4
|
-
import { useStore } from '@store';
|
|
5
|
-
import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
|
|
6
|
-
import { normalizeText } from '../inputs/defaultInputUtils';
|
|
7
|
-
import styles from './DefaultTable.styles';
|
|
8
|
-
import useDefaultTableTheme from './useDefaultTableTheme';
|
|
9
|
-
|
|
10
|
-
const isObject = value =>
|
|
11
|
-
value !== null && typeof value === 'object' && !Array.isArray(value);
|
|
12
|
-
|
|
13
|
-
const formatDebugValue = value => {
|
|
14
|
-
if (value === undefined) return '';
|
|
15
|
-
if (typeof value === 'string') return value;
|
|
16
|
-
|
|
17
|
-
try {
|
|
18
|
-
return JSON.stringify(value, null, 2);
|
|
19
|
-
} catch (error) {
|
|
20
|
-
return normalizeText(value);
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
const copyTextToClipboard = async text => {
|
|
25
|
-
const normalizedText = normalizeText(text);
|
|
26
|
-
if (!normalizedText) return false;
|
|
27
|
-
|
|
28
|
-
if (
|
|
29
|
-
typeof navigator !== 'undefined' &&
|
|
30
|
-
navigator.clipboard &&
|
|
31
|
-
typeof navigator.clipboard.writeText === 'function'
|
|
32
|
-
) {
|
|
33
|
-
await navigator.clipboard.writeText(normalizedText);
|
|
34
|
-
return true;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
return false;
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const DebugCopyButton = ({ borderColor, color, onPress }) => (
|
|
41
|
-
<TouchableOpacity
|
|
42
|
-
style={[styles.debugCopyButton, { borderColor }]}
|
|
43
|
-
activeOpacity={0.82}
|
|
44
|
-
onPress={onPress}
|
|
45
|
-
>
|
|
46
|
-
<Icon name="copy" size={13} color={color} />
|
|
47
|
-
<Text style={[styles.debugCopyButtonText, { color }]}>Copiar</Text>
|
|
48
|
-
</TouchableOpacity>
|
|
49
|
-
);
|
|
50
|
-
|
|
51
|
-
const DebugSection = ({ borderColor, children, copyText, onCopy, textColor, title }) => (
|
|
52
|
-
<>
|
|
53
|
-
<View style={styles.debugSectionHeader}>
|
|
54
|
-
<Text style={[styles.debugSectionTitle, { color: textColor }]}>{title}</Text>
|
|
55
|
-
<DebugCopyButton
|
|
56
|
-
borderColor={borderColor}
|
|
57
|
-
color={textColor}
|
|
58
|
-
onPress={() => onCopy(copyText)}
|
|
59
|
-
/>
|
|
60
|
-
</View>
|
|
61
|
-
<Text selectable style={[styles.debugCodeBlock, { color: textColor, borderColor }]}>
|
|
62
|
-
{children}
|
|
63
|
-
</Text>
|
|
64
|
-
</>
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
const DefaultDebug = ({
|
|
68
|
-
storeName,
|
|
69
|
-
}) => {
|
|
70
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
71
|
-
const store = useStore(storeName);
|
|
72
|
-
const configs = store?.getters?.configs || {};
|
|
73
|
-
const { showError, showSuccess } = useMessage();
|
|
74
|
-
const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
|
|
75
|
-
|
|
76
|
-
const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
|
|
77
|
-
const debugQuery = normalizeText(resolvedDebug?.query);
|
|
78
|
-
const debugFilledQuery = normalizeText(
|
|
79
|
-
resolvedDebug?.filledQuery || resolvedDebug?.interpolatedQuery,
|
|
80
|
-
);
|
|
81
|
-
const hasDebugQuery = debugQuery !== '';
|
|
82
|
-
const debugParameters = isObject(resolvedDebug?.parameters)
|
|
83
|
-
? resolvedDebug.parameters
|
|
84
|
-
: configs.debugFallbackParameters || null;
|
|
85
|
-
const debugParametersText = useMemo(
|
|
86
|
-
() => formatDebugValue(debugParameters),
|
|
87
|
-
[debugParameters],
|
|
88
|
-
);
|
|
89
|
-
const debugCopyText = useMemo(
|
|
90
|
-
() =>
|
|
91
|
-
[
|
|
92
|
-
'Query:',
|
|
93
|
-
debugQuery,
|
|
94
|
-
'',
|
|
95
|
-
'Parameters:',
|
|
96
|
-
debugParametersText,
|
|
97
|
-
'',
|
|
98
|
-
'Filled query:',
|
|
99
|
-
debugFilledQuery,
|
|
100
|
-
].join('\n'),
|
|
101
|
-
[debugFilledQuery, debugParametersText, debugQuery],
|
|
102
|
-
);
|
|
103
|
-
|
|
104
|
-
const requestCopyText = useCallback(
|
|
105
|
-
text =>
|
|
106
|
-
copyTextToClipboard(text)
|
|
107
|
-
.then(copied => {
|
|
108
|
-
if (copied) {
|
|
109
|
-
showSuccess?.('Copiado');
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
showError?.('Nao foi possivel copiar automaticamente.');
|
|
114
|
-
})
|
|
115
|
-
.catch(() => {
|
|
116
|
-
showError?.('Nao foi possivel copiar automaticamente.');
|
|
117
|
-
}),
|
|
118
|
-
[showError, showSuccess],
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
if (!hasDebugQuery) {
|
|
122
|
-
return null;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
const {
|
|
126
|
-
backgroundColor,
|
|
127
|
-
borderColor,
|
|
128
|
-
closeIconColor,
|
|
129
|
-
headerTextColor,
|
|
130
|
-
overlayColor,
|
|
131
|
-
textColor,
|
|
132
|
-
} = modalColors;
|
|
133
|
-
const {
|
|
134
|
-
backgroundColor: buttonBackgroundColor,
|
|
135
|
-
borderColor: buttonBorderColor,
|
|
136
|
-
iconColor,
|
|
137
|
-
pressedBackgroundColor,
|
|
138
|
-
pressedBorderColor,
|
|
139
|
-
pressedIconColor,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
:
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
1
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
|
+
import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
|
3
|
+
import Icon from 'react-native-vector-icons/Feather';
|
|
4
|
+
import { useStore } from '@store';
|
|
5
|
+
import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
|
|
6
|
+
import { normalizeText } from '../inputs/defaultInputUtils';
|
|
7
|
+
import styles from './DefaultTable.styles';
|
|
8
|
+
import useDefaultTableTheme from './useDefaultTableTheme';
|
|
9
|
+
|
|
10
|
+
const isObject = value =>
|
|
11
|
+
value !== null && typeof value === 'object' && !Array.isArray(value);
|
|
12
|
+
|
|
13
|
+
const formatDebugValue = value => {
|
|
14
|
+
if (value === undefined) return '';
|
|
15
|
+
if (typeof value === 'string') return value;
|
|
16
|
+
|
|
17
|
+
try {
|
|
18
|
+
return JSON.stringify(value, null, 2);
|
|
19
|
+
} catch (error) {
|
|
20
|
+
return normalizeText(value);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const copyTextToClipboard = async text => {
|
|
25
|
+
const normalizedText = normalizeText(text);
|
|
26
|
+
if (!normalizedText) return false;
|
|
27
|
+
|
|
28
|
+
if (
|
|
29
|
+
typeof navigator !== 'undefined' &&
|
|
30
|
+
navigator.clipboard &&
|
|
31
|
+
typeof navigator.clipboard.writeText === 'function'
|
|
32
|
+
) {
|
|
33
|
+
await navigator.clipboard.writeText(normalizedText);
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return false;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const DebugCopyButton = ({ borderColor, color, onPress }) => (
|
|
41
|
+
<TouchableOpacity
|
|
42
|
+
style={[styles.debugCopyButton, { borderColor }]}
|
|
43
|
+
activeOpacity={0.82}
|
|
44
|
+
onPress={onPress}
|
|
45
|
+
>
|
|
46
|
+
<Icon name="copy" size={13} color={color} />
|
|
47
|
+
<Text style={[styles.debugCopyButtonText, { color }]}>Copiar</Text>
|
|
48
|
+
</TouchableOpacity>
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
const DebugSection = ({ borderColor, children, copyText, onCopy, textColor, title }) => (
|
|
52
|
+
<>
|
|
53
|
+
<View style={styles.debugSectionHeader}>
|
|
54
|
+
<Text style={[styles.debugSectionTitle, { color: textColor }]}>{title}</Text>
|
|
55
|
+
<DebugCopyButton
|
|
56
|
+
borderColor={borderColor}
|
|
57
|
+
color={textColor}
|
|
58
|
+
onPress={() => onCopy(copyText)}
|
|
59
|
+
/>
|
|
60
|
+
</View>
|
|
61
|
+
<Text selectable style={[styles.debugCodeBlock, { color: textColor, borderColor }]}>
|
|
62
|
+
{children}
|
|
63
|
+
</Text>
|
|
64
|
+
</>
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
const DefaultDebug = ({
|
|
68
|
+
storeName,
|
|
69
|
+
}) => {
|
|
70
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
71
|
+
const store = useStore(storeName);
|
|
72
|
+
const configs = store?.getters?.configs || {};
|
|
73
|
+
const { showError, showSuccess } = useMessage();
|
|
74
|
+
const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
|
|
75
|
+
|
|
76
|
+
const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
|
|
77
|
+
const debugQuery = normalizeText(resolvedDebug?.query);
|
|
78
|
+
const debugFilledQuery = normalizeText(
|
|
79
|
+
resolvedDebug?.filledQuery || resolvedDebug?.interpolatedQuery,
|
|
80
|
+
);
|
|
81
|
+
const hasDebugQuery = debugQuery !== '';
|
|
82
|
+
const debugParameters = isObject(resolvedDebug?.parameters)
|
|
83
|
+
? resolvedDebug.parameters
|
|
84
|
+
: configs.debugFallbackParameters || null;
|
|
85
|
+
const debugParametersText = useMemo(
|
|
86
|
+
() => formatDebugValue(debugParameters),
|
|
87
|
+
[debugParameters],
|
|
88
|
+
);
|
|
89
|
+
const debugCopyText = useMemo(
|
|
90
|
+
() =>
|
|
91
|
+
[
|
|
92
|
+
'Query:',
|
|
93
|
+
debugQuery,
|
|
94
|
+
'',
|
|
95
|
+
'Parameters:',
|
|
96
|
+
debugParametersText,
|
|
97
|
+
'',
|
|
98
|
+
'Filled query:',
|
|
99
|
+
debugFilledQuery,
|
|
100
|
+
].join('\n'),
|
|
101
|
+
[debugFilledQuery, debugParametersText, debugQuery],
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
const requestCopyText = useCallback(
|
|
105
|
+
text =>
|
|
106
|
+
copyTextToClipboard(text)
|
|
107
|
+
.then(copied => {
|
|
108
|
+
if (copied) {
|
|
109
|
+
showSuccess?.('Copiado');
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
showError?.('Nao foi possivel copiar automaticamente.');
|
|
114
|
+
})
|
|
115
|
+
.catch(() => {
|
|
116
|
+
showError?.('Nao foi possivel copiar automaticamente.');
|
|
117
|
+
}),
|
|
118
|
+
[showError, showSuccess],
|
|
119
|
+
);
|
|
120
|
+
|
|
121
|
+
if (!hasDebugQuery) {
|
|
122
|
+
return null;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const {
|
|
126
|
+
backgroundColor,
|
|
127
|
+
borderColor,
|
|
128
|
+
closeIconColor,
|
|
129
|
+
headerTextColor,
|
|
130
|
+
overlayColor,
|
|
131
|
+
textColor,
|
|
132
|
+
} = modalColors;
|
|
133
|
+
const {
|
|
134
|
+
backgroundColor: buttonBackgroundColor,
|
|
135
|
+
borderColor: buttonBorderColor,
|
|
136
|
+
iconColor,
|
|
137
|
+
pressedBackgroundColor,
|
|
138
|
+
pressedBorderColor,
|
|
139
|
+
pressedIconColor,
|
|
140
|
+
textColor: buttonTextColor,
|
|
141
|
+
} = tableButtonColors;
|
|
142
|
+
|
|
143
|
+
return (
|
|
144
|
+
<>
|
|
145
|
+
<TouchableOpacity
|
|
146
|
+
accessibilityLabel="Debug query"
|
|
147
|
+
accessibilityRole="button"
|
|
148
|
+
style={[
|
|
149
|
+
styles.toolbarButton,
|
|
150
|
+
{ borderColor: buttonBorderColor, backgroundColor: buttonBackgroundColor },
|
|
151
|
+
isOpen
|
|
152
|
+
? { backgroundColor: pressedBackgroundColor, borderColor: pressedBorderColor }
|
|
153
|
+
: null,
|
|
154
|
+
]}
|
|
155
|
+
activeOpacity={0.82}
|
|
156
|
+
onPress={() => setIsOpen(true)}
|
|
157
|
+
>
|
|
158
|
+
<Icon name="code" size={14} color={buttonTextColor} />
|
|
159
|
+
</TouchableOpacity>
|
|
160
|
+
|
|
161
|
+
{isOpen ? (
|
|
162
|
+
<Modal visible transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
|
|
163
|
+
<View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
|
|
164
|
+
<View style={[styles.modalCard, styles.debugModalCard, { borderColor, backgroundColor }]}>
|
|
165
|
+
<View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
|
|
166
|
+
<Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
|
|
167
|
+
Debug query
|
|
168
|
+
</Text>
|
|
169
|
+
<TouchableOpacity
|
|
170
|
+
style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
|
|
171
|
+
activeOpacity={0.82}
|
|
172
|
+
onPress={() => setIsOpen(false)}
|
|
173
|
+
>
|
|
174
|
+
<Icon name="x" size={16} color={closeIconColor} />
|
|
175
|
+
</TouchableOpacity>
|
|
176
|
+
</View>
|
|
177
|
+
|
|
178
|
+
<ScrollView style={styles.debugModalBody} contentContainerStyle={styles.debugModalContent}>
|
|
179
|
+
<DebugSection
|
|
180
|
+
borderColor={borderColor}
|
|
181
|
+
copyText={debugQuery}
|
|
182
|
+
onCopy={requestCopyText}
|
|
183
|
+
textColor={textColor}
|
|
184
|
+
title="Query"
|
|
185
|
+
>
|
|
186
|
+
{debugQuery}
|
|
187
|
+
</DebugSection>
|
|
188
|
+
|
|
189
|
+
<DebugSection
|
|
190
|
+
borderColor={borderColor}
|
|
191
|
+
copyText={debugParametersText}
|
|
192
|
+
onCopy={requestCopyText}
|
|
193
|
+
textColor={textColor}
|
|
194
|
+
title="Parametros"
|
|
195
|
+
>
|
|
196
|
+
{debugParametersText}
|
|
197
|
+
</DebugSection>
|
|
198
|
+
|
|
199
|
+
<DebugSection
|
|
200
|
+
borderColor={borderColor}
|
|
201
|
+
copyText={debugFilledQuery}
|
|
202
|
+
onCopy={requestCopyText}
|
|
203
|
+
textColor={textColor}
|
|
204
|
+
title="Query preenchida"
|
|
205
|
+
>
|
|
206
|
+
{debugFilledQuery}
|
|
207
|
+
</DebugSection>
|
|
208
|
+
</ScrollView>
|
|
209
|
+
|
|
210
|
+
<View style={[styles.modalActions, { borderTopColor: borderColor }]}>
|
|
211
|
+
<TouchableOpacity
|
|
212
|
+
style={[styles.secondaryButton, { borderColor }]}
|
|
213
|
+
activeOpacity={0.82}
|
|
214
|
+
onPress={() => requestCopyText(debugCopyText)}
|
|
215
|
+
>
|
|
216
|
+
<Text style={[styles.secondaryButtonText, { color: textColor }]}>Copiar tudo</Text>
|
|
217
|
+
</TouchableOpacity>
|
|
218
|
+
<TouchableOpacity
|
|
219
|
+
style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
|
|
220
|
+
activeOpacity={0.82}
|
|
221
|
+
onPress={() => setIsOpen(false)}
|
|
222
|
+
>
|
|
223
|
+
<Text style={styles.primaryButtonText}>Fechar</Text>
|
|
224
|
+
</TouchableOpacity>
|
|
225
|
+
</View>
|
|
226
|
+
</View>
|
|
227
|
+
</View>
|
|
228
|
+
</Modal>
|
|
229
|
+
) : null}
|
|
230
|
+
</>
|
|
231
|
+
);
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
export default DefaultDebug;
|