@wordpress/components/build/custom-gradient-bar/index.js

UI components for WordPress.

"use strict";

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

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

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

var _lodash = require("lodash");

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

var _controlPoints = _interopRequireDefault(require("./control-points"));

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

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function customGradientBarReducer(state, action) {
  switch (action.type) {
    case 'MOVE_INSERTER':
      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
        return {
          id: 'MOVING_INSERTER',
          insertPosition: action.insertPosition
        };
      }

      break;

    case 'STOP_INSERTER_MOVE':
      if (state.id === 'MOVING_INSERTER') {
        return {
          id: 'IDLE'
        };
      }

      break;

    case 'OPEN_INSERTER':
      if (state.id === 'MOVING_INSERTER') {
        return {
          id: 'INSERTING_CONTROL_POINT',
          insertPosition: state.insertPosition
        };
      }

      break;

    case 'CLOSE_INSERTER':
      if (state.id === 'INSERTING_CONTROL_POINT') {
        return {
          id: 'IDLE'
        };
      }

      break;

    case 'START_CONTROL_CHANGE':
      if (state.id === 'IDLE') {
        return {
          id: 'MOVING_CONTROL_POINT'
        };
      }

      break;

    case 'STOP_CONTROL_CHANGE':
      if (state.id === 'MOVING_CONTROL_POINT') {
        return {
          id: 'IDLE'
        };
      }

      break;
  }

  return state;
}

const customGradientBarReducerInitialState = {
  id: 'IDLE'
};

function CustomGradientBar({
  background,
  hasGradient,
  value: controlPoints,
  onChange,
  disableInserter = false,
  disableAlpha = false
}) {
  const gradientPickerDomRef = (0, _element.useRef)();
  const [gradientBarState, gradientBarStateDispatch] = (0, _element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);

  const onMouseEnterAndMove = event => {
    const insertPosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current, _constants.INSERT_POINT_WIDTH); // If the insert point is close to an existing control point don't show it.

    if ((0, _lodash.some)(controlPoints, ({
      position
    }) => {
      return Math.abs(insertPosition - position) < _constants.MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
    })) {
      if (gradientBarState.id === 'MOVING_INSERTER') {
        gradientBarStateDispatch({
          type: 'STOP_INSERTER_MOVE'
        });
      }

      return;
    }

    gradientBarStateDispatch({
      type: 'MOVE_INSERTER',
      insertPosition
    });
  };

  const onMouseLeave = () => {
    gradientBarStateDispatch({
      type: 'STOP_INSERTER_MOVE'
    });
  };

  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
  return (0, _element.createElement)("div", {
    ref: gradientPickerDomRef,
    className: (0, _classnames.default)('components-custom-gradient-picker__gradient-bar', {
      'has-gradient': hasGradient
    }),
    onMouseEnter: onMouseEnterAndMove,
    onMouseMove: onMouseEnterAndMove,
    style: {
      background
    },
    onMouseLeave: onMouseLeave
  }, (0, _element.createElement)("div", {
    className: "components-custom-gradient-picker__markers-container"
  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {
    disableAlpha: disableAlpha,
    insertPosition: gradientBarState.insertPosition,
    value: controlPoints,
    onChange: onChange,
    onOpenInserter: () => {
      gradientBarStateDispatch({
        type: 'OPEN_INSERTER'
      });
    },
    onCloseInserter: () => {
      gradientBarStateDispatch({
        type: 'CLOSE_INSERTER'
      });
    }
  }), (0, _element.createElement)(_controlPoints.default, {
    disableAlpha: disableAlpha,
    disableRemove: disableInserter,
    gradientPickerDomRef: gradientPickerDomRef,
    ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
    value: controlPoints,
    onChange: onChange,
    onStartControlPointChange: () => {
      gradientBarStateDispatch({
        type: 'START_CONTROL_CHANGE'
      });
    },
    onStopControlPointChange: () => {
      gradientBarStateDispatch({
        type: 'STOP_CONTROL_CHANGE'
      });
    }
  })));
}
//# sourceMappingURL=index.js.map