@wordpress/block-editor/build/components/spacing-sizes-control/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SpacingSizesControl;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _axial = _interopRequireDefault(require("./input-controls/axial"));

var _separated = _interopRequireDefault(require("./input-controls/separated"));

var _single = _interopRequireDefault(require("./input-controls/single"));

var _sidesDropdown = _interopRequireDefault(require("./sides-dropdown"));

var _useSpacingSizes = _interopRequireDefault(require("./hooks/use-spacing-sizes"));

var _utils = require("./utils");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function SpacingSizesControl({
  inputProps,
  label: labelProp,
  minimumCustomValue = 0,
  onChange,
  onMouseOut,
  onMouseOver,
  showSideInLabel = true,
  sides = _utils.ALL_SIDES,
  useSelect,
  values
}) {
  const spacingSizes = (0, _useSpacingSizes.default)();
  const inputValues = values || _utils.DEFAULT_VALUES;
  const hasOneSide = sides?.length === 1;
  const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
  const [view, setView] = (0, _element.useState)((0, _utils.getInitialView)(inputValues, sides));

  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 === _utils.VIEWS.axial) {
      return (0, _element.createElement)(_axial.default, inputControlProps);
    }

    if (view === _utils.VIEWS.custom) {
      return (0, _element.createElement)(_separated.default, inputControlProps);
    }

    return (0, _element.createElement)(_single.default, (0, _extends2.default)({
      side: view
    }, inputControlProps, {
      showSideInLabel: showSideInLabel
    }));
  };

  const sideLabel = _utils.ALL_SIDES.includes(view) && showSideInLabel ? _utils.LABELS[view] : '';
  const label = (0, _i18n.sprintf)( // translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
  (0, _i18n.__)('%1$s %2$s'), labelProp, sideLabel).trim();
  const dropdownLabelText = (0, _i18n.sprintf)( // translators: %s: The current spacing property e.g. "Padding", "Margin".
  (0, _i18n._x)('%s options', 'Button label to reveal side configuration options'), labelProp);
  return (0, _element.createElement)("fieldset", {
    className: "spacing-sizes-control"
  }, (0, _element.createElement)(_components.__experimentalHStack, {
    className: "spacing-sizes-control__header"
  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, {
    as: "legend",
    className: "spacing-sizes-control__label"
  }, label), !hasOneSide && !hasOnlyAxialSides && (0, _element.createElement)(_sidesDropdown.default, {
    label: dropdownLabelText,
    onChange: setView,
    sides: sides,
    value: view
  })), renderControls());
}
//# sourceMappingURL=index.js.map