diff --git a/src/Container.tsx b/src/Container.tsx index bb78d98..05b0c2c 100644 --- a/src/Container.tsx +++ b/src/Container.tsx @@ -1,4 +1,4 @@ -import React, { Component, CSSProperties } from 'react'; +import React, { Component, CSSProperties, PropsWithChildren } from 'react'; import PropTypes from 'prop-types'; import { smoothDnD as container, ContainerOptions, SmoothDnD } from 'smooth-dnd'; import { dropHandlers } from 'smooth-dnd'; @@ -7,34 +7,34 @@ container.dropHandler = dropHandlers.reactDropHandler().handler; container.wrapChild = false; interface ContainerProps extends ContainerOptions { - render?: (rootRef: React.RefObject) => React.ReactElement; - style?: CSSProperties; + render?: (rootRef: React.RefObject) => React.ReactElement; + style?: CSSProperties; } -class Container extends Component { - public static propTypes = { - behaviour: PropTypes.oneOf(['move', 'copy', 'drop-zone', 'contain']), - groupName: PropTypes.string, - orientation: PropTypes.oneOf(['horizontal', 'vertical']), - style: PropTypes.object, - dragHandleSelector: PropTypes.string, - nonDragAreaSelector: PropTypes.string, - dragBeginDelay: PropTypes.number, - animationDuration: PropTypes.number, - autoScrollEnabled: PropTypes.bool, - lockAxis: PropTypes.string, - dragClass: PropTypes.string, - dropClass: PropTypes.string, - onDragStart: PropTypes.func, - onDragEnd: PropTypes.func, - onDrop: PropTypes.func, - getChildPayload: PropTypes.func, - shouldAnimateDrop: PropTypes.func, - shouldAcceptDrop: PropTypes.func, - onDragEnter: PropTypes.func, - onDragLeave: PropTypes.func, - render: PropTypes.func, - getGhostParent: PropTypes.func, +class Container extends Component> { + public static propTypes = { + behaviour: PropTypes.oneOf(['move', 'copy', 'drop-zone', 'contain']), + groupName: PropTypes.string, + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + style: PropTypes.object, + dragHandleSelector: PropTypes.string, + nonDragAreaSelector: PropTypes.string, + dragBeginDelay: PropTypes.number, + animationDuration: PropTypes.number, + autoScrollEnabled: PropTypes.bool, + lockAxis: PropTypes.string, + dragClass: PropTypes.string, + dropClass: PropTypes.string, + onDragStart: PropTypes.func, + onDragEnd: PropTypes.func, + onDrop: PropTypes.func, + getChildPayload: PropTypes.func, + shouldAnimateDrop: PropTypes.func, + shouldAcceptDrop: PropTypes.func, + onDragEnter: PropTypes.func, + onDragLeave: PropTypes.func, + render: PropTypes.func, + getGhostParent: PropTypes.func, removeOnDropOut: PropTypes.bool, dropPlaceholder: PropTypes.oneOfType([ PropTypes.shape({ @@ -44,19 +44,19 @@ class Container extends Component { }), PropTypes.bool, ]), - }; + }; - public static defaultProps = { - behaviour: 'move', - orientation: 'vertical', - }; + public static defaultProps = { + behaviour: 'move', + orientation: 'vertical', + }; - prevContainer: null; - container: SmoothDnD = null!; - containerRef: React.RefObject = React.createRef(); + prevContainer: null; + container: SmoothDnD = null!; + containerRef: React.RefObject = React.createRef(); constructor(props: ContainerProps) { super(props); - this.getContainerOptions = this.getContainerOptions.bind(this); + this.getContainerOptions = this.getContainerOptions.bind(this); this.getContainer = this.getContainer.bind(this); this.isObjectTypePropsChanged = this.isObjectTypePropsChanged.bind(this); this.prevContainer = null; @@ -106,7 +106,7 @@ class Container extends Component { render() { if (this.props.render) { - return this.props.render(this.containerRef); + return this.props.render(this.containerRef); } else { return (
@@ -114,11 +114,11 @@ class Container extends Component {
); } - } - + } + getContainer() { - return this.containerRef.current; - } + return this.containerRef.current; + } getContainerOptions(): ContainerOptions { return Object.keys(this.props).reduce((result: ContainerOptions, key: string) => { @@ -134,7 +134,7 @@ class Container extends Component { } return result; - },{}) as ContainerOptions; + }, {}) as ContainerOptions; } } diff --git a/src/Draggable.tsx b/src/Draggable.tsx index b7e121e..1509e4c 100644 --- a/src/Draggable.tsx +++ b/src/Draggable.tsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, PropsWithChildren } from 'react'; import PropTypes from 'prop-types'; import { constants } from 'smooth-dnd'; const { @@ -10,7 +10,7 @@ export interface DraggableProps { className?: string; } -class Draggable extends Component { +class Draggable extends Component> { public static propsTypes = { render: PropTypes.func, className: PropTypes.string, @@ -20,7 +20,7 @@ class Draggable extends Component { if (this.props.render) { return React.cloneElement(this.props.render(), { className: wrapperClass }); } - + const clsName = `${this.props.className ? (this.props.className + ' ') : ''}` return (