one

Version:
One is a React framework for web, iOS, and Android apps.
142 lines (139 loc) • 4.32 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { I18nManager, View, processColor } from "react-native";
import NativeEdgeFade from "../specs/OneNativeEdgeFadeNativeComponent.native.js";
import { sampleCurve } from "./curves.native.js";
import { resolveNativeProps } from "./nativeProps.native.js";
import { flattenStyle, resolveEdges, resolveRadius } from "./normalize.native.js";

var BACKGROUND_IMAGE_KEY = "backgroundImage";
var STRIP_DIRECTIONS = {
	top: "to bottom",
	bottom: "to top",
	left: "to right",
	right: "to left"
};
function stripLayout(edge, size) {
	var clamped = Math.max(0, size);
	switch (edge) {
		case "top": return {
			position: "absolute",
			top: 0,
			left: 0,
			right: 0,
			height: clamped
		};
		case "bottom": return {
			position: "absolute",
			bottom: 0,
			left: 0,
			right: 0,
			height: clamped
		};
		case "left": return {
			position: "absolute",
			top: 0,
			bottom: 0,
			left: 0,
			width: clamped
		};
		case "right": return {
			position: "absolute",
			top: 0,
			bottom: 0,
			right: 0,
			width: clamped
		};
	}
}
function stripGradient(edge, resolved, fallback) {
	var _resolved_color;
	var processed = processColor((_resolved_color = resolved.color) !== null && _resolved_color !== void 0 ? _resolved_color : fallback);
	var argb = typeof processed === "number" ? processed : 4278190080;
	var red = argb >> 16 & 255;
	var green = argb >> 8 & 255;
	var blue = argb & 255;
	var ceiling = (argb >>> 24 & 255) / 255;
	var alphas = sampleCurve(resolved.curve);
	var last = alphas.length - 1;
	return {
		type: "linear-gradient",
		direction: STRIP_DIRECTIONS[edge],
		colorStops: alphas.map(function(_, index) {
			var _alphas_;
			var alpha = (_alphas_ = alphas[last - index]) !== null && _alphas_ !== void 0 ? _alphas_ : 0;
			var stopAlpha = Math.max(0, Math.min(1, (1 - alpha) * ceiling));
			return {
				color: `rgba(${red},${green},${blue},${Number(stopAlpha.toFixed(4))})`,
				positions: [`${(index / last * 100).toFixed(2)}%`]
			};
		})
	};
}
function OverlayStrip(param) {
	var { edge, resolved, fallback } = param;
	return /* @__PURE__ */ jsx(View, {
		pointerEvents: "none",
		style: [stripLayout(edge, resolved.size), { [BACKGROUND_IMAGE_KEY]: [stripGradient(edge, resolved, fallback)] }]
	});
}
function EdgeFade(props) {
	var resolved = resolveEdges(props, I18nManager.isRTL);
	var { top: _top, bottom: _bottom, left: _left, right: _right, start: _start, end: _end, size: _size, curve: _curve, mode: _mode, color: _color, blurRadius: _blurRadius, frostProgression: _frostProgression, radius, style, children, ...viewProps } = props;
	var { borderRadius: styleRadius, ...cleanStyle } = flattenStyle(style);
	var resolvedRadius = resolveRadius(radius, styleRadius);
	if (resolved.mode === "overlay") {
		var _resolved_color;
		var radiusStyle = resolvedRadius != null ? {
			borderRadius: resolvedRadius,
			overflow: "hidden"
		} : null;
		var fallback = (_resolved_color = resolved.color) !== null && _resolved_color !== void 0 ? _resolved_color : "black";
		return /* @__PURE__ */ jsxs(View, {
			style: [cleanStyle, radiusStyle],
			...viewProps,
			children: [
				children,
				resolved.top && /* @__PURE__ */ jsx(OverlayStrip, {
					edge: "top",
					resolved: resolved.top,
					fallback
				}),
				resolved.bottom && /* @__PURE__ */ jsx(OverlayStrip, {
					edge: "bottom",
					resolved: resolved.bottom,
					fallback
				}),
				resolved.left && /* @__PURE__ */ jsx(OverlayStrip, {
					edge: "left",
					resolved: resolved.left,
					fallback
				}),
				resolved.right && /* @__PURE__ */ jsx(OverlayStrip, {
					edge: "right",
					resolved: resolved.right,
					fallback
				})
			]
		});
	}
	var native = resolveNativeProps(resolved, resolvedRadius);
	return /* @__PURE__ */ jsx(NativeEdgeFade, {
		...viewProps,
		style: cleanStyle,
		fadeTop: native.fadeTop,
		fadeBottom: native.fadeBottom,
		fadeLeft: native.fadeLeft,
		fadeRight: native.fadeRight,
		curveTop: native.curveTop,
		curveBottom: native.curveBottom,
		curveLeft: native.curveLeft,
		curveRight: native.curveRight,
		fadeRadius: native.fadeRadius,
		mode: native.mode,
		blurRadius: native.blurRadius,
		frostProgression: native.frostProgression,
		overlayColor: native.overlayColor,
		children
	});
}

export { EdgeFade };
//# sourceMappingURL=EdgeFade.native.js.map