@controleonline/ui-customers 1.0.81 → 1.0.83

package/src/react/components/tabs/UsersTab.styles.js

@@ -1,260 +1,260 @@
-export const inlineStyle_174_6 = {
-  justifyContent: 'flex-end',
-};
-
-export const inlineStyle_175_12 = {
-  backgroundColor: '#fff',
-  borderTopLeftRadius: 24,
-  borderTopRightRadius: 24,
-  maxHeight: '80%',
-  width: '100%',
-  shadowColor: '#000',
-
-  shadowOffset: {
-    width: 0,
-    height: -4,
-  },
-
-  shadowOpacity: 0.1,
-  shadowRadius: 12,
-  elevation: 10,
-};
-
-export const inlineStyle_188_14 = {
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingHorizontal: 24,
-  paddingVertical: 20,
-  borderBottomWidth: 1,
-  borderBottomColor: '#F1F5F9',
-};
-
-export const inlineStyle_197_16 = {
-  fontSize: 20,
-  fontWeight: '700',
-  color: '#0F172A',
-};
-
-export const inlineStyle_200_49 = {
-  width: 32,
-  height: 32,
-  borderRadius: 16,
-  backgroundColor: '#F1F5F9',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_208_10 = {
-  padding: 24,
-};
-
-export const inlineStyle_213_20 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_214_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_216_18 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  fontSize: 16,
-  backgroundColor: '#e9ecef',
-  color: '#6c757d',
-};
-
-export const inlineStyle_224_20 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_225_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_226_22 = {
-  position: 'relative',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_228_20 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  paddingRight: 48,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_239_20 = {
-  position: 'absolute',
-  right: 14,
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_248_20 = {
-  marginBottom: 24,
-};
-
-export const inlineStyle_249_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_250_22 = {
-  position: 'relative',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_252_20 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  paddingRight: 48,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_263_20 = {
-  position: 'absolute',
-  right: 14,
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_275_20 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_276_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_278_18 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_288_20 = {
-  marginBottom: 20,
-};
-
-export const inlineStyle_289_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_290_22 = {
-  position: 'relative',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_292_20 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  paddingRight: 48,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_303_20 = {
-  position: 'absolute',
-  right: 14,
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_312_20 = {
-  marginBottom: 24,
-};
-
-export const inlineStyle_313_22 = {
-  fontSize: 16,
-  fontWeight: '600',
-  color: '#212529',
-  marginBottom: 8,
-};
-
-export const inlineStyle_314_22 = {
-  position: 'relative',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_316_20 = {
-  borderWidth: 1,
-  borderColor: '#e9ecef',
-  borderRadius: 12,
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  paddingRight: 48,
-  fontSize: 16,
-  backgroundColor: '#f8f9fa',
-};
-
-export const inlineStyle_327_20 = {
-  position: 'absolute',
-  right: 14,
-  alignSelf: 'stretch',
-  justifyContent: 'center',
-};
-
-export const inlineStyle_339_16 = {
-  flexDirection: 'row',
-  gap: 12,
-  paddingHorizontal: 24,
-  paddingTop: 12,
-  paddingBottom: 24,
-  borderTopWidth: 1,
-  borderTopColor: '#F1F5F9',
-};
-
-export const inlineStyle_341_14 = {
-  flex: 1,
-  paddingVertical: 14,
-  borderRadius: 12,
-  borderWidth: 1,
-  borderColor: '#64748B',
-  alignItems: 'center',
-};
-
-export const inlineStyle_348_20 = {
-  flex: 1,
-  paddingVertical: 14,
-  borderRadius: 12,
-  backgroundColor: '#0F172A',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
+export const inlineStyle_174_6 = {
+  justifyContent: 'flex-end',
+};
+
+export const inlineStyle_175_12 = {
+  backgroundColor: '#fff',
+  borderTopLeftRadius: 24,
+  borderTopRightRadius: 24,
+  maxHeight: '80%',
+  width: '100%',
+  shadowColor: '#000',
+
+  shadowOffset: {
+    width: 0,
+    height: -4,
+  },
+
+  shadowOpacity: 0.1,
+  shadowRadius: 12,
+  elevation: 10,
+};
+
+export const inlineStyle_188_14 = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: 24,
+  paddingVertical: 20,
+  borderBottomWidth: 1,
+  borderBottomColor: '#F1F5F9',
+};
+
+export const inlineStyle_197_16 = {
+  fontSize: 20,
+  fontWeight: '700',
+  color: '#0F172A',
+};
+
+export const inlineStyle_200_49 = {
+  width: 32,
+  height: 32,
+  borderRadius: 16,
+  backgroundColor: '#F1F5F9',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_208_10 = {
+  padding: 24,
+};
+
+export const inlineStyle_213_20 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_214_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_216_18 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#e9ecef',
+  color: '#6c757d',
+};
+
+export const inlineStyle_224_20 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_225_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_226_22 = {
+  position: 'relative',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_228_20 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  paddingRight: 48,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_239_20 = {
+  position: 'absolute',
+  right: 14,
+  alignSelf: 'stretch',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_248_20 = {
+  marginBottom: 24,
+};
+
+export const inlineStyle_249_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_250_22 = {
+  position: 'relative',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_252_20 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  paddingRight: 48,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_263_20 = {
+  position: 'absolute',
+  right: 14,
+  alignSelf: 'stretch',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_275_20 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_276_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_278_18 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_288_20 = {
+  marginBottom: 20,
+};
+
+export const inlineStyle_289_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_290_22 = {
+  position: 'relative',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_292_20 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  paddingRight: 48,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_303_20 = {
+  position: 'absolute',
+  right: 14,
+  alignSelf: 'stretch',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_312_20 = {
+  marginBottom: 24,
+};
+
+export const inlineStyle_313_22 = {
+  fontSize: 16,
+  fontWeight: '600',
+  color: '#212529',
+  marginBottom: 8,
+};
+
+export const inlineStyle_314_22 = {
+  position: 'relative',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_316_20 = {
+  borderWidth: 1,
+  borderColor: '#e9ecef',
+  borderRadius: 12,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  paddingRight: 48,
+  fontSize: 16,
+  backgroundColor: '#f8f9fa',
+};
+
+export const inlineStyle_327_20 = {
+  position: 'absolute',
+  right: 14,
+  alignSelf: 'stretch',
+  justifyContent: 'center',
+};
+
+export const inlineStyle_339_16 = {
+  flexDirection: 'row',
+  gap: 12,
+  paddingHorizontal: 24,
+  paddingTop: 12,
+  paddingBottom: 24,
+  borderTopWidth: 1,
+  borderTopColor: '#F1F5F9',
+};
+
+export const inlineStyle_341_14 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  borderWidth: 1,
+  borderColor: '#64748B',
+  alignItems: 'center',
+};
+
+export const inlineStyle_348_20 = {
+  flex: 1,
+  paddingVertical: 14,
+  borderRadius: 12,
+  backgroundColor: '#0F172A',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
 
 export const timezoneListStyle = {
   borderWidth: 1,

package/src/react/components/tabs/UsersTabApiKeyModal.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  TextInput,
+  View,
+} from 'react-native';
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import {
+  inlineStyle_174_6,
+  inlineStyle_175_12,
+  inlineStyle_188_14,
+  inlineStyle_197_16,
+  inlineStyle_200_49,
+  inlineStyle_208_10,
+  inlineStyle_213_20,
+  inlineStyle_214_22,
+  inlineStyle_216_18,
+  inlineStyle_248_20,
+  inlineStyle_249_22,
+  inlineStyle_252_20,
+} from './UsersTab.styles';
+
+const UsersTabApiKeyModal = ({
+  visible,
+  onClose,
+  apiKeyItem,
+  customStyles,
+  isRefreshingApiKey,
+  onCopy,
+  onRefresh,
+}) => (
+) => (
+    <AnimatedModal
+      visible={visible}
+      onRequestClose={onClose}
+      style={inlineStyle_174_6}>
+      <View style={inlineStyle_175_12}>
+        <View style={inlineStyle_188_14}>
+          <Text style={inlineStyle_197_16}>Chave de API</Text>
+          <TouchableOpacity onPress={onClose} style={inlineStyle_200_49}>
+            <Icon name="close" size={20} color="#64748B" />
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView
+          style={inlineStyle_208_10}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag">
+          <View style={inlineStyle_213_20}>
+            <Text style={inlineStyle_214_22}>Usuário</Text>
+            <TextInput
+              style={inlineStyle_216_18}
+              value={apiKeyItem?.username || apiKeyItem?.name || ''}
+              editable={false}
+            />
+          </View>
+
+          <View style={inlineStyle_248_20}>
+            <Text style={inlineStyle_249_22}>Chave atual</Text>
+            <TextInput
+              style={inlineStyle_252_20}
+              value={apiKeyItem?.apiKey || ''}
+              editable={false}
+              multiline
+            />
+          </View>
+
+          <View style={inlineStyle_apiKeyButtonRow}>
+            <TouchableOpacity
+              style={inlineStyle_apiKeySecondaryButton}
+              onPress={onCopy}>
+              <Text style={inlineStyle_apiKeySecondaryText}>Copiar</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={inlineStyle_apiKeySecondaryButton}
+              onPress={onClose}>
+              <Text style={inlineStyle_apiKeySecondaryText}>Fechar</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[
+                customStyles.saveButton,
+                isRefreshingApiKey && customStyles.saveButtonDisabled,
+              ]}
+              onPress={() => onRefresh()}
+              disabled={isRefreshingApiKey}>
+              {isRefreshingApiKey ? (
+                <ActivityIndicator
+                  size="small"
+                  color={customStyles.saveButtonText.color}
+                />
+              ) : (
+                <>
+                  <FeatherIcon
+                    name="plus"
+                    size={16}
+                    color={customStyles.iconButtonPrimaryIcon.color}
+                  />
+                  <Text style={customStyles.saveButtonText}>Nova chave</Text>
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </View>
+    </AnimatedModal>
+);
+
+export default UsersTabApiKeyModal;