Add onSelectedVersion callback so it can be handled in any way the caller wishes

9 files changed, 35 insertions, 17 deletions

diff --git a/packages/react-docs/example/ts/index.tsx b/packages/react-docs/example/ts/index.tsx
index 8cfa8451c..bf7574e7b 100644
--- a/packages/react-docs/example/ts/index.tsx
+++ b/packages/react-docs/example/ts/index.tsx
@@ -50,7 +50,7 @@ const sourceUrl = `${
     docsInfoConfig.packageUrl
 }/blob/@0xproject/web3-wrapper%40${selectedVersion}/packages/web3-wrapper`;
 
-import * as typeDocJson from './json/web3_wrapper_typedoc_output.json';
+import * as typeDocJson from './json/0.2.0.json';
 const docAgnosticFormat = docsInfo.convertToDocAgnosticFormat(typeDocJson);
 
 render(
@@ -61,7 +61,12 @@ render(
             docsInfo={docsInfo}
             docAgnosticFormat={docAgnosticFormat}
             sourceUrl={sourceUrl}
+            onVersionSelected={onVersionSelected}
         />
     </MuiThemeProvider>,
     document.getElementById('app'),
 );
+
+function onVersionSelected(semver: string) {
+    // TODO
+}
diff --git a/packages/react-docs/example/ts/json/web3_wrapper_typedoc_output.json b/packages/react-docs/example/ts/json/0.2.0.json
index b2e01f614..b2e01f614 100644
--- a/packages/react-docs/example/ts/json/web3_wrapper_typedoc_output.json
+++ b/packages/react-docs/example/ts/json/0.2.0.json
diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 58523a1a9..b5e2bbb9d 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -48,9 +48,10 @@ export interface DocumentationProps {
     selectedVersion: string;
     availableVersions: string[];
     docsInfo: DocsInfo;
+    sourceUrl: string;
+    onVersionSelected: (semver: string) => void;
     docAgnosticFormat?: DocAgnosticFormat;
     sidebarHeader?: React.ReactNode;
-    sourceUrl: string;
     topBarHeight?: number;
 }
 
@@ -125,6 +126,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         sidebarHeader={this.props.sidebarHeader}
                                         topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
+                                        onVersionSelected={this.props.onVersionSelected}
                                     />
                                 </div>
                             </div>
diff --git a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
index 6a3cf2615..f562b3113 100644
--- a/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
@@ -18,6 +18,7 @@ export interface NestedSidebarMenuProps {
     onMenuItemClick?: () => void;
     selectedVersion?: string;
     versions?: string[];
+    onVersionSelected?: (semver: string) => void;
 }
 
 export interface NestedSidebarMenuState {}
@@ -69,6 +70,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                             <VersionDropDown
                                 selectedVersion={this.props.selectedVersion}
                                 versions={this.props.versions}
+                                onVersionSelected={this.props.onVersionSelected}
                             />
                         </div>
                     )}
diff --git a/packages/react-shared/src/ts/components/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx
index 86fe43507..d9e49b205 100644
--- a/packages/react-shared/src/ts/components/version_drop_down.tsx
+++ b/packages/react-shared/src/ts/components/version_drop_down.tsx
@@ -8,6 +8,7 @@ import { utils } from '../utils/utils';
 export interface VersionDropDownProps {
     selectedVersion: string;
     versions: string[];
+    onVersionSelected: (semver: string) => void;
 }
 
 export interface VersionDropDownState {}
@@ -33,14 +34,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
         return items;
     }
     private _updateSelectedVersion(e: any, index: number, semver: string) {
-        let path = window.location.pathname;
-        const lastChar = path[path.length - 1];
-        if (_.isFinite(_.parseInt(lastChar))) {
-            const pathSections = path.split('/');
-            pathSections.pop();
-            path = pathSections.join('/');
-        }
-        const baseUrl = utils.getCurrentBaseUrl();
-        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
+        this.props.onVersionSelected(semver);
     }
 }
diff --git a/packages/react-shared/src/ts/utils/utils.ts b/packages/react-shared/src/ts/utils/utils.ts
index 0d2e045b8..ebe896bbc 100644
--- a/packages/react-shared/src/ts/utils/utils.ts
+++ b/packages/react-shared/src/ts/utils/utils.ts
@@ -30,12 +30,6 @@ export const utils = {
         const id = name.replace(/ /g, '-');
         return id;
     },
-    getCurrentBaseUrl() {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
-        return baseUrl;
-    },
     getEtherScanLinkIfExists(addressOrTxHash: string, networkId: number, suffix: EtherscanLinkSuffixes): string {
         const networkName = constants.NETWORK_NAME_BY_ID[networkId];
         if (_.isUndefined(networkName)) {
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 2d6f2b235..29c68524c 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -38,6 +38,7 @@ interface TopBarProps {
     docsInfo?: DocsInfo;
     style?: React.CSSProperties;
     isNightVersion?: boolean;
+    onVersionSelected?: (semver: string) => void;
 }
 
 interface TopBarState {
@@ -320,6 +321,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
                     selectedVersion={this.props.docsVersion}
                     versions={this.props.availableDocVersions}
+                    onVersionSelected={this.props.onVersionSelected}
                 />
             </div>
         );
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index e0d7b272d..1281219c6 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -13,6 +13,7 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
 
 const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4';
 
@@ -80,6 +81,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     menuSubsectionsBySection={menuSubsectionsBySection}
                     docsInfo={this.props.docsInfo}
                     translate={this.props.translate}
+                    onVersionSelected={this._onVersionSelected.bind(this)}
                 />
                 <Documentation
                     selectedVersion={this.props.docsVersion}
@@ -89,6 +91,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
                     sourceUrl={sourceUrl}
                     topBarHeight={60}
+                    onVersionSelected={this._onVersionSelected.bind(this)}
                 />
             </div>
         );
@@ -141,4 +144,15 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         const sourceUrl = `${url}/blob/${tagPrefix}%40${this.props.docsVersion}/packages${pkg}`;
         return sourceUrl;
     }
+    private _onVersionSelected(semver: string) {
+        let path = window.location.pathname;
+        const lastChar = path[path.length - 1];
+        if (_.isFinite(_.parseInt(lastChar))) {
+            const pathSections = path.split('/');
+            pathSections.pop();
+            path = pathSections.join('/');
+        }
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
+    }
 }
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index d35f77e94..308b4bb5c 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -270,4 +270,10 @@ export const utils = {
             window.onload = () => resolve();
         });
     },
+    getCurrentBaseUrl() {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
 };