How to use the use-memo-one.useCallback function in use-memo-one

To help you get started, we’ve selected a few use-memo-one examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github atlassian / react-beautiful-dnd / src / view / use-sensor-marshal / sensors / use-touch-sensor.js View on Github external
export default function useMouseSensor(api: SensorAPI) {
  const phaseRef = useRef(idle);
  const unbindEventsRef = useRef<() => void>(noop);

  const getPhase = useCallback(function getPhase(): Phase {
    return phaseRef.current;
  }, []);

  const setPhase = useCallback(function setPhase(phase: Phase) {
    phaseRef.current = phase;
  }, []);

  const startCaptureBinding: EventBinding = useMemo(
    () => ({
      eventName: 'touchstart',
      fn: function onTouchStart(event: TouchEvent) {
        // Event already used by something else
        if (event.defaultPrevented) {
          return;
        }

        // We need to NOT call event.preventDefault() so as to maintain as much standard
        // browser interactions as possible.
        // This includes navigation on anchors which we want to preserve
github atlassian / react-beautiful-dnd / src / view / use-drag-handle / use-drag-handle.js View on Github external
export default function useDragHandle(args: Args): ?DragHandleProps {
  // Capturing
  const capturingRef = useRef(null);
  const onCaptureStart = useCallback((abort: () => void) => {
    invariant(
      !capturingRef.current,
      'Cannot start capturing while something else is',
    );
    capturingRef.current = {
      abort,
    };
  }, []);
  const onCaptureEnd = useCallback(() => {
    invariant(
      capturingRef.current,
      'Cannot stop capturing while nothing is capturing',
    );
    capturingRef.current = null;
  }, []);
  const abortCapture = useCallback(() => {
    invariant(capturingRef.current, 'Cannot abort capture when there is none');
    capturingRef.current.abort();
  }, []);

  const { canLift, style: styleContext }: AppContextValue = useRequiredContext(
    AppContext,
  );
  const {
    isDragging,
github atlassian / react-beautiful-dnd / src / view / use-drag-handle / sensor / use-keyboard-sensor.js View on Github external
if (event.currentTarget !== getWindow()) {
            return;
          }

          callbacks.onWindowScroll();
        },
      },
      // Cancel on page visibility change
      {
        eventName: supportedPageVisibilityEventName,
        fn: cancel,
      },
    ];
  }, [callbacks, cancel, getIsDragging, getWindow]);

  const bindWindowEvents = useCallback(() => {
    const win: HTMLElement = getWindow();
    const options = { capture: true };

    // setting up our unbind before we bind
    unbindWindowEventsRef.current = () =>
      unbindEvents(win, windowBindings, options);

    bindEvents(win, windowBindings, options);
  }, [getWindow, windowBindings]);

  const startDragging = useCallback(() => {
    invariant(!isDraggingRef.current, 'Cannot start a drag while dragging');

    const ref: ?HTMLElement = getDraggableRef();
    invariant(ref, 'Cannot start a keyboard drag without a draggable ref');
    isDraggingRef.current = true;
github atlassian / react-beautiful-dnd / src / view / use-sensor-marshal / use-sensor-marshal.js View on Github external
tryAbandonLock(previous, current);
        previous = current;
      });

      // unsubscribe from store when unmounting
      return unsubscribe;
    },
    [lockAPI, store, tryAbandonLock],
  );

  // abort any lock on unmount
  useLayoutEffect(() => {
    return lockAPI.tryAbandon;
  }, [lockAPI.tryAbandon]);

  const canGetLock = useCallback(
    (draggableId: DraggableId): boolean => {
      return canStart({
        lockAPI,
        registry,
        store,
        draggableId,
      });
    },
    [lockAPI, registry, store],
  );

  const tryGetLock: TryGetLock = useCallback(
    (
      draggableId: DraggableId,
      forceStop?: () => void,
      options?: TryGetLockOptions,
github atlassian / react-beautiful-dnd / src / view / use-sensor-marshal / sensors / use-touch-sensor.js View on Github external
export default function useMouseSensor(api: SensorAPI) {
  const phaseRef = useRef(idle);
  const unbindEventsRef = useRef<() => void>(noop);

  const getPhase = useCallback(function getPhase(): Phase {
    return phaseRef.current;
  }, []);

  const setPhase = useCallback(function setPhase(phase: Phase) {
    phaseRef.current = phase;
  }, []);

  const startCaptureBinding: EventBinding = useMemo(
    () => ({
      eventName: 'touchstart',
      fn: function onTouchStart(event: TouchEvent) {
        // Event already used by something else
        if (event.defaultPrevented) {
          return;
        }
github atlassian / react-beautiful-dnd / src / view / use-drag-handle / use-drag-handle.js View on Github external
draggableId,
    callbacks,
    getDraggableRef,
    getShouldRespectForcePress,
    canDragInteractiveElements,
  } = args;
  const lastArgsRef = usePreviousRef(args);

  useValidation({ isEnabled, getDraggableRef });

  const getWindow = useCallback(
    (): HTMLElement => getWindowFromEl(getDraggableRef()),
    [getDraggableRef],
  );

  const canStartCapturing = useCallback(
    (event: Event) => {
      // Cannot lift when disabled
      if (!isEnabled) {
        return false;
      }
      // Something on this element might be capturing.
      // A drag might not have started yet
      // We want to prevent anything else from capturing
      if (capturingRef.current) {
        return false;
      }

      // Do not drag if anything else in the system is dragging
      if (!canLift(draggableId)) {
        return false;
      }
github atlassian / react-beautiful-dnd / src / view / drag-drop-context / app.jsx View on Github external
return state.isDragging || state.phase === 'DROP_ANIMATING';
  }, []);

  const appCallbacks: AppCallbacks = useMemo(
    () => ({
      isDragging,
      tryAbort: tryResetStore,
    }),
    [isDragging, tryResetStore],
  );

  // doing this in render rather than a side effect so any errors on the
  // initial mount are caught
  setCallbacks(appCallbacks);

  const getCanLift = useCallback(
    (id: DraggableId) => canStartDrag(getStore(lazyStoreRef).getState(), id),
    [],
  );

  const getIsMovementAllowed = useCallback(
    () => isMovementAllowed(getStore(lazyStoreRef).getState()),
    [],
  );

  const appContext: AppContextValue = useMemo(
    () => ({
      marshal: dimensionMarshal,
      focus: focusMarshal,
      contextId,
      canLift: getCanLift,
      isMovementAllowed: getIsMovementAllowed,
github atlassian / react-beautiful-dnd / stories / src / programmatic / multiple-contexts.jsx View on Github external
return function useCustomSensor(api: SensorAPI) {
    const start = useCallback(
      async function start() {
        const preDrag: ?PreDragActions = api.tryGetLock('1', () => {});

        if (!preDrag) {
          console.warn('unable to start drag');
          return;
        }

        const actions: SnapDragActions = preDrag.snapLift();
        const { moveDown, moveUp, drop, isActive, cancel } = actions;

        const unbind = bindEvents(window, [
          {
            eventName: 'resize',
            fn: cancel,
            options: { once: true },
github atlassian / react-beautiful-dnd / src / view / use-drag-handle / sensor / use-keyboard-sensor.js View on Github external
export default function useKeyboardSensor(args: Args): OnKeyDown {
  const {
    canStartCapturing,
    getWindow,
    callbacks,
    onCaptureStart,
    onCaptureEnd,
    getDraggableRef,
  } = args;
  const isDraggingRef = useRef(false);
  const unbindWindowEventsRef = useRef<() => void>(noop);

  const getIsDragging = useCallback(() => isDraggingRef.current, []);

  const schedule = useMemo(() => {
    invariant(
      !getIsDragging(),
      'Should not recreate scheduler while capturing',
    );
    return createScheduler(callbacks);
  }, [callbacks, getIsDragging]);

  const stop = useCallback(() => {
    if (!getIsDragging()) {
      return;
    }

    schedule.cancel();
    unbindWindowEventsRef.current();
github atlassian / react-beautiful-dnd / src / view / use-sensor-marshal / use-sensor-marshal.js View on Github external
store,
        draggableId,
        forceSensorStop: forceStop,
        sourceEvent:
          options && options.sourceEvent ? options.sourceEvent : null,
      }),
    [contextId, lockAPI, registry, store],
  );

  const findClosestDraggableId = useCallback(
    (event: Event): ?DraggableId =>
      findClosestDraggableIdFromEvent(contextId, event),
    [contextId],
  );

  const findOptionsForDraggable = useCallback(
    (id: DraggableId): ?DraggableOptions => {
      const entry: ?DraggableEntry = registry.draggable.findById(id);
      return entry ? entry.options : null;
    },
    [registry.draggable],
  );

  const tryReleaseLock = useCallback(lockAPI.tryAbandon, [lockAPI]);
  const isLockClaimed = useCallback(lockAPI.isClaimed, [lockAPI]);

  const api: SensorAPI = useMemo(
    () => ({
      canGetLock,
      tryGetLock,
      findClosestDraggableId,
      findOptionsForDraggable,

use-memo-one

useMemo and useCallback but with a stable cache

MIT
Latest version published 2 years ago

Package Health Score

67 / 100
Full package analysis