@lobehub/ui/es/base-ui/ColorPicker/SaturationArea.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { styles } from "./style.mjs";
import { memo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/base-ui/ColorPicker/SaturationArea.tsx
const clamp = (n) => Math.min(1, Math.max(0, Math.round(n * 100) / 100));
const SaturationArea = memo(({ hue, label, onChange, onChangeComplete, saturation, value }) => {
	const areaRef = useRef(null);
	const fromPointer = (event) => {
		const rect = areaRef.current.getBoundingClientRect();
		const next = [clamp((event.clientX - rect.left) / rect.width), clamp(1 - (event.clientY - rect.top) / rect.height)];
		onChange(...next);
		return next;
	};
	return /* @__PURE__ */ jsx("div", {
		"aria-label": label,
		"aria-valuemax": 100,
		"aria-valuemin": 0,
		"aria-valuenow": Math.round(saturation * 100),
		"aria-valuetext": `Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(value * 100)}%`,
		className: styles.saturation,
		ref: areaRef,
		role: "slider",
		tabIndex: 0,
		style: { background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue} 100% 50%))` },
		onKeyDown: (event) => {
			const delta = event.shiftKey ? .1 : .01;
			const move = {
				ArrowDown: [0, -delta],
				ArrowLeft: [-delta, 0],
				ArrowRight: [delta, 0],
				ArrowUp: [0, delta]
			}[event.key];
			if (!move) return;
			event.preventDefault();
			const next = [clamp(saturation + move[0]), clamp(value + move[1])];
			onChange(...next);
			onChangeComplete(...next);
		},
		onPointerDown: (event) => {
			event.currentTarget.setPointerCapture(event.pointerId);
			fromPointer(event);
		},
		onPointerMove: (event) => {
			if (event.currentTarget.hasPointerCapture(event.pointerId)) fromPointer(event);
		},
		onPointerUp: (event) => {
			event.currentTarget.releasePointerCapture(event.pointerId);
			onChangeComplete(...fromPointer(event));
		},
		children: /* @__PURE__ */ jsx("span", {
			className: styles.thumb,
			style: {
				left: `${saturation * 100}%`,
				top: `${(1 - value) * 100}%`
			}
		})
	});
});
SaturationArea.displayName = "ColorPickerSaturationArea";
//#endregion
export { SaturationArea as default };

//# sourceMappingURL=SaturationArea.mjs.map