UNPKG

@wordpress/block-editor

Version:
128 lines (126 loc) 5.22 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // packages/block-editor/src/components/spacing-sizes-control/index.js var spacing_sizes_control_exports = {}; __export(spacing_sizes_control_exports, { default: () => SpacingSizesControl }); module.exports = __toCommonJS(spacing_sizes_control_exports); var import_components = require("@wordpress/components"); var import_element = require("@wordpress/element"); var import_i18n = require("@wordpress/i18n"); var import_use_spacing_sizes = __toESM(require("./hooks/use-spacing-sizes")); var import_axial = __toESM(require("./input-controls/axial")); var import_separated = __toESM(require("./input-controls/separated")); var import_single = __toESM(require("./input-controls/single")); var import_linked_button = __toESM(require("./linked-button")); var import_utils = require("./utils"); var import_jsx_runtime = require("react/jsx-runtime"); function SpacingSizesControl({ inputProps, label: labelProp, minimumCustomValue = 0, onChange, onMouseOut, onMouseOver, showSideInLabel = true, sides = import_utils.ALL_SIDES, useSelect, values }) { const spacingSizes = (0, import_use_spacing_sizes.default)(); const inputValues = values || import_utils.DEFAULT_VALUES; const hasOneSide = sides?.length === 1; const hasOnlyAxialSides = sides?.includes("horizontal") && sides?.includes("vertical") && sides?.length === 2; const [view, setView] = (0, import_element.useState)((0, import_utils.getInitialView)(inputValues, sides)); const toggleLinked = () => { setView(view === import_utils.VIEWS.axial ? import_utils.VIEWS.custom : import_utils.VIEWS.axial); }; const handleOnChange = (nextValue) => { const newValues = { ...values, ...nextValue }; onChange(newValues); }; const inputControlProps = { ...inputProps, minimumCustomValue, onChange: handleOnChange, onMouseOut, onMouseOver, sides, spacingSizes, type: labelProp, useSelect, values: inputValues }; const renderControls = () => { if (view === import_utils.VIEWS.axial) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_axial.default, { ...inputControlProps }); } if (view === import_utils.VIEWS.custom) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separated.default, { ...inputControlProps }); } return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_single.default, { side: view, ...inputControlProps, showSideInLabel } ); }; const sideLabel = import_utils.ALL_SIDES.includes(view) && showSideInLabel ? import_utils.LABELS[view] : ""; const label = (0, import_i18n.sprintf)( // translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc). (0, import_i18n._x)("%1$s %2$s", "spacing"), labelProp, sideLabel ).trim(); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "spacing-sizes-control", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { className: "spacing-sizes-control__header", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_components.BaseControl.VisualLabel, { as: "legend", className: "spacing-sizes-control__label", children: label } ), !hasOneSide && !hasOnlyAxialSides && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_linked_button.default, { label: labelProp, onClick: toggleLinked, isLinked: view === import_utils.VIEWS.axial } ) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalVStack, { spacing: 0.5, children: renderControls() }) ] }); } //# sourceMappingURL=index.js.map