reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
266 lines (260 loc) • 9.05 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.OpacitySlider = OpacitySlider;
var _react = _interopRequireDefault(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _AppContext = _interopRequireDefault(require('../../AppContext'));
var _SliderCore = require('./SliderCore');
var _Thumb = _interopRequireDefault(require('../Thumb/Thumb'));
var _utils = require('../../utils');
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 [OpacitySlider](https://alabsi91.github.io/reanimated-color-picker/api/sliders/opacity-slider/) */
function OpacitySlider({ gestures = [], style = {}, vertical = false, reverse = false, ...props }) {
const { hueValue, saturationValue, brightnessValue, alphaValue, onGestureChange, onGestureEnd, ...ctx } = (0,
_AppContext.default)();
const thumbShape = props.thumbShape ?? ctx.thumbShape;
const thumbSize = props.thumbSize ?? ctx.thumbSize;
const thumbColor = props.thumbColor ?? ctx.thumbColor;
const boundedThumb = props.boundedThumb ?? ctx.boundedThumb;
const renderThumb = props.renderThumb ?? ctx.renderThumb;
const thumbStyle = props.thumbStyle ?? ctx.thumbStyle ?? {};
const thumbInnerStyle = props.thumbInnerStyle ?? ctx.thumbInnerStyle ?? {};
const thumbScaleAnimationValue = props.thumbScaleAnimationValue ?? ctx.thumbScaleAnimationValue;
const thumbScaleAnimationDuration = props.thumbScaleAnimationDuration ?? ctx.thumbScaleAnimationDuration;
const adaptSpectrum = props.adaptSpectrum ?? ctx.adaptSpectrum;
const sliderThickness = props.sliderThickness ?? ctx.sliderThickness;
const borderRadius = (0, _utils.getStyle)(style, 'borderRadius') ?? 5;
const widthStyle = (0, _utils.getStyle)(style, 'width');
const heightStyle = (0, _utils.getStyle)(style, 'height');
const width = (0, _reactNativeReanimated.useSharedValue)(
vertical ? sliderThickness : typeof widthStyle === 'number' ? widthStyle : 0,
);
const height = (0, _reactNativeReanimated.useSharedValue)(
!vertical ? sliderThickness : typeof heightStyle === 'number' ? heightStyle : 0,
);
const handleScale = (0, _reactNativeReanimated.useSharedValue)(1);
const thumbAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const length = (vertical ? height.value : width.value) - (boundedThumb ? thumbSize : 0);
const percent = alphaValue.value * length;
const pos = (reverse ? length - percent : percent) - (boundedThumb ? 0 : thumbSize / 2);
const posY = vertical ? pos : height.value / 2 - thumbSize / 2;
const posX = vertical ? width.value / 2 - thumbSize / 2 : pos;
return {
transform: [
{
translateY: posY,
},
{
translateX: posX,
},
{
scale: handleScale.value,
},
],
};
}, [width, height, alphaValue, handleScale, vertical, reverse, boundedThumb, thumbSize]);
const activeColorStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
if (!_utils.isWeb) {
return {
backgroundColor: '#0000',
};
}
const deg = vertical ? (reverse ? 1 : 180) : reverse ? 270 : 90;
const color = (0, _utils.HSVA2HSLA_string)(
hueValue.value,
adaptSpectrum ? saturationValue.value : 100,
adaptSpectrum ? brightnessValue.value : 100,
);
return {
background: `linear-gradient(${deg}deg, transparent 0%, ${color} 100%)`,
};
}, [hueValue, saturationValue, brightnessValue, vertical, reverse]);
const imageStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
if (_utils.isWeb) {
return {};
}
const imageRotate = vertical ? (reverse ? '90deg' : '270deg') : reverse ? '0deg' : '180deg';
const imageTranslateY =
((height.value - width.value) / 2) * ((reverse && _utils.isRtl) || (!reverse && !_utils.isRtl) ? -1 : 1);
return {
width: vertical ? height.value : '100%',
height: vertical ? width.value : '100%',
transform: [
{
rotate: imageRotate,
},
{
translateX: vertical ? ((height.value - width.value) / 2) * (reverse ? 1 : -1) : 0,
},
{
translateY: vertical ? imageTranslateY : 0,
},
],
};
}, [width, height, vertical, reverse]);
const imageTintColorProp = (0, _reactNativeReanimated.useAnimatedProps)(() => {
return {
tintColor: (0, _utils.HSVA2HSLA_string)(
hueValue.value,
adaptSpectrum ? saturationValue.value : 100,
adaptSpectrum ? brightnessValue.value : 100,
),
};
}, [hueValue, saturationValue, brightnessValue, adaptSpectrum]);
const onBegin = () => {
'worklet';
handleScale.value = (0, _reactNativeReanimated.withTiming)(thumbScaleAnimationValue, {
duration: thumbScaleAnimationDuration,
});
};
const onUpdate = newValue => {
'worklet';
if (alphaValue.value === newValue) {
return;
}
alphaValue.value = newValue;
onGestureChange();
};
const onEnd = () => {
'worklet';
handleScale.value = (0, _reactNativeReanimated.withTiming)(1, {
duration: thumbScaleAnimationDuration,
});
onGestureEnd();
};
const getAdaptiveColor = hsva => {
'worklet';
return hsva.a > 0.5
? hsva
: {
h: 0,
s: 0,
v: 100,
};
};
return /*#__PURE__*/ _react.default.createElement(
_SliderCore.SliderCore,
{
style: [
style,
{
position: 'relative',
borderRadius,
borderWidth: 0,
padding: 0,
},
_utils.isWeb ? webTransparentTexture : {},
],
maxValue: 1,
step: 0.01,
label: props.accessibilityLabel ?? 'Opacity Slider',
hint: props.accessibilityHint,
currentValue: alphaValue,
width: width,
height: height,
thumbSize: thumbSize,
boundedThumb: boundedThumb,
sliderThickness: sliderThickness,
gestures: gestures,
vertical: vertical,
reverse: reverse,
onBegin: onBegin,
onUpdate: onUpdate,
onEnd: onEnd,
},
/*#__PURE__*/ _react.default.createElement(
_utils.RenderNativeOnly,
null,
/*#__PURE__*/ _react.default.createElement(_reactNative.Image, {
source: require('../../assets/transparent-texture.png'),
style: [
{
width: '100%',
height: '100%',
borderRadius,
},
_reactNative.StyleSheet.absoluteFill,
],
resizeMode: 'repeat',
'aria-hidden': true,
}),
/*#__PURE__*/ _react.default.createElement(
_reactNative.View,
{
style: {
flex: 1,
borderRadius,
overflow: 'hidden',
},
'aria-hidden': true,
},
/*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.Image, {
source: require('../../assets/blackGradient.png'),
style: imageStyle,
resizeMode: 'stretch',
animatedProps: imageTintColorProp,
}),
),
),
/*#__PURE__*/ _react.default.createElement(
_utils.RenderWebOnly,
null,
/*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.View, {
style: [
{
flex: 1,
borderRadius,
},
activeColorStyle,
],
'aria-hidden': true,
}),
),
/*#__PURE__*/ _react.default.createElement(_Thumb.default, {
thumbShape: thumbShape,
thumbSize: thumbSize,
thumbColor: thumbColor,
renderThumb: renderThumb,
innerStyle: thumbInnerStyle,
thumbAnimatedStyle: thumbAnimatedStyle,
style: thumbStyle,
vertical: vertical,
getAdaptiveColor: getAdaptiveColor,
}),
);
}
const webTransparentTexture = {
flex: undefined,
backgroundImage:
'repeating-linear-gradient(45deg, #c1c1c1 25%, transparent 25%, transparent 75%, #c1c1c1 75%, #c1c1c1), repeating-linear-gradient(45deg, #c1c1c1 25%, #fff 25%, #fff 75%, #c1c1c1 75%, #c1c1c1)',
backgroundPosition: '0px 0px, 8px 8px',
backgroundSize: '16px 16px',
};