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

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useRef, useReducer } from '@wordpress/element';
/**
 * Internal dependencies
 */

import ControlPoints from './control-points';
import { getHorizontalRelativeGradientPosition } from './utils';
import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';

const 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'
};
export default function CustomGradientBar(_ref) {
  let {
    background,
    hasGradient,
    value: controlPoints,
    onChange,
    disableInserter = false,
    disableAlpha = false,
    __experimentalIsRenderedInSidebar = false
  } = _ref;
  const gradientMarkersContainerDomRef = useRef(null);
  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);

  const onMouseEnterAndMove = event => {
    if (!gradientMarkersContainerDomRef.current) {
      return;
    }

    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current); // If the insert point is close to an existing control point don't show it.

    if (controlPoints.some(_ref2 => {
      let {
        position
      } = _ref2;
      return Math.abs(insertPosition - position) < 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 createElement("div", {
    className: classnames('components-custom-gradient-picker__gradient-bar', {
      'has-gradient': hasGradient
    }),
    onMouseEnter: onMouseEnterAndMove,
    onMouseMove: onMouseEnterAndMove,
    onMouseLeave: onMouseLeave
  }, createElement("div", {
    className: "components-custom-gradient-picker__gradient-bar-background",
    style: {
      background,
      opacity: hasGradient ? 1 : 0.4
    }
  }), createElement("div", {
    ref: gradientMarkersContainerDomRef,
    className: "components-custom-gradient-picker__markers-container"
  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {
    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
    disableAlpha: disableAlpha,
    insertPosition: gradientBarState.insertPosition,
    value: controlPoints,
    onChange: onChange,
    onOpenInserter: () => {
      gradientBarStateDispatch({
        type: 'OPEN_INSERTER'
      });
    },
    onCloseInserter: () => {
      gradientBarStateDispatch({
        type: 'CLOSE_INSERTER'
      });
    }
  }), createElement(ControlPoints, {
    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
    disableAlpha: disableAlpha,
    disableRemove: disableInserter,
    gradientPickerDomRef: gradientMarkersContainerDomRef,
    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