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

Generic block 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

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

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

var _utils = require("./utils");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const LineHeightControl = ({
  value: lineHeight,
  onChange,

  /** Start opting into the new margin-free styles that will become the default in a future version. */
  __nextHasNoMarginBottom = false,
  __unstableInputWidth = '60px',
  ...otherProps
}) => {
  const isDefined = (0, _utils.isLineHeightDefined)(lineHeight);

  const adjustNextValue = (nextValue, wasTypedOrPasted) => {
    // Set the next value without modification if lineHeight has been defined.
    if (isDefined) return nextValue;
    /**
     * The following logic handles the initial step up/down action
     * (from an undefined value state) so that the next values are better suited for
     * line-height rendering. For example, the first step up should immediately
     * go to 1.6, rather than the normally expected 0.1.
     *
     * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
     * or by clicking the spin buttons.
     */

    switch (`${nextValue}`) {
      case `${_utils.STEP}`:
        // Increment by step value.
        return _utils.BASE_DEFAULT_VALUE + _utils.STEP;

      case '0':
        {
          // This means the user explicitly input '0', rather than stepped down
          // from an undefined value state.
          if (wasTypedOrPasted) return nextValue; // Decrement by step value.

          return _utils.BASE_DEFAULT_VALUE - _utils.STEP;
        }

      case '':
        return _utils.BASE_DEFAULT_VALUE;

      default:
        return nextValue;
    }
  };

  const stateReducer = (state, action) => {
    // Be careful when changing this — cross-browser behavior of the
    // `inputType` field in `input` events are inconsistent.
    // For example, Firefox emits an input event with inputType="insertReplacementText"
    // on spin button clicks, while other browsers do not even emit an input event.
    const wasTypedOrPasted = ['insertText', 'insertFromPaste'].includes(action.payload.event.nativeEvent?.inputType);
    const value = adjustNextValue(state.value, wasTypedOrPasted);
    return { ...state,
      value
    };
  };

  const value = isDefined ? lineHeight : _utils.RESET_VALUE;

  if (!__nextHasNoMarginBottom) {
    (0, _deprecated.default)('Bottom margin styles for wp.blockEditor.LineHeightControl', {
      since: '6.0',
      version: '6.4',
      hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version'
    });
  }

  const deprecatedStyles = __nextHasNoMarginBottom ? undefined : {
    marginBottom: 24
  };

  const handleOnChange = (nextValue, {
    event
  }) => {
    if (nextValue === '') {
      onChange();
      return;
    }

    if (event.type === 'click') {
      onChange(adjustNextValue(`${nextValue}`, false));
      return;
    }

    onChange(`${nextValue}`);
  };

  return (0, _element.createElement)("div", {
    className: "block-editor-line-height-control",
    style: deprecatedStyles
  }, (0, _element.createElement)(_components.__experimentalNumberControl, (0, _extends2.default)({}, otherProps, {
    __unstableInputWidth: __unstableInputWidth,
    __unstableStateReducer: stateReducer,
    onChange: handleOnChange,
    label: (0, _i18n.__)('Line height'),
    placeholder: _utils.BASE_DEFAULT_VALUE,
    step: _utils.STEP,
    value: value,
    min: 0,
    spinControls: "custom"
  })));
};
/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/line-height-control/README.md
 */


var _default = LineHeightControl;
exports.default = _default;
//# sourceMappingURL=index.js.map