@wordpress/block-library/build/spacer/controls.native.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

var _blockEditor = require("@wordpress/block-editor");

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

var _constants = require("./constants");

var _style = _interopRequireDefault(require("./style.scss"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const DEFAULT_VALUES = {
  px: 100,
  em: 10,
  rem: 10,
  vw: 10,
  vh: 25
};

function Controls(_ref) {
  let {
    attributes,
    context,
    setAttributes
  } = _ref;
  const {
    orientation
  } = context;
  const label = orientation !== 'horizontal' ? (0, _i18n.__)('Height') : (0, _i18n.__)('Width');
  const {
    height,
    width
  } = attributes;
  const {
    valueToConvert,
    valueUnit: unit
  } = (0, _components.getValueAndUnit)(orientation !== 'horizontal' ? height : width) || {};
  const value = Number(valueToConvert);

  const setNewDimensions = (nextValue, nextUnit) => {
    const valueWithUnit = `${nextValue}${nextUnit}`;

    if (orientation === 'horizontal') {
      setAttributes({
        width: valueWithUnit
      });
    } else {
      setAttributes({
        height: valueWithUnit
      });
    }
  };

  const handleChange = (0, _element.useCallback)(nextValue => {
    setNewDimensions(nextValue, unit);
  }, [height, width]);
  const handleUnitChange = (0, _element.useCallback)(nextUnit => {
    setNewDimensions(value, nextUnit);
  }, [height, width]);
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _blockEditor.useSetting)('spacing.units') || ['px', 'em', 'rem', 'vw', 'vh'],
    defaultValues: DEFAULT_VALUES
  });
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Dimensions')
  }, (0, _element.createElement)(_components.UnitControl, {
    label: label,
    min: _constants.MIN_SPACER_SIZE,
    value: value,
    onChange: handleChange,
    onUnitChange: handleUnitChange,
    units: units,
    unit: unit,
    style: _style.default.rangeCellContainer
  })));
}

var _default = Controls;
exports.default = _default;
//# sourceMappingURL=controls.native.js.map