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

Generic block editor.

"use strict";

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

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

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

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

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

var _useSetting = _interopRequireDefault(require("../use-setting"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const RANGE_CONTROL_CUSTOM_SETTINGS = {
  px: {
    max: 1000,
    step: 1
  },
  '%': {
    max: 100,
    step: 1
  },
  vw: {
    max: 100,
    step: 1
  },
  vh: {
    max: 100,
    step: 1
  },
  em: {
    max: 50,
    step: 0.1
  },
  rem: {
    max: 50,
    step: 0.1
  }
};
/**
 * HeightControl renders a linked unit control and range control for adjusting the height of a block.
 *
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
 *
 * @param {Object}                     props
 * @param {?string}                    props.label    A label for the control.
 * @param {( value: string ) => void } props.onChange Called when the height changes.
 * @param {string}                     props.value    The current height value.
 *
 * @return {WPComponent} The component to be rendered.
 */

function HeightControl({
  label = (0, _i18n.__)('Height'),
  onChange,
  value
}) {
  var _RANGE_CONTROL_CUSTOM, _RANGE_CONTROL_CUSTOM2;

  const customRangeValue = parseFloat(value);
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: (0, _useSetting.default)('spacing.units') || ['%', 'px', 'em', 'rem', 'vh', 'vw']
  });
  const selectedUnit = (0, _element.useMemo)(() => (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value), [value])[1] || units[0]?.value || 'px';

  const handleSliderChange = next => {
    onChange([next, selectedUnit].join(''));
  };

  const handleUnitChange = newUnit => {
    // Attempt to smooth over differences between currentUnit and newUnit.
    // This should slightly improve the experience of switching between unit types.
    const [currentValue, currentUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);

    if (['em', 'rem'].includes(newUnit) && currentUnit === 'px') {
      // Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
      onChange((currentValue / 16).toFixed(2) + newUnit);
    } else if (['em', 'rem'].includes(currentUnit) && newUnit === 'px') {
      // Convert to pixel value assuming a root size of 16px.
      onChange(Math.round(currentValue * 16) + newUnit);
    } else if (['vh', 'vw', '%'].includes(newUnit) && currentValue > 100) {
      // When converting to `vh`, `vw`, or `%` units, cap the new value at 100.
      onChange(100 + newUnit);
    }
  };

  return (0, _element.createElement)("fieldset", {
    className: "block-editor-height-control"
  }, (0, _element.createElement)(_components.BaseControl.VisualLabel, {
    as: "legend"
  }, label), (0, _element.createElement)(_components.Flex, null, (0, _element.createElement)(_components.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
    value: value,
    units: units,
    onChange: onChange,
    onUnitChange: handleUnitChange,
    min: 0,
    size: '__unstable-large'
  })), (0, _element.createElement)(_components.FlexItem, {
    isBlock: true
  }, (0, _element.createElement)(_components.__experimentalSpacer, {
    marginX: 2,
    marginBottom: 0
  }, (0, _element.createElement)(_components.RangeControl, {
    value: customRangeValue,
    min: 0,
    max: (_RANGE_CONTROL_CUSTOM = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max) !== null && _RANGE_CONTROL_CUSTOM !== void 0 ? _RANGE_CONTROL_CUSTOM : 100,
    step: (_RANGE_CONTROL_CUSTOM2 = RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step) !== null && _RANGE_CONTROL_CUSTOM2 !== void 0 ? _RANGE_CONTROL_CUSTOM2 : 0.1,
    withInputField: false,
    onChange: handleSliderChange,
    __nextHasNoMarginBottom: true
  })))));
}
//# sourceMappingURL=index.js.map