@wordpress/block-editor/build/components/border-radius-control/input-controls.js

Generic block editor.

"use strict";

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

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

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

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

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

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

/**
 * WordPress dependencies
 */
const CORNERS = {
  topLeft: (0, _i18n.__)('Top left'),
  topRight: (0, _i18n.__)('Top right'),
  bottomLeft: (0, _i18n.__)('Bottom left'),
  bottomRight: (0, _i18n.__)('Bottom right')
};

function BoxInputControls({
  onChange,
  selectedUnits,
  setSelectedUnits,
  values: valuesProp,
  ...props
}) {
  const createHandleOnChange = corner => next => {
    if (!onChange) {
      return;
    } // Filter out CSS-unit-only values to prevent invalid styles.


    const isNumeric = !isNaN(parseFloat(next));
    const nextValue = isNumeric ? next : undefined;
    onChange({ ...values,
      [corner]: nextValue
    });
  };

  const createHandleOnUnitChange = side => next => {
    const newUnits = { ...selectedUnits
    };
    newUnits[side] = next;
    setSelectedUnits(newUnits);
  }; // For shorthand style & backwards compatibility, handle flat string value.


  const values = typeof valuesProp !== 'string' ? valuesProp : {
    topLeft: valuesProp,
    topRight: valuesProp,
    bottomLeft: valuesProp,
    bottomRight: valuesProp
  }; // Controls are wrapped in tooltips as visible labels aren't desired here.
  // Tooltip rendering also requires the UnitControl to be wrapped. See:
  // https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026

  return (0, _element.createElement)("div", {
    className: "components-border-radius-control__input-controls-wrapper"
  }, Object.entries(CORNERS).map(([corner, label]) => {
    const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values[corner]);
    const computedUnit = values[corner] ? parsedUnit : selectedUnits[corner] || selectedUnits.flat;
    return (0, _element.createElement)(_components.Tooltip, {
      text: label,
      position: "top",
      key: corner
    }, (0, _element.createElement)("div", {
      className: "components-border-radius-control__tooltip-wrapper"
    }, (0, _element.createElement)(_components.__experimentalUnitControl, (0, _extends2.default)({}, props, {
      "aria-label": label,
      value: [parsedQuantity, computedUnit].join(''),
      onChange: createHandleOnChange(corner),
      onUnitChange: createHandleOnUnitChange(corner),
      size: '__unstable-large'
    }))));
  }));
}
//# sourceMappingURL=input-controls.js.map