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

A Pure JavaScript Color Picker for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.default = RgbWidget;
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 RgbWidget(props) {
  const {
    onChange,
    colorResult,
    hueValue,
    saturationValue,
    brightnessValue,
    alphaValue,
    inputStyle,
    inputTitleStyle,
    inputProps,
    disableAlphaChannel,
  } = props;
  const rgb = (0, _react.useRef)(_index.default.RGB(colorResult().rgba).object(false));
  const r = (0, _reactNativeReanimated.useSharedValue)(rgb.current.r.toString());
  const g = (0, _reactNativeReanimated.useSharedValue)(rgb.current.g.toString());
  const b = (0, _reactNativeReanimated.useSharedValue)(rgb.current.b.toString());
  const a = (0, _reactNativeReanimated.useSharedValue)(rgb.current.a.toString());
  (0, _reactNativeReanimated.useDerivedValue)(() => {
    const currentColor = {
      h: hueValue.value,
      s: saturationValue.value,
      v: brightnessValue.value,
      a: alphaValue.value,
    };
    rgb.current = _index.default.runOnUI().RGB(colorResult(currentColor).rgba).object(false);
    r.value = rgb.current.r.toString();
    g.value = rgb.current.g.toString();
    b.value = rgb.current.b.toString();
    a.value = rgb.current.a.toString();
  }, [hueValue, saturationValue, brightnessValue, alphaValue]); // track changes on WEB

  const onRedEndEditing = text => {
    const red = (0, _utils.clamp)(+text, 255);

    // Force update in case `r` value has not changed
    r.value = '';
    onChange({
      r: red,
      g: +g.value,
      b: +b.value,
      a: +a.value,
    });
  };
  const onGreenEndEditing = text => {
    const green = (0, _utils.clamp)(+text, 255);
    g.value = '';
    onChange({
      r: +r.value,
      g: green,
      b: +b.value,
      a: +a.value,
    });
  };
  const onBlueEndEditing = text => {
    const blue = (0, _utils.clamp)(+text, 255);
    b.value = '';
    onChange({
      r: +r.value,
      g: +g.value,
      b: blue,
      a: +a.value,
    });
  };
  const onAlphaEndEditing = text => {
    const alpha = (0, _utils.clamp)(parseFloat(text), 1);
    a.value = '';
    onChange({
      r: +r.value,
      g: +g.value,
      b: +b.value,
      a: alpha,
    });
  };
  return /*#__PURE__*/ _react.default.createElement(
    _react.default.Fragment,
    null,
    /*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
      inputStyle: inputStyle,
      textStyle: inputTitleStyle,
      textValue: r,
      title: 'R',
      label: 'Red channel in RGB color format',
      onEndEditing: onRedEndEditing,
      inputProps: inputProps,
    }),
    /*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
      inputStyle: inputStyle,
      textStyle: inputTitleStyle,
      textValue: g,
      title: 'G',
      label: 'Green channel in RGB color format',
      onEndEditing: onGreenEndEditing,
      inputProps: inputProps,
    }),
    /*#__PURE__*/ _react.default.createElement(_WidgetTextInput.default, {
      inputStyle: inputStyle,
      textStyle: inputTitleStyle,
      textValue: b,
      title: 'B',
      label: 'Blue channel in RGB color format',
      onEndEditing: onBlueEndEditing,
      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 RGBA color format',
        onEndEditing: onAlphaEndEditing,
        inputProps: inputProps,
        decimal: true,
      }),
    ),
  );
}