feat(can-refine): provide canRefine for multiple widget slots (#1141)

package.json

@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.43.0",
+    "instantsearch.js": "^4.45.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -133,11 +133,11 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "56.50 kB"
+      "maxSize": "56.75 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "57.75 kB"
+      "maxSize": "58.00 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

src/components/Breadcrumb.vue

@@ -64,9 +64,7 @@ export default {
         $$widgetType: 'ais.breadcrumb',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'Breadcrumb' }),
   ],
   props: {

src/components/ClearRefinements.vue

@@ -37,9 +37,7 @@ export default {
         $$widgetType: 'ais.clearRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.hasRefinements),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'ClearRefinements' }),
   ],
   props: {

src/components/CurrentRefinements.vue

@@ -71,10 +71,7 @@ export default {
         $$widgetType: 'ais.currentRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state =>
-        Boolean(state.items) && state.items.length > 0,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     includedAttributes: {

src/components/HierarchicalMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :can-toggle-show-more="state.canToggleShowMore"
       :is-showing-more="state.isShowingMore"
       :refine="state.refine"
@@ -46,9 +46,6 @@ import { createPanelConsumerMixin } from '../mixins/panel';
 import HierarchicalMenuList from './HierarchicalMenuList.vue';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  Boolean(state.items) && state.items.length > 0;
-
 export default {
   name: 'AisHierarchicalMenu',
   mixins: [
@@ -61,9 +58,7 @@ export default {
         $$widgetType: 'ais.hierarchicalMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   components: {
     HierarchicalMenuList,
@@ -120,9 +115,6 @@ export default {
         transformItems: this.transformItems,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

src/components/HitsPerPage.vue

@@ -7,6 +7,7 @@
       :items="state.items"
       :refine="state.refine"
       :hasNoResults="state.hasNoResults"
+      :canRefine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
         $$widgetType: 'ais.hitsPerPage',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

src/components/Menu.vue

@@ -61,9 +61,7 @@ export default {
         $$widgetType: 'ais.menu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

src/components/MenuSelect.vue

@@ -53,9 +53,7 @@ export default {
         $$widgetType: 'ais.menuSelect',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

src/components/NumericMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -51,9 +51,7 @@ export default {
       }
     ),
     createSuitMixin({ name: 'NumericMenu' }),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -77,9 +75,6 @@ export default {
         items: this.items,
       };
     },
-    canRefine() {
-      return !this.state.hasNoResults;
-    },
   },
 };
 </script>

src/components/Pagination.vue

@@ -183,9 +183,7 @@ export default {
         $$widgetType: 'ais.pagination',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.nbPages > 1,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     padding: {

src/components/RangeInput.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :current-refinement="values"
       :refine="refine"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :range="state.range"
       :send-event="state.sendEvent"
     >
@@ -60,9 +60,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  state && Boolean(state.range) && state.range.min !== state.range.max;
-
 export default {
   name: 'AisRangeInput',
   mixins: [
@@ -75,9 +72,7 @@ export default {
         $$widgetType: 'ais.rangeInput',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -119,9 +114,6 @@ export default {
         precision: this.precision,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
     step() {
       return 1 / Math.pow(10, this.precision);
     },

src/components/RatingMenu.vue

@@ -8,6 +8,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
+      :can-refine="state.canRefine"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -95,9 +96,7 @@ export default {
         $$widgetType: 'ais.ratingMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

src/components/RefinementList.vue

@@ -118,9 +118,7 @@ export default {
         $$widgetType: 'ais.refinementList',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

src/components/SortBy.vue

@@ -8,6 +8,7 @@
       :has-no-results="state.hasNoResults"
       :refine="state.refine"
       :current-refinement="state.currentRefinement"
+      :can-refine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
       }
     ),
 
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

src/components/ToggleRefinement.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :value="state.value"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -35,8 +35,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state => Boolean(state.value && state.value.count);
-
 export default {
   name: 'AisToggleRefinement',
   mixins: [
@@ -49,9 +47,7 @@ export default {
         $$widgetType: 'ais.toggleRefinement',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -82,9 +78,6 @@ export default {
         off: this.off,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

src/components/__tests__/Breadcrumb.js

@@ -182,31 +182,6 @@ describe('default render', () => {
   });
 });
 
-describe('panel', () => {
-  it('calls the Panel mixin with `canRefine`', async () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-    expect(mapStateToCanRefine()).toBe(true);
-
-    await wrapper.setData({
-      state: {
-        canRefine: false,
-      },
-    });
-
-    expect(mapStateToCanRefine()).toBe(false);
-
-    expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-  });
-});
-
 describe('custom default render', () => {
   const defaultSlot = `
     <template v-slot="{ items, canRefine, refine, createURL }">

src/components/__tests__/ClearRefinements.js

@@ -187,26 +187,3 @@ describe('custom resetLabel render', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
-
-it('calls the Panel mixin with `hasRefinement`', async () => {
-  __setState({
-    hasRefinements: true,
-  });
-
-  const wrapper = mount(ClearRefinements);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasRefinements: false,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});