prevwong/craft.js

connectors does not work on PrimeReact components

Opened this issue · 1 comments

Describe the bug
When I write the simple sample code below, I get the following error:

0

import {useNode} from "@craftjs/core";
import {InputSwitch} from "primereact/inputswitch";
export const MyComponent = () => {
    const {connectors: {connect, drag}} = useNode();
    return <InputSwitch ref={ref => connect(drag(ref!))} checked={true}/>;
}

1

TS2345: Argument of type  InputSwitch  is not assignable to parameter of type
HTMLElement | ReactElement<any, string | JSXElementConstructor<any>>
Type  InputSwitch  is missing the following properties from type
ReactElement<any, string | JSXElementConstructor<any>>
:  type, key 

Inside PrimeReact, the base type of ref is React.Component, not React.ReactElement:
2

export declare class InputSwitch extends React.Component<InputSwitchProps, any> {
    public focus(): void;
    public getElement(): HTMLDivElement;
    public getInput(): HTMLInputElement;
}

And not all components have the getElement() method.

I could forcefully ignore the typescript error with the any type, but I don't know how much of an impact it would have, especially the ones that can't be found at the moment.

To Reproduce

Expected behavior

Screenshots

Additional context

Your environment

Software Version(s)
craft.js 0.2.2
React 18.2.0
TypeScript 5.2.2
Browser -
npm/Yarn -
Operating System -

I could also wrap PrimeReact component with a div so that I only have to get the ref of the div and not the PrimeReact component.
But this approach also has a major drawback, it makes the DOM structure more complex and performance worse.