reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
159 lines (156 loc) • 4.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.default = HslWidget;
var _react = _interopRequireWildcard(require('react'));
var _reactNativeReanimated = require('react-native-reanimated');
var _index = _interopRequireDefault(require('../../../colorKit/index'));
var _utils = require('../../../utils');
var _WidgetTextInput = _interopRequireDefault(require('./WidgetTextInput'));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : { default: e };
}
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 HslWidget(props) {
const {
onChange,
colorResult,
hueValue,
saturationValue,
brightnessValue,
alphaValue,
inputStyle,
inputTitleStyle,
inputProps,
disableAlphaChannel,
} = props;
const hsl = (0, _react.useRef)(_index.default.HSL(colorResult().hsla).object(false));
const h = (0, _reactNativeReanimated.useSharedValue)(hsl.current.h.toString());
const s = (0, _reactNativeReanimated.useSharedValue)(hsl.current.s.toString());
const l = (0, _reactNativeReanimated.useSharedValue)(hsl.current.l.toString());
const a = (0, _reactNativeReanimated.useSharedValue)(hsl.current.a.toString());
(0, _reactNativeReanimated.useDerivedValue)(() => {
const currentColor = {
h: hueValue.value,
s: saturationValue.value,
v: brightnessValue.value,
a: alphaValue.value,
};
hsl.current = _index.default.runOnUI().HSL(colorResult(currentColor).hsla).object(false);
h.value = hsl.current.h.toString();
s.value = hsl.current.s.toString();
l.value = hsl.current.l.toString();
a.value = hsl.current.a.toString();
}, [hueValue, saturationValue, brightnessValue, alphaValue]);
const onHueEndEditing = text => {
const hue = (0, _utils.clamp)(+text, 360);
// Force update in case `h` value has not changed
h.value = '';
onChange({
h: hue,
s: +s.value,
l: +l.value,
a: +a.value,
});
};
const onSaturationEndEditing = text => {
const saturation = (0, _utils.clamp)(+text, 100);
s.value = '';
onChange({
h: +h.value,
s: saturation,
l: +l.value,
a: +a.value,
});
};
const onLumEndEditing = text => {
const lum = (0, _utils.clamp)(+text, 100);
l.value = '';
onChange({
h: +h.value,
s: +s.value,
l: lum,
a: +a.value,
});
};
const onAlphaEndEditing = text => {
const alpha = (0, _utils.clamp)(+text, 1);
a.value = '';
onChange({
h: +h.value,
s: +s.value,
l: +l.value,
a: alpha,
});
};
return /*#__PURE__*/ _react.default.createElement(
_react.default.Fragment,
null,
/*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: h,
title: 'H',
label: 'Hue channel in HSL color format',
onEndEditing: onHueEndEditing,
inputProps: inputProps,
}),
/*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: s,
title: 'S',
label: 'Saturation channel in HSL color format',
onEndEditing: onSaturationEndEditing,
inputProps: inputProps,
}),
/*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: l,
title: 'L',
label: 'Luminosity channel in HSL color format',
onEndEditing: onLumEndEditing,
inputProps: inputProps,
}),
/*#__PURE__*/ _react.default.createElement(
_utils.ConditionalRendering,
{
if: !disableAlphaChannel,
},
/*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
inputStyle: inputStyle,
textStyle: inputTitleStyle,
textValue: a,
title: 'A',
label: 'Alpha channel in HSL color format',
onEndEditing: onAlphaEndEditing,
inputProps: inputProps,
decimal: true,
}),
),
);
}