@wordpress/components/build/color-indicator/index.native.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
var _gradient = _interopRequireDefault(require("../mobile/gradient"));
var _utils = require("../mobile/color-settings/utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SelectedIcon({
  opacity
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
    style: [_style.default.selected, {
      opacity
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_style.default.outline, _style.default.selectedOutline]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      icon: _icons.check,
      style: _style.default.icon,
      size: 24
    })]
  });
}
function ColorIndicator({
  color,
  isSelected,
  withCustomPicker,
  style,
  opacity
}) {
  const {
    isGradient
  } = _utils.colorsUtils;
  const outlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.outline, _style.default.outlineDark);
  if (isGradient(color)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_gradient.default, {
      style: [_style.default.circleOption, style],
      gradientValue: color,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: outlineStyle
      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {
        opacity: opacity
      })]
    });
  } else if (withCustomPicker) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_style.default.circleOption, style],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: outlineStyle
      }), color.map(gradientValue => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_gradient.default, {
          gradientValue: gradientValue,
          style: [_style.default.circleOption, _style.default.absolute, style]
        }, gradientValue);
      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {})]
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [_style.default.circleOption, style, {
      backgroundColor: color
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: outlineStyle
    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {
      opacity: opacity
    })]
  });
}
var _default = exports.default = ColorIndicator;
//# sourceMappingURL=index.native.js.map