Merge pull request #397 from ownego/fix/reactive-sticky-manager

Update: modify stickyManager in AppProvider -> make it reactive
ownego · Aug 28, 2024 · 5f8d23f · 5f8d23f
2 parents 1bc74f8 + 83b9a5f
commit 5f8d23f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 28 deletions.
diff --git a/src/components/AppProvider/AppProvider.vue b/src/components/AppProvider/AppProvider.vue
@@ -46,7 +46,7 @@ const APP_FRAME_SCROLLABLE = 'AppFrameScollable';
 const props = defineProps<AppProviderProps>();
 defineSlots<AppProviderSlots>();
 
-const stickyManager = new StickyManager();
+const stickyManager = ref(new StickyManager());
 const scrollLockManager = new ScrollLockManager();
 
 const { isNavigationCollapsed } = useMediaQueryContext();
@@ -61,11 +61,11 @@ onMounted(() => {
   if (document != null) {
 
     if (!props.features?.dynamicTopBarAndReframe) {
-      stickyManager.setContainer(document);
+      stickyManager.value.setContainer(document);
     } else {
       const scrollContainerElement = document.getElementById(APP_FRAME_SCROLLABLE);
 
-      stickyManager.setContainer(scrollContainerElement || document);
+      stickyManager.value.setContainer(scrollContainerElement || document);
     }
 
     setBodyStyles();

diff --git a/src/components/Scrollable/Scrollable.vue b/src/components/Scrollable/Scrollable.vue
@@ -20,7 +20,6 @@ import { scrollable } from '@polaris/components/shared';
 import { debounce } from '@polaris/utilities/debounce';
 import { classNames, variationName } from '@/utilities/css';
 import { StickyManager } from '@/utilities/sticky-manager';
-import useLazyRef from '@/use/useLazyRef';
 import type { VueNode } from '@/utilities/types';
 import styles from '@polaris/components/Scrollable/Scrollable.module.css';
 
@@ -87,7 +86,7 @@ const topShadow = ref<boolean>(false);
 const bottomShadow = ref<boolean>(false);
 const scrollArea = ref<HTMLDivElement | null>(null);
 
-const stickyManager = useLazyRef(() => new StickyManager());
+const stickyManager = ref(new StickyManager());
 
 const finalClassName = computed(() => classNames(
   styles.Scrollable,

diff --git a/src/components/Sticky/Sticky.vue b/src/components/Sticky/Sticky.vue
@@ -6,10 +6,10 @@ div
 </template>
 
 <script setup lang="ts">
-import { type VNode, inject, ref, onMounted, onBeforeUnmount, onUpdated } from 'vue';
+import { type VNode, ref, onMounted, onBeforeUnmount, onUpdated } from 'vue';
+import useStickyManager from '@/use/useStickyManager';
 import { getRectForNode } from '@/utilities/geometry';
 import type { VueNode } from '@/utilities/types';
-import type { StickyManager } from '@/utilities/sticky-manager';
 
 export type StickyProps = {
   /** Element outlining the fixed position boundaries */
@@ -29,7 +29,7 @@ const slots = defineSlots<{
 }>();
 
 
-const stickyManager = inject<StickyManager>('sticky-manager', {} as StickyManager);
+const stickyManager = useStickyManager();
 
 const isSticky = ref(false);
 const style = ref({});
@@ -41,7 +41,7 @@ onMounted(() => {
     return;
   }
 
-  stickyManager.registerStickyItem({
+  stickyManager.value.registerStickyItem({
     stickyNode: stickyNode.value,
     placeHolderNode: placeHolderNode.value,
     handlePositioning: handlePositioning,
@@ -56,7 +56,7 @@ onBeforeUnmount(() => {
     return;
   }
 
-  stickyManager.unregisterStickyItem(stickyNode.value);
+  stickyManager.value.unregisterStickyItem(stickyNode.value);
 });
 
 const handlePositioning = (
@@ -104,7 +104,7 @@ const updateComponent = () => {
 
   if (!stickyNode.value || !placeHolderNode.value) return;
 
-  const stickyManagerItem = stickyManager.getStickyItem(stickyNode.value);
+  const stickyManagerItem = stickyManager.value.getStickyItem(stickyNode.value);
   const didPropsChange =
     !stickyManagerItem ||
     boundingElement !== stickyManagerItem.boundingElement ||
@@ -113,8 +113,8 @@ const updateComponent = () => {
 
   if (!didPropsChange) return;
 
-  stickyManager.unregisterStickyItem(stickyNode.value);
-  stickyManager.registerStickyItem({
+  stickyManager.value.unregisterStickyItem(stickyNode.value);
+  stickyManager.value.registerStickyItem({
     stickyNode: stickyNode.value,
     placeHolderNode: placeHolderNode.value,
     handlePositioning: handlePositioning,

diff --git a/src/use/useLazyRef.ts b/src/use/useLazyRef.ts
diff --git a/src/use/useStickyManager.ts b/src/use/useStickyManager.ts
@@ -1,7 +1,11 @@
-import { inject } from 'vue';
+import {
+  type Ref,
+  inject,
+} from 'vue';
 import type { StickyManager } from '@/utilities/sticky-manager';
 
 export default function useStickyManager() {
-  const context = inject('sticky-manager') as StickyManager;
+  const context = inject('sticky-manager') as Ref<StickyManager>;
+
   return context;
 }