Comments (10)
@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.
from react-smooth-dnd.
@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}</>} />;
})}
</>
)}
/>
from react-smooth-dnd.
While suggested patch did work, a patched version will be lifesaver for many of us.
from react-smooth-dnd.
Hi, is there any update on this cause I am having the same issue.
from react-smooth-dnd.
@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>;
})}
</>
)}
/>
from react-smooth-dnd.
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",
from react-smooth-dnd.
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.
<div className="card-scene"> <Container orientation="horizontal" onDrop={this.onColumnDrop} dragHandleSelector=".column-drag-handle" dropPlaceholder={{ animationDuration: 150, showOnTop: true, className: 'cards-drop-preview', }} render={() => ( <div> {this.state.scene.children.map((column: any) => { return ( <Draggable key={column.id} render={() => ( <div className={column.props.className}> <div className="card-column-header"> <span className="column-drag-handle">☰</span> {column.name} </div> <Container {...column.props} groupName="col" onDragStart={e => 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={() => ( <div> {column.children.map((card: any) => { return ( <Draggable key={card.id} render={() => ( <div {...card.props}> <p>{card.data}</p> </div> )} /> ); })} </div> )} /> </div> )} /> ); })} </div> )} /> </div>
However, now I have errors in the console.
from react-smooth-dnd.
@pmoieni do the same to Draggabe children, the component also has the prop "render"
from react-smooth-dnd.
@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
from react-smooth-dnd.
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?
from react-smooth-dnd.
Related Issues (20)
- Native touch scroll is blocked after touch/scroll on the react-smooth-dnd HOT 1
- Does it support html tables? HOT 3
- shouldAcceptDrop not detecting that element is dragged over HOT 10
- Is the license correct at MIT?
- Draggable render ref HOT 1
- Documentation for functional components? HOT 1
- Cannot read property 'setDraggables' of undefined HOT 4
- Why I click the dragabled Item will trigger drag event?
- Container control on dynamic fields HOT 1
- onDrop returning invalid addedIndex and removedIndex HOT 1
- Functional components
- horizontal scroll not working when using infinite scroll HOT 3
- Flickering issue HOT 2
- Question about getContainerOptions
- Please fix "Property 'children' does not exist on type 'IntrinsicAttributes'"
- Performance issue
- How to use payload on onDragEnd Or return dragged element
- 为什么我写的onDrop方法的 addedIndex不是正确的数组的index,像是随机的一样
- Uncaught TypeError: Cannot read properties of undefined (reading 'setDraggables')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-smooth-dnd.