reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
235 lines (228 loc) • 7.76 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.ExtraThumb = ExtraThumb;
var _react = _interopRequireDefault(require('react'));
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _AppContext = _interopRequireDefault(require('../../../AppContext'));
var _styles = require('../../../styles');
var _Thumb = _interopRequireDefault(require('../../Thumb/Thumb'));
var _utils = require('../../../utils');
var _Panel3Context = _interopRequireDefault(require('./Panel3Context'));
var _index = _interopRequireDefault(require('../../../colorKit/index'));
function _interopRequireWildcard(e, t) {
if ('function' == typeof WeakMap)
var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function (e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = { __proto__: null, default: e };
if (null === e || ('object' != typeof e && 'function' != typeof e)) return f;
if ((o = t ? n : r)) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (const t in e)
'default' !== t &&
{}.hasOwnProperty.call(e, t) &&
((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set)
? o(f, t, i)
: (f[t] = e[t]));
return f;
})(e, t);
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : { default: e };
}
/** @see [ExtraThumb](https://alabsi91.github.io/reanimated-color-picker/api/preview/extra-thumb/) */
function ExtraThumb({
onChange,
onChangeJS,
colorTransform,
hueTransform,
saturationTransform,
brightnessTransform,
renderThumb,
...props
}) {
const { width, boundedThumb, centerChannel, centerChannelValue, adaptSpectrum, rotate, ...ctx } = (0, _Panel3Context.default)();
const { hueValue, saturationValue, brightnessValue, alphaValue, colorResult } = (0, _AppContext.default)();
const thumbSize = props.thumbSize ?? ctx.thumbSize;
const thumbShape = props.thumbShape ?? ctx.thumbShape;
const thumbColor = props.thumbColor ?? ctx.thumbColor;
const thumbStyle = props.thumbStyle ?? ctx.thumbStyle;
const thumbInnerStyle = props.thumbInnerStyle ?? ctx.thumbInnerStyle;
const renderCenterLine = props.renderCenterLine ?? ctx.renderCenterLine;
const hsv = (0, _reactNativeReanimated.useDerivedValue)(() => {
const currentColor = {
h: hueValue.value,
s: saturationValue.value,
v: brightnessValue.value,
a: alphaValue.value,
};
if (colorTransform) {
return colorTransform(currentColor);
}
return currentColor;
}, [hueValue, saturationValue, brightnessValue, alphaValue]);
const hue = (0, _reactNativeReanimated.useDerivedValue)(() => {
if (colorTransform) {
return hsv.value.h;
}
if (!hueTransform) {
return hueValue.value;
}
const changeAmount = typeof hueTransform === 'string' ? hueValue.value * (parseFloat(hueTransform) / 100) : hueTransform;
return (0, _utils.clamp)((hueValue.value + changeAmount) % 360, 360);
}, [hsv, hueValue, hueTransform]);
// Calculate saturation value
const saturation = (0, _reactNativeReanimated.useDerivedValue)(() => {
if (colorTransform) {
return hsv.value.s;
}
if (!saturationTransform) {
return saturationValue.value;
}
const changeAmount =
typeof saturationTransform === 'string'
? saturationValue.value * (parseFloat(saturationTransform) / 100)
: saturationTransform;
return (0, _utils.clamp)(saturationValue.value + changeAmount, 100);
}, [hsv, saturationValue, saturationTransform]);
// Calculate brightness value
const brightness = (0, _reactNativeReanimated.useDerivedValue)(() => {
if (colorTransform) {
return hsv.value.v;
}
if (!brightnessTransform) {
return brightnessValue.value;
}
const changeAmount =
typeof brightnessTransform === 'string'
? brightnessValue.value * (parseFloat(brightnessTransform) / 100)
: brightnessTransform;
return (0, _utils.clamp)(brightnessValue.value + changeAmount, 100);
}, [hsv, brightnessValue, brightnessTransform]);
// Call onChange prop on every value change
(0, _reactNativeReanimated.useDerivedValue)(() => {
if (!onChange && !onChangeJS) return;
const colors = colorResult({
h: hue.value,
s: saturation.value,
v: brightness.value,
a: alphaValue.value,
});
if (onChange) {
onChange(colors);
}
if (onChangeJS) {
(0, _reactNativeReanimated.runOnJS)(onChangeJS)(colors);
}
}, [hue, saturation, brightness, alphaValue]);
const thumbAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0);
const rotatedHue = (hue.value - rotate) % 360;
const distance = (centerChannelValue.value / 100) * (width.value / 2 - (boundedThumb ? thumbSize / 2 : 0));
const angle = (rotatedHue * Math.PI) / 180;
const posY = width.value - (Math.sin(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2);
const posX = width.value - (Math.cos(angle) * distance + center) - (boundedThumb ? thumbSize : thumbSize / 2);
return {
transform: [
{
translateX: posX,
},
{
translateY: posY,
},
{
rotate: rotatedHue + 90 + 'deg',
},
],
};
}, [thumbSize, boundedThumb, width, centerChannelValue, hue, rotate]);
const centerLineStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
if (!renderCenterLine) {
return {};
}
const lineThickness = 1;
const center = width.value / 2 - (boundedThumb ? thumbSize / 2 : 0);
const rotatedHue = (hue.value - rotate) % 360;
const distance = (centerChannelValue.value / 100) * center;
const angle = (rotatedHue + 180) % 360; // reversed angle
return {
top: (width.value - lineThickness) / 2,
left: (width.value - distance) / 2,
height: lineThickness,
width: distance,
transform: [
{
rotate: angle + 'deg',
},
{
translateX: distance / 2,
},
],
};
}, [renderCenterLine, boundedThumb, thumbSize, width, hue, centerChannelValue, rotate]);
const getAdaptiveColor = hsva => {
'worklet';
if (adaptSpectrum) {
return hsva;
}
switch (centerChannel) {
case 'saturation':
return {
h: hsva.h,
s: hsva.s,
v: 100,
};
case 'brightness':
return {
h: hsva.h,
s: 100,
v: hsva.v,
};
case 'hsl-saturation': {
const { h, s } = _index.default.runOnUI().HSL(hsva).object(false);
return {
h,
s,
l: 50,
};
}
default:
return hsva;
}
};
return /*#__PURE__*/ _react.default.createElement(
_react.default.Fragment,
null,
/*#__PURE__*/ _react.default.createElement(
_utils.ConditionalRendering,
{
if: renderCenterLine,
},
/*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.View, {
style: [_styles.styles.panel3Line, centerLineStyle],
}),
),
/*#__PURE__*/ _react.default.createElement(_Thumb.default, {
thumbShape: thumbShape,
thumbSize: thumbSize,
thumbColor: thumbColor,
renderThumb: renderThumb,
innerStyle: thumbInnerStyle,
thumbAnimatedStyle: thumbAnimatedStyle,
style: thumbStyle,
overrideHSV: {
hue,
saturation,
brightness,
},
getAdaptiveColor: getAdaptiveColor,
}),
);
}