You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

App.web.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import { AtlasKitThemeProvider } from '@atlaskit/theme';
  2. import React from 'react';
  3. import { getLocationContextRoot } from '../../base/util';
  4. import '../../room-lock';
  5. import { AbstractApp } from './AbstractApp';
  6. /**
  7. * Root application component.
  8. *
  9. * @extends AbstractApp
  10. */
  11. export class App extends AbstractApp {
  12. /**
  13. * App component's property types.
  14. *
  15. * @static
  16. */
  17. static propTypes = AbstractApp.propTypes;
  18. /**
  19. * Initializes a new App instance.
  20. *
  21. * @param {Object} props - The read-only React Component props with which
  22. * the new instance is to be initialized.
  23. */
  24. constructor(props) {
  25. super(props);
  26. this.state = {
  27. ...this.state,
  28. /**
  29. * The context root of window.location i.e. this Web App.
  30. *
  31. * @type {string}
  32. */
  33. windowLocationContextRoot: this._getWindowLocationContextRoot()
  34. };
  35. }
  36. /**
  37. * Overrides the parent method to inject {@link AtlasKitThemeProvider} as
  38. * the top most component.
  39. *
  40. * @override
  41. */
  42. _createElement(component, props) {
  43. return (
  44. <AtlasKitThemeProvider mode = 'dark'>
  45. { super._createElement(component, props) }
  46. </AtlasKitThemeProvider>
  47. );
  48. }
  49. /**
  50. * Gets a Location object from the window with information about the current
  51. * location of the document.
  52. *
  53. * @inheritdoc
  54. */
  55. getWindowLocation() {
  56. return window.location;
  57. }
  58. /**
  59. * Gets the context root of this Web App from window.location.
  60. *
  61. * @private
  62. * @returns {string} The context root of window.location i.e. this Web App.
  63. */
  64. _getWindowLocationContextRoot() {
  65. return getLocationContextRoot(this.getWindowLocation());
  66. }
  67. /**
  68. * Navigates to a specific Route (via platform-specific means).
  69. *
  70. * @param {Route} route - The Route to which to navigate.
  71. * @protected
  72. * @returns {void}
  73. */
  74. _navigate(route) {
  75. let path;
  76. if (route) {
  77. path = route.path;
  78. const store = this._getStore();
  79. // The syntax :room bellow is defined by react-router. It "matches a
  80. // URL segment up to the next /, ?, or #. The matched string is
  81. // called a param."
  82. path
  83. = path.replace(
  84. /:room/g,
  85. store.getState()['features/base/conference'].room);
  86. path = this._routePath2WindowLocationPathname(path);
  87. }
  88. // Navigate to the specified Route.
  89. const windowLocation = this.getWindowLocation();
  90. let promise;
  91. if (!route || windowLocation.pathname === path) {
  92. // The browser is at the specified path already and what remains is
  93. // to make this App instance aware of the route to be rendered at
  94. // the current location.
  95. // XXX Refer to the super's _navigate for an explanation why a
  96. // Promise is returned.
  97. promise = super._navigate(route);
  98. } else {
  99. // The browser must go to the specified location. Once the specified
  100. // location becomes current, the App will be made aware of the route
  101. // to be rendered at it.
  102. windowLocation.pathname = path;
  103. }
  104. return promise || Promise.resolve();
  105. }
  106. /**
  107. * Converts a specific Route path to a window.location.pathname.
  108. *
  109. * @param {string} path - A Route path to be converted to/represeted as a
  110. * window.location.pathname.
  111. * @private
  112. * @returns {string} A window.location.pathname-compatible representation of
  113. * the specified Route path.
  114. */
  115. _routePath2WindowLocationPathname(path) {
  116. let pathname = this.state.windowLocationContextRoot;
  117. pathname.endsWith('/') || (pathname += '/');
  118. pathname += path.startsWith('/') ? path.substring(1) : path;
  119. return pathname;
  120. }
  121. }