reanimated-color-picker/lib/commonjs/components/InputWidget/InputWidget.js

A Pure JavaScript Color Picker for React Native

'use strict';

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 _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);
}
const defaultFormats = ['HEX', 'RGB', 'HSL', 'HWB', 'HSV'];

/** @see [InputWidget](https://alabsi91.github.io/reanimated-color-picker/api/preview/input-widget/) */
function InputWidget(props) {
  const {
    defaultFormat = 'HEX',
    formats = defaultFormats,
    iconColor = 'black',
    disableAlphaChannel = false,
    containerStyle = {},
    inputStyle = {},
    inputTitleStyle = {},
    iconStyle = {},
    inputProps = {},
    cycleButtonAccessibilityHint,
    cycleButtonAccessibilityLabel = 'Cycle inputs color format',
  } = props;
  const { setColor, colorResult, 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]);
    _reactNative.AccessibilityInfo.announceForAccessibility(formats[nextIndex]);
  };
  const inputsProps = {
    onChange,
    colorResult,
    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,
            marginLeft: 10,
          },
        },
        /*#__PURE__*/ _react.default.createElement(
          _reactNative.Pressable,
          {
            onPress: cycle,
            accessibilityLabel: cycleButtonAccessibilityLabel,
            accessibilityHint: cycleButtonAccessibilityHint,
          },
          /*#__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,
            'aria-hidden': true,
          },
          ' ',
        ),
      ),
    ),
  );
}