@fibery/ui-kit 1.39.1 → 1.40.1

package/src/images-gallery-2/images-gallery-2.tsx

@@ -1,522 +0,0 @@
-/* eslint-disable max-lines */
-import PhotoSwipeLightbox, {type PhotoSwipeEventsMap} from "photoswipe/lightbox";
-import "photoswipe/style.css";
-import {
-  ImagesGalleryMethodsProvider,
-  ImagesGalleryRegistryProvider,
-  ImagesGalleryStateProvider,
-} from "../images-gallery/images-gallery";
-import {PropsWithChildren, useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";
-import {css} from "@linaria/core";
-import {createRoot} from "react-dom/client";
-import {space, themeVars} from "../design-system";
-import {safeAreaInsetLeftVar, safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
-import {useToast} from "../toast/toast-provider";
-import {ToastQueue} from "../toast/toast-queue";
-import {useThemeMode} from "../theme-provider";
-import {ThemeMode} from "../theme-settings";
-import {SlideButtons} from "./slide-buttons";
-import {useIsPhone} from "../use-is-phone";
-
-type Registry = Map<
-  string,
-  {
-    src: string;
-    type: "image" | "video" | "iframe";
-    contentType?: string;
-    actions?: React.ReactNode;
-    zoomed: boolean;
-    setZoomed: (zoomed: boolean) => void;
-  }
->;
-
-type Methods = {
-  setVisible: (visible: boolean) => void;
-  setActivated: (activated: boolean) => void;
-  update: () => void;
-  nextImage: () => void;
-  prevImage: () => void;
-};
-
-const galleryMainClass = css`
-  z-index: 1000;
-  & .pswp__button--arrow--prev {
-    left: calc(${space.s20}px + var(${safeAreaInsetLeftVar}));
-    height: ${space.s28}px;
-    width: ${space.s28}px;
-    margin-top: -${space.s14}px;
-  }
-  & .pswp__button--arrow--next {
-    right: calc(${space.s20}px + var(${safeAreaInsetRightVar}));
-    height: ${space.s28}px;
-    width: ${space.s28}px;
-    margin-top: -${space.s14}px;
-  }
-
-  & .pswp__button--zoom {
-    top: ${space.s20}px;
-    height: ${space.s28}px;
-    width: ${space.s28}px;
-  }
-
-  & .pswp__counter {
-    margin-top: ${space.s20}px;
-    margin-inline-start: ${space.s24}px;
-  }
-
-  & .pswp__video-container {
-    padding: ${space.s60}px;
-  }
-
-  & .pswp__video-container video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-    background-color: black;
-  }
-
-  & .pswp__iframe-container {
-    padding: ${space.s60}px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  & .pswp__iframe-container iframe {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-    color: ${themeVars.textColor};
-    background-color: ${themeVars.colorBgPopup};
-    border: none;
-  }
-
-  & .pswp__top-bar {
-    top: var(${safeAreaInsetTopVar});
-    left: var(${safeAreaInsetLeftVar});
-  }
-`;
-
-export function ImagesGalleryProvider2({children}: PropsWithChildren) {
-  const [imagesRegistry] = useState<Registry>(() => new Map());
-  const [galleryState, dispatchState] = useReducer(imagesGalleryReducer, [], initialState);
-
-  const lightbox = useRef<PhotoSwipeLightbox | null>(null);
-  const markAllNotZoomed = useCallback(() => {
-    for (const node of imagesRegistry.values()) {
-      if (node.zoomed) {
-        node.setZoomed(false);
-      }
-    }
-  }, [imagesRegistry]);
-
-  useEffect(() => {
-    return () => {
-      lightbox.current?.destroy();
-      lightbox.current = null;
-      markAllNotZoomed();
-    };
-  }, [markAllNotZoomed]);
-
-  const methods: Methods = useMemo(() => {
-    return {
-      setVisible: () => {},
-      setActivated: (activated: boolean) => {
-        dispatchState({type: "set-activated", payload: activated});
-      },
-      update: () => {
-        dispatchState({type: "inc"});
-      },
-      nextImage: () => {
-        lightbox.current?.pswp?.next();
-      },
-      prevImage: () => {
-        lightbox.current?.pswp?.prev();
-      },
-    };
-  }, []);
-
-  const toast = useToast();
-  const themeMode = useThemeMode();
-  const isPhone = useIsPhone();
-
-  useEffect(() => {
-    if (galleryState.activated) {
-      const value = initGallery(imagesRegistry, {toastQueue: toast, isPhone, themeMode});
-      value.on("close", () => {
-        dispatchState({type: "set-activated", payload: false});
-        markAllNotZoomed();
-        value.destroy();
-      });
-
-      lightbox.current = value;
-    }
-
-    return () => {
-      lightbox.current?.destroy();
-      lightbox.current = null;
-    };
-  }, [galleryState.activated, imagesRegistry, markAllNotZoomed, toast, themeMode, isPhone]);
-
-  return (
-    <ImagesGalleryRegistryProvider value={imagesRegistry}>
-      <ImagesGalleryMethodsProvider value={methods}>
-        <ImagesGalleryStateProvider value={galleryState}>{children}</ImagesGalleryStateProvider>
-      </ImagesGalleryMethodsProvider>
-    </ImagesGalleryRegistryProvider>
-  );
-}
-
-type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
-type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
-
-function initialState(): State {
-  return {version: "2", visible: false, activated: false, _inc: 0};
-}
-
-function imagesGalleryReducer(state: State, action: Actions) {
-  if (action.type === "set-visible") {
-    return {...state, visible: action.payload};
-  }
-  if (action.type === "set-activated") {
-    return {...state, activated: action.payload};
-  }
-  if (action.type === "inc") {
-    return {...state, _inc: state._inc + 1};
-  }
-  return state;
-}
-
-type GalleryEntry = {
-  type: string;
-  src: string;
-  contentType: string | null;
-  zoomed: boolean;
-  setZoomed: (value: boolean) => void;
-  state: "none" | "loading" | "error" | "loaded";
-  width?: number;
-  height?: number;
-};
-
-function initGallery(
-  imagesRegistry: Registry,
-  {toastQueue, themeMode, isPhone}: {toastQueue: ToastQueue; themeMode: ThemeMode; isPhone: boolean}
-) {
-  const items = [...imagesRegistry.values()];
-  const dataSource: GalleryEntry[] = items.map((item) => ({
-    ...item,
-    state: "none",
-    contentType: item.contentType ?? null,
-  }));
-
-  const zoomedIndex = dataSource.findIndex((item) => item.zoomed);
-
-  const lightbox = new PhotoSwipeLightbox({
-    dataSource,
-    mainClass: galleryMainClass,
-    pswpModule: () => import("photoswipe"),
-    preloaderDelay: 1,
-    arrowPrev: false,
-    arrowNext: false,
-    close: false,
-    zoom: false,
-    loop: false,
-  });
-
-  lightbox.addFilter("numItems", (_numItems) => {
-    return dataSource.length;
-  });
-
-  lightbox.addFilter("itemData", (_itemData, index) => {
-    const item = dataSource[index];
-
-    if (item.type === "video" || item.type === "iframe") {
-      return item;
-    }
-
-    if (item.state === "loaded" || item.state === "error") {
-      return item;
-    }
-
-    return {};
-  });
-
-  lightbox.addFilter("isContentLoading", (_isContentLoading, content) => {
-    const item = dataSource[content.index];
-    if (item.type === "video" || item.type === "iframe") {
-      return false;
-    }
-    const complete = item.state === "loaded" || item.state === "error";
-    return !complete;
-  });
-
-  lightbox.addFilter("useContentPlaceholder", () => false);
-
-  lightbox.init();
-
-  lightbox.on("contentActivate", (e) => {
-    dataSource[e.content.index].setZoomed(true);
-    lightbox.pswp?.element?.focus();
-  });
-
-  lightbox.on("contentDeactivate", (e) => {
-    dataSource[e.content.index].setZoomed(false);
-    e.content.element?.querySelector("video")?.pause();
-  });
-
-  function refreshSlide(index: number) {
-    lightbox.pswp?.refreshSlideContent(index);
-    if (lightbox.pswp?.currIndex === index) {
-      lightbox.pswp?.updateSize(true);
-    }
-  }
-
-  const contentAppendTimeouts = [] as ReturnType<typeof setTimeout>[];
-  lightbox.on("contentAppend", (e) => {
-    // sometimes lightbox's slide is loaded with stale (empty) data
-    if (e.content.data !== dataSource[e.content.index]) {
-      contentAppendTimeouts.push(
-        setTimeout(() => {
-          refreshSlide(e.content.index);
-        }, 0)
-      );
-    }
-  });
-
-  lightbox.on("contentRemove", (e) => {
-    const item = dataSource[e.content.index];
-
-    if (item.type === "video" || item.type === "iframe") {
-      item.state = "none";
-    }
-  });
-
-  lightbox.on("contentLoad", (e) => {
-    const item = dataSource[e.content.index];
-
-    if (item.state === "loading") {
-      return;
-    }
-
-    if (item.state === "none") {
-      e.preventDefault();
-      const eventArgs = {
-        e,
-        item,
-        refreshSlide,
-        getPswp: () => lightbox.pswp,
-        isPhone,
-      };
-
-      switch (item.type) {
-        case "image": {
-          onImageContentLoad(eventArgs);
-          break;
-        }
-        case "video": {
-          onVideoContentLoad(eventArgs);
-          break;
-        }
-        case "iframe": {
-          onIframeContentLoad(eventArgs);
-          break;
-        }
-        default: {
-          throw new Error(`unexpected slide type: ${item.type}`);
-        }
-      }
-    } else if (item.state === "error") {
-      e.preventDefault();
-      e.content.onError();
-    }
-  });
-
-  const HIDE_UI_TIMEOUT_MS = 3000;
-  let forceShowUI = false;
-  let hideTimeout: ReturnType<typeof setTimeout>;
-  let isHidden = false;
-
-  function hideUI() {
-    if (forceShowUI) {
-      return;
-    }
-    lightbox.pswp?.element?.classList.remove("pswp--ui-visible");
-    lightbox.pswp?.element?.classList.add("pswp--hide-cursor");
-    isHidden = true;
-  }
-
-  function showUI() {
-    if (isHidden) {
-      lightbox.pswp?.element?.classList.add("pswp--ui-visible");
-      lightbox.pswp?.element?.classList.remove("pswp--hide-cursor");
-      isHidden = false;
-    }
-    clearTimeout(hideTimeout);
-    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
-  }
-
-  lightbox.on("afterInit", () => {
-    const pswp = lightbox.pswp;
-
-    if (!pswp) {
-      return;
-    }
-
-    pswp.element?.addEventListener("mousemove", showUI);
-    pswp.element?.addEventListener("touchstart", showUI);
-
-    hideTimeout = setTimeout(hideUI, HIDE_UI_TIMEOUT_MS);
-  });
-
-  const uiHandlers = {
-    showUI,
-    setForceShowUI: (value: boolean) => {
-      forceShowUI = value;
-      // resets timer
-      if (!forceShowUI) {
-        showUI();
-      }
-    },
-  };
-
-  lightbox.on("uiRegister", () => {
-    lightbox.pswp?.ui?.registerElement({
-      name: "custom-nav",
-      order: 8,
-      isButton: false,
-      appendTo: "wrapper",
-      onInit: (el, pswp) => {
-        createRoot(el).render(
-          <SlideButtons
-            items={items}
-            pswp={pswp}
-            toastQueue={toastQueue}
-            themeMode={themeMode}
-            uiHandlers={uiHandlers}
-          />
-        );
-      },
-    });
-  });
-
-  lightbox.on("destroy", () => {
-    contentAppendTimeouts.forEach((timeoutId) => {
-      clearTimeout(timeoutId);
-    });
-  });
-
-  lightbox.loadAndOpen(zoomedIndex === -1 ? 0 : zoomedIndex);
-
-  return lightbox;
-}
-
-type ContentLoadArg = {
-  e: PhotoSwipeEventsMap["contentLoad"];
-  item: GalleryEntry;
-  refreshSlide: (index: number) => void;
-  getPswp: () => PhotoSwipeLightbox["pswp"];
-  isPhone: boolean;
-};
-
-function onImageContentLoad({e, item, refreshSlide}: ContentLoadArg) {
-  item.state = "loading";
-  // we ok if content type request fails
-  const contentTypePromise = item.contentType
-    ? Promise.resolve(item.contentType)
-    : fetch(item.src, {method: "HEAD"})
-        .then((response) => response.headers.get("content-type"))
-        .catch();
-
-  const contentPromise = new Promise<{width: number; height: number}>((resolve, reject) => {
-    const onLoad = () => {
-      resolve({
-        width: img.naturalWidth,
-        height: img.naturalHeight,
-      });
-    };
-
-    const img = new Image();
-    img.src = item.src;
-    if (img.complete) {
-      onLoad();
-    }
-    img.onload = () => onLoad();
-    img.onerror = () => {
-      reject("error");
-    };
-  });
-
-  Promise.allSettled([contentTypePromise, contentPromise]).then(([contentTypeResult, contentResult]) => {
-    if (contentResult.status === "rejected") {
-      item.state = "error";
-      refreshSlide(e.content.index);
-      e.content.onError();
-      return;
-    }
-
-    item.state = "loaded";
-    item.width = contentResult.value.width;
-    item.height = contentResult.value.height;
-
-    // normalize
-    if (contentTypeResult.status === "fulfilled" && contentTypeResult.value?.startsWith("image/svg")) {
-      const scale = Math.min(3000 / item.width!, 3000 / item.height!);
-      item.width = Math.ceil(scale * item.width!);
-      item.height = Math.ceil(scale * item.height!);
-    }
-
-    refreshSlide(e.content.index);
-    e.content.onLoaded();
-  });
-}
-
-function onVideoContentLoad({e, item, refreshSlide, getPswp, isPhone}: ContentLoadArg) {
-  item.state = "loaded";
-
-  e.content.element = document.createElement("div");
-  e.content.element.className = "pswp__video-container";
-  e.content.element.onclick = () => {
-    getPswp()?.close();
-  };
-
-  const video = document.createElement("video");
-  video.controls = true;
-  video.src = item.src;
-  video.onerror = () => {
-    item.state = "error";
-    refreshSlide(e.content.index);
-    e.content.onError();
-  };
-  video.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isPhone) {
-      return;
-    }
-    if (video.paused) {
-      video.play().catch();
-    } else {
-      video.pause();
-    }
-  };
-
-  e.content.element.appendChild(video);
-}
-
-function onIframeContentLoad({e, item, getPswp}: ContentLoadArg) {
-  item.state = "loaded";
-
-  e.content.element = document.createElement("div");
-  e.content.element.className = "pswp__iframe-container";
-
-  e.content.element.onclick = () => {
-    getPswp()?.close();
-  };
-
-  const iframe = document.createElement("iframe");
-  iframe.src = item.src;
-  iframe.setAttribute("allowfullscreen", "");
-  e.content.element.appendChild(iframe);
-}

package/src/images-gallery-2/zoom.tsx

@@ -1,35 +0,0 @@
-import React, {ReactNode, useCallback} from "react";
-import "react-medium-image-zoom/dist/styles.css";
-
-type Props = {
-  zoomed: boolean;
-  onZoomedChange: (value: boolean) => void;
-  children: ReactNode;
-  className?: string;
-  openOnClick?: boolean;
-  zoomImg?: {src: string; alt?: string};
-  actions?: ReactNode;
-};
-
-export const ZoomV2 = (props: Props) => {
-  const {zoomed, onZoomedChange, children, className, openOnClick} = props;
-  const onClick = useCallback(() => {
-    if (zoomed) {
-      onZoomedChange(false);
-    } else if (openOnClick) {
-      onZoomedChange(true);
-    }
-  }, [zoomed, onZoomedChange, openOnClick]);
-
-  const onDoubleClick = useCallback(() => {
-    if (!zoomed) {
-      onZoomedChange(true);
-    }
-  }, [zoomed, onZoomedChange]);
-
-  return (
-    <div className={className} onClick={onClick} onDoubleClick={openOnClick ? undefined : onDoubleClick}>
-      {children}
-    </div>
-  );
-};