@wordpress/components/build-module/border-control/border-control-dropdown/component.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import BorderControlStylePicker from '../border-control-style-picker';
import Button from '../../button';
import ColorIndicator from '../../color-indicator';
import ColorPalette from '../../color-palette';
import Dropdown from '../../dropdown';
import { HStack } from '../../h-stack';
import { VStack } from '../../v-stack';
import { contextConnect } from '../../ui/context';
import { useBorderControlDropdown } from './hook';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
import { isMultiplePaletteArray } from '../../color-palette/utils';

const getColorObject = (colorValue, colors) => {
  if (!colorValue || !colors) {
    return;
  }

  if (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 ? 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) : 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 ? 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) : 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 __('Border color and style picker.');
  }

  if (colorObject) {
    return 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 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 __('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
  } = 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 createElement(Button, {
      onClick: onToggle,
      variant: "tertiary",
      "aria-label": toggleAriaLabel,
      tooltipPosition: dropdownPosition,
      label: __('Border color and style picker'),
      showTooltip: true
    }, createElement("span", {
      className: indicatorWrapperClassName
    }, createElement(ColorIndicator, {
      className: indicatorClassName,
      colorValue: color
    })));
  };

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

  return createElement(Dropdown, _extends({
    renderToggle: renderToggle,
    renderContent: renderContent,
    popoverProps: { ...__unstablePopoverProps
    }
  }, otherProps, {
    ref: forwardedRef
  }));
};

const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');
export default ConnectedBorderControlDropdown;
//# sourceMappingURL=component.js.map