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

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { View, Animated } from 'react-native';
/**
 * WordPress dependencies
 */

import { Icon, check } from '@wordpress/icons';
import { Gradient } from '@wordpress/components';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import styles from './style.scss';
import { colorsUtils } from '../mobile/color-settings/utils';

function SelectedIcon({
  opacity
}) {
  return createElement(Animated.View, {
    style: [styles.selected, {
      opacity
    }]
  }, createElement(View, {
    style: [styles.outline, styles.selectedOutline]
  }), createElement(Icon, {
    icon: check,
    style: styles.icon,
    size: 24
  }));
}

function ColorIndicator({
  color,
  isSelected,
  withCustomPicker,
  style,
  opacity
}) {
  const {
    isGradient
  } = colorsUtils;
  const outlineStyle = usePreferredColorSchemeStyle(styles.outline, styles.outlineDark);

  if (isGradient(color)) {
    return createElement(Gradient, {
      style: [styles.circleOption, style],
      gradientValue: color
    }, createElement(View, {
      style: outlineStyle
    }), isSelected && createElement(SelectedIcon, {
      opacity: opacity
    }));
  } else if (withCustomPicker) {
    return createElement(View, {
      style: [styles.circleOption, style]
    }, createElement(View, {
      style: outlineStyle
    }), color.map(gradientValue => {
      return createElement(Gradient, {
        gradientValue: gradientValue,
        style: [styles.circleOption, styles.absolute, style],
        key: gradientValue
      });
    }), isSelected && createElement(SelectedIcon, null));
  }

  return createElement(View, {
    style: [styles.circleOption, style, {
      backgroundColor: color
    }]
  }, createElement(View, {
    style: outlineStyle
  }), isSelected && createElement(SelectedIcon, {
    opacity: opacity
  }));
}

export default ColorIndicator;
//# sourceMappingURL=index.native.js.map