@wordpress/components/build/border-control/border-control-dropdown/component.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 _i18n = require("@wordpress/i18n");
var _borderControlStylePicker = _interopRequireDefault(require("../border-control-style-picker"));
var _button = _interopRequireDefault(require("../../button"));
var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
var _colorPalette = _interopRequireDefault(require("../../color-palette"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _vStack = require("../../v-stack");
var _context = require("../../context");
var _hook = require("./hook");
var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
var _utils = require("../../color-palette/utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const getAriaLabelColorValue = colorValue => {
  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
  return colorValue.replace(/^var\((.+)\)$/, '$1');
};
const getColorObject = (colorValue, colors) => {
  if (!colorValue || !colors) {
    return;
  }
  if ((0, _utils.isMultiplePaletteArray)(colors)) {
    // Multiple origins
    let matchedColor;
    colors.some(origin => origin.colors.some(color => {
      if (color.color === colorValue) {
        matchedColor = color;
        return true;
      }
      return false;
    }));
    return matchedColor;
  }

  // Single origin
  return colors.find(color => color.color === colorValue);
};
const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
  if (isStyleEnabled) {
    if (colorObject) {
      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
      return style ? (0, _i18n.sprintf)(
      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
      (0, _i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'), colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)(
      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
      (0, _i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, ariaLabelValue);
    }
    if (colorValue) {
      const ariaLabelValue = getAriaLabelColorValue(colorValue);
      return style ? (0, _i18n.sprintf)(
      // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
      (0, _i18n.__)('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'), ariaLabelValue, style) : (0, _i18n.sprintf)(
      // translators: %s: The color's hex code e.g: "#f00".
      (0, _i18n.__)('Border color and style picker. The currently selected color has a value of "%s".'), ariaLabelValue);
    }
    return (0, _i18n.__)('Border color and style picker.');
  }
  if (colorObject) {
    return (0, _i18n.sprintf)(
    // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
    (0, _i18n.__)('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, getAriaLabelColorValue(colorObject.color));
  }
  if (colorValue) {
    return (0, _i18n.sprintf)(
    // translators: %s: The color's hex code e.g: "#f00".
    (0, _i18n.__)('Border color picker. The currently selected color has a value of "%s".'), getAriaLabelColorValue(colorValue));
  }
  return (0, _i18n.__)('Border color picker.');
};
const BorderControlDropdown = (props, forwardedRef) => {
  const {
    __experimentalIsRenderedInSidebar,
    border,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    indicatorClassName,
    indicatorWrapperClassName,
    isStyleSettable,
    onReset,
    onColorChange,
    onStyleChange,
    popoverContentClassName,
    popoverControlsClassName,
    resetButtonWrapperClassName,
    size,
    __unstablePopoverProps,
    ...otherProps
  } = (0, _hook.useBorderControlDropdown)(props);
  const {
    color,
    style
  } = border || {};
  const colorObject = getColorObject(color, colors);
  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
  const enableResetButton = color || style && style !== 'none';
  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
  const renderToggle = ({
    onToggle
  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
    onClick: onToggle,
    variant: "tertiary",
    "aria-label": toggleAriaLabel,
    tooltipPosition: dropdownPosition,
    label: (0, _i18n.__)('Border color and style picker'),
    showTooltip: true,
    __next40pxDefaultSize: size === '__unstable-large',
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      className: indicatorWrapperClassName,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
        className: indicatorClassName,
        colorValue: color
      })
    })
  });
  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dropdownContentWrapper.default, {
      paddingSize: "medium",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
        className: popoverControlsClassName,
        spacing: 6,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
          className: popoverContentClassName,
          value: color,
          onChange: onColorChange,
          colors,
          disableCustomColors,
          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
          clearable: false,
          enableAlpha: enableAlpha
        }), enableStyle && isStyleSettable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControlStylePicker.default, {
          label: (0, _i18n.__)('Style'),
          value: style,
          onChange: onStyleChange
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: resetButtonWrapperClassName,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
          variant: "tertiary",
          onClick: () => {
            onReset();
          },
          disabled: !enableResetButton,
          accessibleWhenDisabled: true,
          __next40pxDefaultSize: true,
          children: (0, _i18n.__)('Reset')
        })
      })]
    })
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
    renderToggle: renderToggle,
    renderContent: renderContent,
    popoverProps: {
      ...__unstablePopoverProps
    },
    ...otherProps,
    ref: forwardedRef
  });
};
const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');
var _default = exports.default = ConnectedBorderControlDropdown;
//# sourceMappingURL=component.js.map