@wordpress/components/build/border-control/border-control-style-picker/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 _icons = require("@wordpress/icons");

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

var _button = _interopRequireDefault(require("../../button"));

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

var _view = require("../../view");

var _flex = require("../../flex");

var _visuallyHidden = require("../../visually-hidden");

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

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

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const BORDER_STYLES = [{
  label: (0, _i18n.__)('Solid'),
  icon: _icons.lineSolid,
  value: 'solid'
}, {
  label: (0, _i18n.__)('Dashed'),
  icon: _icons.lineDashed,
  value: 'dashed'
}, {
  label: (0, _i18n.__)('Dotted'),
  icon: _icons.lineDotted,
  value: 'dotted'
}];

const Label = props => {
  const {
    label,
    hideLabelFromVision
  } = props;

  if (!label) {
    return null;
  }

  return hideLabelFromVision ? (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
    as: "label"
  }, label) : (0, _element.createElement)(_baseControlStyles.StyledLabel, null, label);
};

const BorderControlStylePicker = (props, forwardedRef) => {
  const {
    buttonClassName,
    hideLabelFromVision,
    label,
    onChange,
    value,
    ...otherProps
  } = (0, _hook.useBorderControlStylePicker)(props);
  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
    ref: forwardedRef
  }), (0, _element.createElement)(Label, {
    label: label,
    hideLabelFromVision: hideLabelFromVision
  }), (0, _element.createElement)(_flex.Flex, {
    justify: "flex-start",
    gap: 1
  }, BORDER_STYLES.map(borderStyle => (0, _element.createElement)(_button.default, {
    key: borderStyle.value,
    className: buttonClassName,
    icon: borderStyle.icon,
    isSmall: true,
    isPressed: borderStyle.value === value,
    onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value),
    "aria-label": borderStyle.label,
    label: borderStyle.label,
    showTooltip: true
  }))));
};

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