Geen omschrijving

common.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. 'use strict';
  2. import { Dimensions } from 'react-native';
  3. import Immutable from 'immutable';
  4. function appendFilesToHead(files, script) {
  5. if (!files) {
  6. return script;
  7. }
  8. return files.reduceRight((file, combinedScript) => {
  9. const { rel, type, href } = file;
  10. return `
  11. var link = document.createElement('link');
  12. link.rel = '${rel}';
  13. link.type = '${type}';
  14. link.href = '${href}';
  15. document.head.appendChild(link);
  16. ${combinedScript}
  17. `;
  18. }, script);
  19. }
  20. const screenWidth = Dimensions.get('window').width;
  21. function getWidth(style) {
  22. return style && style.width ? style.width : screenWidth;
  23. }
  24. const bodyStyle = `
  25. body {
  26. margin: 0;
  27. padding: 0;
  28. }
  29. `;
  30. function appendStylesToHead(styles, script) {
  31. const currentStyles = styles ? bodyStyle + styles : bodyStyle;
  32. // Escape any single quotes or newlines in the CSS with .replace()
  33. const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
  34. return `
  35. var styleElement = document.createElement('style');
  36. styleElement.innerHTML = '${escaped}';
  37. document.head.appendChild(styleElement);
  38. ${script}
  39. `;
  40. }
  41. function getReloadRelatedData(props) {
  42. const { hasIframe, files, customStyle, customScript, style } = props;
  43. return {
  44. hasIframe,
  45. files,
  46. customStyle,
  47. customScript,
  48. style
  49. };
  50. }
  51. function isChanged(newValue, oldValue) {
  52. return !Immutable.is(Immutable.fromJS(newValue), Immutable.fromJS(oldValue));
  53. }
  54. function getScript(props, getBaseScript, getIframeBaseScript) {
  55. const { hasIframe, files, customStyle, customScript, style } = props;
  56. const baseScript = getBaseScript(style);
  57. let script = hasIframe ? baseScript : getIframeBaseScript(style);
  58. script = files ? appendFilesToHead(files, baseScript) : baseScript;
  59. script = appendStylesToHead(customStyle, script);
  60. customScript && (script = customScript + script);
  61. return script;
  62. }
  63. function needChangeSource(nextProps, props) {
  64. return nextProps && props && isChanged(getReloadRelatedData(nextProps), getReloadRelatedData(props));
  65. }
  66. function handleSizeUpdated(height, width, onSizeUpdated) {
  67. onSizeUpdated &&
  68. onSizeUpdated({
  69. height,
  70. width
  71. });
  72. }
  73. const domMutationObserveScript = `
  74. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  75. var observer = new MutationObserver(updateSize);
  76. observer.observe(document, {
  77. subtree: true,
  78. attributes: true
  79. });
  80. `;
  81. export { needChangeSource, getWidth, getScript, handleSizeUpdated, domMutationObserveScript };