native-base
Version:
Essential cross-platform UI components for React Native
146 lines • 2.72 kB
JavaScript
import { Dimensions } from 'react-native';
import { mode } from '../tools';
const sizes = {
xs: {
contentSize: {
width: '60%',
maxWidth: '280'
}
},
sm: {
contentSize: {
width: '65%',
maxWidth: '320'
}
},
md: {
contentSize: {
width: '75%',
maxWidth: '380'
}
},
lg: {
contentSize: {
width: '80%',
maxWidth: '520'
}
},
xl: {
contentSize: {
width: '90%',
maxWidth: '580'
}
},
full: {
contentSize: {
width: '100%'
}
}
};
export const AlertDialog = {
baseStyle: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
_web: {
pointerEvents: 'box-none'
},
_backdropFade: {
exitDuration: 150,
entryDuration: 200
},
_fade: {
exitDuration: 100,
entryDuration: 200
},
_slide: {
duration: 200,
overlay: false
}
},
sizes,
defaultProps: {
size: 'md',
closeOnOverlayClick: true
}
};
export const AlertDialogContent = {
baseStyle: props => {
return {
bg: mode('coolGray.50', 'gray.700')(props),
_text: {
color: mode('coolGray.800', 'warmGray.50')(props)
},
shadow: 1,
rounded: 'lg',
maxHeight: "".concat(Dimensions.get('window').height - 150, "px"),
overflow: 'hidden'
};
}
};
export const AlertDialogCloseButton = {
baseStyle: props => {
return {
position: 'absolute',
right: '3',
top: '3',
zIndex: '1',
colorScheme: 'coolGray',
p: '2',
_icon: {
size: '3',
color: mode('coolGray.600', 'coolGray.100')(props)
}
};
}
};
export const AlertDialogHeader = {
baseStyle: props => {
return {
py: '4',
px: '3',
borderBottomWidth: '1',
borderColor: mode('coolGray.200', 'gray.600')(props),
_text: {
fontSize: 'md',
fontWeight: 'semibold',
color: mode('coolGray.800', 'warmGray.50')(props),
lineHeight: 'sm'
}
};
}
};
export const AlertDialogBody = {
baseStyle: props => {
return {
pt: '2',
p: '3',
_text: {
color: mode('coolGray.600', 'coolGray.300')(props)
}
};
}
};
export const AlertDialogFooter = {
baseStyle: props => {
return {
p: '3',
bg: mode('coolGray.100', 'gray.600')(props),
flexDirection: 'row',
justifyContent: 'flex-end',
flexWrap: 'wrap'
};
}
};
export const AlertDialogOverlay = {
baseStyle: {
position: 'absolute',
left: '0',
top: '0',
opacity: '50',
right: '0',
bottom: '0'
}
};
//# sourceMappingURL=alert-dialog.js.map