You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

35 lines
986 B

  1. import ResizeObserver from "resize-observer-polyfill";
  2. const isServer = typeof window === "undefined";
  3. const resizeHandler = (entries: any[]): void => {
  4. for (const entry of entries) {
  5. const listeners = entry.target.__resizeListeners__ || [];
  6. if (listeners.length) {
  7. listeners.forEach((fn: () => any) => {
  8. fn();
  9. });
  10. }
  11. }
  12. };
  13. export const addResizeListener = (element: any, fn: () => any): any => {
  14. if (isServer) return;
  15. if (!element.__resizeListeners__) {
  16. element.__resizeListeners__ = [];
  17. element.__ro__ = new ResizeObserver(resizeHandler);
  18. element.__ro__.observe(element);
  19. }
  20. element.__resizeListeners__.push(fn);
  21. };
  22. export const removeResizeListener = (element: any, fn: () => any): any => {
  23. if (!element || !element.__resizeListeners__) return;
  24. element.__resizeListeners__.splice(
  25. element.__resizeListeners__.indexOf(fn),
  26. 1
  27. );
  28. if (!element.__resizeListeners__.length) {
  29. element.__ro__.disconnect();
  30. }
  31. };