@wordpress/components/build/range-control/index.js

UI components for WordPress.

"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 _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

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

var _compose = require("@wordpress/compose");

var _baseControl = _interopRequireDefault(require("../base-control"));

var _button = _interopRequireDefault(require("../button"));

var _icon = _interopRequireDefault(require("../icon"));

var _colors = require("../utils/colors");

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

var _inputRange = _interopRequireDefault(require("./input-range"));

var _rail = _interopRequireDefault(require("./rail"));

var _tooltip = _interopRequireDefault(require("./tooltip"));

var _rangeControlStyles = require("./styles/range-control-styles");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function RangeControl({
  afterIcon,
  allowReset = false,
  beforeIcon,
  className,
  currentInput,
  color: colorProp = (0, _colors.color)('ui.theme'),
  disabled = false,
  help,
  initialPosition,
  isShiftStepEnabled = true,
  label,
  marks = false,
  max = 100,
  min = 0,
  onBlur = _lodash.noop,
  onChange = _lodash.noop,
  onFocus = _lodash.noop,
  onMouseMove = _lodash.noop,
  onMouseLeave = _lodash.noop,
  railColor,
  resetFallbackValue,
  renderTooltipContent = v => v,
  showTooltip: showTooltipProp,
  shiftStep = 10,
  step = 1,
  trackColor,
  value: valueProp,
  withInputField = true,
  ...props
}, ref) {
  var _inputRef$current;

  const [value, setValue] = (0, _utils.useControlledRangeValue)({
    min,
    max,
    value: valueProp,
    initial: initialPosition
  });
  const isResetPendent = (0, _element.useRef)(false);
  const [showTooltip, setShowTooltip] = (0, _element.useState)(showTooltipProp);
  const [isFocused, setIsFocused] = (0, _element.useState)(false);
  const inputRef = (0, _element.useRef)();

  const setRef = nodeRef => {
    inputRef.current = nodeRef;

    if (ref) {
      ref(nodeRef);
    }
  };

  const isCurrentlyFocused = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.matches(':focus');
  const isThumbFocused = !disabled && isFocused;
  const isValueReset = value === null;
  const currentValue = value !== undefined ? value : currentInput;
  const inputSliderValue = isValueReset ? '' : currentValue;
  const rangeFillValue = isValueReset ? (max - min) / 2 + min : value;
  const calculatedFillValue = (value - min) / (max - min) * 100;
  const fillValue = isValueReset ? 50 : calculatedFillValue;
  const fillValueOffset = `${(0, _lodash.clamp)(fillValue, 0, 100)}%`;
  const classes = (0, _classnames.default)('components-range-control', className);
  const wrapperClasses = (0, _classnames.default)('components-range-control__wrapper', !!marks && 'is-marked');
  const id = (0, _compose.useInstanceId)(RangeControl, 'inspector-range-control');
  const describedBy = !!help ? `${id}__help` : undefined;
  const enableTooltip = showTooltipProp !== false && (0, _lodash.isFinite)(value);

  const handleOnRangeChange = event => {
    const nextValue = parseFloat(event.target.value);
    setValue(nextValue);
    onChange(nextValue);
  };

  const handleOnChange = nextValue => {
    nextValue = parseFloat(nextValue);
    setValue(nextValue);
    /*
     * Calls onChange only when nextValue is numeric
     * otherwise may queue a reset for the blur event.
     */

    if (!isNaN(nextValue)) {
      if (nextValue < min || nextValue > max) {
        nextValue = (0, _utils.floatClamp)(nextValue, min, max);
      }

      onChange(nextValue);
      isResetPendent.current = false;
    } else if (allowReset) {
      isResetPendent.current = true;
    }
  };

  const handleOnInputNumberBlur = () => {
    if (isResetPendent.current) {
      handleOnReset();
      isResetPendent.current = false;
    }
  };

  const handleOnReset = () => {
    let resetValue = parseFloat(resetFallbackValue);
    let onChangeResetValue = resetValue;

    if (isNaN(resetValue)) {
      resetValue = null;
      onChangeResetValue = undefined;
    }

    setValue(resetValue);
    /**
     * Previously, this callback would always receive undefined as
     * an argument. This behavior is unexpected, specifically
     * when resetFallbackValue is defined.
     *
     * The value of undefined is not ideal. Passing it through
     * to internal <input /> elements would change it from a
     * controlled component to an uncontrolled component.
     *
     * For now, to minimize unexpected regressions, we're going to
     * preserve the undefined callback argument, except when a
     * resetFallbackValue is defined.
     */

    onChange(onChangeResetValue);
  };

  const handleShowTooltip = () => setShowTooltip(true);

  const handleHideTooltip = () => setShowTooltip(false);

  const handleOnBlur = event => {
    onBlur(event);
    setIsFocused(false);
    handleHideTooltip();
  };

  const handleOnFocus = event => {
    onFocus(event);
    setIsFocused(true);
    handleShowTooltip();
  };

  const offsetStyle = {
    [(0, _i18n.isRTL)() ? 'right' : 'left']: fillValueOffset
  };
  return (0, _element.createElement)(_baseControl.default, {
    className: classes,
    label: label,
    id: id,
    help: help
  }, (0, _element.createElement)(_rangeControlStyles.Root, {
    className: "components-range-control__root"
  }, beforeIcon && (0, _element.createElement)(_rangeControlStyles.BeforeIconWrapper, null, (0, _element.createElement)(_icon.default, {
    icon: beforeIcon
  })), (0, _element.createElement)(_rangeControlStyles.Wrapper, {
    className: wrapperClasses,
    color: colorProp,
    marks: !!marks
  }, (0, _element.createElement)(_inputRange.default, (0, _extends2.default)({}, props, {
    className: "components-range-control__slider",
    describedBy: describedBy,
    disabled: disabled,
    id: id,
    isShiftStepEnabled: isShiftStepEnabled,
    label: label,
    max: max,
    min: min,
    onBlur: handleOnBlur,
    onChange: handleOnRangeChange,
    onFocus: handleOnFocus,
    onMouseMove: onMouseMove,
    onMouseLeave: onMouseLeave,
    ref: setRef,
    shiftStep: shiftStep,
    step: step,
    value: inputSliderValue
  })), (0, _element.createElement)(_rail.default, {
    "aria-hidden": true,
    disabled: disabled,
    marks: marks,
    max: max,
    min: min,
    railColor: railColor,
    step: step,
    value: rangeFillValue
  }), (0, _element.createElement)(_rangeControlStyles.Track, {
    "aria-hidden": true,
    className: "components-range-control__track",
    disabled: disabled,
    style: {
      width: fillValueOffset
    },
    trackColor: trackColor
  }), (0, _element.createElement)(_rangeControlStyles.ThumbWrapper, {
    style: offsetStyle
  }, (0, _element.createElement)(_rangeControlStyles.Thumb, {
    "aria-hidden": true,
    isFocused: isThumbFocused
  })), enableTooltip && (0, _element.createElement)(_tooltip.default, {
    className: "components-range-control__tooltip",
    inputRef: inputRef,
    renderTooltipContent: renderTooltipContent,
    show: isCurrentlyFocused || showTooltip,
    style: offsetStyle,
    value: value
  })), afterIcon && (0, _element.createElement)(_rangeControlStyles.AfterIconWrapper, null, (0, _element.createElement)(_icon.default, {
    icon: afterIcon
  })), withInputField && (0, _element.createElement)(_rangeControlStyles.InputNumber, {
    "aria-label": label,
    className: "components-range-control__number",
    disabled: disabled,
    inputMode: "decimal",
    isShiftStepEnabled: isShiftStepEnabled,
    max: max,
    min: min,
    onBlur: handleOnInputNumberBlur,
    onChange: handleOnChange,
    shiftStep: shiftStep,
    step: step,
    value: inputSliderValue
  }), allowReset && (0, _element.createElement)(_rangeControlStyles.ActionRightWrapper, null, (0, _element.createElement)(_button.default, {
    className: "components-range-control__reset",
    disabled: disabled || value === undefined,
    isSecondary: true,
    isSmall: true,
    onClick: handleOnReset
  }, (0, _i18n.__)('Reset')))));
}

const ForwardedComponent = (0, _element.forwardRef)(RangeControl);
var _default = ForwardedComponent;
exports.default = _default;
//# sourceMappingURL=index.js.map