Няма описание

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. 'use strict'
  2. import React, {
  3. Component,
  4. PropTypes
  5. } from 'react';
  6. import {
  7. View,
  8. WebView
  9. } from 'react-native';
  10. export default class AutoHeightWebView extends Component {
  11. constructor(props) {
  12. super(props);
  13. this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
  14. const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
  15. this.state = {
  16. height: 0,
  17. script: initialScript
  18. };
  19. }
  20. componentWillReceiveProps(nextProps) {
  21. let currentScript = BaseScript;
  22. if ((nextProps.files && !this.props.files) || (nextProps.files && this.props.files && JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files))) {
  23. currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
  24. }
  25. this.setState({ script: currentScript });
  26. }
  27. appendFilesToHead(files, script) {
  28. if (!files) {
  29. return script;
  30. }
  31. for (let file of files) {
  32. script =
  33. `
  34. var link = document.createElement('link');
  35. link.rel = '` + file.rel + `';
  36. link.type = '` + file.type + `';
  37. link.href = '` + file.href + `';
  38. document.head.appendChild(link);
  39. `+ script;
  40. }
  41. return script;
  42. }
  43. handleNavigationStateChange(navState) {
  44. const height = Number(navState.title);
  45. this.setState({ height });
  46. if (this.props.onHeightUpdated) {
  47. this.props.onHeightUpdated(height);
  48. }
  49. }
  50. render() {
  51. return (
  52. <View style={[{
  53. height: this.state.height + this.props.heightOffset,
  54. }, this.props.style]}>
  55. <WebView
  56. injectedJavaScript={this.state.script + this.props.customScript}
  57. scrollEnabled={false}
  58. source={{
  59. html: this.props.html,
  60. baseUrl: 'web/'
  61. }}
  62. onNavigationStateChange={this.handleNavigationStateChange} />
  63. </View>
  64. );
  65. }
  66. }
  67. AutoHeightWebView.propTypes = {
  68. html: PropTypes.string,
  69. onHeightUpdated: PropTypes.func,
  70. customScript: PropTypes.string,
  71. // offset rn webview margin
  72. heightOffset: PropTypes.number,
  73. style: View.propTypes.style,
  74. // add web/files... to project root
  75. files: PropTypes.arrayOf(PropTypes.shape({
  76. href: PropTypes.string,
  77. type: PropTypes.string,
  78. rel: PropTypes.string
  79. }))
  80. }
  81. AutoHeightWebView.defaultProps = {
  82. heightOffset: 12
  83. }
  84. const BaseScript =
  85. `
  86. ; (function () {
  87. var wrapper = document.createElement('div');
  88. wrapper.id = 'height-wrapper';
  89. while (document.body.firstChild) {
  90. wrapper.appendChild(document.body.firstChild);
  91. }
  92. document.body.appendChild(wrapper);
  93. var i = 0;
  94. function updateHeight() {
  95. document.title = wrapper.clientHeight;
  96. window.location.hash = ++i;
  97. }
  98. updateHeight();
  99. window.addEventListener('load', function () {
  100. updateHeight();
  101. });
  102. window.addEventListener('resize', updateHeight);
  103. } ());
  104. `;