@wordpress/block-editor
Version:
123 lines (118 loc) • 4.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const LineHeightControl = ({
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
value: lineHeight,
onChange,
__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 spin up/down action
* (from an undefined value state) so that the next values are better suited for
* line-height rendering. For example, the first spin up should immediately
* go to 1.6, rather than the normally expected 0.1.
*
* Spin up/down actions can be triggered by keydowns of the up/down arrow keys,
* dragging the input or by clicking the spin buttons.
*/
const spin = _utils.STEP * _utils.SPIN_FACTOR;
switch (`${nextValue}`) {
case `${spin}`:
// Increment by spin value.
return _utils.BASE_DEFAULT_VALUE + spin;
case '0':
{
// This means the user explicitly input '0', rather than using the
// spin down action from an undefined value state.
if (wasTypedOrPasted) {
return nextValue;
}
// Decrement by spin value.
return _utils.BASE_DEFAULT_VALUE - spin;
}
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;
const handleOnChange = (nextValue, {
event
}) => {
if (nextValue === '') {
onChange();
return;
}
if (event.type === 'click') {
onChange(adjustNextValue(`${nextValue}`, false));
return;
}
onChange(`${nextValue}`);
};
if (!__next40pxDefaultSize && (otherProps.size === undefined || otherProps.size === 'default')) {
(0, _deprecated.default)(`36px default size for wp.blockEditor.LineHeightControl`, {
since: '6.8',
version: '7.1',
hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.'
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-line-height-control",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNumberControl, {
...otherProps,
__shouldNotWarnDeprecated36pxSize: true,
__next40pxDefaultSize: __next40pxDefaultSize,
__unstableInputWidth: __unstableInputWidth,
__unstableStateReducer: stateReducer,
onChange: handleOnChange,
label: (0, _i18n.__)('Line height'),
placeholder: _utils.BASE_DEFAULT_VALUE,
step: _utils.STEP,
spinFactor: _utils.SPIN_FACTOR,
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 = exports.default = LineHeightControl;
//# sourceMappingURL=index.js.map