@wordpress/components/build/gradient-picker/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = GradientPicker;

var _element = require("@wordpress/element");

var _lodash = require("lodash");

var _i18n = require("@wordpress/i18n");

var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));

var _customGradientPicker = _interopRequireDefault(require("../custom-gradient-picker"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function GradientPicker({
  className,
  gradients,
  onChange,
  value,
  clearable = true,
  disableCustomGradients = false
}) {
  const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
  const gradientOptions = (0, _element.useMemo)(() => {
    return (0, _lodash.map)(gradients, ({
      gradient,
      name
    }) => (0, _element.createElement)(_circularOptionPicker.default.Option, {
      key: gradient,
      value: gradient,
      isSelected: value === gradient,
      tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
      style: {
        color: 'rgba( 0,0,0,0 )',
        background: gradient
      },
      onClick: value === gradient ? clearGradient : () => onChange(gradient),
      "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
      (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
    }));
  }, [gradients, value, onChange, clearGradient]);
  return (0, _element.createElement)(_circularOptionPicker.default, {
    className: className,
    options: gradientOptions,
    actions: clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
      onClick: clearGradient
    }, (0, _i18n.__)('Clear'))
  }, !disableCustomGradients && (0, _element.createElement)(_customGradientPicker.default, {
    value: value,
    onChange: onChange
  }));
}
//# sourceMappingURL=index.js.map