@uiw/react-color-alpha
Version:
162 lines • 6.57 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "reverse", "style", "onChange", "pointer"];
import React, { useCallback } from 'react';
import { hsvaToHslaString } from '@uiw/color-convert';
import Interactive from '@uiw/react-drag-event-interactive';
import { Pointer } from "./Pointer.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export * from "./Pointer.js";
export var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
var Alpha = /*#__PURE__*/React.forwardRef((props, ref) => {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-color-alpha' : _props$prefixCls,
className = props.className,
hsva = props.hsva,
background = props.background,
_props$bgProps = props.bgProps,
bgProps = _props$bgProps === void 0 ? {} : _props$bgProps,
_props$innerProps = props.innerProps,
innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
_props$pointerProps = props.pointerProps,
pointerProps = _props$pointerProps === void 0 ? {} : _props$pointerProps,
_props$radius = props.radius,
radius = _props$radius === void 0 ? 0 : _props$radius,
width = props.width,
_props$height = props.height,
height = _props$height === void 0 ? 16 : _props$height,
_props$direction = props.direction,
direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
_props$reverse = props.reverse,
reverse = _props$reverse === void 0 ? false : _props$reverse,
style = props.style,
onChange = props.onChange,
pointer = props.pointer,
other = _objectWithoutPropertiesLoose(props, _excluded);
var offsetToAlpha = useCallback(offset => {
var value = direction === 'horizontal' ? offset.left : offset.top;
if (direction === 'horizontal') {
return reverse ? 1 - value : value;
}
return reverse ? value : 1 - value;
}, [direction, reverse]);
var alphaToOffset = useCallback(alpha => {
if (direction === 'horizontal') {
return reverse ? 1 - alpha : alpha;
}
return reverse ? alpha : 1 - alpha;
}, [direction, reverse]);
var handleChange = offset => {
var alpha = offsetToAlpha(offset);
onChange && onChange(_extends({}, hsva, {
a: alpha
}), offset);
};
var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
a: 1
}));
var horizontalGradient = reverse ? "linear-gradient(to right, " + colorTo + " 0%, rgba(244, 67, 54, 0) 100%)" : "linear-gradient(to right, rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
var verticalGradient = reverse ? "linear-gradient(to bottom, rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)" : "linear-gradient(to bottom, " + colorTo + " 0%, rgba(244, 67, 54, 0) 100%)";
var innerBackground = direction === 'horizontal' ? horizontalGradient : verticalGradient;
var comProps = {};
if (direction === 'horizontal') {
comProps.left = alphaToOffset(hsva.a) * 100 + "%";
} else {
comProps.top = alphaToOffset(hsva.a) * 100 + "%";
}
var styleWrapper = _extends({
'--alpha-background-color': '#fff',
'--alpha-pointer-background-color': 'rgb(248, 248, 248)',
'--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
borderRadius: radius,
background: "url(" + BACKGROUND_IMG + ") left center",
backgroundColor: 'var(--alpha-background-color)'
}, {
width,
height
}, style, {
position: 'relative'
});
var handleKeyDown = useCallback(event => {
var step = 0.01; // 1% step
var currentAlpha = hsva.a;
var newAlpha = currentAlpha;
switch (event.key) {
case 'ArrowLeft':
if (direction === 'horizontal') {
newAlpha = reverse ? Math.min(1, currentAlpha + step) : Math.max(0, currentAlpha - step);
event.preventDefault();
}
break;
case 'ArrowRight':
if (direction === 'horizontal') {
newAlpha = reverse ? Math.max(0, currentAlpha - step) : Math.min(1, currentAlpha + step);
event.preventDefault();
}
break;
case 'ArrowUp':
if (direction === 'vertical') {
newAlpha = reverse ? Math.max(0, currentAlpha - step) : Math.min(1, currentAlpha + step);
event.preventDefault();
}
break;
case 'ArrowDown':
if (direction === 'vertical') {
newAlpha = reverse ? Math.min(1, currentAlpha + step) : Math.max(0, currentAlpha - step);
event.preventDefault();
}
break;
default:
return;
}
if (newAlpha !== currentAlpha) {
var syntheticAxisOffset = alphaToOffset(newAlpha);
var syntheticOffset = {
left: direction === 'horizontal' ? syntheticAxisOffset : hsva.a,
top: direction === 'vertical' ? syntheticAxisOffset : hsva.a,
width: 0,
height: 0,
x: 0,
y: 0
};
onChange && onChange(_extends({}, hsva, {
a: newAlpha
}), syntheticOffset);
}
}, [alphaToOffset, hsva, direction, onChange, reverse]);
var handleClick = useCallback(event => {
event.target.focus();
}, []);
var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
prefixCls
}, pointerProps, comProps)) : /*#__PURE__*/_jsx(Pointer, _extends({}, pointerProps, {
prefixCls: prefixCls
}, comProps));
return /*#__PURE__*/_jsxs("div", _extends({}, other, {
className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
style: styleWrapper,
ref: ref,
children: [/*#__PURE__*/_jsx("div", _extends({}, bgProps, {
style: _extends({
inset: 0,
position: 'absolute',
background: background || innerBackground,
borderRadius: radius
}, bgProps.style)
})), /*#__PURE__*/_jsx(Interactive, _extends({}, innerProps, {
style: _extends({}, innerProps.style, {
inset: 0,
zIndex: 1,
position: 'absolute',
outline: 'none'
}),
onMove: handleChange,
onDown: handleChange,
onClick: handleClick,
onKeyDown: handleKeyDown,
children: pointerElement
}))]
}));
});
Alpha.displayName = 'Alpha';
export default Alpha;