@wordpress/components/build/custom-gradient-bar/control-points.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 _compose = require("@wordpress/compose");

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

var _icons = require("@wordpress/icons");

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

var _colorPicker = _interopRequireDefault(require("../color-picker"));

var _dropdown = _interopRequireDefault(require("../dropdown"));

var _keyboardShortcuts = _interopRequireDefault(require("../keyboard-shortcuts"));

var _visuallyHidden = _interopRequireDefault(require("../visually-hidden"));

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

var _constants = require("./constants");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ControlPointKeyboardMove({
  value: position,
  onChange,
  children
}) {
  const shortcuts = {
    right(event) {
      // Stop propagation of the key press event to avoid focus moving
      // to another editor area.
      event.stopPropagation();
      const newPosition = (0, _utils.clampPercent)(position + _constants.KEYBOARD_CONTROL_POINT_VARIATION);
      onChange(newPosition);
    },

    left(event) {
      // Stop propagation of the key press event to avoid focus moving
      // to another editor area.
      event.stopPropagation();
      const newPosition = (0, _utils.clampPercent)(position - _constants.KEYBOARD_CONTROL_POINT_VARIATION);
      onChange(newPosition);
    }

  };
  return (0, _element.createElement)(_keyboardShortcuts.default, {
    shortcuts: shortcuts
  }, children);
}

function ControlPointButton({
  isOpen,
  position,
  color,
  onChange,
  ...additionalProps
}) {
  const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
  return (0, _element.createElement)(ControlPointKeyboardMove, {
    value: position,
    onChange: onChange
  }, (0, _element.createElement)(_button.default, (0, _extends2.default)({
    "aria-label": (0, _i18n.sprintf)( // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
    (0, _i18n.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
    "aria-describedby": descriptionId,
    "aria-haspopup": "true",
    "aria-expanded": isOpen,
    className: (0, _classnames.default)('components-custom-gradient-picker__control-point-button', {
      'is-active': isOpen
    }),
    style: {
      left: `${position}%`
    }
  }, additionalProps)), (0, _element.createElement)(_visuallyHidden.default, {
    id: descriptionId
  }, (0, _i18n.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
}

function ControlPoints({
  disableRemove,
  disableAlpha,
  gradientPickerDomRef,
  ignoreMarkerPosition,
  value: controlPoints,
  onChange,
  onStartControlPointChange,
  onStopControlPointChange
}) {
  const controlPointMoveState = (0, _element.useRef)();

  const onMouseMove = event => {
    const relativePosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current, _constants.GRADIENT_MARKERS_WIDTH);
    const {
      initialPosition,
      index,
      significantMoveHappened
    } = controlPointMoveState.current;

    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= _constants.MINIMUM_SIGNIFICANT_MOVE) {
      controlPointMoveState.current.significantMoveHappened = true;
    }

    onChange((0, _utils.updateControlPointPosition)(controlPoints, index, relativePosition));
  };

  const cleanEventListeners = () => {
    if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('mouseup', cleanEventListeners);
      onStopControlPointChange();
      controlPointMoveState.current.listenersActivated = false;
    }
  };

  (0, _element.useEffect)(() => {
    return () => {
      cleanEventListeners();
    };
  }, []);
  return controlPoints.map((point, index) => {
    const initialPosition = point === null || point === void 0 ? void 0 : point.position;
    return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(_dropdown.default, {
      key: index,
      onClose: onStopControlPointChange,
      renderToggle: ({
        isOpen,
        onToggle
      }) => (0, _element.createElement)(ControlPointButton, {
        key: index,
        onClick: () => {
          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
            return;
          }

          if (isOpen) {
            onStopControlPointChange();
          } else {
            onStartControlPointChange();
          }

          onToggle();
        },
        onMouseDown: () => {
          if (window && window.addEventListener) {
            controlPointMoveState.current = {
              initialPosition,
              index,
              significantMoveHappened: false,
              listenersActivated: true
            };
            onStartControlPointChange();
            window.addEventListener('mousemove', onMouseMove);
            window.addEventListener('mouseup', cleanEventListeners);
          }
        },
        isOpen: isOpen,
        position: point.position,
        color: point.color,
        onChange: newPosition => {
          onChange((0, _utils.updateControlPointPosition)(controlPoints, index, newPosition));
        }
      }),
      renderContent: ({
        onClose
      }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.default, {
        disableAlpha: disableAlpha,
        color: point.color,
        onChangeComplete: ({
          color
        }) => {
          onChange((0, _utils.updateControlPointColor)(controlPoints, index, color.toRgbString()));
        }
      }), !disableRemove && (0, _element.createElement)(_button.default, {
        className: "components-custom-gradient-picker__remove-control-point",
        onClick: () => {
          onChange((0, _utils.removeControlPoint)(controlPoints, index));
          onClose();
        },
        isLink: true
      }, (0, _i18n.__)('Remove Control Point'))),
      popoverProps: _constants.COLOR_POPOVER_PROPS
    });
  });
}

function InsertPoint({
  value: controlPoints,
  onChange,
  onOpenInserter,
  onCloseInserter,
  insertPosition,
  disableAlpha
}) {
  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
  return (0, _element.createElement)(_dropdown.default, {
    className: "components-custom-gradient-picker__inserter",
    onClose: () => {
      onCloseInserter();
    },
    renderToggle: ({
      isOpen,
      onToggle
    }) => (0, _element.createElement)(_button.default, {
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: () => {
        if (isOpen) {
          onCloseInserter();
        } else {
          setAlreadyInsertedPoint(false);
          onOpenInserter();
        }

        onToggle();
      },
      className: "components-custom-gradient-picker__insert-point",
      icon: _icons.plus,
      style: {
        left: insertPosition !== null ? `${insertPosition}%` : undefined
      }
    }),
    renderContent: () => (0, _element.createElement)(_colorPicker.default, {
      disableAlpha: disableAlpha,
      onChangeComplete: ({
        color
      }) => {
        if (!alreadyInsertedPoint) {
          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, color.toRgbString()));
          setAlreadyInsertedPoint(true);
        } else {
          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, color.toRgbString()));
        }
      }
    }),
    popoverProps: _constants.COLOR_POPOVER_PROPS
  });
}

ControlPoints.InsertPoint = InsertPoint;
var _default = ControlPoints;
exports.default = _default;
//# sourceMappingURL=control-points.js.map