react-native-urovo-scanner
Version:
React Native package for Urovo Scanner SDK integration - Official SDK implementation
380 lines (379 loc) • 20.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Urovo Scanner Configuration con SDK Oficial
* Configuración avanzada para el scanner Urovo usando el SDK oficial
*/
import { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Switch, TouchableOpacity, ScrollView, Alert, ActivityIndicator, } from 'react-native';
import { urovoScanner, TRIGGER_MODES } from './UrovoScanner';
export const ScannerConfiguration = ({ isDarkMode, onClose, }) => {
const [config, setConfig] = useState(null);
const [constants, setConstants] = useState(null);
const [loading, setLoading] = useState(true);
const [updating, setUpdating] = useState(false);
const [triggerMode, setTriggerMode] = useState(TRIGGER_MODES.SCAN_TRIGGER_MODE_ONESHOT);
const [isLaserActive, setIsLaserActive] = useState(false);
useEffect(() => {
loadConfiguration();
}, []);
const loadConfiguration = async () => {
try {
setLoading(true);
const [configData, constantsData] = await Promise.all([
urovoScanner.getConfiguration(),
urovoScanner.getPropertyConstants(),
]);
setConfig(configData);
setConstants(constantsData);
}
catch (error) {
console.error('Error cargando configuración:', error);
Alert.alert('Error', 'No se pudo cargar la configuración');
}
finally {
setLoading(false);
}
};
const handleParameterChange = async (propertyId, value) => {
if (!config || !constants)
return;
try {
setUpdating(true);
const success = await urovoScanner.setConfiguration(propertyId, value);
if (success) {
// Actualizar configuración local
setConfig(prev => prev ? { ...prev, [getPropertyName(propertyId)]: value } : null);
Alert.alert('Éxito', 'Configuración actualizada correctamente');
}
else {
Alert.alert('Error', 'No se pudo actualizar la configuración');
}
}
catch (error) {
console.error('Error actualizando configuración:', error);
Alert.alert('Error', 'Error al actualizar la configuración');
}
finally {
setUpdating(false);
}
};
const handleTriggerModeChange = async (mode) => {
try {
setUpdating(true);
const success = await urovoScanner.setTriggerMode(mode);
if (success) {
setTriggerMode(mode);
Alert.alert('Éxito', 'Modo de trigger actualizado correctamente');
}
else {
Alert.alert('Error', 'No se pudo actualizar el modo de trigger');
}
}
catch (error) {
console.error('Error actualizando modo de trigger:', error);
Alert.alert('Error', 'Error al actualizar el modo de trigger');
}
finally {
setUpdating(false);
}
};
const handleLaserPress = async () => {
try {
const success = await urovoScanner.startScan();
if (success) {
setIsLaserActive(true);
}
}
catch (error) {
console.error('Error activando láser:', error);
}
};
const handleLaserRelease = async () => {
try {
const success = await urovoScanner.stopScan();
if (success) {
setIsLaserActive(false);
}
}
catch (error) {
console.error('Error desactivando láser:', error);
}
};
const getTriggerModeDescription = (mode) => {
switch (mode) {
case TRIGGER_MODES.SCAN_TRIGGER_MODE_ONESHOT:
return 'Un escaneo por cada activación del trigger';
case TRIGGER_MODES.SCAN_TRIGGER_MODE_CONTINUOUS:
return 'Escaneo continuo mientras el trigger esté activado';
case TRIGGER_MODES.SCAN_TRIGGER_MODE_PULSE:
return 'Escaneo por pulsos - activación por tiempo limitado';
default:
return 'Modo desconocido';
}
};
const getPropertyName = (propertyId) => {
if (!constants)
return 'qrCode';
const propertyMap = {
[constants.QRCODE_ENABLE]: 'qrCode',
[constants.CODE128_ENABLE]: 'code128',
[constants.CODE39_ENABLE]: 'code39',
[constants.EAN13_ENABLE]: 'ean13',
[constants.EAN8_ENABLE]: 'ean8',
[constants.UPCA_ENABLE]: 'upca',
[constants.UPCE_ENABLE]: 'upce',
[constants.DATAMATRIX_ENABLE]: 'dataMatrix',
[constants.PDF417_ENABLE]: 'pdf417',
[constants.AZTEC_ENABLE]: 'aztec',
[constants.WEDGE_KEYBOARD_ENABLE]: 'keyboardWedge',
[constants.SEND_GOOD_READ_BEEP_ENABLE]: 'beepEnabled',
[constants.SEND_GOOD_READ_VIBRATE_ENABLE]: 'vibrateEnabled',
};
return propertyMap[propertyId] || 'qrCode';
};
const textColor = isDarkMode ? '#fff' : '#000';
const backgroundColor = isDarkMode ? '#1a1a1a' : '#f5f5f5';
const cardBgColor = isDarkMode ? '#2a2a2a' : '#fff';
if (loading) {
return (_jsx(View, { style: [styles.container, { backgroundColor }], children: _jsxs(View, { style: styles.loadingContainer, children: [_jsx(ActivityIndicator, { size: "large", color: "#4CAF50" }), _jsx(Text, { style: [styles.loadingText, { color: textColor }], children: "Cargando configuraci\u00F3n..." })] }) }));
}
if (!config || !constants) {
return (_jsx(View, { style: [styles.container, { backgroundColor }], children: _jsxs(View, { style: styles.errorContainer, children: [_jsx(Text, { style: [styles.errorText, { color: textColor }], children: "Error al cargar la configuraci\u00F3n" }), _jsx(TouchableOpacity, { style: styles.retryButton, onPress: loadConfiguration, children: _jsx(Text, { style: styles.retryButtonText, children: "Reintentar" }) })] }) }));
}
return (_jsxs(View, { style: [styles.container, { backgroundColor }], children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: [styles.title, { color: textColor }], children: "Configuraci\u00F3n del Scanner" }), _jsx(TouchableOpacity, { onPress: onClose, style: styles.closeButton, children: _jsx(Text, { style: styles.closeButtonText, children: "\u2715" }) })] }), _jsxs(ScrollView, { style: styles.content, children: [_jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Tipos de C\u00F3digos de Barras" }), _jsx(ConfigItem, { label: "C\u00F3digos QR", value: config.qrCode === 1, onValueChange: value => handleParameterChange(constants.QRCODE_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "CODE 128", value: config.code128 === 1, onValueChange: value => handleParameterChange(constants.CODE128_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "CODE 39", value: config.code39 === 1, onValueChange: value => handleParameterChange(constants.CODE39_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "EAN 13", value: config.ean13 === 1, onValueChange: value => handleParameterChange(constants.EAN13_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "EAN 8", value: config.ean8 === 1, onValueChange: value => handleParameterChange(constants.EAN8_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "UPC A", value: config.upca === 1, onValueChange: value => handleParameterChange(constants.UPCA_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "UPC E", value: config.upce === 1, onValueChange: value => handleParameterChange(constants.UPCE_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "Data Matrix", value: config.dataMatrix === 1, onValueChange: value => handleParameterChange(constants.DATAMATRIX_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "PDF 417", value: config.pdf417 === 1, onValueChange: value => handleParameterChange(constants.PDF417_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "Aztec", value: config.aztec === 1, onValueChange: value => handleParameterChange(constants.AZTEC_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating })] }), _jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Feedback" }), _jsx(ConfigItem, { label: "Sonido de confirmaci\u00F3n", value: config.beepEnabled === 1, onValueChange: value => handleParameterChange(constants.SEND_GOOD_READ_BEEP_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating }), _jsx(ConfigItem, { label: "Vibraci\u00F3n", value: config.vibrateEnabled === 1, onValueChange: value => handleParameterChange(constants.SEND_GOOD_READ_VIBRATE_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating })] }), _jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Modo de Trigger" }), _jsxs(View, { style: styles.triggerModeContainer, children: [_jsx(Text, { style: [styles.triggerModeLabel, { color: textColor }], children: "Seleccionar modo de escaneo:" }), _jsxs(View, { style: styles.triggerModeButtons, children: [_jsx(TouchableOpacity, { style: [
styles.triggerModeButton,
triggerMode === TRIGGER_MODES.SCAN_TRIGGER_MODE_ONESHOT &&
styles.triggerModeButtonActive,
], onPress: () => handleTriggerModeChange(TRIGGER_MODES.SCAN_TRIGGER_MODE_ONESHOT), disabled: updating, children: _jsx(Text, { style: [
styles.triggerModeButtonText,
triggerMode === TRIGGER_MODES.SCAN_TRIGGER_MODE_ONESHOT &&
styles.triggerModeButtonTextActive,
], children: "Un Solo Disparo" }) }), _jsx(TouchableOpacity, { style: [
styles.triggerModeButton,
triggerMode === TRIGGER_MODES.SCAN_TRIGGER_MODE_CONTINUOUS &&
styles.triggerModeButtonActive,
], onPress: () => handleTriggerModeChange(TRIGGER_MODES.SCAN_TRIGGER_MODE_CONTINUOUS), disabled: updating, children: _jsx(Text, { style: [
styles.triggerModeButtonText,
triggerMode ===
TRIGGER_MODES.SCAN_TRIGGER_MODE_CONTINUOUS &&
styles.triggerModeButtonTextActive,
], children: "Continuo" }) }), _jsx(TouchableOpacity, { style: [
styles.triggerModeButton,
triggerMode === TRIGGER_MODES.SCAN_TRIGGER_MODE_PULSE &&
styles.triggerModeButtonActive,
], onPress: () => handleTriggerModeChange(TRIGGER_MODES.SCAN_TRIGGER_MODE_PULSE), disabled: updating, children: _jsx(Text, { style: [
styles.triggerModeButtonText,
triggerMode === TRIGGER_MODES.SCAN_TRIGGER_MODE_PULSE &&
styles.triggerModeButtonTextActive,
], children: "Pulso" }) })] }), _jsx(View, { style: styles.triggerModeInfo, children: _jsx(Text, { style: [styles.triggerModeInfoText, { color: textColor }], children: getTriggerModeDescription(triggerMode) }) })] })] }), _jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Configuraci\u00F3n de Teclado" }), _jsx(ConfigItem, { label: "Modo Teclado (Wedge)", value: config.keyboardWedge === 1, onValueChange: value => handleParameterChange(constants.WEDGE_KEYBOARD_ENABLE, value ? 1 : 0), textColor: textColor, disabled: updating })] }), _jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Control Manual del L\u00E1ser" }), _jsxs(View, { style: styles.laserControlContainer, children: [_jsx(Text, { style: [styles.laserControlLabel, { color: textColor }], children: "Presiona y mant\u00E9n para activar el l\u00E1ser" }), _jsx(TouchableOpacity, { style: [
styles.laserControlButton,
isLaserActive && styles.laserControlButtonActive,
], onPressIn: handleLaserPress, onPressOut: handleLaserRelease, disabled: updating, activeOpacity: 0.7, children: _jsx(Text, { style: [
styles.laserControlButtonText,
isLaserActive && styles.laserControlButtonTextActive,
], children: isLaserActive
? '🔴 LÁSER ACTIVO'
: '⚫ PRESIONAR PARA ACTIVAR' }) }), _jsxs(View, { style: styles.laserControlInfo, children: [_jsx(Text, { style: [styles.laserControlInfoText, { color: textColor }], children: "\u2022 Presiona para activar el l\u00E1ser de escaneo" }), _jsx(Text, { style: [styles.laserControlInfoText, { color: textColor }], children: "\u2022 Suelta para desactivar el l\u00E1ser" }), _jsx(Text, { style: [styles.laserControlInfoText, { color: textColor }], children: "\u2022 \u00DAtil para pruebas y control manual" })] })] })] }), _jsxs(View, { style: [styles.configCard, { backgroundColor: cardBgColor }], children: [_jsx(Text, { style: [styles.cardTitle, { color: textColor }], children: "Informaci\u00F3n" }), _jsx(Text, { style: [styles.infoText, { color: textColor }], children: "\u2022 Los cambios se aplican inmediatamente" }), _jsx(Text, { style: [styles.infoText, { color: textColor }], children: "\u2022 Configuraci\u00F3n basada en el SDK oficial de Urovo" }), _jsx(Text, { style: [styles.infoText, { color: textColor }], children: "\u2022 Utiliza PropertyID para configuraci\u00F3n avanzada" })] })] }), updating && (_jsxs(View, { style: styles.updatingOverlay, children: [_jsx(ActivityIndicator, { size: "large", color: "#4CAF50" }), _jsx(Text, { style: styles.updatingText, children: "Actualizando..." })] }))] }));
};
// Componente auxiliar para elementos de configuración
const ConfigItem = ({ label, value, onValueChange, textColor, disabled }) => (_jsxs(View, { style: styles.configItem, children: [_jsx(Text, { style: [styles.configLabel, { color: textColor }], children: label }), _jsx(Switch, { value: value, onValueChange: onValueChange, disabled: disabled, trackColor: { false: '#767577', true: '#4CAF50' }, thumbColor: value ? '#fff' : '#f4f3f4' })] }));
const styles = StyleSheet.create({
container: {
flex: 1,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
loadingText: {
marginTop: 16,
fontSize: 16,
},
errorContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
errorText: {
fontSize: 16,
marginBottom: 16,
},
retryButton: {
backgroundColor: '#4CAF50',
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 8,
},
retryButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
closeButton: {
padding: 8,
borderRadius: 20,
backgroundColor: '#f44336',
},
closeButtonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
content: {
flex: 1,
padding: 20,
},
configCard: {
padding: 20,
marginBottom: 20,
borderRadius: 8,
borderWidth: 1,
borderColor: '#e0e0e0',
},
cardTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 15,
},
configItem: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 15,
},
configLabel: {
fontSize: 16,
flex: 1,
},
infoText: {
fontSize: 14,
marginBottom: 8,
lineHeight: 20,
},
updatingOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'center',
alignItems: 'center',
},
updatingText: {
color: '#fff',
fontSize: 16,
marginTop: 10,
},
triggerModeContainer: {
marginTop: 10,
},
triggerModeLabel: {
fontSize: 16,
fontWeight: '600',
marginBottom: 15,
},
triggerModeButtons: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 15,
},
triggerModeButton: {
flex: 1,
padding: 12,
marginHorizontal: 4,
borderRadius: 8,
borderWidth: 1,
borderColor: '#ddd',
backgroundColor: '#f9f9f9',
alignItems: 'center',
},
triggerModeButtonActive: {
backgroundColor: '#4CAF50',
borderColor: '#4CAF50',
},
triggerModeButtonText: {
fontSize: 14,
fontWeight: '600',
color: '#333',
},
triggerModeButtonTextActive: {
color: '#fff',
},
triggerModeInfo: {
padding: 12,
backgroundColor: '#f0f0f0',
borderRadius: 8,
marginTop: 10,
},
triggerModeInfoText: {
fontSize: 14,
fontStyle: 'italic',
textAlign: 'center',
},
laserControlContainer: {
marginTop: 10,
},
laserControlLabel: {
fontSize: 16,
fontWeight: '600',
marginBottom: 15,
textAlign: 'center',
},
laserControlButton: {
padding: 20,
borderRadius: 12,
borderWidth: 2,
borderColor: '#ddd',
backgroundColor: '#f9f9f9',
alignItems: 'center',
marginBottom: 15,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
laserControlButtonActive: {
backgroundColor: '#ff4444',
borderColor: '#ff4444',
shadowColor: '#ff4444',
shadowOpacity: 0.3,
},
laserControlButtonText: {
fontSize: 16,
fontWeight: 'bold',
color: '#333',
textAlign: 'center',
},
laserControlButtonTextActive: {
color: '#fff',
},
laserControlInfo: {
padding: 12,
backgroundColor: '#f0f0f0',
borderRadius: 8,
marginTop: 10,
},
laserControlInfoText: {
fontSize: 14,
marginBottom: 4,
lineHeight: 20,
},
});