@wordpress/components
Version:
UI components for WordPress.
92 lines (91 loc) • 3.23 kB
JavaScript
// packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
import { __ } from "@wordpress/i18n";
import { useMemo, useState } from "@wordpress/element";
import { useMergeRefs } from "@wordpress/compose";
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";
var BorderBoxControlSplitControls = (props, forwardedRef) => {
const {
centeredClassName,
colors,
disableCustomColors,
enableAlpha,
enableStyle,
onChange,
popoverPlacement,
popoverOffset,
rightAlignedClassName,
size = "default",
value,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderBoxControlSplitControls(props);
const [popoverAnchor, setPopoverAnchor] = useState(null);
const popoverProps = useMemo(() => popoverPlacement ? {
placement: popoverPlacement,
offset: popoverOffset,
anchor: popoverAnchor,
shift: true
} : void 0, [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,
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
})]
});
};
var ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, "BorderBoxControlSplitControls");
var component_default = ConnectedBorderBoxControlSplitControls;
export {
component_default as default
};
//# sourceMappingURL=component.js.map