@wordpress/block-editor/build/components/colors-gradients/control.js

Generic block editor.

"use strict";

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _components = require("@wordpress/components");

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

var _colors = require("../colors");

var _gradients = require("../gradients");

var _useEditorFeature = _interopRequireDefault(require("../use-editor-feature"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// translators: first %s: the color name or value (e.g. red or #ff0000)
const colorIndicatorAriaLabel = (0, _i18n.__)('(Color: %s)'); // translators: first %s: the gradient name or value (e.g. red to green or linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)

const gradientIndicatorAriaLabel = (0, _i18n.__)('(Gradient: %s)');
const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];

function VisualLabel({
  colors,
  gradients,
  label,
  currentTab,
  colorValue,
  gradientValue
}) {
  let value, ariaLabel;

  if (currentTab === 'color') {
    if (colorValue) {
      value = colorValue;
      const colorObject = (0, _colors.getColorObjectByColorValue)(colors, value);
      const colorName = colorObject && colorObject.name;
      ariaLabel = (0, _i18n.sprintf)(colorIndicatorAriaLabel, colorName || value);
    }
  } else if (currentTab === 'gradient' && gradientValue) {
    value = gradientValue;
    const gradientObject = (0, _gradients.__experimentalGetGradientObjectByGradientValue)(gradients, value);
    const gradientName = gradientObject && gradientObject.name;
    ariaLabel = (0, _i18n.sprintf)(gradientIndicatorAriaLabel, gradientName || value);
  }

  return (0, _element.createElement)(_element.Fragment, null, label, !!value && (0, _element.createElement)(_components.ColorIndicator, {
    colorValue: value,
    "aria-label": ariaLabel
  }));
}

function ColorGradientControlInner({
  colors,
  gradients,
  disableCustomColors,
  disableCustomGradients,
  className,
  label,
  onColorChange,
  onGradientChange,
  colorValue,
  gradientValue,
  clearable
}) {
  const canChooseAColor = onColorChange && (!(0, _lodash.isEmpty)(colors) || !disableCustomColors);
  const canChooseAGradient = onGradientChange && (!(0, _lodash.isEmpty)(gradients) || !disableCustomGradients);
  const [currentTab, setCurrentTab] = (0, _element.useState)(gradientValue ? 'gradient' : !!canChooseAColor && 'color');

  if (!canChooseAColor && !canChooseAGradient) {
    return null;
  }

  return (0, _element.createElement)(_components.BaseControl, {
    className: (0, _classnames.default)('block-editor-color-gradient-control', className)
  }, (0, _element.createElement)("fieldset", null, (0, _element.createElement)("legend", null, (0, _element.createElement)("div", {
    className: "block-editor-color-gradient-control__color-indicator"
  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, null, (0, _element.createElement)(VisualLabel, {
    currentTab: currentTab,
    label: label,
    colorValue: colorValue,
    gradientValue: gradientValue
  })))), canChooseAColor && canChooseAGradient && (0, _element.createElement)(_components.ButtonGroup, {
    className: "block-editor-color-gradient-control__button-tabs"
  }, (0, _element.createElement)(_components.Button, {
    isSmall: true,
    isPressed: currentTab === 'color',
    onClick: () => setCurrentTab('color')
  }, (0, _i18n.__)('Solid')), (0, _element.createElement)(_components.Button, {
    isSmall: true,
    isPressed: currentTab === 'gradient',
    onClick: () => setCurrentTab('gradient')
  }, (0, _i18n.__)('Gradient'))), (currentTab === 'color' || !canChooseAGradient) && (0, _element.createElement)(_components.ColorPalette, {
    value: colorValue,
    onChange: canChooseAGradient ? newColor => {
      onColorChange(newColor);
      onGradientChange();
    } : onColorChange,
    colors,
    disableCustomColors,
    clearable: clearable
  }), (currentTab === 'gradient' || !canChooseAColor) && (0, _element.createElement)(_components.__experimentalGradientPicker, {
    value: gradientValue,
    onChange: canChooseAColor ? newGradient => {
      onGradientChange(newGradient);
      onColorChange();
    } : onGradientChange,
    gradients,
    disableCustomGradients,
    clearable: clearable
  })));
}

function ColorGradientControlSelect(props) {
  const colorGradientSettings = {};
  colorGradientSettings.colors = (0, _useEditorFeature.default)('color.palette');
  colorGradientSettings.gradients = (0, _useEditorFeature.default)('color.gradients');
  colorGradientSettings.disableCustomColors = !(0, _useEditorFeature.default)('color.custom');
  colorGradientSettings.disableCustomGradients = !(0, _useEditorFeature.default)('color.customGradient');
  return (0, _element.createElement)(ColorGradientControlInner, (0, _extends2.default)({}, colorGradientSettings, props));
}

function ColorGradientControl(props) {
  if ((0, _lodash.every)(colorsAndGradientKeys, key => props.hasOwnProperty(key))) {
    return (0, _element.createElement)(ColorGradientControlInner, props);
  }

  return (0, _element.createElement)(ColorGradientControlSelect, props);
}

var _default = ColorGradientControl;
exports.default = _default;
//# sourceMappingURL=control.js.map