@makeswift/runtime 0.2.18 → 0.3.0

package/dist/grid-item.es.js

@@ -0,0 +1,604 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { cx } from "@emotion/css";
+import { motion } from "framer-motion";
+import { useMemo, useRef, useState, useCallback, forwardRef, createElement, useImperativeHandle, Children } from "react";
+import { U as isNonNullable, B as useQuery, V as FILES_BY_ID, O as SWATCHES_BY_ID, w as useIsomorphicLayoutEffect, q as useStyle, r as responsiveStyle, v as colorToString, A as responsiveGridItem } from "./index.es.js";
+import NextImage from "next/image";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import ReactPlayer from "react-player";
+function useBackgrounds(value) {
+  const fileIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => background.type === "image" && background.payload != null ? background.payload.imageId : null).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []);
+  const swatchIds = value == null ? [] : value.map(({ value: backgrounds }) => backgrounds.map((background) => {
+    if (background.type === "color" && background.payload != null) {
+      return [background.payload.swatchId];
+    }
+    if (background.type === "gradient" && background.payload != null) {
+      return background.payload.stops.map((stop) => stop.color && stop.color.swatchId).filter(isNonNullable);
+    }
+    if (background.type === "video" && background.payload != null) {
+      return [background.payload.maskColor && background.payload.maskColor.swatchId];
+    }
+    return null;
+  }).filter(isNonNullable).reduce((a, b) => a.concat(b), [])).reduce((a, b) => a.concat(b), []).filter(isNonNullable);
+  const skip = value == null;
+  const filesResult = useQuery(FILES_BY_ID, {
+    skip: skip || fileIds.length === 0,
+    variables: { ids: fileIds }
+  });
+  const swatchesResult = useQuery(SWATCHES_BY_ID, {
+    skip: skip || swatchIds.length === 0,
+    variables: { ids: swatchIds }
+  });
+  return useMemo(() => {
+    const { data: filesData = {} } = filesResult;
+    const { data: swatchesData = {} } = swatchesResult;
+    if (value == null || filesResult.error != null || swatchesResult.error != null) {
+      return null;
+    }
+    const { files = [] } = filesData;
+    const { swatches = [] } = swatchesData;
+    return value.map((_a) => {
+      var _b = _a, { value: backgrounds } = _b, restOfValue = __objRest(_b, ["value"]);
+      return __spreadProps(__spreadValues({}, restOfValue), {
+        value: backgrounds.map((bg) => {
+          if (bg.type === "image" && bg.payload != null && bg.payload.imageId != null) {
+            const _a2 = bg.payload, { imageId } = _a2, restOfPayload = __objRest(_a2, ["imageId"]);
+            const file = files.find((f) => f && f.id === imageId);
+            return file && {
+              id: bg.id,
+              type: "image",
+              payload: __spreadProps(__spreadValues({}, restOfPayload), {
+                publicUrl: file.publicUrl,
+                dimensions: file.dimensions
+              })
+            };
+          }
+          if (bg.type === "color" && bg.payload != null) {
+            const { swatchId, alpha } = bg.payload;
+            const swatch = swatches.find((s) => s && s.id === swatchId);
+            return { id: bg.id, type: "color", payload: { swatch, alpha } };
+          }
+          if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
+            return {
+              id: bg.id,
+              type: "gradient",
+              payload: {
+                angle: bg.payload.angle,
+                isRadial: bg.payload.isRadial,
+                stops: bg.payload.stops.map((_b2) => {
+                  var _c = _b2, { color } = _c, restOfStop = __objRest(_c, ["color"]);
+                  return __spreadProps(__spreadValues({}, restOfStop), {
+                    color: color && {
+                      swatch: swatches.find((s) => s && s.id === color.swatchId),
+                      alpha: color.alpha
+                    }
+                  });
+                })
+              }
+            };
+          }
+          if (bg.type === "video" && bg.payload != null) {
+            const _d = bg.payload, { maskColor } = _d, restOfPayload = __objRest(_d, ["maskColor"]);
+            const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
+            return {
+              id: bg.id,
+              type: "video",
+              payload: __spreadProps(__spreadValues({}, restOfPayload), {
+                maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
+              })
+            };
+          }
+          return null;
+        }).filter(Boolean)
+      });
+    });
+  }, [filesResult, swatchesResult, value]);
+}
+const clamp = (min, val, max) => Math.min(Math.max(min, val), max);
+function isScrollable(element) {
+  const {
+    overflow,
+    overflowY,
+    overflowX
+  } = element.ownerDocument.defaultView.getComputedStyle(element);
+  return /(auto|scroll)/.test(overflow + overflowX + overflowY);
+}
+function getScrollParent(element) {
+  const {
+    parentElement
+  } = element;
+  if (!element || !parentElement)
+    return element;
+  if (isScrollable(element))
+    return element;
+  return getScrollParent(parentElement);
+}
+function Parallax(_a) {
+  var _b = _a, {
+    strength,
+    children
+  } = _b, rest = __objRest(_b, [
+    "strength",
+    "children"
+  ]);
+  const container = useRef(null);
+  const [containerScrollTop, setContainerScrollTop] = useState(strength == null ? 0 : strength);
+  const lastScrollParentScrollTop = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!container.current || strength == null || strength === 0)
+      return void 0;
+    const containerDocument = container.current.ownerDocument;
+    const scrollParent = getScrollParent(container.current);
+    const eventTarget = containerDocument.documentElement === scrollParent ? containerDocument.defaultView : scrollParent;
+    lastScrollParentScrollTop.current = scrollParent.scrollTop;
+    setContainerScrollTop(strength);
+    function handleScroll() {
+      containerDocument.defaultView.requestAnimationFrame(() => {
+        if (!container.current)
+          return;
+        const {
+          top: containerTop,
+          bottom: containerBottom
+        } = container.current.getBoundingClientRect();
+        const {
+          top: scrollParentTop,
+          bottom: scrollParentBottom
+        } = scrollParent === containerDocument.documentElement ? {
+          top: 0,
+          bottom: containerDocument.defaultView.innerHeight
+        } : scrollParent.getBoundingClientRect();
+        const {
+          scrollTop: scrollParentScrollTop
+        } = scrollParent === containerDocument.documentElement ? {
+          scrollTop: containerDocument.defaultView.pageYOffset
+        } : scrollParent;
+        const scrollParentHeight = scrollParentBottom - scrollParentTop;
+        const scrollParentScrollDelta = scrollParentScrollTop - lastScrollParentScrollTop.current;
+        lastScrollParentScrollTop.current = scrollParentScrollTop;
+        setContainerScrollTop((scrollTop) => {
+          const isContainerVisible = containerTop < scrollParentTop + scrollParentHeight && containerBottom > scrollParentTop;
+          const containerScrollRemaining = scrollParentScrollDelta > 0 ? 2 * strength - scrollTop : scrollTop;
+          const scrollParentScrollRemaining = scrollParentScrollDelta > 0 ? scrollParentTop + containerBottom : scrollParentHeight - containerTop;
+          const parallaxRatio = containerScrollRemaining / scrollParentScrollRemaining;
+          const containerScrollDelta = isContainerVisible ? parallaxRatio * scrollParentScrollDelta : 0;
+          return clamp(0, scrollTop + containerScrollDelta, strength * 2);
+        });
+      });
+    }
+    eventTarget.addEventListener("scroll", handleScroll);
+    return () => eventTarget.removeEventListener("scroll", handleScroll);
+  }, [strength]);
+  const getProps = useCallback((_a2) => {
+    var _b2 = _a2, {
+      style
+    } = _b2, restOfChildrenProps = __objRest(_b2, [
+      "style"
+    ]);
+    return __spreadProps(__spreadValues({}, restOfChildrenProps), {
+      style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+      }), strength == null || strength === 0 ? {} : {
+        top: -strength,
+        bottom: -strength,
+        transform: `translate3d(0, ${containerScrollTop - strength}px, 0)`
+      })
+    });
+  }, [strength, containerScrollTop]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, rest), {
+    ref: container,
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    children: children(getProps)
+  }));
+}
+const Container = forwardRef(function Container2(_c, ref) {
+  var _d = _c, {
+    className
+  } = _d, restOfProps = __objRest(_d, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: cx(useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      overflow: "hidden"
+    }), className)
+  }));
+});
+function Mask({
+  backgroundColor,
+  visible
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: backgroundColor,
+      opacity: visible ? 1 : 0,
+      transition: "opacity 1s"
+    })
+  });
+}
+const getScale = (element, aspectRatio, zoom) => {
+  const {
+    offsetWidth: width,
+    offsetHeight: height
+  } = element;
+  const computedAspectRatio = width / height;
+  return Math.max(aspectRatio / computedAspectRatio, computedAspectRatio / aspectRatio) * zoom;
+};
+function BackgroundVideo({
+  url = "",
+  aspectRatio = 16 / 9,
+  zoom = 1,
+  maskColor,
+  opacity
+}) {
+  var _a;
+  const [ready, setReady] = useState(false);
+  const [scale, setScale] = useState(1);
+  const container = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const {
+      current: containerEl
+    } = container;
+    if (!containerEl)
+      return void 0;
+    const {
+      defaultView
+    } = containerEl.ownerDocument;
+    const handleResize = () => setScale(getScale(containerEl, aspectRatio, zoom));
+    handleResize();
+    defaultView.addEventListener("resize", handleResize);
+    return () => defaultView.removeEventListener("resize", handleResize);
+  }, [aspectRatio, zoom]);
+  if (!ReactPlayer.canPlay(url))
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsxs(Container, {
+    ref: container,
+    children: [container.current && /* @__PURE__ */ jsx(ReactPlayer, {
+      url,
+      config: {
+        vimeo: {
+          playerOptions: {
+            background: true
+          }
+        },
+        youtube: {
+          playerVars: {
+            origin: (_a = container.current.ownerDocument.defaultView) == null ? void 0 : _a.location.origin
+          }
+        },
+        wistia: {
+          options: {
+            endVideoBehavior: "loop",
+            playbackRateControl: false,
+            playbar: false,
+            playButton: false,
+            volumeControl: false,
+            fullscreenButton: false,
+            muted: true
+          }
+        }
+      },
+      playing: true,
+      loop: true,
+      muted: true,
+      controls: false,
+      onReady: () => setReady(true),
+      style: {
+        transform: `scale3d(${scale}, ${scale}, 1)`,
+        opacity
+      },
+      width: "100%",
+      height: "100%"
+    }), /* @__PURE__ */ jsx(Mask, {
+      backgroundColor: maskColor,
+      visible: !ready
+    })]
+  });
+}
+function getColor(color) {
+  if (color == null)
+    return "black";
+  if (color.swatch == null) {
+    return colorToString(__spreadProps(__spreadValues({}, color), {
+      swatch: {
+        hue: 0,
+        saturation: 0,
+        lightness: 0
+      }
+    }));
+  }
+  return colorToString(color);
+}
+const getStopsStyle = (stops) => stops.map(({
+  color,
+  location
+}) => `${getColor(color)} ${location}%`).join(",");
+const absoluteFillStyle = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+};
+const containerStyle = __spreadProps(__spreadValues({}, absoluteFillStyle), {
+  borderRadius: "inherit"
+});
+function Backgrounds({
+  backgrounds
+}) {
+  if (backgrounds == null)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: backgrounds.map(({
+      value,
+      deviceId
+    }) => {
+      const visibility = backgrounds.map((v) => ({
+        deviceId: v.deviceId,
+        value: v.deviceId === deviceId
+      }));
+      return /* @__PURE__ */ jsx(BackgroundDeviceLayer, {
+        layer: value,
+        visibility
+      }, deviceId);
+    })
+  });
+}
+function BackgroundDeviceLayer({
+  layer,
+  visibility
+}) {
+  const visibilityStyle = responsiveStyle([visibility], ([v]) => ({
+    display: v === true ? "block" : "none"
+  }));
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle(__spreadProps(__spreadValues(__spreadValues({}, containerStyle), visibilityStyle), {
+      overflow: "hidden"
+    })),
+    children: [...layer].reverse().map((bg) => {
+      if (bg.type === "color") {
+        return /* @__PURE__ */ jsx(ColorBackground, {
+          color: getColor(bg.payload)
+        }, bg.id);
+      }
+      if (bg.type === "image" && bg.payload) {
+        return /* @__PURE__ */ createElement(ImageBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id
+        }));
+      }
+      if (bg.type === "gradient" && bg.payload) {
+        return /* @__PURE__ */ createElement(GradientBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id,
+          gradient: getStopsStyle(bg.payload.stops)
+        }));
+      }
+      if (bg.type === "video" && bg.payload) {
+        return /* @__PURE__ */ createElement(VideoBackground, __spreadProps(__spreadValues({}, bg.payload), {
+          key: bg.id,
+          maskColor: getColor(bg.payload.maskColor)
+        }));
+      }
+      return null;
+    })
+  });
+}
+function ColorBackground({
+  color
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle(__spreadProps(__spreadValues({}, containerStyle), {
+      backgroundColor: color
+    }))
+  });
+}
+const ImageBackgroundRepeat = {
+  NoRepeat: "no-repeat",
+  RepeatX: "repeat-x",
+  RepeatY: "repeat-y",
+  Repeat: "repeat"
+};
+const ImageBackgroundSize = {
+  Cover: "cover",
+  Contain: "contain",
+  Auto: "auto"
+};
+function ImageBackground({
+  publicUrl,
+  position,
+  repeat = ImageBackgroundRepeat.NoRepeat,
+  size = ImageBackgroundSize.Cover,
+  opacity,
+  parallax
+}) {
+  const backgroundPosition = `${position.x}% ${position.y}%`;
+  const containerClassName = useStyle(containerStyle);
+  if (repeat === "no-repeat" && size !== "auto" && publicUrl != null) {
+    return /* @__PURE__ */ jsx(Parallax, {
+      strength: parallax,
+      children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+        style: {
+          opacity,
+          overflow: "hidden"
+        }
+      })), {
+        children: /* @__PURE__ */ jsx(NextImage, {
+          src: publicUrl,
+          layout: "fill",
+          objectPosition: backgroundPosition,
+          objectFit: size
+        })
+      }))
+    });
+  }
+  return /* @__PURE__ */ jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadValues({
+      className: containerClassName
+    }, getParallaxProps({
+      style: {
+        backgroundImage: publicUrl != null ? `url('${publicUrl}')` : void 0,
+        backgroundPosition,
+        backgroundRepeat: repeat,
+        backgroundSize: size,
+        opacity
+      }
+    })))
+  });
+}
+function GradientBackground({
+  gradient,
+  isRadial,
+  angle
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: useStyle(__spreadProps(__spreadValues({}, containerStyle), {
+      background: isRadial ? `radial-gradient(${gradient})` : `linear-gradient(${angle}rad, ${gradient})`
+    }))
+  });
+}
+function getAspectRatio(aspectRatio) {
+  switch (aspectRatio) {
+    case "wide":
+      return 16 / 9;
+    case "standard":
+      return 4 / 3;
+    default:
+      return 16 / 9;
+  }
+}
+function VideoBackground({
+  url,
+  aspectRatio,
+  maskColor,
+  zoom,
+  opacity,
+  parallax
+}) {
+  return /* @__PURE__ */ jsx(Parallax, {
+    strength: parallax,
+    children: (getParallaxProps) => /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getParallaxProps({
+      className: useStyle(containerStyle)
+    })), {
+      children: /* @__PURE__ */ jsx(BackgroundVideo, {
+        url,
+        zoom,
+        opacity,
+        aspectRatio: getAspectRatio(aspectRatio),
+        maskColor
+      })
+    }))
+  });
+}
+var BackgroundsContainer = forwardRef(function BackgroundsContainer2(_e, ref) {
+  var _f = _e, {
+    hasAnimations = false,
+    backgrounds,
+    children,
+    className
+  } = _f, restOfProps = __objRest(_f, [
+    "hasAnimations",
+    "backgrounds",
+    "children",
+    "className"
+  ]);
+  const [handle, setHandle] = useState(null);
+  const Component = hasAnimations ? motion.div : "div";
+  useImperativeHandle(ref, () => handle, [handle]);
+  return /* @__PURE__ */ jsxs(Component, __spreadProps(__spreadValues({}, restOfProps), {
+    ref: setHandle,
+    className: cx(useStyle({
+      position: "relative",
+      width: "100%",
+      margin: "0 auto",
+      "> *": {
+        borderRadius: "inherit",
+        height: "inherit"
+      },
+      "> :last-child": {
+        position: "relative"
+      }
+    }), className),
+    children: [/* @__PURE__ */ jsx(Backgrounds, {
+      backgrounds: useBackgrounds(backgrounds)
+    }), Children.only(children)]
+  }));
+});
+function GridItem(_g) {
+  var _h = _g, {
+    as,
+    grid,
+    index,
+    columnGap,
+    rowGap,
+    className
+  } = _h, restOfProps = __objRest(_h, [
+    "as",
+    "grid",
+    "index",
+    "columnGap",
+    "rowGap",
+    "className"
+  ]);
+  const gridItemClassName = useStyle(responsiveGridItem({
+    grid,
+    index,
+    columnGap,
+    rowGap
+  }));
+  const Component = as != null ? as : "div";
+  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
+    className: cx(gridItemClassName, className)
+  }));
+}
+export { BackgroundsContainer as B, GridItem as G, useBackgrounds as u };
+//# sourceMappingURL=grid-item.es.js.map