@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
224 lines (221 loc) • 6.9 kB
JavaScript
"use strict";
import React from 'react';
import { StyleSheet, Modal as ReactModal, Platform, View, ScrollView } from 'react-native';
import { styleReferenceBreaker } from '../../helpers';
import { Overlay } from '../Overlay';
import CloseIcon from '@carbon/icons/es/close/20';
import { modalPresentations } from '../../constants/constants';
import { getColor } from '../../styles/colors';
import { Text } from '../Text';
import { Button } from '../Button';
import WebView from 'react-native-webview';
import { defaultText } from '../../constants/defaultText';
import { zIndexes } from '../../styles/z-index';
import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
import { SafeAreaWrapper } from '../SafeAreaWrapper';
/** Soource of DocumentViewer either string or WebView source */
/** Props for DocumentViewer component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* DocumentViewer component mostly for Legal content (like Privacy Policy, Terms and Conditions...).
* But can also be used for web login flows or any popup overlay flow.
* If source is a STRING the text will be rendered as plain text. For custom styling create an HTML file with proper styling per guidelines and use WebViewSource.
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DocumentViewer.tsx | Example code}
*/
export class DocumentViewer extends React.Component {
get androidViewType() {
const {
forceView
} = this.props;
if (forceView) {
return forceView === 'android';
} else {
return Platform.OS === 'android';
}
}
get styles() {
return StyleSheet.create({
modal: {
zIndex: zIndexes.document
},
safeAreaWrapper: {
position: 'relative',
flexGrow: 1,
paddingBottom: 1,
marginBottom: 1
},
wrapper: {
flexGrow: 1
},
blurBackground: {
zIndex: zIndexes.behind,
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
flex: 1
},
baseHeader: {
height: 48,
borderBottomWidth: 1,
backgroundColor: getColor('layer01'),
borderBottomColor: getColor('borderSubtle01'),
borderTopRightRadius: 16,
borderTopLeftRadius: 16,
position: 'relative',
flexDirection: 'row'
},
textAndroid: {
paddingTop: 10,
paddingLeft: 16,
flex: 1,
paddingRight: 20
},
textIos: {
paddingTop: 13,
textAlign: 'center',
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
zIndex: zIndexes.base,
paddingLeft: 90,
paddingRight: 90
},
headerActionAndroid: {
alignSelf: 'flex-start'
},
headerActionIos: {
alignSelf: 'flex-start',
zIndex: zIndexes.baseOver,
paddingRight: 16
},
contentContainer: {
backgroundColor: getColor('background'),
padding: 16,
paddingTop: 32,
paddingBottom: 0
},
noScrollView: {
flex: 1
},
webView: {
backgroundColor: 'transparent',
flex: 1
},
contentView: {
backgroundColor: getColor('background'),
flexGrow: 1,
flex: 1
}
});
}
get headerBar() {
const {
title,
dismissText,
onDismiss
} = this.props;
const baseStyle = styleReferenceBreaker(this.styles.baseHeader);
if (this.androidViewType) {
baseStyle.borderTopRightRadius = undefined;
baseStyle.borderTopLeftRadius = undefined;
} else {
baseStyle.marginTop = 8;
baseStyle.flexDirection = 'row-reverse';
}
return /*#__PURE__*/_jsxs(View, {
style: baseStyle,
children: [!!onDismiss && /*#__PURE__*/_jsx(Button, {
textType: "heading-compact-02",
kind: "ghost",
overrideColor: this.androidViewType ? getColor('iconPrimary') : undefined,
style: this.androidViewType ? this.styles.headerActionAndroid : this.styles.headerActionIos,
iconOnlyMode: this.androidViewType,
icon: this.androidViewType ? CloseIcon : undefined,
text: dismissText || defaultText.done,
onPress: onDismiss
}), /*#__PURE__*/_jsx(Text, {
style: this.androidViewType ? this.styles.textAndroid : this.styles.textIos,
type: this.androidViewType ? 'heading-03' : 'heading-compact-02',
text: title,
breakMode: "tail"
})]
});
}
get mainView() {
const {
source,
disableContainerPadding,
sourceNode,
disableScrollView
} = this.props;
const containerStyle = styleReferenceBreaker(this.styles.contentContainer);
if (disableContainerPadding) {
containerStyle.paddingRight = 0;
containerStyle.paddingTop = 0;
containerStyle.paddingLeft = 0;
containerStyle.paddingBottom = 0;
}
if (sourceNode) {
if (disableScrollView) {
return /*#__PURE__*/_jsx(View, {
style: styleReferenceBreaker(this.styles.noScrollView, containerStyle),
children: sourceNode
});
}
return /*#__PURE__*/_jsx(ScrollView, {
style: this.styles.contentView,
contentContainerStyle: containerStyle,
children: sourceNode
});
}
if (typeof source === 'string') {
return /*#__PURE__*/_jsx(ScrollView, {
style: this.styles.contentView,
contentContainerStyle: containerStyle,
children: /*#__PURE__*/_jsx(Text, {
text: source
})
});
} else if (source) {
return /*#__PURE__*/_jsx(WebView, {
source: source,
style: this.styles.webView,
containerStyle: containerStyle
});
} else {
return null;
}
}
render() {
const {
componentProps,
style,
navigationFooter,
renderChildComponent
} = this.props;
return /*#__PURE__*/_jsxs(ReactModal, {
style: this.styles.modal,
supportedOrientations: modalPresentations,
transparent: true,
animationType: "slide",
children: [/*#__PURE__*/_jsx(Overlay, {
style: this.styles.blurBackground
}), /*#__PURE__*/_jsx(BottomSafeAreaColorOverride, {
color: navigationFooter ? getColor('layer01') : getColor('background')
}), /*#__PURE__*/_jsxs(SafeAreaWrapper, {
style: this.styles.safeAreaWrapper,
children: [/*#__PURE__*/_jsxs(View, {
style: styleReferenceBreaker(this.styles.wrapper, style),
...(componentProps || {}),
children: [this.headerBar, this.mainView]
}), !!navigationFooter && navigationFooter]
}), !!renderChildComponent && renderChildComponent]
});
}
}
//# sourceMappingURL=index.js.map