UNPKG

one

Version:

One is a React framework for web, iOS, and Android apps.

github.com/onejs/one

onejs/one

1 lines • 4.86 kB
1
{"version":3,"file":"Mask.js","names":[],"sources":["esm/platform/effects/Mask.js"],"sourcesContent":["import { isValidElement, useEffect, useRef, useState } from \"react\";\nimport { DomView } from \"../web/DomView\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nlet warnedInvalidMask = false;\nfunction image(node, width, height) {\n const clone = node.cloneNode(true);\n const sources = [node, ...node.querySelectorAll(\"*\")];\n const copies = [clone, ...clone.querySelectorAll(\"*\")];\n sources.forEach((source, index) => {\n const style = getComputedStyle(source);\n const copy = copies[index];\n for (const property of Array.from(style))\n copy.style.setProperty(property, style.getPropertyValue(property));\n });\n clone.style.opacity = \"1\";\n const content = new XMLSerializer().serializeToString(clone);\n return `url(\"data:image/svg+xml,${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"><foreignObject width=\"100%\" height=\"100%\">${content}</foreignObject></svg>`)}\")`;\n}\nfunction Mask({ maskElement, children, ...props }) {\n const ref = useRef(null);\n const [mask, setMask] = useState();\n const valid = isValidElement(maskElement);\n useEffect(() => {\n if (!valid) {\n if (!warnedInvalidMask) {\n warnedInvalidMask = true;\n console.warn(\n \"Mask: invalid `maskElement` prop was passed to Mask. expected a React element. no mask will render.\"\n );\n }\n return;\n }\n const node = ref.current;\n if (!node) return;\n const update = () => {\n const width = node.clientWidth, height = node.clientHeight;\n if (width && height) setMask(image(node, width, height));\n };\n const resize = new ResizeObserver(update);\n const mutations = new MutationObserver(update);\n resize.observe(node);\n mutations.observe(node, {\n subtree: true,\n attributes: true,\n characterData: true,\n childList: true\n });\n node.addEventListener(\"load\", update, true);\n update();\n return () => {\n resize.disconnect();\n mutations.disconnect();\n node.removeEventListener(\"load\", update, true);\n };\n }, [valid, maskElement]);\n return /* @__PURE__ */ jsxs(DomView, { ...props, children: [\n valid && /* @__PURE__ */ jsx(\n \"div\",\n {\n ref,\n \"aria-hidden\": true,\n style: {\n position: \"absolute\",\n inset: 0,\n pointerEvents: \"none\",\n opacity: 0,\n overflow: \"hidden\"\n },\n children: maskElement\n }\n ),\n /* @__PURE__ */ jsx(\n \"div\",\n {\n style: {\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n minWidth: 0,\n minHeight: 0,\n ...valid && {\n maskImage: mask ?? \"linear-gradient(transparent,transparent)\",\n WebkitMaskImage: mask ?? \"linear-gradient(transparent,transparent)\",\n maskMode: \"alpha\",\n maskSize: \"100% 100%\",\n maskRepeat: \"no-repeat\"\n }\n },\n children\n }\n )\n ] });\n}\nexport {\n Mask\n};\n//# sourceMappingURL=Mask.js.map\n"],"mappings":";;;;;AAGA,IAAI,oBAAoB;AACxB,SAAS,MAAM,MAAM,OAAO,QAAQ;CAClC,MAAM,QAAQ,KAAK,UAAU,IAAI;CACjC,MAAM,UAAU,CAAC,MAAM,GAAG,KAAK,iBAAiB,GAAG,CAAC;CACpD,MAAM,SAAS,CAAC,OAAO,GAAG,MAAM,iBAAiB,GAAG,CAAC;CACrD,QAAQ,SAAS,QAAQ,UAAU;EACjC,MAAM,QAAQ,iBAAiB,MAAM;EACrC,MAAM,OAAO,OAAO;EACpB,KAAK,MAAM,YAAY,MAAM,KAAK,KAAK,GACrC,KAAK,MAAM,YAAY,UAAU,MAAM,iBAAiB,QAAQ,CAAC;CACrE,CAAC;CACD,MAAM,MAAM,UAAU;CACtB,MAAM,UAAU,IAAI,cAAc,CAAC,CAAC,kBAAkB,KAAK;CAC3D,OAAO,2BAA2B,mBAAmB,kDAAkD,MAAM,YAAY,OAAO,8CAA8C,QAAQ,uBAAuB,EAAE;AACjN;AACA,SAAS,KAAK,EAAE,aAAa,UAAU,GAAG,SAAS;CACjD,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,CAAC,MAAM,WAAW,SAAS;CACjC,MAAM,QAAQ,eAAe,WAAW;CACxC,gBAAgB;EACd,IAAI,CAAC,OAAO;GACV,IAAI,CAAC,mBAAmB;IACtB,oBAAoB;IACpB,QAAQ,KACN,qGACF;GACF;GACA;EACF;EACA,MAAM,OAAO,IAAI;EACjB,IAAI,CAAC,MAAM;EACX,MAAM,eAAe;GACnB,MAAM,QAAQ,KAAK,aAAa,SAAS,KAAK;GAC9C,IAAI,SAAS,QAAQ,QAAQ,MAAM,MAAM,OAAO,MAAM,CAAC;EACzD;EACA,MAAM,SAAS,IAAI,eAAe,MAAM;EACxC,MAAM,YAAY,IAAI,iBAAiB,MAAM;EAC7C,OAAO,QAAQ,IAAI;EACnB,UAAU,QAAQ,MAAM;GACtB,SAAS;GACT,YAAY;GACZ,eAAe;GACf,WAAW;EACb,CAAC;EACD,KAAK,iBAAiB,QAAQ,QAAQ,IAAI;EAC1C,OAAO;EACP,aAAa;GACX,OAAO,WAAW;GAClB,UAAU,WAAW;GACrB,KAAK,oBAAoB,QAAQ,QAAQ,IAAI;EAC/C;CACF,GAAG,CAAC,OAAO,WAAW,CAAC;CACvB,OAAuB,qBAAK,SAAS;EAAE,GAAG;EAAO,UAAU,CACzD,SAAyB,oBACvB,OACA;GACE;GACA,eAAe;GACf,OAAO;IACL,UAAU;IACV,OAAO;IACP,eAAe;IACf,SAAS;IACT,UAAU;GACZ;GACA,UAAU;EACZ,CACF,GACgB,oBACd,OACA;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,MAAM;IACN,UAAU;IACV,WAAW;IACX,GAAG,SAAS;KACV,WAAW,QAAQ;KACnB,iBAAiB,QAAQ;KACzB,UAAU;KACV,UAAU;KACV,YAAY;IACd;GACF;GACA;EACF,CACF,CACF;CAAE,CAAC;AACL"}