UNPKG

one

Version:

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

github.com/onejs/one

onejs/one

1 lines • 7.79 kB
1
{"version":3,"file":"EdgeFade.js","names":[],"sources":["esm/platform/effects/EdgeFade.js"],"sourcesContent":["import { sampleCurve } from \"./curves\";\nimport { VIEW_BASE, domStyle } from \"../web/DomView\";\nimport { resolveEdges, resolveRadius } from \"./normalize\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst EDGES = [\"top\", \"bottom\", \"left\", \"right\"];\nconst DIRECTIONS = {\n top: \"to bottom\",\n bottom: \"to top\",\n left: \"to right\",\n right: \"to left\"\n};\nfunction curveStops(edge, paint) {\n const alphas = sampleCurve(edge.curve);\n const last = alphas.length - 1;\n return alphas.map((_, index) => {\n const visible = alphas[last - index] ?? 0;\n return `${paint(visible)} ${(index / last * edge.size).toFixed(2)}px`;\n });\n}\nfunction edgeMask(name, edge) {\n const stops = curveStops(edge, (visible) => `rgba(0,0,0,${visible})`);\n return `linear-gradient(${DIRECTIONS[name]}, ${stops.join(\", \")}, black ${edge.size}px)`;\n}\nfunction stripLayout(name, size) {\n const depth = Math.max(0, size);\n const base = { position: \"absolute\", pointerEvents: \"none\" };\n switch (name) {\n case \"top\":\n return { ...base, top: 0, left: 0, right: 0, height: depth };\n case \"bottom\":\n return { ...base, bottom: 0, left: 0, right: 0, height: depth };\n case \"left\":\n return { ...base, top: 0, bottom: 0, left: 0, width: depth };\n case \"right\":\n return { ...base, top: 0, bottom: 0, right: 0, width: depth };\n }\n}\nfunction stripGradient(name, edge, paint) {\n const alphas = sampleCurve(edge.curve);\n const last = alphas.length - 1;\n const stops = alphas.map((_, index) => {\n const visible = alphas[last - index] ?? 0;\n return `${paint(visible)} ${(index / last * 100).toFixed(2)}%`;\n });\n return `linear-gradient(${DIRECTIONS[name]}, ${stops.join(\", \")})`;\n}\nfunction colorPaint(color) {\n return (visible) => `color-mix(in srgb, ${String(color)} ${((1 - visible) * 100).toFixed(2)}%, transparent)`;\n}\nfunction documentIsRTL() {\n return typeof document !== \"undefined\" && document.documentElement.dir === \"rtl\";\n}\nfunction EdgeFade(props) {\n const resolved = resolveEdges(props, documentIsRTL());\n const {\n top: _top,\n bottom: _bottom,\n left: _left,\n right: _right,\n start: _start,\n end: _end,\n size: _size,\n curve: _curve,\n mode: _mode,\n color: _color,\n blurRadius: _blurRadius,\n frostProgression: _frostProgression,\n radius,\n style,\n children,\n testID,\n nativeID\n } = props;\n const { borderRadius: styleRadius, ...cleanStyle } = domStyle(style);\n const resolvedRadius = resolveRadius(radius, styleRadius);\n const box = {\n ...VIEW_BASE,\n ...cleanStyle,\n ...resolvedRadius != null && { borderRadius: resolvedRadius, overflow: \"hidden\" }\n };\n const hostProps = { \"data-testid\": testID, id: nativeID };\n const edges = EDGES.flatMap((name) => {\n const edge = resolved[name];\n return edge ? [{ name, edge }] : [];\n });\n if (resolved.mode === \"mask\") {\n const maskImage = edges.map(({ name, edge }) => edgeMask(name, edge)).join(\", \");\n const maskStyle = edges.length ? { maskImage, maskComposite: \"intersect\", maskRepeat: \"no-repeat\" } : {};\n return /* @__PURE__ */ jsx(\"div\", { ...hostProps, style: { ...box, ...maskStyle }, children });\n }\n if (resolved.mode === \"overlay\") {\n const fallback = resolved.color ?? \"black\";\n return /* @__PURE__ */ jsxs(\"div\", { ...hostProps, style: box, children: [\n children,\n edges.map(({ name, edge }) => /* @__PURE__ */ jsx(\n \"div\",\n {\n style: {\n ...stripLayout(name, edge.size),\n backgroundImage: stripGradient(\n name,\n edge,\n colorPaint(edge.color ?? fallback)\n )\n }\n },\n name\n ))\n ] });\n }\n const veil = resolved.color;\n return /* @__PURE__ */ jsxs(\"div\", { ...hostProps, style: box, children: [\n children,\n edges.map(({ name, edge }) => {\n const reach = resolved.frostProgression;\n const blurMask = stripGradient(name, edge, (visible) => {\n const strength = Math.min(1, (1 - visible) / reach);\n return `rgba(0,0,0,${strength.toFixed(4)})`;\n });\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n style: {\n ...stripLayout(name, edge.size),\n backdropFilter: `blur(${resolved.blurRadius}px)`,\n maskImage: blurMask,\n backgroundImage: veil ? stripGradient(name, edge, colorPaint(veil)) : void 0\n }\n },\n name\n );\n })\n ] });\n}\nexport {\n EdgeFade\n};\n//# sourceMappingURL=EdgeFade.js.map\n"],"mappings":"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"}