@hanzogui/react-native-web-lite 2.0.0-rc.41-hanzoai.5

package/dist/cjs/Image/index.cjs

@@ -0,0 +1,355 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Image_exports = {};
+__export(Image_exports, {
+  Image: () => ImageWithStatics,
+  default: () => Image_default
+});
+module.exports = __toCommonJS(Image_exports);
+var React = __toESM(require("react"), 1);
+var import_react_native_web_internals = require("@hanzogui/react-native-web-internals");
+var import_react_native_web_internals2 = require("@hanzogui/react-native-web-internals");
+var import_createElement = require("../createElement/index.cjs");
+var import_PixelRatio = require("../PixelRatio/index.cjs");
+var import_View = require("../View/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ERRORED = "ERRORED";
+const LOADED = "LOADED";
+const LOADING = "LOADING";
+const IDLE = "IDLE";
+let _filterId = 0;
+const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
+function createTintColorSVG(tintColor, id) {
+  return tintColor && id != null ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("svg", {
+    style: {
+      position: "absolute",
+      height: 0,
+      visibility: "hidden",
+      width: 0
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("defs", {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("filter", {
+        id: `tint-${id}`,
+        suppressHydrationWarning: true,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("feFlood", {
+          floodColor: `${tintColor}`
+        }, tintColor), /* @__PURE__ */(0, import_jsx_runtime.jsx)("feComposite", {
+          in2: "SourceAlpha",
+          operator: "atop"
+        })]
+      })
+    })
+  }) : null;
+}
+function getFlatStyle(style, blurRadius, filterId) {
+  const flatStyle = import_react_native_web_internals.StyleSheet.flatten(style);
+  const {
+    filter,
+    resizeMode,
+    shadowOffset,
+    tintColor
+  } = flatStyle;
+  const filters = [];
+  let _filter = null;
+  if (filter) {
+    filters.push(filter);
+  }
+  if (blurRadius) {
+    filters.push(`blur(${blurRadius}px)`);
+  }
+  if (shadowOffset) {
+    const shadowString = (0, import_react_native_web_internals.createBoxShadowValue)(flatStyle);
+    if (shadowString) {
+      filters.push(`drop-shadow(${shadowString})`);
+    }
+  }
+  if (tintColor && filterId != null) {
+    filters.push(`url(#tint-${filterId})`);
+  }
+  if (filters.length > 0) {
+    _filter = filters.join(" ");
+  }
+  delete flatStyle.blurRadius;
+  delete flatStyle.shadowColor;
+  delete flatStyle.shadowOpacity;
+  delete flatStyle.shadowOffset;
+  delete flatStyle.shadowRadius;
+  delete flatStyle.tintColor;
+  delete flatStyle.overlayColor;
+  delete flatStyle.resizeMode;
+  return [flatStyle, resizeMode, _filter, tintColor];
+}
+function resolveAssetDimensions(source) {
+  if (typeof source === "number") {
+    const {
+      height,
+      width
+    } = (0, import_react_native_web_internals2.getAssetByID)(source);
+    return {
+      height,
+      width
+    };
+  } else if (source != null && !Array.isArray(source) && typeof source === "object") {
+    const {
+      height,
+      width
+    } = source;
+    return {
+      height,
+      width
+    };
+  }
+}
+function resolveAssetUri(source) {
+  let uri = null;
+  if (typeof source === "number") {
+    const asset = (0, import_react_native_web_internals2.getAssetByID)(source);
+    let scale = asset.scales[0];
+    if (asset.scales.length > 1) {
+      const preferredScale = import_PixelRatio.PixelRatio.get();
+      scale = asset.scales.reduce((prev, curr) => Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale) ? curr : prev);
+    }
+    const scaleSuffix = scale !== 1 ? `@${scale}x` : "";
+    uri = asset ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}` : "";
+  } else if (typeof source === "string") {
+    uri = source;
+  } else if (source && typeof source.uri === "string") {
+    uri = source.uri;
+  }
+  if (uri) {
+    const match = uri.match(svgDataUriPattern);
+    if (match) {
+      const [, prefix, svg] = match;
+      const encodedSvg = encodeURIComponent(svg);
+      return `${prefix}${encodedSvg}`;
+    }
+  }
+  return uri;
+}
+const Image = React.forwardRef((props, ref) => {
+  const {
+    accessibilityLabel,
+    blurRadius,
+    defaultSource,
+    draggable,
+    onError,
+    onLayout,
+    onLoad,
+    onLoadEnd,
+    onLoadStart,
+    pointerEvents,
+    source,
+    style,
+    ...rest
+  } = props;
+  if (process.env.NODE_ENV !== "production") {
+    if (props.children) {
+      throw new Error("The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.");
+    }
+  }
+  const [state, updateState] = React.useState(() => {
+    const uri2 = resolveAssetUri(source);
+    if (uri2 != null) {
+      const isLoaded = import_react_native_web_internals2.ImageLoader.has(uri2);
+      if (isLoaded) {
+        return LOADED;
+      }
+    }
+    return IDLE;
+  });
+  const [layout, updateLayout] = React.useState({});
+  const hasTextAncestor = React.useContext(import_react_native_web_internals.TextAncestorContext);
+  const hiddenImageRef = React.useRef(null);
+  const filterRef = React.useRef(_filterId++);
+  const requestRef = React.useRef(null);
+  const shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null;
+  const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle({}, blurRadius, filterRef.current);
+  const resizeMode = props.resizeMode || _resizeMode || "cover";
+  const selectedSource = shouldDisplaySource ? source : defaultSource;
+  const displayImageUri = resolveAssetUri(selectedSource);
+  const imageSizeStyle = resolveAssetDimensions(selectedSource);
+  const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
+  const backgroundSize = getBackgroundSize();
+  const hiddenImage = displayImageUri ? (0, import_createElement.createElement)("img", {
+    alt: accessibilityLabel || "",
+    style: styles.accessibilityImage$raw,
+    draggable: draggable || false,
+    ref: hiddenImageRef,
+    src: displayImageUri
+  }) : null;
+  function getBackgroundSize() {
+    if (hiddenImageRef.current != null && (resizeMode === "center" || resizeMode === "repeat")) {
+      const {
+        naturalHeight,
+        naturalWidth
+      } = hiddenImageRef.current;
+      const {
+        height,
+        width
+      } = layout;
+      if (naturalHeight && naturalWidth && height && width) {
+        const scaleFactor = Math.min(1, width / naturalWidth, height / naturalHeight);
+        const x = Math.ceil(scaleFactor * naturalWidth);
+        const y = Math.ceil(scaleFactor * naturalHeight);
+        return `${x}px ${y}px`;
+      }
+    }
+  }
+  function handleLayout(e) {
+    if (resizeMode === "center" || resizeMode === "repeat" || onLayout) {
+      const {
+        layout: layout2
+      } = e.nativeEvent;
+      onLayout && onLayout(e);
+      updateLayout(layout2);
+    }
+  }
+  const uri = resolveAssetUri(source);
+  React.useEffect(() => {
+    abortPendingRequest();
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+      requestRef.current = import_react_native_web_internals2.ImageLoader.load(uri, function load(e) {
+        updateState(LOADED);
+        if (onLoad) {
+          onLoad(e);
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      }, function error() {
+        updateState(ERRORED);
+        if (onError) {
+          onError({
+            nativeEvent: {
+              error: `Failed to load resource ${uri} (404)`
+            }
+          });
+        }
+        if (onLoadEnd) {
+          onLoadEnd();
+        }
+      });
+    }
+    function abortPendingRequest() {
+      if (requestRef.current != null) {
+        import_react_native_web_internals2.ImageLoader.abort(requestRef.current);
+        requestRef.current = null;
+      }
+    }
+    return abortPendingRequest;
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_View.View, {
+    ...rest,
+    "aria-label": accessibilityLabel,
+    onLayout: handleLayout,
+    pointerEvents,
+    ref,
+    style: [style, styles.root, hasTextAncestor && styles.inline, imageSizeStyle, flatStyle],
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_View.View, {
+      style: [...[].concat(styles.image), resizeModeStyles[resizeMode], {
+        backgroundImage,
+        filter
+      }, backgroundSize != null && {
+        backgroundSize
+      }],
+      suppressHydrationWarning: true
+    }), hiddenImage, createTintColorSVG(tintColor, filterRef.current)]
+  });
+});
+Image.displayName = "Image";
+const ImageWithStatics = Image;
+ImageWithStatics.getSize = function (uri, success, failure) {
+  import_react_native_web_internals2.ImageLoader.getSize(uri, success, failure);
+};
+ImageWithStatics.prefetch = function (uri) {
+  return import_react_native_web_internals2.ImageLoader.prefetch(uri);
+};
+ImageWithStatics.queryCache = function (uris) {
+  return import_react_native_web_internals2.ImageLoader.queryCache(uris);
+};
+const styles = import_react_native_web_internals.StyleSheet.create({
+  root: {
+    flexBasis: "auto",
+    overflow: "hidden",
+    zIndex: 0
+  },
+  inline: {
+    display: "inline-flex"
+  },
+  image: {
+    ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
+    backgroundColor: "transparent",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+    height: "100%",
+    width: "100%",
+    zIndex: -1
+  },
+  accessibilityImage$raw: {
+    ...import_react_native_web_internals.StyleSheet.absoluteFillObject,
+    height: "100%",
+    opacity: 0,
+    width: "100%",
+    zIndex: -1
+  }
+});
+const resizeModeStyles = import_react_native_web_internals.StyleSheet.create({
+  center: {
+    backgroundSize: "auto"
+  },
+  contain: {
+    backgroundSize: "contain"
+  },
+  cover: {
+    backgroundSize: "cover"
+  },
+  none: {
+    backgroundPosition: "0",
+    backgroundSize: "auto"
+  },
+  repeat: {
+    backgroundPosition: "0",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto"
+  },
+  stretch: {
+    backgroundSize: "100% 100%"
+  }
+});
+var Image_default = ImageWithStatics;

package/dist/cjs/Image/types.cjs

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/dist/cjs/ImageBackground/__tests__/index-test.cjs

@@ -0,0 +1,72 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_react = require("@testing-library/react");
+var import_Text = __toESM(require("../../Text/index.cjs"), 1);
+var import__ = __toESM(require("../index.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function findImage(container) {
+  return container.firstChild.firstChild;
+}
+describe("components/ImageBackground", () => {
+  describe('prop "children"', () => {
+    test("render child content", () => {
+      const {
+        getByText
+      } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Text.default, {
+          children: "Hello World!"
+        })
+      }));
+      expect(getByText("Hello World!")).toBeDefined();
+    });
+  });
+  describe('prop "imageStyle"', () => {
+    test("sets the style of the underlying Image", () => {
+      const imageStyle = {
+        width: 40,
+        height: 60
+      };
+      const {
+        container
+      } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
+        imageStyle
+      }));
+      expect(findImage(container).getAttribute("style").includes("width: 40px; height: 60px;")).toBe(true);
+    });
+  });
+  describe('prop "style"', () => {
+    test("sets the style of the container View", () => {
+      const style = {
+        margin: 40
+      };
+      const {
+        container
+      } = (0, import_react.render)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import__.default, {
+        style
+      }));
+      expect(container.firstChild.getAttribute("style")).toEqual("margin: 40px 40px 40px 40px;");
+    });
+  });
+});

package/dist/cjs/ImageBackground/index.cjs

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ImageBackground_exports = {};
+__export(ImageBackground_exports, {
+  ImageBackground: () => ImageBackground,
+  default: () => ImageBackground_default
+});
+module.exports = __toCommonJS(ImageBackground_exports);
+var import_react = require("react");
+var import_react_native_web_internals = require("@hanzogui/react-native-web-internals");
+var import_Image = require("../Image/index.cjs");
+var import_View = require("../View/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const emptyObject = {};
+const ImageBackground = (0, import_react.forwardRef)((props, forwardedRef) => {
+  const {
+    children,
+    style = emptyObject,
+    imageStyle,
+    imageRef,
+    ...rest
+  } = props;
+  const {
+    height,
+    width
+  } = import_react_native_web_internals.StyleSheet.flatten(style);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_View.View, {
+    ref: forwardedRef,
+    style,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Image.Image, {
+      ...rest,
+      ref: imageRef,
+      style: [{
+        // Temporary Workaround:
+        // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+        // (which is not quite correct), and these styles conflict with explicitly set styles
+        // of <ImageBackground> and with our internal layout model here.
+        // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+        // This workaround should be removed after implementing proper support of
+        // intrinsic content size of the <Image>.
+        width,
+        height,
+        zIndex: -1
+      }, import_react_native_web_internals.StyleSheet.absoluteFill, imageStyle]
+    }), children]
+  });
+});
+ImageBackground.displayName = "ImageBackground";
+var ImageBackground_default = ImageBackground;

package/dist/cjs/InteractionManager/TaskQueue.cjs

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TaskQueue_exports = {};
+__export(TaskQueue_exports, {
+  TaskQueue: () => TaskQueue
+});
+module.exports = __toCommonJS(TaskQueue_exports);
+var import_react_native_web_internals = require("@hanzogui/react-native-web-internals");
+class TaskQueue {
+  _queueStack;
+  _onMoreTasks;
+  constructor({
+    onMoreTasks
+  }) {
+    this._onMoreTasks = onMoreTasks;
+    this._queueStack = [{
+      tasks: [],
+      popable: true
+    }];
+  }
+  enqueue(task) {
+    this._getCurrentQueue().push(task);
+  }
+  enqueueTasks(tasks) {
+    tasks.forEach(task => this.enqueue(task));
+  }
+  cancelTasks(tasksToCancel) {
+    this._queueStack = this._queueStack.map(queue => ({
+      ...queue,
+      tasks: queue.tasks.filter(task => !tasksToCancel.includes(task))
+    })).filter((queue, idx) => queue.tasks.length > 0 || idx === 0);
+  }
+  hasTasksToProcess() {
+    return this._getCurrentQueue().length > 0;
+  }
+  /**
+   * Executes the next task in the queue.
+   */
+  processNext() {
+    const queue = this._getCurrentQueue();
+    if (queue.length) {
+      const task = queue.shift();
+      try {
+        if (typeof task === "object" && "gen" in task) {
+          this._genPromise(task);
+        } else if (typeof task === "object" && "run" in task) {
+          task.run();
+        } else {
+          (0, import_react_native_web_internals.invariant)(typeof task === "function", "Expected Function, SimpleTask, or PromiseTask, but got:\n" + JSON.stringify(task, null, 2));
+          task();
+        }
+      } catch (e) {
+        if (e instanceof Error) {
+          e.message = "TaskQueue: Error with task " + (task?.name || "") + ": " + e.message;
+        }
+        throw e;
+      }
+    }
+  }
+  _getCurrentQueue() {
+    const stackIdx = this._queueStack.length - 1;
+    const queue = this._queueStack[stackIdx];
+    if (queue.popable && queue.tasks.length === 0 && stackIdx > 0) {
+      this._queueStack.pop();
+      return this._getCurrentQueue();
+    } else {
+      return queue.tasks;
+    }
+  }
+  _genPromise(task) {
+    const length = this._queueStack.push({
+      tasks: [],
+      popable: false
+    });
+    const stackIdx = length - 1;
+    const stackItem = this._queueStack[stackIdx];
+    task.gen().then(() => {
+      stackItem.popable = true;
+      if (this.hasTasksToProcess()) {
+        this._onMoreTasks();
+      }
+    }).catch(ex => {
+      setTimeout(() => {
+        if (ex instanceof Error) {
+          ex.message = `TaskQueue: Error resolving Promise in task ${task.name}: ${ex.message}`;
+        }
+        throw ex;
+      }, 0);
+    });
+  }
+}