Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

connectors does not work on PrimeReact components #575

Open
Traveller23 opened this issue Nov 7, 2023 · 1 comment
Open

connectors does not work on PrimeReact components #575

Traveller23 opened this issue Nov 7, 2023 · 1 comment

Comments

@Traveller23
Copy link
Contributor

Traveller23 commented Nov 7, 2023

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 -
@Traveller23
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant