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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BorderRadiusControl;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _allInputControl = _interopRequireDefault(require("./all-input-control"));
var _inputControls = _interopRequireDefault(require("./input-controls"));
var _linkedButton = _interopRequireDefault(require("./linked-button"));
var _useSettings = require("../use-settings");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_VALUES = {
  topLeft: undefined,
  topRight: undefined,
  bottomLeft: undefined,
  bottomRight: undefined
};
const MIN_BORDER_RADIUS_VALUE = 0;
const MAX_BORDER_RADIUS_VALUES = {
  px: 100,
  em: 20,
  rem: 20
};

/**
 * Control to display border radius options.
 *
 * @param {Object}   props          Component props.
 * @param {Function} props.onChange Callback to handle onChange.
 * @param {Object}   props.values   Border radius values.
 *
 * @return {Element}              Custom border radius control.
 */
function BorderRadiusControl({
  onChange,
  values
}) {
  const [isLinked, setIsLinked] = (0, _element.useState)(!(0, _utils.hasDefinedValues)(values) || !(0, _utils.hasMixedValues)(values));

  // Tracking selected units via internal state allows filtering of CSS unit
  // only values from being saved while maintaining preexisting unit selection
  // behaviour. Filtering CSS unit only values prevents invalid style values.
  const [selectedUnits, setSelectedUnits] = (0, _element.useState)({
    flat: typeof values === 'string' ? (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values)[1] : undefined,
    topLeft: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values?.topLeft)[1],
    topRight: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values?.topRight)[1],
    bottomLeft: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomLeft)[1],
    bottomRight: (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(values?.bottomRight)[1]
  });
  const [availableUnits] = (0, _useSettings.useSettings)('spacing.units');
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ['px', 'em', 'rem']
  });
  const unit = (0, _utils.getAllUnit)(selectedUnits);
  const unitConfig = units && units.find(item => item.value === unit);
  const step = unitConfig?.step || 1;
  const [allValue] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)((0, _utils.getAllValue)(values));
  const toggleLinked = () => setIsLinked(!isLinked);
  const handleSliderChange = next => {
    onChange(next !== undefined ? `${next}${unit}` : undefined);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: "components-border-radius-control",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
      as: "legend",
      children: (0, _i18n.__)('Radius')
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "components-border-radius-control__wrapper",
      children: [isLinked ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_allInputControl.default, {
          className: "components-border-radius-control__unit-control",
          values: values,
          min: MIN_BORDER_RADIUS_VALUE,
          onChange: onChange,
          selectedUnits: selectedUnits,
          setSelectedUnits: setSelectedUnits,
          units: units
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
          __next40pxDefaultSize: true,
          label: (0, _i18n.__)('Border radius'),
          hideLabelFromVision: true,
          className: "components-border-radius-control__range-control",
          value: allValue !== null && allValue !== void 0 ? allValue : '',
          min: MIN_BORDER_RADIUS_VALUE,
          max: MAX_BORDER_RADIUS_VALUES[unit],
          initialPosition: 0,
          withInputField: false,
          onChange: handleSliderChange,
          step: step,
          __nextHasNoMarginBottom: true
        })]
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControls.default, {
        min: MIN_BORDER_RADIUS_VALUE,
        onChange: onChange,
        selectedUnits: selectedUnits,
        setSelectedUnits: setSelectedUnits,
        values: values || DEFAULT_VALUES,
        units: units
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkedButton.default, {
        onClick: toggleLinked,
        isLinked: isLinked
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map