react-native-expo-cropper
Version:
Recadrage polygonal d'images.
315 lines (314 loc) • 6.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _reactNative = require("react-native");
var DEEP_BLACK = '#060708';
var GLASS = 'rgba(20, 22, 26, 0.88)';
var SOFT_WHITE = 'rgba(255,255,255,0.9)';
var ACCENT_GREEN = '#689F38';
var styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: DEEP_BLACK
},
content: {
flex: 1,
width: '100%',
minHeight: 0
},
imageRegion: {
flex: 1,
width: '100%'
},
commonWrapper: {
flex: 1,
width: '100%',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000'
},
image: {
width: '100%',
height: '100%',
resizeMode: 'contain'
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1
},
buttonContainerBelow: {
width: '100%',
backgroundColor: DEEP_BLACK,
paddingHorizontal: 16
},
controlsRow: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12
},
roundControl: {
width: 54,
height: 54,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.07)'
},
enhanceButton: {
minHeight: 54,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
paddingHorizontal: 16,
borderRadius: 16,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)'
},
button: {
flex: 1,
minHeight: 54,
borderRadius: 16,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)',
alignItems: 'center',
justifyContent: 'center'
},
rotationButton: {
minWidth: 74,
height: 54,
borderRadius: 16,
paddingHorizontal: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.09)'
},
buttonText: {
color: SOFT_WHITE,
fontSize: 14,
fontWeight: '600',
letterSpacing: 0.8,
textTransform: 'uppercase'
},
centerButtonsContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
tutorialContainer: {
flex: 1,
width: '100%',
paddingHorizontal: 16
},
tutorialTopText: {
textAlign: 'center',
color: SOFT_WHITE,
fontSize: 24,
fontWeight: '700',
paddingHorizontal: 12
},
tutorialImageCenter: {
flex: 1,
width: '100%',
alignItems: 'center',
justifyContent: 'center',
marginVertical: 12
},
tutorialImageFull: {
width: '100%',
height: '100%'
},
tutorialButtonsRow: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 12
},
welcomeText: {
textAlign: 'center',
color: SOFT_WHITE,
fontSize: 24,
fontWeight: '700',
paddingHorizontal: 24
},
tutorialImage: {
width: '86%',
maxWidth: 340,
height: 220,
marginBottom: 16,
borderRadius: 12
},
openCameraButton: {
marginTop: 18,
minHeight: 48,
paddingHorizontal: 18,
borderRadius: 14,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 8,
backgroundColor: GLASS,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.1)'
},
openCameraButtonText: {
color: SOFT_WHITE,
fontSize: 13,
fontWeight: '700',
letterSpacing: 0.6,
textTransform: 'uppercase'
},
tutorialSkipButton: {
flex: 1,
justifyContent: 'center'
},
tutorialContinueButton: {
flex: 1.4,
justifyContent: 'center'
},
cameraStatusText: {
marginTop: 10,
color: SOFT_WHITE,
fontSize: 14,
fontWeight: '600',
textAlign: 'center'
},
cameraErrorText: {
marginTop: 12,
marginHorizontal: 24,
color: 'rgba(255,170,170,0.95)',
fontSize: 13,
textAlign: 'center'
},
loadingOverlay: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.52)',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 9999
},
topBar: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 18
},
topBarTitle: {
color: ACCENT_GREEN,
fontSize: 30,
fontWeight: '700',
letterSpacing: 0.3
},
topIconButton: {
width: 36,
height: 36,
borderRadius: 12,
backgroundColor: 'rgba(0,0,0,0.35)',
alignItems: 'center',
justifyContent: 'center'
},
detectBadge: {
position: 'absolute',
top: 76,
left: 18,
zIndex: 20,
backgroundColor: 'rgba(40, 44, 50, 0.82)',
borderRadius: 16,
paddingHorizontal: 14,
paddingVertical: 10
},
detectBadgeText: {
color: 'rgba(255,255,255,0.78)',
fontSize: 12,
fontWeight: '700',
letterSpacing: 1.6,
textTransform: 'uppercase'
},
cornerHandle: {
position: 'absolute',
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: '#DFFFD0',
borderWidth: 2,
borderColor: ACCENT_GREEN,
shadowColor: ACCENT_GREEN,
shadowOpacity: 0.55,
shadowRadius: 10,
shadowOffset: {
width: 0,
height: 0
},
elevation: 8,
zIndex: 25
},
dockLabel: {
marginTop: 14,
color: 'rgba(255,255,255,0.63)',
textAlign: 'center',
fontSize: 12,
letterSpacing: 3.2,
textTransform: 'uppercase'
},
dock: {
marginTop: 12,
marginBottom: 8,
height: 76,
borderRadius: 22,
backgroundColor: 'rgba(27,30,35,0.92)',
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.08)',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
paddingHorizontal: 12
},
dockButton: {
width: 44,
height: 44,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center'
},
dockButtonActive: {
width: 74,
height: 52,
borderRadius: 16,
backgroundColor: ACCENT_GREEN,
shadowColor: ACCENT_GREEN,
shadowOpacity: 0.4,
shadowRadius: 10,
shadowOffset: {
width: 0,
height: 1
},
elevation: 8
}
});
var _default = exports["default"] = styles;