Ingen beskrivning

index.ios.js 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. 'use strict';
  2. import React, { PureComponent } from 'react';
  3. import { Animated, Dimensions, StyleSheet, ViewPropTypes, WebView } from 'react-native';
  4. import PropTypes from 'prop-types';
  5. import { getScript, onHeightUpdated, domMutationObserveScript } from './common.js';
  6. export default class AutoHeightWebView extends PureComponent {
  7. static propTypes = {
  8. hasIframe: PropTypes.bool,
  9. source: WebView.propTypes.source,
  10. onHeightUpdated: PropTypes.func,
  11. customScript: PropTypes.string,
  12. customStyle: PropTypes.string,
  13. enableAnimation: PropTypes.bool,
  14. // if set to true may cause some layout issues (smaller font size)
  15. scalesPageToFit: PropTypes.bool,
  16. // only works on enable animation
  17. animationDuration: PropTypes.number,
  18. // offset of rn webview margin
  19. heightOffset: PropTypes.number,
  20. style: ViewPropTypes.style,
  21. // rn WebView callback
  22. onError: PropTypes.func,
  23. onLoad: PropTypes.func,
  24. onLoadStart: PropTypes.func,
  25. onLoadEnd: PropTypes.func,
  26. onShouldStartLoadWithRequest: PropTypes.func,
  27. // add web/files... to project root
  28. files: PropTypes.arrayOf(
  29. PropTypes.shape({
  30. href: PropTypes.string,
  31. type: PropTypes.string,
  32. rel: PropTypes.string
  33. })
  34. )
  35. };
  36. static defaultProps = {
  37. scalesPageToFit: false,
  38. enableAnimation: true,
  39. animationDuration: 555,
  40. heightOffset: 12
  41. };
  42. constructor(props) {
  43. super(props);
  44. props.enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
  45. this.state = {
  46. height: 0,
  47. script: getScript(props, baseScript, iframeBaseScript)
  48. };
  49. }
  50. componentWillReceiveProps(nextProps) {
  51. this.setState({ script: getScript(nextProps, baseScript, iframeBaseScript) });
  52. }
  53. handleNavigationStateChange = navState => {
  54. const height = Number(navState.title);
  55. const { enableAnimation, animationDuration } = this.props;
  56. if (height && height !== this.state.height) {
  57. enableAnimation && this.opacityAnimatedValue.setValue(0);
  58. this.setState({ height }, () => {
  59. enableAnimation
  60. ? Animated.timing(this.opacityAnimatedValue, {
  61. toValue: 1,
  62. duration: animationDuration
  63. }).start(() => onHeightUpdated(height, this.props))
  64. : onHeightUpdated(height, this.props);
  65. });
  66. }
  67. };
  68. getWebView = webView => (this.webView = webView);
  69. stopLoading() {
  70. this.webView.stopLoading();
  71. }
  72. render() {
  73. const { height, script } = this.state;
  74. const {
  75. onError,
  76. onLoad,
  77. onLoadStart,
  78. onLoadEnd,
  79. onShouldStartLoadWithRequest,
  80. scalesPageToFit,
  81. enableAnimation,
  82. source,
  83. heightOffset,
  84. customScript,
  85. style
  86. } = this.props;
  87. const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
  88. return (
  89. <Animated.View
  90. style={[
  91. styles.container,
  92. {
  93. opacity: enableAnimation ? this.opacityAnimatedValue : 1,
  94. height: height + heightOffset
  95. },
  96. style
  97. ]}
  98. >
  99. <WebView
  100. ref={this.getWebView}
  101. onError={onError}
  102. onLoad={onLoad}
  103. onLoadStart={onLoadStart}
  104. onLoadEnd={onLoadEnd}
  105. onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
  106. style={styles.webView}
  107. injectedJavaScript={script + customScript}
  108. scrollEnabled={false}
  109. scalesPageToFit={scalesPageToFit}
  110. source={webViewSource}
  111. onNavigationStateChange={this.handleNavigationStateChange}
  112. />
  113. </Animated.View>
  114. );
  115. }
  116. }
  117. const screenWidth = Dimensions.get('window').width;
  118. const styles = StyleSheet.create({
  119. container: {
  120. width: screenWidth,
  121. backgroundColor: 'transparent'
  122. },
  123. webView: {
  124. flex: 1,
  125. backgroundColor: 'transparent'
  126. }
  127. });
  128. const commonScript = `
  129. updateHeight();
  130. window.addEventListener('load', updateHeight);
  131. window.addEventListener('resize', updateHeight);
  132. `;
  133. const getHeight = `
  134. function getHeight(height) {
  135. if(height < 1) {
  136. return document.body.offsetHeight;
  137. }
  138. return height;
  139. }
  140. `;
  141. const baseScript = `
  142. ;
  143. ${getHeight}
  144. (function () {
  145. var i = 0;
  146. var height = 0;
  147. var wrapper = document.createElement('div');
  148. wrapper.id = 'height-wrapper';
  149. while (document.body.firstChild instanceof Node) {
  150. wrapper.appendChild(document.body.firstChild);
  151. }
  152. document.body.appendChild(wrapper);
  153. function updateHeight() {
  154. if(document.body.offsetHeight !== height) {
  155. height = getHeight(wrapper.clientHeight);
  156. document.title = height;
  157. window.location.hash = ++i;
  158. }
  159. }
  160. ${commonScript}
  161. ${domMutationObserveScript}
  162. } ());
  163. `;
  164. const iframeBaseScript = `
  165. ;
  166. ${getHeight}
  167. (function () {
  168. var i = 0;
  169. var height = 0;
  170. function updateHeight() {
  171. if(document.body.offsetHeight !== height) {
  172. height = getHeight(document.body.firstChild.clientHeight);
  173. document.title = height;
  174. window.location.hash = ++i;
  175. }
  176. }
  177. ${commonScript}
  178. ${domMutationObserveScript}
  179. } ());
  180. `;