search

kutlugsahin / react-smooth-dnd

react wrapper components for smooth-dnd
MIT License
1.71k stars 144 forks source link

Property 'children' does not exist on type 'IntrinsicAttributes....' #88

Open pmoieni opened 2 years ago

pmoieni commented 2 years ago

I just upgraded my project from react 17 to react 18 and now I'm getting this error.

TS2769: No overload matches this call. Overload 1 of 2, '(props: DraggableProps | Readonly): Draggable', gave the following error. Type '{ children: ReactNode; key: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: DraggableProps, context: any): Draggable', gave the following error. Type '{ children: ReactNode; key: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

this is my code:

function ReorderList({ items }: props) {
  const [allItems, setAllItems] = useState(items);

  return (
    <div className="reorder-list">
      <Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
      >
        {allItems.map((item, idx) => {
          return <Draggable key={idx}>{item}</Draggable>;
        })}
      </Container>
    </div>
  );
}
SerhiyDemchuk commented 2 years ago

have you solved it? Container and Droggable have a prop called render. Move each component's children to this prop This is a rewritten smooth-dnd-demo. `

<Container orientation="horizontal" onDrop={this.onColumnDrop} dragHandleSelector=".column-drag-handle" dropPlaceholder={{ animationDuration: 150, showOnTop: true, className: 'cards-drop-preview', }} render={() => (

{this.state.scene.children.map((column: any) => { return ( (
☰ {column.name}
console.log('drag started', e)} onDragEnd={e => console.log('drag end', e)} onDrop={e => this.onCardDrop(column.id, e)} getChildPayload={index => this.getCardPayload(column.id, index) } dragClass="card-ghost" dropClass="card-ghost-drop" onDragEnter={() => { console.log('drag enter:', column.id); }} onDragLeave={() => { console.log('drag leave:', column.id); }} onDropReady={p => console.log('Drop ready: ', p)} dropPlaceholder={{ animationDuration: 150, showOnTop: true, className: 'drop-preview', }} dropPlaceholderAnimationDuration={200} render={() => (
{column.children.map((card: any) => { return ( (

{card.data}

)} /> ); })}
)} /> 
                                )} />
                            );
                        })}
                    </div>
                )}
            />
        </div>`

However, now I have errors in the console.

pmoieni commented 2 years ago

@SerhiyDemchuk I'm still getting the same error

<Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
        render={() => (
          <>
            {allItems.map((item, idx) => {
              return <Draggable key={idx}>{item}</Draggable>;
            })}
          </>
        )}
      />
SerhiyDemchuk commented 2 years ago

@pmoieni do the same to Draggabe children, the component also has the prop "render"

pmoieni commented 2 years ago

@SerhiyDemchuk thanks. Now it's working.

<Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
        render={() => (
          <>
            {allItems.map((item, idx) => {
              return <Draggable key={idx} render={() => <>{item}</>} />;
            })}
          </>
        )}
      />
SerhiyDemchuk commented 2 years ago

@pmoieni do you have any errors in the console? Because despite I have no errors in IDE, I don't see any data to be rendered

pmoieni commented 2 years ago

@SerhiyDemchuk I thought when the error is gone everything should work. I have lots of errors in the console and just a blank screen. someone should update the documentation.

image

MSSPL-KamalenduGarai commented 2 years ago

Hi, is there any update on this cause I am having the same issue.

BahaMagi commented 2 years ago

If someone is still having that problem: I think its only a type issue where the components were not declared in a way that allows them to have child components. We only came across this when we updated typescript at some point.

We wrote a patch for it. The Draggable and Container components extend the incorrect type (e.g. in Draggable.d.ts)

declare class Draggable extends Component<DraggableProps> {

rather than 

declare class Draggable extends Component<PropsWithChildren<DraggableProps>> {

Here is the patch file we used to fix it for us:

diff --git a/dist/src/Container.d.ts b/dist/src/Container.d.ts
index cdd0c03b8744ce35af905b5d5ce867f725f299b8..1786963d81768adc7b0fc4ac2909bbd690aac291 100644
--- a/dist/src/Container.d.ts
+++ b/dist/src/Container.d.ts
@@ -1,11 +1,11 @@
-import React, { Component, CSSProperties } from 'react';
+import React, { Component, CSSProperties,PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { ContainerOptions, SmoothDnD } from 'smooth-dnd';
 interface ContainerProps extends ContainerOptions {
     render?: (rootRef: React.RefObject<any>) => React.ReactElement;
     style?: CSSProperties;
 }
-declare class Container extends Component<ContainerProps> {
+declare class Container extends Component<PropsWithChildren<ContainerProps>> {
     static propTypes: {
         behaviour: PropTypes.Requireable<string>;
         groupName: PropTypes.Requireable<string>;
diff --git a/dist/src/Draggable.d.ts b/dist/src/Draggable.d.ts
index 7ddbb5b3b13d1ea61c59a2ced1205afdbc68b647..9783d0fc33f10b6a3944b17bbe6b2c6a0e9fc6f8 100644
--- a/dist/src/Draggable.d.ts
+++ b/dist/src/Draggable.d.ts
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 export interface DraggableProps {
     render?: () => React.ReactElement;
     className?: string;
 }
-declare class Draggable extends Component<DraggableProps> {
+declare class Draggable extends Component<PropsWithChildren<DraggableProps>> {
     static propsTypes: {
         render: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;

Can just run yarn patch yourself or copy this file into .yarn/patches . Dont forget to update the package.json with the patch 

"react-smooth-dnd": "patch:react-smooth-dnd@npm:0.11.1#../.yarn/patches/react-smooth-dnd-npm-0.11.1-2550ef032f.patch",
DoctorDib commented 2 years ago

Can confirm that adding extends Component<PropsWithChildren<DraggableProps>> and extends Component<PropsWithChildren<ContainerProps>> in there respected places does seem to fix the issue. Do we know when this fix / patch will be applied to the main branch?

MSSPL-KamalenduGarai commented 2 years ago

While suggested patch did work, a patched version will be lifesaver for many of us.

lqduy commented 1 month ago 
import Box from "@mui/material/Box"
import { Draggable as SmoothDraggable } from "react-smooth-dnd"
import { type ReactNode } from "react"
import { type SxProps } from "@mui/material"

interface TypeProps {
  children: ReactNode
  sx?: SxProps
}

const DndDraggable: React.FC<TypeProps> = ({ children, sx }) => {
  return <SmoothDraggable render={() => <Box sx={sx}>{children}</Box>} />
}

export default DndDraggable
  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.