@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
230 lines (227 loc) • 7.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DocumentViewer = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _Overlay = require("../Overlay");
var _ = _interopRequireDefault(require("@carbon/icons/es/close/20"));
var _constants = require("../../constants/constants");
var _colors = require("../../styles/colors");
var _Text = require("../Text");
var _Button = require("../Button");
var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
var _defaultText = require("../../constants/defaultText");
var _zIndex = require("../../styles/z-index");
var _BottomSafeAreaColorOverride = require("../BottomSafeAreaColorOverride");
var _SafeAreaWrapper = require("../SafeAreaWrapper");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Soource of DocumentViewer either string or WebView source */
/** Props for DocumentViewer component */
/**
* 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}
*/
class DocumentViewer extends _react.default.Component {
get androidViewType() {
const {
forceView
} = this.props;
if (forceView) {
return forceView === 'android';
} else {
return _reactNative.Platform.OS === 'android';
}
}
get styles() {
return _reactNative.StyleSheet.create({
modal: {
zIndex: _zIndex.zIndexes.document
},
safeAreaWrapper: {
position: 'relative',
flexGrow: 1,
paddingBottom: 1,
marginBottom: 1
},
wrapper: {
flexGrow: 1
},
blurBackground: {
zIndex: _zIndex.zIndexes.behind,
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
flex: 1
},
baseHeader: {
height: 48,
borderBottomWidth: 1,
backgroundColor: (0, _colors.getColor)('layer01'),
borderBottomColor: (0, _colors.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: _zIndex.zIndexes.base,
paddingLeft: 90,
paddingRight: 90
},
headerActionAndroid: {
alignSelf: 'flex-start'
},
headerActionIos: {
alignSelf: 'flex-start',
zIndex: _zIndex.zIndexes.baseOver,
paddingRight: 16
},
contentContainer: {
backgroundColor: (0, _colors.getColor)('background'),
padding: 16,
paddingTop: 32,
paddingBottom: 0
},
noScrollView: {
flex: 1
},
webView: {
backgroundColor: 'transparent',
flex: 1
},
contentView: {
backgroundColor: (0, _colors.getColor)('background'),
flexGrow: 1,
flex: 1
}
});
}
get headerBar() {
const {
title,
dismissText,
onDismiss
} = this.props;
const baseStyle = (0, _helpers.styleReferenceBreaker)(this.styles.baseHeader);
if (this.androidViewType) {
baseStyle.borderTopRightRadius = undefined;
baseStyle.borderTopLeftRadius = undefined;
} else {
baseStyle.marginTop = 8;
baseStyle.flexDirection = 'row-reverse';
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: baseStyle,
children: [!!onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
textType: "heading-compact-02",
kind: "ghost",
overrideColor: this.androidViewType ? (0, _colors.getColor)('iconPrimary') : undefined,
style: this.androidViewType ? this.styles.headerActionAndroid : this.styles.headerActionIos,
iconOnlyMode: this.androidViewType,
icon: this.androidViewType ? _.default : undefined,
text: dismissText || _defaultText.defaultText.done,
onPress: onDismiss
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.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 = (0, _helpers.styleReferenceBreaker)(this.styles.contentContainer);
if (disableContainerPadding) {
containerStyle.paddingRight = 0;
containerStyle.paddingTop = 0;
containerStyle.paddingLeft = 0;
containerStyle.paddingBottom = 0;
}
if (sourceNode) {
if (disableScrollView) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.noScrollView, containerStyle),
children: sourceNode
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
style: this.styles.contentView,
contentContainerStyle: containerStyle,
children: sourceNode
});
}
if (typeof source === 'string') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
style: this.styles.contentView,
contentContainerStyle: containerStyle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
text: source
})
});
} else if (source) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeWebview.default, {
source: source,
style: this.styles.webView,
containerStyle: containerStyle
});
} else {
return null;
}
}
render() {
const {
componentProps,
style,
navigationFooter,
renderChildComponent
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
style: this.styles.modal,
supportedOrientations: _constants.modalPresentations,
transparent: true,
animationType: "slide",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
style: this.styles.blurBackground
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSafeAreaColorOverride.BottomSafeAreaColorOverride, {
color: navigationFooter ? (0, _colors.getColor)('layer01') : (0, _colors.getColor)('background')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SafeAreaWrapper.SafeAreaWrapper, {
style: this.styles.safeAreaWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
...(componentProps || {}),
children: [this.headerBar, this.mainView]
}), !!navigationFooter && navigationFooter]
}), !!renderChildComponent && renderChildComponent]
});
}
}
exports.DocumentViewer = DocumentViewer;
//# sourceMappingURL=index.js.map