[docs] Change searchbox placeholder to inform users search is scoped …

…to said version of docs && change version strings from vX.X.X to SDKXX
lautaro-osacar · Mar 29, 2019 · 8e8366a · 8e8366a
1 parent a745776
commit 8e8366a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/docs/common/utilities.js b/docs/common/utilities.js
@@ -32,3 +32,13 @@ export const replaceVersionInUrl = (url, replaceWith) => {
 export const getVersionFromUrl = url => {
   return url.split('/')[2];
 };
+
+export const getUserFacingVersionString = version => {
+  if (version === 'latest') {
+    return 'latest';
+  } else if (version === 'unversioned') {
+    return 'unversioned';
+  } else {
+    return `SDK${version.substring(1, 3)}`
+  }
+}
diff --git a/docs/components/VersionSelector.js b/docs/components/VersionSelector.js
@@ -2,6 +2,7 @@ import styled, { keyframes, css } from 'react-emotion';
 
 import * as React from 'react';
 import * as Constants from '~/common/constants';
+import * as Utilities from '~/common/utilities';
 import { VERSIONS, LATEST_VERSION } from '~/common/versions';
 
 import ChevronDownIcon from '~/components/icons/ChevronDown';
@@ -69,12 +70,13 @@ const orderVersions = versions => {
   });
 };
 
+
 export default class VersionSelector extends React.Component {
   render() {
     return (
       <div className={STYLES_SELECT} style={this.props.style}>
         <label className={STYLES_SELECT_TEXT} htmlFor="version-menu">
-          {this.props.version} <ChevronDownIcon style={{ marginLeft: 8 }} />
+          {Utilities.getUserFacingVersionString(this.props.version)} <ChevronDownIcon style={{ marginLeft: 8 }} />
         </label>
         {// hidden links to help test-links spidering
         VERSIONS.map(v => (
@@ -89,7 +91,7 @@ export default class VersionSelector extends React.Component {
             .map(version => {
               return (
                 <option key={version} value={version}>
-                  {version === 'latest' ? 'latest (' + LATEST_VERSION + ')' : version}
+                  {version === 'latest' ? 'latest (' + LATEST_VERSION + ')' : Utilities.getUserFacingVersionString(version)}
                 </option>
               );
             })

diff --git a/docs/components/plugins/AlgoliaSearch.js b/docs/components/plugins/AlgoliaSearch.js
@@ -27,7 +27,7 @@ const STYLES_INPUT = css`
     box-sizing: border-box;
     width: 380px;
     font-size: 14px;
-    padding: 2px 36px 0 32px;
+    padding: 2px 36px 0 8px;
     border-radius: 5px;
     height: 32px;
     outline: 0;
@@ -51,16 +51,6 @@ const STYLES_INPUT = css`
 
 // TODO(jim): Not particularly happy with how this component chunks in while loading.
 class AlgoliaSearch extends React.Component {
-  componentWillReceiveProps(nextProps) {
-    /*if (this.props.version && this.props.version !== nextProps.version) {
-      this.docsearch.algoliaOptions = {
-        ...this.docsearch.algoliaOptions,
-        facetFilters: [
-          `tags:${nextProps.version === 'latest' ? LATEST_VERSION : nextProps.version}`,
-        ],
-      };
-    } */
-  }
 
   processUrl(url) {
     // Update URLs for new doc URLs
@@ -77,7 +67,7 @@ class AlgoliaSearch extends React.Component {
       apiKey: '2955d7b41a0accbe5b6aa2db32f3b8ac',
       indexName: 'expo',
       inputSelector: '#algolia-search-box',
-      enhancedSearchInput: true,
+      enhancedSearchInput: false,
       algoliaOptions: { 'facetFilters': [`version:${this.props.version === 'latest' ? 'v32.0.0' : this.props.version}`] },
       handleSelected: (input, event, suggestion) => {
         input.setVal('');
@@ -126,7 +116,7 @@ class AlgoliaSearch extends React.Component {
         <input
           id="algolia-search-box"
           type="text"
-          placeholder={`Search the docs`}
+          placeholder={`Search ${Utilities.getUserFacingVersionString(this.props.version)} docs`}
           autoComplete="off"
           spellCheck="false"
           dir="auto"