react-native-acoustic-connect-beta
Version:
BETA: React native plugin for Acoustic Connect
292 lines (285 loc) • 8.32 kB
JavaScript
"use strict";
/********************************************************************************************
* Copyright (C) 2025 Acoustic, L.P. All rights reserved.
*
* NOTICE: This file contains material that is confidential and proprietary to
* Acoustic, L.P. and/or other developers. No license is granted under any intellectual or
* industrial property rights of Acoustic, L.P. except as may be provided in an agreement with
* Acoustic, L.P. Any unauthorized copying or distribution of content from this file is
* prohibited.
********************************************************************************************/
import * as React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import Connect from '../components/Connect';
/**
* Example demonstrating HOC-based Paper Dialog tracking
*
* This approach requires minimal code changes:
* 1. Create tracked versions of your dialog components
* 2. Use the tracked versions instead of the original ones
* 3. All dialog events are automatically tracked!
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const HOCDialogExample = () => {
const [dialogVisible, setDialogVisible] = React.useState(false);
// Example 1: React Native Alert.alert (automatically tracked)
const showAlertDialog = () => {
Alert.alert('Confirmation Alert', 'This is a native alert dialog that is automatically tracked.', [{
text: 'Cancel',
style: 'cancel'
}, {
text: 'OK',
onPress: () => console.log('Alert OK pressed')
}]);
};
// Example 2: Paper Dialog with HOC tracking
const showPaperDialog = () => {
setDialogVisible(true);
};
const hidePaperDialog = () => {
setDialogVisible(false);
};
return /*#__PURE__*/_jsx(Connect, {
captureDialogEvents: true,
captureKeyboardEvents: false,
children: /*#__PURE__*/_jsxs(View, {
style: styles.container,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.title,
children: "HOC Dialog Tracking Example"
}), /*#__PURE__*/_jsx(Text, {
style: styles.subtitle,
children: "Minimal code changes required - just wrap your dialog components!"
}), /*#__PURE__*/_jsxs(View, {
style: styles.buttonContainer,
children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.button,
onPress: showAlertDialog,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.buttonText,
children: "Show Alert.alert"
}), /*#__PURE__*/_jsx(Text, {
style: styles.buttonSubtext,
children: "Automatically tracked"
})]
}), /*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.button,
onPress: showPaperDialog,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.buttonText,
children: "Show Paper Dialog (HOC)"
}), /*#__PURE__*/_jsx(Text, {
style: styles.buttonSubtext,
children: "Minimal code changes"
})]
})]
}), /*#__PURE__*/_jsxs(View, {
style: styles.infoContainer,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.infoTitle,
children: "How to use HOC approach:"
}), /*#__PURE__*/_jsx(Text, {
style: styles.infoText,
children: "1. Create tracked dialog components"
}), /*#__PURE__*/_jsx(Text, {
style: styles.infoText,
children: "2. Use tracked versions instead of originals"
}), /*#__PURE__*/_jsx(Text, {
style: styles.infoText,
children: "3. All events automatically tracked!"
}), /*#__PURE__*/_jsx(Text, {
style: styles.infoText,
children: "4. No manual tracking code needed"
})]
}), /*#__PURE__*/_jsxs(View, {
style: styles.codeContainer,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.codeTitle,
children: "Example Setup Code:"
}), /*#__PURE__*/_jsx(Text, {
style: styles.codeText,
children: `// In your app setup
import { withAcousticAutoDialog } from 'react-native-acoustic-connect-beta';
import { Dialog, Portal } from 'react-native-paper';
// Create tracked versions
const TrackedDialog = withAcousticAutoDialog(Dialog);
const TrackedPortal = withAcousticAutoDialog(Portal);
// Use TrackedDialog instead of Dialog - that's it!`
})]
}), dialogVisible && /*#__PURE__*/_jsxs(View, {
style: styles.exampleDialog,
children: [/*#__PURE__*/_jsx(Text, {
style: styles.dialogTitle,
children: "Example Dialog"
}), /*#__PURE__*/_jsx(Text, {
style: styles.dialogContent,
children: "This shows how you would use the tracked dialog components. In a real app, you would use TrackedDialog instead of Dialog."
}), /*#__PURE__*/_jsxs(View, {
style: styles.dialogActions,
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
style: styles.dialogButton,
onPress: hidePaperDialog,
children: /*#__PURE__*/_jsx(Text, {
style: styles.dialogButtonText,
children: "Cancel"
})
}), /*#__PURE__*/_jsx(TouchableOpacity, {
style: [styles.dialogButton, styles.primaryButton],
onPress: () => {
console.log('Dialog confirmed!');
hidePaperDialog();
},
children: /*#__PURE__*/_jsx(Text, {
style: styles.dialogButtonText,
children: "Confirm"
})
})]
})]
})]
})
});
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#f5f5f5'
},
title: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
marginBottom: 10,
color: '#333'
},
subtitle: {
fontSize: 16,
textAlign: 'center',
marginBottom: 30,
color: '#666',
fontStyle: 'italic'
},
buttonContainer: {
gap: 15
},
button: {
backgroundColor: '#007AFF',
padding: 15,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: '600',
textAlign: 'center'
},
buttonSubtext: {
color: 'rgba(255, 255, 255, 0.8)',
fontSize: 12,
textAlign: 'center',
marginTop: 2
},
infoContainer: {
backgroundColor: 'white',
padding: 20,
borderRadius: 10,
marginTop: 30,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1
},
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 2
},
infoTitle: {
fontSize: 18,
fontWeight: '600',
marginBottom: 10,
color: '#333'
},
infoText: {
fontSize: 14,
color: '#666',
marginBottom: 5
},
codeContainer: {
backgroundColor: '#f8f9fa',
padding: 15,
borderRadius: 8,
marginTop: 20,
borderLeftWidth: 4,
borderLeftColor: '#007AFF'
},
codeTitle: {
fontSize: 16,
fontWeight: '600',
marginBottom: 10,
color: '#333'
},
codeText: {
fontSize: 12,
color: '#555',
fontFamily: 'monospace',
lineHeight: 18
},
exampleDialog: {
position: 'absolute',
top: '50%',
left: 20,
right: 20,
backgroundColor: 'white',
borderRadius: 12,
padding: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4
},
shadowOpacity: 0.25,
shadowRadius: 8,
elevation: 8
},
dialogTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 15,
color: '#333'
},
dialogContent: {
fontSize: 16,
color: '#666',
marginBottom: 20,
lineHeight: 22
},
dialogActions: {
flexDirection: 'row',
justifyContent: 'flex-end',
gap: 10
},
dialogButton: {
paddingHorizontal: 20,
paddingVertical: 10,
borderRadius: 6,
backgroundColor: '#f0f0f0'
},
primaryButton: {
backgroundColor: '#007AFF'
},
dialogButtonText: {
fontSize: 16,
fontWeight: '600',
color: '#333'
}
});
export default HOCDialogExample;
//# sourceMappingURL=HOCDialogExample.js.map