reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
52 lines (50 loc) • 1.5 kB
JavaScript
import React from 'react';
import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
import colorKit from '../../../colorKit/index';
import WidgetTextInput from './WidgetTextInput';
export default function HexWidget(props) {
const {
onChange,
colorResult,
hueValue,
saturationValue,
brightnessValue,
alphaValue,
inputStyle,
inputTitleStyle,
inputProps,
} = props;
const hexColor = useSharedValue(colorResult().hex);
useDerivedValue(() => {
const currentColor = {
h: hueValue.value,
s: saturationValue.value,
v: brightnessValue.value,
a: alphaValue.value,
};
hexColor.value = colorResult(currentColor).hex;
}, [hueValue, saturationValue, brightnessValue, alphaValue]);
const onEndEditing = text => {
var _colorKit$getFormat;
text = text.startsWith('#') ? text : '#' + text;
// Force update in case `hexColor` value has not changed
hexColor.value = '';
const isValidHex =
(_colorKit$getFormat = colorKit.getFormat(text)) === null || _colorKit$getFormat === void 0
? void 0
: _colorKit$getFormat.includes('hex');
if (isValidHex) {
onChange(text);
}
};
return /*#__PURE__*/ React.createElement(WidgetTextInput, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: hexColor,
title: 'HEX',
label: 'Hex color input',
onEndEditing: onEndEditing,
inputProps: inputProps,
textKeyboard: true,
});
}