@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 _element = require("@wordpress/element");

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

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

var _icons = require("@wordpress/icons");

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 _hStack = require("../../h-stack");

var _vStack = require("../../v-stack");

var _context = require("../../ui/context");

var _hook = require("./hook");

var _baseControlStyles = require("../../base-control/styles/base-control-styles");

var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));

var _utils = require("../../color-palette/utils");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
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) {
      return style ? (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
      '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, colorObject.color, style) : (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
      'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
    }

    if (colorValue) {
      return style ? (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
      'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', colorValue, style) : (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:".
      'Border color and style picker. The currently selected color has a value of "%1$s".', colorValue);
    }

    return (0, _i18n.__)('Border color and style picker.');
  }

  if (colorObject) {
    return (0, _i18n.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
    'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color);
  }

  if (colorValue) {
    return (0, _i18n.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:".
    'Border color picker. The currently selected color has a value of "%1$s".', colorValue);
  }

  return (0, _i18n.__)('Border color picker.');
};

const BorderControlDropdown = (props, forwardedRef) => {
  const {
    __experimentalIsRenderedInSidebar,
    border,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    indicatorClassName,
    indicatorWrapperClassName,
    onReset,
    onColorChange,
    onStyleChange,
    popoverContentClassName,
    popoverControlsClassName,
    resetButtonClassName,
    showDropdownHeader,
    __unstablePopoverProps,
    ...otherProps
  } = (0, _hook.useBorderControlDropdown)(props);
  const {
    color,
    style
  } = border || {};
  const colorObject = getColorObject(color, colors);
  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
  const showResetButton = color || style && style !== 'none';
  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;

  const renderToggle = _ref => {
    let {
      onToggle
    } = _ref;
    return (0, _element.createElement)(_button.default, {
      onClick: onToggle,
      variant: "tertiary",
      "aria-label": toggleAriaLabel,
      tooltipPosition: dropdownPosition,
      label: (0, _i18n.__)('Border color and style picker'),
      showTooltip: true
    }, (0, _element.createElement)("span", {
      className: indicatorWrapperClassName
    }, (0, _element.createElement)(_colorIndicator.default, {
      className: indicatorClassName,
      colorValue: color
    })));
  };

  const renderContent = _ref2 => {
    let {
      onClose
    } = _ref2;
    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_dropdownContentWrapper.default, {
      paddingSize: "medium"
    }, (0, _element.createElement)(_vStack.VStack, {
      className: popoverControlsClassName,
      spacing: 6
    }, showDropdownHeader ? (0, _element.createElement)(_hStack.HStack, null, (0, _element.createElement)(_baseControlStyles.StyledLabel, null, (0, _i18n.__)('Border color')), (0, _element.createElement)(_button.default, {
      isSmall: true,
      label: (0, _i18n.__)('Close border color'),
      icon: _icons.closeSmall,
      onClick: onClose
    })) : undefined, (0, _element.createElement)(_colorPalette.default, {
      className: popoverContentClassName,
      value: color,
      onChange: onColorChange,
      colors,
      disableCustomColors,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      clearable: false,
      enableAlpha: enableAlpha
    }), enableStyle && (0, _element.createElement)(_borderControlStylePicker.default, {
      label: (0, _i18n.__)('Style'),
      value: style,
      onChange: onStyleChange
    }))), showResetButton && (0, _element.createElement)(_dropdownContentWrapper.default, {
      paddingSize: "none"
    }, (0, _element.createElement)(_button.default, {
      className: resetButtonClassName,
      variant: "tertiary",
      onClick: () => {
        onReset();
        onClose();
      }
    }, (0, _i18n.__)('Reset to default'))));
  };

  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
    renderToggle: renderToggle,
    renderContent: renderContent,
    popoverProps: { ...__unstablePopoverProps
    }
  }, otherProps, {
    ref: forwardedRef
  }));
};

const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');
var _default = ConnectedBorderControlDropdown;
exports.default = _default;
//# sourceMappingURL=component.js.map