@gechiui/components/build/custom-gradient-bar/control-points.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@gechiui/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _colord = require("colord");

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

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

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

var _keycodes = require("@gechiui/keycodes");

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

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

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

var _colorPalette = require("../color-palette");

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function ControlPointButton(_ref) {
  let {
    isOpen,
    position,
    color,
    ...additionalProps
  } = _ref;
  const instanceId = (0, _compose.useInstanceId)(ControlPointButton);
  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
  return (0, _element.createElement)(_element.Fragment, null, (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.__)('渐变色控制点在%1$s%%位置处，颜色代码为%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.VisuallyHidden, {
    id: descriptionId
  }, (0, _i18n.__)('使用您的左右方向键或使用鼠标拖放来修改渐变位置。按下按钮来修改颜色或移除控制点。')));
}

function GradientColorPickerDropdown(_ref2) {
  let {
    isRenderedInSidebar,
    gradientPickerDomRef,
    ...props
  } = _ref2;
  const popoverProps = (0, _element.useMemo)(() => {
    const result = {
      className: 'components-custom-gradient-picker__color-picker-popover',
      position: 'top'
    };

    if (isRenderedInSidebar) {
      result.anchorRef = gradientPickerDomRef.current;
      result.position = 'bottom left';
    }

    return result;
  }, [gradientPickerDomRef.current, isRenderedInSidebar]);
  return (0, _element.createElement)(_colorPalette.CustomColorPickerDropdown, (0, _extends2.default)({
    isRenderedInSidebar: isRenderedInSidebar,
    popoverProps: popoverProps
  }, props));
}

function ControlPoints(_ref3) {
  let {
    disableRemove,
    disableAlpha,
    gradientPickerDomRef,
    ignoreMarkerPosition,
    value: controlPoints,
    onChange,
    onStartControlPointChange,
    onStopControlPointChange,
    __experimentalIsRenderedInSidebar
  } = _ref3;
  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)(GradientColorPickerDropdown, {
      gradientPickerDomRef: gradientPickerDomRef,
      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
      key: index,
      onClose: onStopControlPointChange,
      renderToggle: _ref4 => {
        let {
          isOpen,
          onToggle
        } = _ref4;
        return (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);
            }
          },
          onKeyDown: event => {
            if (event.keyCode === _keycodes.LEFT) {
              // Stop propagation of the key press event to avoid focus moving
              // to another editor area.
              event.stopPropagation();
              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position - _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
            } else if (event.keyCode === _keycodes.RIGHT) {
              // Stop propagation of the key press event to avoid focus moving
              // to another editor area.
              event.stopPropagation();
              onChange((0, _utils.updateControlPointPosition)(controlPoints, index, (0, _utils.clampPercent)(point.position + _constants.KEYBOARD_CONTROL_POINT_VARIATION)));
            }
          },
          isOpen: isOpen,
          position: point.position,
          color: point.color
        });
      },
      renderContent: _ref5 => {
        let {
          onClose
        } = _ref5;
        return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_colorPicker.ColorPicker, {
          enableAlpha: !disableAlpha,
          color: point.color,
          onChange: color => {
            onChange((0, _utils.updateControlPointColor)(controlPoints, index, (0, _colord.colord)(color).toRgbString()));
          }
        }), !disableRemove && controlPoints.length > 2 && (0, _element.createElement)(_button.default, {
          className: "components-custom-gradient-picker__remove-control-point",
          onClick: () => {
            onChange((0, _utils.removeControlPoint)(controlPoints, index));
            onClose();
          },
          variant: "link"
        }, (0, _i18n.__)('移除控制点')));
      }
    });
  });
}

function InsertPoint(_ref6) {
  let {
    value: controlPoints,
    onChange,
    onOpenInserter,
    onCloseInserter,
    insertPosition,
    disableAlpha,
    __experimentalIsRenderedInSidebar,
    gradientPickerDomRef
  } = _ref6;
  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0, _element.useState)(false);
  return (0, _element.createElement)(GradientColorPickerDropdown, {
    gradientPickerDomRef: gradientPickerDomRef,
    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
    className: "components-custom-gradient-picker__inserter",
    onClose: () => {
      onCloseInserter();
    },
    renderToggle: _ref7 => {
      let {
        isOpen,
        onToggle
      } = _ref7;
      return (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.ColorPicker, {
      enableAlpha: !disableAlpha,
      onChange: color => {
        if (!alreadyInsertedPoint) {
          onChange((0, _utils.addControlPoint)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
          setAlreadyInsertedPoint(true);
        } else {
          onChange((0, _utils.updateControlPointColorByPosition)(controlPoints, insertPosition, (0, _colord.colord)(color).toRgbString()));
        }
      }
    })
  });
}

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