@uiw/react-color-alpha
Version:
183 lines (182 loc) • 8.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
BACKGROUND_IMG: true
};
exports["default"] = exports.BACKGROUND_IMG = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _colorConvert = require("@uiw/color-convert");
var _reactDragEventInteractive = _interopRequireDefault(require("@uiw/react-drag-event-interactive"));
var _Pointer = require("./Pointer");
Object.keys(_Pointer).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Pointer[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Pointer[key];
}
});
});
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "reverse", "style", "onChange", "pointer"];
var BACKGROUND_IMG = exports.BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
var Alpha = /*#__PURE__*/_react["default"].forwardRef(function (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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
var offsetToAlpha = (0, _react.useCallback)(function (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 = (0, _react.useCallback)(function (alpha) {
if (direction === 'horizontal') {
return reverse ? 1 - alpha : alpha;
}
return reverse ? alpha : 1 - alpha;
}, [direction, reverse]);
var handleChange = function handleChange(offset) {
var alpha = offsetToAlpha(offset);
onChange && onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), {}, {
a: alpha
}), offset);
};
var colorTo = (0, _colorConvert.hsvaToHslaString)(Object.assign({}, hsva, {
a: 1
}));
var horizontalGradient = reverse ? "linear-gradient(to right, ".concat(colorTo, " 0%, rgba(244, 67, 54, 0) 100%)") : "linear-gradient(to right, rgba(244, 67, 54, 0) 0%, ".concat(colorTo, " 100%)");
var verticalGradient = reverse ? "linear-gradient(to bottom, rgba(244, 67, 54, 0) 0%, ".concat(colorTo, " 100%)") : "linear-gradient(to bottom, ".concat(colorTo, " 0%, rgba(244, 67, 54, 0) 100%)");
var innerBackground = direction === 'horizontal' ? horizontalGradient : verticalGradient;
var comProps = {};
if (direction === 'horizontal') {
comProps.left = "".concat(alphaToOffset(hsva.a) * 100, "%");
} else {
comProps.top = "".concat(alphaToOffset(hsva.a) * 100, "%");
}
var styleWrapper = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
'--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(".concat(BACKGROUND_IMG, ") left center"),
backgroundColor: 'var(--alpha-background-color)'
}, {
width: width,
height: height
}), style), {}, {
position: 'relative'
});
var handleKeyDown = (0, _react.useCallback)(function (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((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), {}, {
a: newAlpha
}), syntheticOffset);
}
}, [alphaToOffset, hsva, direction, onChange, reverse]);
var handleClick = (0, _react.useCallback)(function (event) {
event.target.focus();
}, []);
var pointerElement = pointer && typeof pointer === 'function' ? pointer((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
prefixCls: prefixCls
}, pointerProps), comProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pointer.Pointer, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, pointerProps), {}, {
prefixCls: prefixCls
}, comProps));
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
className: [prefixCls, "".concat(prefixCls, "-").concat(direction), className || ''].filter(Boolean).join(' '),
style: styleWrapper,
ref: ref,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bgProps), {}, {
style: (0, _objectSpread2["default"])({
inset: 0,
position: 'absolute',
background: background || innerBackground,
borderRadius: radius
}, bgProps.style)
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDragEventInteractive["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, innerProps), {}, {
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, innerProps.style), {}, {
inset: 0,
zIndex: 1,
position: 'absolute',
outline: 'none'
}),
onMove: handleChange,
onDown: handleChange,
onClick: handleClick,
onKeyDown: handleKeyDown,
children: pointerElement
}))]
}));
});
Alpha.displayName = 'Alpha';
var _default = exports["default"] = Alpha;