react-native-acoustic-connect-beta
Version:
BETA: React native plugin for Acoustic Connect
296 lines (290 loc) • 9.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Connect = _interopRequireDefault(require("../components/Connect"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/********************************************************************************************
* 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.
********************************************************************************************/
/**
* 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!
*/const HOCDialogExample = () => {
const [dialogVisible, setDialogVisible] = React.useState(false);
// Example 1: React Native Alert.alert (automatically tracked)
const showAlertDialog = () => {
_reactNative.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__*/(0, _jsxRuntime.jsx)(_Connect.default, {
captureDialogEvents: true,
captureKeyboardEvents: false,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.container,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.title,
children: "HOC Dialog Tracking Example"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.subtitle,
children: "Minimal code changes required - just wrap your dialog components!"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.buttonContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.button,
onPress: showAlertDialog,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.buttonText,
children: "Show Alert.alert"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.buttonSubtext,
children: "Automatically tracked"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.button,
onPress: showPaperDialog,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.buttonText,
children: "Show Paper Dialog (HOC)"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.buttonSubtext,
children: "Minimal code changes"
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.infoContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoTitle,
children: "How to use HOC approach:"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoText,
children: "1. Create tracked dialog components"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoText,
children: "2. Use tracked versions instead of originals"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoText,
children: "3. All events automatically tracked!"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.infoText,
children: "4. No manual tracking code needed"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.codeContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.codeTitle,
children: "Example Setup Code:"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.exampleDialog,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.dialogTitle,
children: "Example Dialog"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.dialogActions,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.dialogButton,
onPress: hidePaperDialog,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.dialogButtonText,
children: "Cancel"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: [styles.dialogButton, styles.primaryButton],
onPress: () => {
console.log('Dialog confirmed!');
hidePaperDialog();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: styles.dialogButtonText,
children: "Confirm"
})
})]
})]
})]
})
});
};
const styles = _reactNative.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'
}
});
var _default = exports.default = HOCDialogExample;
//# sourceMappingURL=HOCDialogExample.js.map