Sin descripción

common.js 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. 'use strict';
  2. import { Dimensions } from 'react-native';
  3. import Immutable from 'immutable';
  4. function appendFilesToHead(files, script) {
  5. return files.reduceRight((combinedScript, file) => {
  6. const { rel, type, href } = file;
  7. return `
  8. var link = document.createElement('link');
  9. link.rel = '${rel}';
  10. link.type = '${type}';
  11. link.href = '${href}';
  12. document.head.appendChild(link);
  13. ${combinedScript}
  14. `;
  15. }, script);
  16. }
  17. const screenWidth = Dimensions.get('window').width;
  18. const bodyStyle = `
  19. body {
  20. margin: 0;
  21. padding: 0;
  22. }
  23. `;
  24. function appendStylesToHead(styles, script) {
  25. const currentStyles = styles ? bodyStyle + styles : bodyStyle;
  26. // Escape any single quotes or newlines in the CSS with .replace()
  27. const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
  28. return `
  29. var styleElement = document.createElement('style');
  30. styleElement.innerHTML = '${escaped}';
  31. document.head.appendChild(styleElement);
  32. ${script}
  33. `;
  34. }
  35. function getReloadRelatedData(props) {
  36. const { hasIframe, files, customStyle, customScript, style, source } = props;
  37. return {
  38. source,
  39. hasIframe,
  40. files,
  41. customStyle,
  42. customScript,
  43. style
  44. };
  45. }
  46. function isChanged(newValue, oldValue) {
  47. return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
  48. }
  49. function getInjectedSource(html, script) {
  50. return `
  51. ${html}
  52. <script>
  53. ${script}
  54. </script>
  55. `;
  56. }
  57. export function getScript(props, getBaseScript, getIframeBaseScript) {
  58. const { hasIframe, files, customStyle, customScript, style } = getReloadRelatedData(props);
  59. const baseScript = getBaseScript(style);
  60. let script = hasIframe && getIframeBaseScript ? getIframeBaseScript(style) : baseScript;
  61. script = files && files.length > 0 ? appendFilesToHead(files, script) : script;
  62. script = appendStylesToHead(customStyle, script);
  63. customScript && (script = customScript + script);
  64. return script;
  65. }
  66. export function getWidth(style) {
  67. return style && style.width ? style.width : screenWidth;
  68. }
  69. export function isEqual(newProps, oldProps) {
  70. return isChanged(getReloadRelatedData(newProps), getReloadRelatedData(oldProps));
  71. }
  72. export function setState(props, getBaseScript, getIframeBaseScript) {
  73. const { source, baseUrl } = props;
  74. const script = getScript(props, getBaseScript, getIframeBaseScript);
  75. let state = {};
  76. if (source.html) {
  77. let currentSource = { html: getInjectedSource(source.html, script) };
  78. baseUrl && Object.assign(currentSource, { baseUrl });
  79. Object.assign(state, { source: currentSource });
  80. } else {
  81. let currentSource = Object.assign({}, source);
  82. baseUrl && Object.assign(currentSource, { baseUrl });
  83. Object.assign(state, {
  84. source: currentSource,
  85. script
  86. });
  87. }
  88. return state;
  89. }
  90. export function handleSizeUpdated(height, width, onSizeUpdated) {
  91. onSizeUpdated &&
  92. onSizeUpdated({
  93. height,
  94. width
  95. });
  96. }
  97. export function isSizeChanged(height, oldHeight, width, oldWidth) {
  98. return (height && height !== oldHeight) || (width && width !== oldWidth);
  99. }
  100. export const domMutationObserveScript = `
  101. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  102. var observer = new MutationObserver(updateSize);
  103. observer.observe(document, {
  104. subtree: true,
  105. attributes: true
  106. });
  107. `;
  108. export const getCurrentSize = `
  109. function getSize(container) {
  110. var height = container.offsetHeight || document.body.offsetHeight;
  111. var width = container.offsetWidth || document.body.offsetWidth;
  112. return {
  113. height,
  114. width
  115. };
  116. }
  117. `;
  118. export function getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue) {
  119. return {
  120. height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
  121. width: enableAnimation ? widthValue : width
  122. };
  123. }