@dnb/eufemia/es/shared/helpers/useSharedState.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
import useMounted from "./useMounted.js";
import useMountEffect from "./useMountEffect.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "./useIsomorphicLayoutEffect.js";
export function useWeakSharedState(id, initialData = undefined, onChange = null) {
  return useSharedState(id, initialData, onChange, {
    weak: true
  });
}
export function useSharedState(id, initialData = undefined, onChange = null, {
  weak = false
} = {}) {
  const [, forceUpdate] = useReducer(() => ({}), {});
  const hasMountedRef = useMounted();
  const waitForMountedRef = useRef(false);
  const instanceRef = useRef({});
  const forceRerender = useCallback(() => {
    if (hasMountedRef.current) {
      forceUpdate();
    } else {
      waitForMountedRef.current = true;
    }
  }, [hasMountedRef]);
  const shouldSync = useCallback(fn => {
    if (instanceRef.current === fn?.['ref']) {
      return false;
    }
  }, []);
  useMountEffect(() => {
    if (waitForMountedRef.current) {
      forceUpdate();
    }
  });
  const sharedState = useMemo(() => {
    if (id) {
      return createSharedState(id, initialData, {
        shouldSync
      });
    }
  }, [id, initialData, shouldSync]);
  const sharedAttachment = useMemo(() => {
    if (id) {
      return createSharedState(createReferenceKey(id, 'oc'), {
        onChange
      }, {
        shouldSync
      });
    }
  }, [id, onChange, shouldSync]);
  const syncAttachment = useCallback(newData => {
    if (id) {
      sharedAttachment.data?.onChange?.(newData);
    }
  }, [id, sharedAttachment]);
  const update = useCallback((newData, opts) => {
    if (id) {
      sharedState.update(newData, opts);
    }
  }, [id, sharedState]);
  const get = useCallback(() => {
    if (id) {
      return sharedState?.get?.();
    }
  }, [id, sharedState]);
  const set = useCallback(newData => {
    if (id) {
      sharedState.set(newData);
      syncAttachment(newData);
    }
  }, [id, sharedState, syncAttachment]);
  const extend = useCallback((newData, opts) => {
    if (id) {
      sharedState.extend(newData, opts);
      syncAttachment(newData);
    }
  }, [id, sharedState, syncAttachment]);
  useLayoutEffect(() => {
    if (!id) {
      return;
    }
    forceRerender['ref'] = instanceRef.current;
    sharedState.subscribe(forceRerender);
    return () => {
      sharedState.unsubscribe(forceRerender);
      if (weak && sharedState.subscribersRef.current.length === 0) {
        sharedState.update(undefined);
      }
    };
  }, [forceRerender, id, onChange, sharedState, weak]);
  useEffect(() => {
    if (id && onChange && !sharedAttachment.data?.onChange) {
      sharedAttachment.set({
        onChange
      });
    }
  }, [id, onChange, sharedAttachment]);
  return {
    get,
    data: sharedState?.get?.(),
    hadInitialData: sharedState?.hadInitialData,
    update,
    set,
    extend
  };
}
const sharedStates = new Map();
export function createSharedState(id, initialData, {
  shouldSync = null
} = {}) {
  if (!sharedStates.get(id)) {
    const subscribersRef = {
      current: []
    };
    const sync = (opts = {}) => {
      subscribersRef.current.forEach(subscriber => {
        const syncNow = opts.preventSyncOfSameInstance ? shouldSync?.(subscriber) !== false : true;
        if (syncNow) {
          subscriber();
        }
      });
    };
    const get = () => sharedStates.get(id).data;
    const set = newData => {
      sharedStates.get(id).data = newData === undefined ? undefined : {
        ...newData
      };
    };
    const update = (newData, opts) => {
      set(newData);
      sync(opts);
    };
    const extend = (newData, opts) => {
      sharedStates.get(id).data = {
        ...sharedStates.get(id).data,
        ...newData
      };
      sync(opts);
    };
    const subscribe = subscriber => {
      if (!subscribersRef.current.includes(subscriber)) {
        subscribersRef.current.push(subscriber);
      }
    };
    const unsubscribe = subscriber => {
      subscribersRef.current = subscribersRef.current.filter(sub => sub !== subscriber);
    };
    sharedStates.set(id, {
      data: undefined,
      get,
      set,
      extend,
      update,
      subscribe,
      unsubscribe,
      hadInitialData: Boolean(initialData),
      subscribersRef
    });
    if (initialData) {
      extend(initialData);
    }
  } else if (sharedStates.get(id).data === undefined && initialData !== undefined) {
    sharedStates.get(id).data = {
      ...initialData
    };
  }
  return sharedStates.get(id);
}
export function createReferenceKey(ref1, ref2) {
  if (!cache.has(ref1)) {
    cache.set(ref1, new Map());
  }
  const innerMap = cache.get(ref1);
  if (!innerMap.has(ref2)) {
    innerMap.set(ref2, {});
  }
  return innerMap.get(ref2);
}
const cache = new Map();
//# sourceMappingURL=useSharedState.js.map