UNPKG

@zag-js/avatar

Version:

Core logic for the avatar widget implemented as a state machine

132 lines (130 loc) 4.1 kB
"use strict"; 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); // src/avatar.machine.ts var avatar_machine_exports = {}; __export(avatar_machine_exports, { machine: () => machine }); module.exports = __toCommonJS(avatar_machine_exports); var import_dom_query = require("@zag-js/dom-query"); var import_core = require("@zag-js/core"); var dom = __toESM(require("./avatar.dom.js")); var machine = (0, import_core.createMachine)({ initialState() { return "loading"; }, effects: ["trackImageRemoval", "trackSrcChange"], on: { "src.change": { target: "loading" }, "img.unmount": { target: "error" } }, states: { loading: { entry: ["checkImageStatus"], on: { "img.loaded": { target: "loaded", actions: ["invokeOnLoad"] }, "img.error": { target: "error", actions: ["invokeOnError"] } } }, error: { on: { "img.loaded": { target: "loaded", actions: ["invokeOnLoad"] } } }, loaded: { on: { "img.error": { target: "error", actions: ["invokeOnError"] } } } }, implementations: { actions: { invokeOnLoad({ prop }) { prop("onStatusChange")?.({ status: "loaded" }); }, invokeOnError({ prop }) { prop("onStatusChange")?.({ status: "error" }); }, checkImageStatus({ send, scope }) { const imageEl = dom.getImageEl(scope); if (!imageEl?.complete) return; const type = hasLoaded(imageEl) ? "img.loaded" : "img.error"; send({ type, src: "ssr" }); } }, effects: { trackImageRemoval({ send, scope }) { const rootEl = dom.getRootEl(scope); return (0, import_dom_query.observeChildren)(rootEl, { callback(records) { const removedNodes = Array.from(records[0].removedNodes); const removed = removedNodes.find( (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]") ); if (removed) { send({ type: "img.unmount" }); } } }); }, trackSrcChange({ send, scope }) { const imageEl = dom.getImageEl(scope); return (0, import_dom_query.observeAttributes)(imageEl, { attributes: ["src", "srcset"], callback() { send({ type: "src.change" }); } }); } } } }); function hasLoaded(image) { return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0; } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { machine });