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

Generic block editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
/**
 * Internal dependencies
 */

import { BASE_DEFAULT_VALUE, RESET_VALUE, STEP, isLineHeightDefined } from './utils';

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 = 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 `${STEP}`:
        // Increment by step value.
        return BASE_DEFAULT_VALUE + 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 BASE_DEFAULT_VALUE - STEP;
        }

      case '':
        return 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 : RESET_VALUE;

  if (!__nextHasNoMarginBottom) {
    deprecated('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 createElement("div", {
    className: "block-editor-line-height-control",
    style: deprecatedStyles
  }, createElement(NumberControl, _extends({}, otherProps, {
    __unstableInputWidth: __unstableInputWidth,
    __unstableStateReducer: stateReducer,
    onChange: handleOnChange,
    label: __('Line height'),
    placeholder: BASE_DEFAULT_VALUE,
    step: 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
 */


export default LineHeightControl;
//# sourceMappingURL=index.js.map