@interactify-live/pindo-wizard-react-native
Version:
React Native PindoWizard component for media capture and interaction management
109 lines (108 loc) • 4.4 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const Trash_1 = __importDefault(require("../icons/Trash"));
const InteractionHeader = (0, react_1.memo)(({ activeMedia, setActiveMedia, setMedias, _hasAnyActiveInteraction, _activeInteraction, _setActiveInteraction, _medias, onAddInteraction, _onDeleteActiveInteraction, coverIndex, setCoverIndex, settings, }) => {
const handleDeleteMedia = () => {
setMedias(prev => {
const updated = prev.filter((_, i) => i !== activeMedia);
if (updated.length === 0) {
// Go back to camera step
return updated;
}
else {
if (activeMedia === coverIndex) {
const firstImageIndex = updated.findIndex(media => media.type === 'image');
if (firstImageIndex !== -1) {
setCoverIndex(firstImageIndex);
}
else {
setCoverIndex(0);
}
}
else if (activeMedia < coverIndex) {
setCoverIndex(coverIndex - 1);
}
if (activeMedia > 0) {
setActiveMedia(activeMedia - 1);
}
else {
setActiveMedia(0);
}
}
return updated;
});
};
console.log('InteractionHeader render:', {
isInteractionActive: settings.isInteractionActive,
hasAnyActiveInteraction: _hasAnyActiveInteraction,
activeInteraction: _activeInteraction,
});
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.interactionHeader, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.leftActions, children: [settings.isInteractionActive && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.addInteractionButton, onPress: onAddInteraction, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.addInteractionButtonText, children: "+" }) })), _hasAnyActiveInteraction && ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.deleteInteractionButton, onPress: _onDeleteActiveInteraction, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.deleteInteractionButtonText, children: "\u00D7" }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.deleteButton, onPress: handleDeleteMedia, children: (0, jsx_runtime_1.jsx)(Trash_1.default, {}) })] }));
});
const styles = react_native_1.StyleSheet.create({
interactionHeader: {
position: 'absolute',
top: 0,
left: 10,
right: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 16,
zIndex: 999,
backgroundColor: 'transparent',
},
leftActions: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
deleteButton: {
width: 48,
height: 48,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
},
deleteButtonText: {
fontSize: 20,
color: '#ffffff',
},
addInteractionButton: {
width: 48,
height: 48,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.5)',
},
addInteractionButtonText: {
fontSize: 24,
color: '#ffffff',
fontWeight: 'bold',
},
deleteInteractionButton: {
width: 48,
height: 48,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
backgroundColor: 'rgba(255, 255, 255, 0.3)',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.5)',
},
deleteInteractionButtonText: {
fontSize: 24,
color: '#ffffff',
fontWeight: 'bold',
},
});
exports.default = InteractionHeader;