@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js

UI components for WordPress.

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

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';
/**
 * Internal dependencies
 */

import BorderBoxControlVisualizer from '../border-box-control-visualizer';
import { BorderControl } from '../../border-control';
import { Grid } from '../../grid';
import { contextConnect } from '../../ui/context';
import { useBorderBoxControlSplitControls } from './hook';

const BorderBoxControlSplitControls = (props, forwardedRef) => {
  const {
    centeredClassName,
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    onChange,
    popoverPlacement,
    popoverOffset,
    rightAlignedClassName,
    size = 'default',
    value,
    __experimentalIsRenderedInSidebar,
    ...otherProps
  } = useBorderBoxControlSplitControls(props); // Use internal state instead of a ref to make sure that the component
  // re-renders when the popover's anchor updates.

  const [popoverAnchor, setPopoverAnchor] = useState(null); // Memoize popoverProps to avoid returning a new object every time.

  const popoverProps = useMemo(() => popoverPlacement ? {
    placement: popoverPlacement,
    offset: popoverOffset,
    anchor: popoverAnchor,
    shift: true
  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
  const sharedBorderControlProps = {
    colors,
    disableCustomColors,
    enableAlpha,
    enableStyle,
    isCompact: true,
    __experimentalIsRenderedInSidebar,
    size
  };
  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
  return createElement(Grid, _extends({}, otherProps, {
    ref: mergedRef,
    gap: 4
  }), createElement(BorderBoxControlVisualizer, {
    value: value,
    size: size
  }), createElement(BorderControl, _extends({
    className: centeredClassName,
    hideLabelFromVision: true,
    label: __('Top border'),
    onChange: newBorder => onChange(newBorder, 'top'),
    __unstablePopoverProps: popoverProps,
    value: value === null || value === void 0 ? void 0 : value.top
  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
    hideLabelFromVision: true,
    label: __('Left border'),
    onChange: newBorder => onChange(newBorder, 'left'),
    __unstablePopoverProps: popoverProps,
    value: value === null || value === void 0 ? void 0 : value.left
  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
    className: rightAlignedClassName,
    hideLabelFromVision: true,
    label: __('Right border'),
    onChange: newBorder => onChange(newBorder, 'right'),
    __unstablePopoverProps: popoverProps,
    value: value === null || value === void 0 ? void 0 : value.right
  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
    className: centeredClassName,
    hideLabelFromVision: true,
    label: __('Bottom border'),
    onChange: newBorder => onChange(newBorder, 'bottom'),
    __unstablePopoverProps: popoverProps,
    value: value === null || value === void 0 ? void 0 : value.bottom
  }, sharedBorderControlProps)));
};

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