clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.61k stars 628 forks source link

AbstractPointerSensor cannot be imported outside dnd-kit package. #806

Open CoderK opened 2 years ago

CoderK commented 2 years ago

I'd like to extend AbstractPointerSensor to make a custom sensor.

But, in my project I cannot import AbstractPointerSensor class. That's because AbstractPointerSensor is not being exported.

https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/index.ts

So I made a detour like this,

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export default class MouseClickableSensor extends MouseSensor {
  static activators = [
    {
      eventName: 'onClick' as const,
      handler: ({ nativeEvent: event }: PointerEvent, { onActivation }: PointerSensorOptions) => {
        if (event.button !== 0) {
          return false;
        }

        onActivation?.({ event });

        return true;
      },
    },
  ];
}

Modifying static member doesn't seem to be a good way. This error occurs.

Class static side 'typeof MouseClickableSensor' incorrectly extends base class static side 'typeof MouseSensor'.   Types of property 'activators' are incompatible.

image

I can solve it if you can export AbstractPointerSensor, is there any other good way to solve this problem?

Reykugo-Gear commented 2 years ago

i encountered same issues. I foudna solution to extends PointerSensor class directly and override activators

here my example

import { PointerSensor, PointerSensorOptions } from '@dnd-kit/core';
import type { PointerEvent } from 'react';

// override dnd kit pointer sensor to add key binder condition
// here original code https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/sensors/pointer/PointerSensor.ts
export class CustomPointerSensor extends PointerSensor {
  static activators = [
    {
      eventName: 'onPointerDown' as const,
      handler: (
        { nativeEvent: event }: PointerEvent,
        { onActivation }: PointerSensorOptions,
      ): boolean => {
        if (!event.isPrimary || event.button !== 0) {
          return false;
        }
       // my override
        if (event.altKey) return false;

        onActivation?.({ event });

        return true;
      },
    },
  ];
}
ruslanchek commented 1 year ago

@Reykugo-Gear In my case, this code throws TypeError: Cannot read properties of undefined (reading 'activators'). Could you let me know if you managed to resolve it?