Merge pull request #35 from predixdesignsystem/supportPrefetchHeaders

Provide ability to add custom headers to prefetch and remote url search requests
predixdesignsystem · Jan 9, 2019 · 612714e · 612714e
2 parents 08d6d3b + aff3b73
commit 612714e
Show file tree

Hide file tree

Showing 8 changed files with 9,448 additions and 9,065 deletions.
diff --git a/css/px-typeahead-styles.html b/css/px-typeahead-styles.html
diff --git a/demo/px-typeahead-demo.html b/demo/px-typeahead-demo.html
@@ -26,6 +26,7 @@
 <link rel="import" href="../../px-demo/px-demo-props.html" />
 <link rel="import" href="../../px-demo/px-demo-interactive.html" />
 <link rel="import" href="../../px-demo/px-demo-component-snippet.html" />
+<link rel="import" href="../../px-demo/px-demo-code-editor.html" />
 
 <!-- Imports for this component -->
 
@@ -48,6 +49,9 @@
       <!-- Props -->
       <px-demo-props slot="px-demo-props" props="{{props}}" config="[[chosenConfig]]"></px-demo-props>
 
+      <!-- Code Editor -->
+      <px-demo-code-editor slot="px-demo-code-editor" props="{{props}}" config="[[chosenConfig]]"></px-demo-code-editor>
+
       <!-- Component ---------------------------------------------------------->
       <px-demo-component slot="px-demo-component">
         <div style="width:250px;">
@@ -56,6 +60,7 @@
             disabled="{{props.disabled.value}}"
             required="{{props.required.value}}"
             prefetch-url="{{props.prefetchUrl.value}}"
+            prefetch-headers="{{props.prefetchHeaders.value}}"
             placeholder="[[props.placeholder.value]]">
           </px-typeahead>
         </div>
@@ -105,14 +110,18 @@
             {
               configName: "Default",
               configReset: true,
-              prefetchUrl: ''
+              prefetchUrl: '',
+              prefetchHeaders: ''
             },
             {
               configName: "Prefetch URL",
               disabled: false,
               localCandidates: '',
               placeholder: "Options from a JSON file",
-              prefetchUrl: "https://www.predix-ui.com/px-typeahead/px-typeahead/countries.json"
+              prefetchUrl: "https://cors-anywhere.herokuapp.com/https://predix-ui.github.io/px-typeahead/px-typeahead/countries.json",
+              prefetchHeaders: {
+                "From": "predixdesignsystem@ge.com"
+              }
             }
           ];
         }
@@ -204,7 +213,14 @@
       },
       prefetchUrl: {
         type: String,
-        defaultValue: "https://www.predix-ui.com/px-typeahead/px-typeahead/countries.json"
+        defaultValue: "https://cors-anywhere.herokuapp.com/https://predix-ui.github.io/px-typeahead/px-typeahead/countries.json"
+      },
+      prefetchHeaders: {
+        type: Object,
+        inputType: 'code:JSON',
+        defaultValue: {
+          'From': 'predixdesignsystem@ge.com'
+        }
       }
     }
   });

diff --git a/demo/simple-demo.html b/demo/simple-demo.html
@@ -21,13 +21,11 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>
-    px-typeahead Demo</title>
+  <title>px-typeahead Demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../polymer/polymer.html" />
   <link rel="import" href="../px-typeahead.html" />
   <link rel="import" href="../../px-theme/px-theme-styles.html" />
-
 </head>
 
 <body>
@@ -37,36 +35,32 @@
         <style include="px-theme-styles" is="custom-style"></style>
       </custom-style>
 
-      <div class="u-p-">
+      <div style="width:430px; margin:20px">
+        <h2>Examples of px-typeahead</h2>
 
-        <h3>Local candidates example with maxSuggestions 10 </h3>
-        <div class="u-1/3">
+        <div style="margin:30px 0">
+          <h4>Local candidates example with maxSuggestions 10 </h4>
           <label>Selected value : {{inputValue}}</label>
           <px-typeahead max-suggestions="10" local-candidates="{{states}}" placeholder="US states" input-value="{{inputValue}}">
           </px-typeahead>
         </div>
 
-        <h3>Local candidates passed as array of strings</h3>
-        <div class="u-1/3">
+        <div style="margin:30px 0">
+          <h4>Local candidates passed as array of strings</h4>
           <px-typeahead max-suggestions="10" local-candidates='["abc","abcd","abcde","a1b2c3","a/+=|3","Etc/GMT+3"]' placeholder='["abc","abcd","abcde"]'>
           </px-typeahead>
         </div>
 
-
-        <div class="u-1/3">
-          <h4>Testing the overlay of the above typeahead</h4>
+        <div style="margin:30px 0">
+          <h4>Prefetched candidates example with maxSuggestions 4</h4>
+          <px-typeahead max-suggestions="4" prefetch-url="https://cdn.jsdelivr.net/gh/predixdesignsystem/px-typeahead/countries.json" placeholder="Ajax call getting countries.json"></px-typeahead>
         </div>
 
-        <h3>Prefetched candidates example with maxSuggestions 4</h3>
-        <!-- This example doesn't work ¯\_(ツ)_/¯ -->
-        <div class="u-1/3">
-          <px-typeahead max-suggestions="8" prefetch-url="https://predixdev.github.io/px-typeahead/px-typeahead/countries.json" placeholder="Ajax call getting countries.json">
-          </px-typeahead>
+        <div style="margin:30px 0">
+          <h4>Test custom headers on prefetch</h4>
+          <px-typeahead max-suggestions="4" prefetch-url="https://cors-anywhere.herokuapp.com/https://predix-ui.github.io/px-typeahead/px-typeahead/countries.json" prefetch-headers='{ "X-Design-System": "Test" }' placeholder="Ajax call getting countries.json"></px-typeahead>
         </div>
-
       </div>
-
-
     </template>
   </dom-bind>
   <script>