fix(refinementList): move template logic to widget

algolia · Feb 14, 2019 · 8b92fa1 · 8b92fa1
1 parent 40bd737
commit 8b92fa1
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 60 deletions.
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -277,9 +277,9 @@ describe('RefinementList', () => {
           templates: {
             item: item => item,
             searchableNoResults: x => x,
-            searchableReset: 'searchableReset',
-            searchableSubmit: 'searchableSubmit',
-            searchableLoadingIndicator: 'searchableLoadingIndicator',
+            reset: 'reset',
+            submit: 'submit',
+            loadingIndicator: 'loadingIndicator',
           },
         },
         toggleRefinement: () => {},
@@ -414,9 +414,9 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            searchableReset: 'searchableReset',
-            searchableSubmit: 'searchableSubmit',
-            searchableLoadingIndicator: 'searchableLoadingIndicator',
+            reset: 'reset',
+            submit: 'submit',
+            loadingIndicator: 'loadingIndicator',
           },
         },
         toggleRefinement: () => {},

diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -353,7 +353,7 @@ exports[`RefinementList rendering with facets from search 1`] = `
           className="submit"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableSubmit",
+              "__html": "submit",
             }
           }
           hidden={false}
@@ -364,7 +364,7 @@ exports[`RefinementList rendering with facets from search 1`] = `
           className="reset"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableReset",
+              "__html": "reset",
             }
           }
           hidden={true}
@@ -375,7 +375,7 @@ exports[`RefinementList rendering with facets from search 1`] = `
           className="loadingIndicator"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableLoadingIndicator",
+              "__html": "loadingIndicator",
             }
           }
           hidden={true}
@@ -520,7 +520,7 @@ exports[`RefinementList rendering without facets from search 1`] = `
           className="submit"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableSubmit",
+              "__html": "submit",
             }
           }
           hidden={false}
@@ -531,7 +531,7 @@ exports[`RefinementList rendering without facets from search 1`] = `
           className="reset"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableReset",
+              "__html": "reset",
             }
           }
           hidden={true}
@@ -542,7 +542,7 @@ exports[`RefinementList rendering without facets from search 1`] = `
           className="loadingIndicator"
           dangerouslySetInnerHTML={
             Object {
-              "__html": "searchableLoadingIndicator",
+              "__html": "loadingIndicator",
             }
           }
           hidden={true}

diff --git a/src/components/SearchBox/SearchBox.js b/src/components/SearchBox/SearchBox.js
@@ -15,31 +15,6 @@ const SearchBoxCSSClasses = PropTypes.shape({
   loadingIcon: PropTypes.string.isRequired,
 });
 
-/**
- * Gets the template key based on the given templates.
- *
- * The template keys differ if the component is used for
- * the `searchbox` widget or the `refinementList` widget.
- *
- * @param {string} templateName The template to get the key from
- * @param {object} templates The widget templates
- * @returns {string} the template key
- */
-function getTemplateKey(templateName, templates) {
-  switch (templateName) {
-    case 'reset':
-      return templates.searchableReset ? 'searchableReset' : 'reset';
-    case 'submit':
-      return templates.searchableSubmit ? 'searchableSubmit' : 'submit';
-    case 'loadingIndicator':
-      return templates.searchableLoadingIndicator
-        ? 'searchableLoadingIndicator'
-        : 'loadingIndicator';
-    default:
-      return templateName;
-  }
-}
-
 class SearchBox extends Component {
   static propTypes = {
     placeholder: PropTypes.string.isRequired,
@@ -175,7 +150,7 @@ class SearchBox extends Component {
           />
 
           <Template
-            templateKey={getTemplateKey('submit', templates)}
+            templateKey="submit"
             rootTagName="button"
             rootProps={{
               className: cssClasses.submit,
@@ -188,7 +163,7 @@ class SearchBox extends Component {
           />
 
           <Template
-            templateKey={getTemplateKey('reset', templates)}
+            templateKey="reset"
             rootTagName="button"
             rootProps={{
               className: cssClasses.reset,
@@ -202,7 +177,7 @@ class SearchBox extends Component {
 
           {showLoadingIndicator && (
             <Template
-              templateKey={getTemplateKey('loadingIndicator', templates)}
+              templateKey="loadingIndicator"
               rootTagName="span"
               rootProps={{
                 className: cssClasses.loadingIndicator,

diff --git a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
@@ -65,7 +65,7 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
   <span class=\\"{{cssClasses.labelText}}\\">{{{highlighted}}}</span>
   <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>",
-        "searchableLoadingIndicator": "
+        "loadingIndicator": "
   <svg class=\\"{{cssClasses.loadingIcon}}\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 38 38\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"#444\\">
     <g fill=\\"none\\" fillRule=\\"evenodd\\">
       <g transform=\\"translate(1 1)\\" strokeWidth=\\"2\\">
@@ -84,34 +84,34 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
     </g>
   </svg>
     ",
-        "searchableNoResults": "No results",
-        "searchableReset": "
+        "reset": "
   <svg class=\\"{{cssClasses.resetIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 20 20\\" width=\\"10\\" height=\\"10\\">
     <path d=\\"M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z\\"></path>
   </svg>
     ",
-        "searchableSubmit": "
-  <svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
-    <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
-  </svg>
-    ",
+        "searchableNoResults": "No results",
         "showMoreText": "
     {{#isShowingMore}}
       Show less
     {{/isShowingMore}}
     {{^isShowingMore}}
       Show more
     {{/isShowingMore}}
+    ",
+        "submit": "
+  <svg class=\\"{{cssClasses.submitIcon}}\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"10\\" height=\\"10\\" viewBox=\\"0 0 40 40\\">
+    <path d=\\"M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z\\"></path>
+  </svg>
     ",
       },
       "templatesConfig": Object {},
       "useCustomCompileOptions": Object {
-        "item": false,
-        "searchableLoadingIndicator": false,
-        "searchableNoResults": false,
-        "searchableReset": false,
-        "searchableSubmit": false,
-        "showMoreText": false,
+        "item": true,
+        "loadingIndicator": true,
+        "reset": true,
+        "searchableNoResults": true,
+        "showMoreText": true,
+        "submit": true,
       },
     }
   }

diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
@@ -16,6 +16,32 @@ const withUsage = createDocumentationMessageGenerator({
 const suit = component('RefinementList');
 const searchBoxSuit = component('SearchBox');
 
+/**
+ * Transforms the searchable templates by removing the `searchable` prefix.
+ *
+ * This makes them usable in the `SearchBox` component.
+ *
+ * @param {object} templates The widget templates
+ * @returns {object} the formatted templates
+ */
+function transformTemplates(templates) {
+  const allTemplates = {
+    ...templates,
+    submit: templates.searchableSubmit,
+    reset: templates.searchableReset,
+    loadingIndicator: templates.searchableLoadingIndicator,
+  };
+
+  const {
+    searchableReset,
+    searchableSubmit,
+    searchableLoadingIndicator,
+    ...transformedTemplates
+  } = allTemplates;
+
+  return transformedTemplates;
+}
+
 const renderer = ({
   containerNode,
   cssClasses,
@@ -42,7 +68,6 @@ const renderer = ({
 ) => {
   if (isFirstRendering) {
     renderState.templateProps = prepareTemplateProps({
-      defaultTemplates,
       templatesConfig: instantSearchInstance.templatesConfig,
       templates,
     });
@@ -173,7 +198,7 @@ export default function refinementList({
   searchableEscapeFacetValues = true,
   searchableIsAlwaysActive = true,
   cssClasses: userCssClasses = {},
-  templates = defaultTemplates,
+  templates: userTemplates = defaultTemplates,
   transformItems,
 } = {}) {
   if (!container) {
@@ -184,10 +209,10 @@ export default function refinementList({
     ? Boolean(searchableEscapeFacetValues)
     : false;
   const containerNode = getContainerNode(container);
-  const allTemplates = {
+  const templates = transformTemplates({
     ...defaultTemplates,
-    ...templates,
-  };
+    ...userTemplates,
+  });
 
   const cssClasses = {
     root: cx(suit(), userCssClasses.root),
@@ -261,7 +286,7 @@ export default function refinementList({
   const specializedRenderer = renderer({
     containerNode,
     cssClasses,
-    templates: allTemplates,
+    templates,
     renderState: {},
     searchable,
     searchablePlaceholder,