How to programmatically swipe any list item to reveal the trailing actions about react-swipeable-list HOT 7 CLOSED

const simulateSwipe = (el, fromPoint, to, step) => {
  if (fromPoint.x >= to) {
    simulateMouseEvent('mouseup', el, fromPoint.x, fromPoint.y);
  } else {
    setTimeout(() => {
      simulateMouseEvent('mousemove', el, fromPoint.x + step, fromPoint.y);

      simulateSwipe(el, { ...fromPoint, x: fromPoint.x + step }, to, step);
    }, 100);
  }
};

const el = document.querySelector('.swipeable-list-item__content');
const pos = el.getBoundingClientRect();
const center1X = Math.floor((pos.left + pos.right) / 2);
const center1Y = Math.floor((pos.top + pos.bottom) / 2);

simulate(el, 'mousedown', { pointerX: center1X, pointerY: center1Y });

simulateSwipe(el, { x: center1X, y: center1Y }, center1X + 100, 5);

/**
 * It triggers touch events. Also supports multiple touch events.
 * @param {Element} element target DOM element
 * @param {string} type type of event
 * @param {Array} touches {x, y, id} position and identifier of the event
 */
export function simulateTouchEvent(element, type, touches) {
  const touchEvents = [];

  touches.forEach((touch) => {
    touchEvents.push(
      new Touch({
        screenX: touch.x,
        screenY: touch.y,
        pageX: touch.x,
        pageY: touch.y,
        clientX: touch.x,
        clientY: touch.y,
        identifier: touch.id,
        target: element,
        force: 10,
      })
    );
  });

  element.dispatchEvent(
    new TouchEvent(type, {
      touches: touchEvents,
      view: window,
      cancelable: true,
      bubbles: true,
    })
  );
}

/**
 * It triggers mouse event.
 * @param {string} type type of event
 * @param {Element} element target DOM element
 * @param {number} x clientX of event
 * @param {number} y clientY of event
 */
export function simulateMouseEvent(type, element, x, y) {
  const evt = document.createEvent('MouseEvents');
  evt.initMouseEvent(
    type,
    true,
    true,
    window,
    1,
    x,
    y,
    x,
    y,
    false,
    false,
    false,
    false,
    0,
    element
  );
  element.dispatchEvent(evt);
}

const MySwipeableListComponent = (props) => {
  // ... other code 
 useEffect(() => {
    setTimeout(() => {
        if (showActions) {
          const el = document.querySelector('.swipeable-list-item'); // the list item root (it will get the first element from list)
          const pos = el.getBoundingClientRect();
          const center1X = Math.floor((pos.left + pos.right) / 2);
          const center1Y = Math.floor((pos.top + pos.bottom) / 2);

         setShowActions(true);
         // simulating the mouse drag on only x-axis with 100 pixels drag from right to left
         simulateMouseEvent('mousemove', el, center1X, center1Y);
         simulateMouseEvent('mouseup', el, center1X - 100, center1Y);
        
        // similarly tried with simulating touch events as well, but no luck
        simulateTouchEvent(el, 'ontouchstart', [
              { // for touch
                x: center1X,
                y: center1Y,
                id: 100,
              },
            ]);

            simulateTouchEvent(el, 'touchend', [
              {
                x: center1X - 150,
                y: center1Y,
                id: 100,
              },
            ]);
        }
    }, 500);
  }, [showActions]);

 return (
        <SwipeableList fullSwipe={false} type={ListType.IOS} threshold={threshold}>
          {items.map((item, index) => (
            <SwipeableListItem
              key={`item__${item._id}`}
              trailingActions={trailingActions(item)}
            >
              <Item
                item={item}
                onDelete={onDeleteItemHandler}
              />
            </SwipeableListItem>
          ))}
        </SwipeableList>
    );
};