@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 _linkedButton = _interopRequireDefault(require("./linked-button"));
var _useSettings = require("../use-settings");
var _utils = require("./utils");
var _singleInputControl = _interopRequireDefault(require("./single-input-control"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useBorderRadiusSizes(presets) {
  var _presets$default, _presets$custom, _presets$theme;
  const defaultSizes = (_presets$default = presets?.default) !== null && _presets$default !== void 0 ? _presets$default : _constants.EMPTY_ARRAY;
  const customSizes = (_presets$custom = presets?.custom) !== null && _presets$custom !== void 0 ? _presets$custom : _constants.EMPTY_ARRAY;
  const themeSizes = (_presets$theme = presets?.theme) !== null && _presets$theme !== void 0 ? _presets$theme : _constants.EMPTY_ARRAY;
  return (0, _element.useMemo)(() => {
    const sizes = [{
      name: (0, _i18n.__)('None'),
      slug: '0',
      size: 0
    }, ...customSizes, ...themeSizes, ...defaultSizes];
    return sizes.length > _constants.RANGE_CONTROL_MAX_SIZE ? [{
      name: (0, _i18n.__)('Default'),
      slug: 'default',
      size: undefined
    }, ...sizes] : sizes;
  }, [customSizes, themeSizes, defaultSizes]);
}

/**
 * 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.
 * @param {Object}   props.presets  Border radius presets.
 *
 * @return {Element}              Custom border radius control.
 */
function BorderRadiusControl({
  onChange,
  values,
  presets
}) {
  const [isLinked, setIsLinked] = (0, _element.useState)(!(0, _utils.hasDefinedValues)(values) || !(0, _utils.hasMixedValues)(values));
  const options = useBorderRadiusSizes(presets);
  // 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 toggleLinked = () => setIsLinked(!isLinked);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: "components-border-radius-control",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      className: "components-border-radius-control__header",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
        as: "legend",
        children: (0, _i18n.__)('Radius')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkedButton.default, {
        onClick: toggleLinked,
        isLinked: isLinked
      })]
    }), isLinked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_singleInputControl.default, {
        onChange: onChange,
        selectedUnits: selectedUnits,
        setSelectedUnits: setSelectedUnits,
        values: values,
        units: units,
        corner: "all",
        presets: options
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
      children: ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].map(corner => /*#__PURE__*/(0, _jsxRuntime.jsx)(_singleInputControl.default, {
        onChange: onChange,
        selectedUnits: selectedUnits,
        setSelectedUnits: setSelectedUnits,
        values: values || _constants.DEFAULT_VALUES,
        units: units,
        corner: corner,
        presets: options
      }, corner))
    })]
  });
}
//# sourceMappingURL=index.js.map