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

UI components for WordPress.

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

/**
 * WordPress dependencies
 */
import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import Button from '../../button';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { Flex } from '../../flex';
import { VisuallyHidden } from '../../visually-hidden';
import { contextConnect } from '../../ui/context';
import { useBorderControlStylePicker } from './hook';
const BORDER_STYLES = [{
  label: __('Solid'),
  icon: lineSolid,
  value: 'solid'
}, {
  label: __('Dashed'),
  icon: lineDashed,
  value: 'dashed'
}, {
  label: __('Dotted'),
  icon: lineDotted,
  value: 'dotted'
}];

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

  if (!label) {
    return null;
  }

  return hideLabelFromVision ? createElement(VisuallyHidden, {
    as: "label"
  }, label) : createElement(StyledLabel, null, label);
};

const BorderControlStylePicker = (props, forwardedRef) => {
  const {
    buttonClassName,
    hideLabelFromVision,
    label,
    onChange,
    value,
    ...otherProps
  } = useBorderControlStylePicker(props);
  return createElement(View, _extends({}, otherProps, {
    ref: forwardedRef
  }), createElement(Label, {
    label: label,
    hideLabelFromVision: hideLabelFromVision
  }), createElement(Flex, {
    justify: "flex-start",
    gap: 1
  }, BORDER_STYLES.map(borderStyle => createElement(Button, {
    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 = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker');
export default ConnectedBorderControlStylePicker;
//# sourceMappingURL=component.js.map