reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
61 lines (58 loc) • 1.83 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.default = HexWidget;
var _react = _interopRequireDefault(require('react'));
var _reactNativeReanimated = require('react-native-reanimated');
var _index = _interopRequireDefault(require('../../../colorKit/index'));
var _WidgetTextInput = _interopRequireDefault(require('./WidgetTextInput'));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : { default: e };
}
function HexWidget(props) {
const {
onChange,
colorResult,
hueValue,
saturationValue,
brightnessValue,
alphaValue,
inputStyle,
inputTitleStyle,
inputProps,
} = props;
const hexColor = (0, _reactNativeReanimated.useSharedValue)(colorResult().hex);
(0, _reactNativeReanimated.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 = _index.default.getFormat(text)) === null || _colorKit$getFormat === void 0
? void 0
: _colorKit$getFormat.includes('hex');
if (isValidHex) {
onChange(text);
}
};
return /*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: hexColor,
title: 'HEX',
label: 'Hex color input',
onEndEditing: onEndEditing,
inputProps: inputProps,
textKeyboard: true,
});
}