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

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