reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
158 lines (156 loc) • 5.3 kB
JavaScript
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.InputWidget = InputWidget;
var _react = _interopRequireWildcard(require('react'));
var _reactNative = require('react-native');
var _index = _interopRequireDefault(require('../../colorKit/index'));
var _AppContext = _interopRequireDefault(require('../../AppContext'));
var _styles = require('../../styles');
var _utils = require('../../utils');
var _HexWidget = _interopRequireDefault(require('./Widgets/HexWidget'));
var _HslWidget = _interopRequireDefault(require('./Widgets/HslWidget'));
var _HsvWidget = _interopRequireDefault(require('./Widgets/HsvWidget'));
var _HwbWidget = _interopRequireDefault(require('./Widgets/HwbWidget'));
var _RgbWidget = _interopRequireDefault(require('./Widgets/RgbWidget'));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : { default: e };
}
function _getRequireWildcardCache(e) {
if ('function' != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function (e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || ('object' != typeof e && 'function' != typeof e)) return { default: e };
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = { __proto__: null },
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e)
if ('default' !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : (n[u] = e[u]);
}
return (n.default = e), t && t.set(e, n), n;
}
const defaultFormats = ['HEX', 'RGB', 'HSL', 'HWB', 'HSV'];
function InputWidget({
defaultFormat = 'HEX',
formats = defaultFormats,
iconColor = 'black',
disableAlphaChannel = false,
containerStyle = {},
inputStyle = {},
inputTitleStyle = {},
iconStyle = {},
inputProps = {},
}) {
const { setColor, returnedResults, hueValue, saturationValue, brightnessValue, alphaValue, onGestureChange, onGestureEnd } = (0,
_AppContext.default)();
const [format, setFormat] = (0, _react.useState)(formats.includes(defaultFormat) ? defaultFormat : formats[0] ?? 'HEX');
const onChange = color => {
var _colorKit$getFormat;
const isHex =
(_colorKit$getFormat = _index.default.getFormat(color)) === null || _colorKit$getFormat === void 0
? void 0
: _colorKit$getFormat.includes('hex');
if (disableAlphaChannel && isHex) color = _index.default.setAlpha(color, 1).hsv().object(false);
setColor(color, 0);
onGestureChange(color);
onGestureEnd(color);
};
const cycle = () => {
const index = formats.indexOf(format);
const nextIndex = (index + 1) % formats.length;
setFormat(formats[nextIndex]);
};
const inputsProps = {
onChange,
returnedResults,
hueValue,
saturationValue,
brightnessValue,
alphaValue,
inputStyle,
inputTitleStyle,
inputProps,
disableAlphaChannel,
};
const Input = () => {
switch (format) {
case 'HEX':
return /*#__PURE__*/ _react.default.createElement(_HexWidget.default, inputsProps);
case 'RGB':
return /*#__PURE__*/ _react.default.createElement(_RgbWidget.default, inputsProps);
case 'HSL':
return /*#__PURE__*/ _react.default.createElement(_HslWidget.default, inputsProps);
case 'HWB':
return /*#__PURE__*/ _react.default.createElement(_HwbWidget.default, inputsProps);
case 'HSV':
return /*#__PURE__*/ _react.default.createElement(_HsvWidget.default, inputsProps);
}
};
const gap = (0, _utils.getStyle)(containerStyle, 'gap') ?? 5;
const iconWidth = (0, _utils.getStyle)(iconStyle, 'width') ?? 24;
const buttonIconStyle = _reactNative.StyleSheet.flatten([_styles.styles.arrowButton, iconStyle]);
return /*#__PURE__*/ _react.default.createElement(
_reactNative.View,
{
style: [_styles.styles.container, containerStyle],
},
/*#__PURE__*/ _react.default.createElement(
_reactNative.View,
{
style: [
_styles.styles.inputsWrapper,
{
gap,
},
],
},
/*#__PURE__*/ _react.default.createElement(Input, null),
),
/*#__PURE__*/ _react.default.createElement(
_utils.ConditionalRendering,
{
if: formats.length > 1,
},
/*#__PURE__*/ _react.default.createElement(
_reactNative.View,
{
style: {
width: iconWidth,
},
},
/*#__PURE__*/ _react.default.createElement(
_reactNative.Pressable,
{
onPress: cycle,
},
/*#__PURE__*/ _react.default.createElement(_reactNative.Image, {
style: [
buttonIconStyle,
{
tintColor: iconColor,
},
],
source: require('../../assets/arrow-icon.png'),
}),
),
/*#__PURE__*/ _react.default.createElement(
_reactNative.Text,
{
style: _styles.styles.inputTitle,
},
' ',
),
),
),
);
}
;