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

A Pure JavaScript Color Picker for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.PreviewText = PreviewText;
var _AppContext = _interopRequireDefault(require('../AppContext'));
var _styles = require('../styles');
var _utils = require('../utils');
var _react = _interopRequireDefault(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
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 _interopRequireDefault(e) {
  return e && e.__esModule ? e : { default: e };
}
_reactNativeReanimated.default.addWhitelistedNativeProps({
  text: true,
});
const AnimatedTextInput = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.TextInput);

/** @see [PreviewText](https://alabsi91.github.io/reanimated-color-picker/api/preview/preview-text/) */
function PreviewText({ style = {}, colorFormat = 'hex' }) {
  const { colorResult: returnedResults, hueValue, saturationValue, brightnessValue, alphaValue } = (0, _AppContext.default)();
  const inputRef = (0, _reactNativeReanimated.useAnimatedRef)();
  const colorString = (0, _reactNativeReanimated.useDerivedValue)(() => {
    const currentColor = {
      h: hueValue.value,
      s: saturationValue.value,
      v: brightnessValue.value,
      a: alphaValue.value,
    };
    if (_utils.isWeb && inputRef.current) {
      // @ts-expect-error value doesn't exist
      inputRef.current.value = returnedResults(currentColor)[colorFormat];
      return;
    }
    return returnedResults(currentColor)[colorFormat];
  }, [colorFormat, hueValue, saturationValue, brightnessValue, alphaValue]);
  const animatedProps = (0, _reactNativeReanimated.useAnimatedProps)(() => {
    return {
      text: colorString.value,
      defaultValue: colorString.value,
    };
  }, [colorString]);
  return /*#__PURE__*/ _react.default.createElement(AnimatedTextInput, {
    ref: inputRef,
    underlineColorAndroid: 'transparent',
    editable: false,
    style: [_styles.styles.previewText, style],
    animatedProps: animatedProps,
    pointerEvents: _utils.isWeb ? undefined : 'none',
    id: 'color-picker-preview-text-' + colorFormat,
    role: 'presentation',
    autoCapitalize: 'none',
    autoComplete: 'off',
    autoCorrect: false,
    focusable: false,
    autoFocus: false,
    tabIndex: -1,
    onFocus: () => {
      var _inputRef$current;
      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
    },
    readOnly: true,
  });
}