How to use raf-schd - 10 common examples

export default ({ scrollWindow, scrollDroppable }: Api): FluidScroller => {
  const scheduleWindowScroll = rafSchd(scrollWindow);
  const scheduleDroppableScroll = rafSchd(scrollDroppable);

  const scroller = (state: DraggingState): void => {
    const center: Position = state.current.page.borderBoxCenter;

    const draggable: DraggableDimension =
      state.dimensions.draggables[state.critical.draggable.id];
    const subject: Rect = draggable.page.marginBox;

    // 1. Can we scroll the viewport?
    if (state.isWindowScrollAllowed) {
      const viewport: Viewport = state.viewport;
      const requiredWindowScroll: ?Position = getRequiredScroll({
        container: viewport.frame,
        subject,
        center,

export default (callbacks: Callbacks) => {
  const memoizedMove = memoizeOne((x: number, y: number) => {
    const point: Position = { x, y };
    callbacks.onMove(point);
  });

  const move = rafSchd((point: Position) => memoizedMove(point.x, point.y));
  const moveUp = rafSchd(callbacks.onMoveUp);
  const moveDown = rafSchd(callbacks.onMoveDown);
  const moveRight = rafSchd(callbacks.onMoveRight);
  const moveLeft = rafSchd(callbacks.onMoveLeft);
  const windowScrollMove = rafSchd(callbacks.onWindowScroll);

  const cancel = () => {
    // cancel all of the next animation frames

    move.cancel();
    moveUp.cancel();
    moveDown.cancel();
    moveRight.cancel();
    moveLeft.cancel();
    windowScrollMove.cancel();
  };

export default function getScrollListener({ onWindowScroll }: Args): Result {
  function updateScroll() {
    // letting the update function read the latest scroll when called
    onWindowScroll(getWindowScroll());
  }

  const scheduled = rafSchd(updateScroll);
  const binding: EventBinding = getWindowScrollBinding(scheduled);
  let unbind: () => void = noop;

  function isActive(): boolean {
    return unbind !== noop;
  }

  function start() {
    invariant(!isActive(), 'Cannot start scroll listener when already active');
    unbind = bindEvents(window, [binding]);
  }
  function stop() {
    invariant(isActive(), 'Cannot stop scroll listener when not active');
    scheduled.cancel();
    unbind();
    unbind = noop;

});
    });
    this._handleZoneResize = rafSchedule((zoneId: WidgetZoneId, resizeBy: number, handle: ResizeHandle, filledHeightDiff: number) => {
      this.setState((prevState) => {
        const zones = this._nineZone.getZonesManager().handleWidgetResize({ zoneId, resizeBy, handle, filledHeightDiff }, prevState.nineZone.zones);
        if (zones === prevState.nineZone.zones)
          return null;
        return {
          nineZone: {
            ...prevState.nineZone,
            zones,
          },
        };
      });
    });
    this._handleStagePanelResize = rafSchedule((resizeBy: number, type: ExampleStagePanelType) => {
      const panel = getNestedStagePanel(type);
      this.setState((prevState) => {
        const nested = this._nineZone.getNestedPanelsManager().resize(panel, resizeBy, prevState.nineZone.nested);
        if (nested === prevState.nineZone.nested)
          return null;
        return {
          nineZone: {
            ...prevState.nineZone,
            nested,
          },
        };
      });
    });
  }

export function useScrollSpy(ids: string[]) {
  const [map, setMap] = React.useState<(Element | null)[]>(() => []);
  const [inView, setInView] = React.useState<(string | null)[]>([]);

  const onScroll = rafSchedule(() => {
    const inView = map
      .filter(el => {
        if (el) return elementInView(el);
        return false;
      })
      .map(el => el!.getAttribute("id"));

    setInView(inView);
  });

  React.useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [map]);

  React.useEffect(() => {

_defineProperty(_assertThisInitialized(_this), "createUpdater", function () {
      _this.rafClean();

      _this.raf = rafSchd(function (_ref) {
        var width = _ref.width,
            height = _ref.height;
        var onResize = _this.props.onResize;

        if (isFunction(onResize)) {
          onResize(width, height);
        }

        _this.setState({
          width: width,
          height: height
        });
      });
      return _this.raf;
    });

if (_this2.frame && document.activeElement !== _this2.frame) {
      _this2.frame.focus();
    }
  };

  this.prev = function () {
    _this2.track.prev();
    _this2.focusViewFrame();
  };

  this.next = function () {
    _this2.track.next();
    _this2.focusViewFrame();
  };

  this.handleMouseActivity = rafScheduler(function () {
    clearTimeout(_this2.timer);

    if (_this2.state.interactionIsIdle) {
      _this2.setState({ interactionIsIdle: false });
    }

    _this2.timer = setTimeout(function () {
      if (_this2.mounted) {
        _this2.setState({ interactionIsIdle: true });
      }
    }, _this2.props.hideControlsWhenIdle);
  });

  this.handleViewChange = function (indicies) {
    var trackProps = _this2.props.trackProps;

createUpdater = () => {
    this.rafClean();

    this.raf = rafSchd(({ width, height }) => {
      const { onResize } = this.props;

      if (isFunction(onResize)) {
        onResize(width, height);
      }

      this.setState({ width, height });
    });

    return this.raf;
  };

super(p);

    this._handleTabDrag = rafSchedule((dragged: PointProps) => {
      this.setState((prevState) => {
        const zones = this._nineZone.getZonesManager().handleWidgetTabDrag(dragged, prevState.nineZone.zones);
        if (zones === prevState.nineZone.zones)
          return null;
        return {
          nineZone: {
            ...prevState.nineZone,
            zones,
          },
        };
      });
    });
    this._handleZoneResize = rafSchedule((zoneId: WidgetZoneId, resizeBy: number, handle: ResizeHandle, filledHeightDiff: number) => {
      this.setState((prevState) => {
        const zones = this._nineZone.getZonesManager().handleWidgetResize({ zoneId, resizeBy, handle, filledHeightDiff }, prevState.nineZone.zones);
        if (zones === prevState.nineZone.zones)
          return null;
        return {
          nineZone: {
            ...prevState.nineZone,
            zones,
          },
        };
      });
    });
    this._handleStagePanelResize = rafSchedule((resizeBy: number, type: ExampleStagePanelType) => {
      const panel = getNestedStagePanel(type);
      this.setState((prevState) => {
        const nested = this._nineZone.getNestedPanelsManager().resize(panel, resizeBy, prevState.nineZone.nested);

function fluidLift(clientSelection: Position): FluidDragActions {
    const move = rafSchd((client: Position) => {
      tryDispatchWhenDragging(() => moveAction({ client }));
    });

    const api = lift({
      liftActionArgs: {
        id: draggableId,
        clientSelection,
        movementMode: 'FLUID',
      },
      cleanup: () => move.cancel(),
      actions: { move },
    });

    return {
      ...api,
      move,