@wordpress/components
Version:
UI components for WordPress.
99 lines (96 loc) • 3.34 kB
JavaScript
/**
* 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 '../../context';
import { useBorderBoxControlSplitControls } from './hook';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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,
__shouldNotWarnDeprecated36pxSize: true
};
const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
return /*#__PURE__*/_jsxs(Grid, {
...otherProps,
ref: mergedRef,
gap: 3,
children: [/*#__PURE__*/_jsx(BorderBoxControlVisualizer, {
value: value,
size: size
}), /*#__PURE__*/_jsx(BorderControl, {
className: centeredClassName,
hideLabelFromVision: true,
label: __('Top border'),
onChange: newBorder => onChange(newBorder, 'top'),
__unstablePopoverProps: popoverProps,
value: value?.top,
...sharedBorderControlProps
}), /*#__PURE__*/_jsx(BorderControl, {
hideLabelFromVision: true,
label: __('Left border'),
onChange: newBorder => onChange(newBorder, 'left'),
__unstablePopoverProps: popoverProps,
value: value?.left,
...sharedBorderControlProps
}), /*#__PURE__*/_jsx(BorderControl, {
className: rightAlignedClassName,
hideLabelFromVision: true,
label: __('Right border'),
onChange: newBorder => onChange(newBorder, 'right'),
__unstablePopoverProps: popoverProps,
value: value?.right,
...sharedBorderControlProps
}), /*#__PURE__*/_jsx(BorderControl, {
className: centeredClassName,
hideLabelFromVision: true,
label: __('Bottom border'),
onChange: newBorder => onChange(newBorder, 'bottom'),
__unstablePopoverProps: popoverProps,
value: value?.bottom,
...sharedBorderControlProps
})]
});
};
const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
export default ConnectedBorderBoxControlSplitControls;
//# sourceMappingURL=component.js.map