implement kutlugsahin#94

Author: grahamplace

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@edorivai/react-smooth-dnd",
+  "name": "@grahamplace/react-smooth-dnd",
   "version": "0.11.2",
   "description": "Drag and Drop library",
   "main": "./dist/index.js",
@@ -29,7 +29,7 @@
   "license": "ISC",
   "repository": {
     "type": "git",
-    "url": "https://github.com/edorivai/react-smooth-dnd.git"
+    "url": "https://github.com/grahamplace/react-smooth-dnd.git"
   },
   "devDependencies": {
     "@babel/core": "7.3.4",

src/Container.tsx

@@ -1,41 +1,44 @@
-import React, { Component, CSSProperties } from 'react';
-import PropTypes from 'prop-types';
-import { smoothDnD as container, ContainerOptions, SmoothDnD } from 'smooth-dnd';
-import { dropHandlers } from 'smooth-dnd';
+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";
 
 container.dropHandler = dropHandlers.reactDropHandler().handler;
 container.wrapChild = false;
 
 interface ContainerProps extends ContainerOptions {
-	children: React.ReactNode;
-	render?: (rootRef: React.RefObject<any>) => React.ReactElement;
-	style?: CSSProperties;
+  render?: (rootRef: React.RefObject<any>) => React.ReactElement;
+  style?: CSSProperties;
 }
 
-class Container extends Component<ContainerProps> {
-	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<PropsWithChildren<ContainerProps>> {
+  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({
@@ -45,19 +48,19 @@ class Container extends Component<ContainerProps> {
       }),
       PropTypes.bool,
     ]),
-	};
+  };
 
-	public static defaultProps = {
-		behaviour: 'move',
-		orientation: 'vertical',
-	};
+  public static defaultProps = {
+    behaviour: "move",
+    orientation: "vertical",
+  };
 
-	prevContainer: null;
-	container: SmoothDnD = null!;
-	containerRef: React.RefObject<any> = React.createRef();
+  prevContainer: null;
+  container: SmoothDnD = null!;
+  containerRef: React.RefObject<any> = 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;
@@ -77,13 +80,16 @@ class Container extends Component<ContainerProps> {
     if (this.getContainer()) {
       if (this.prevContainer && this.prevContainer !== this.getContainer()) {
         this.container.dispose();
-        this.container = container(this.getContainer(), this.getContainerOptions());
+        this.container = container(
+          this.getContainer(),
+          this.getContainerOptions()
+        );
         this.prevContainer = this.getContainer();
         return;
       }
 
       if (this.isObjectTypePropsChanged(prevProps)) {
-        this.container.setOptions(this.getContainerOptions())
+        this.container.setOptions(this.getContainerOptions());
       }
     }
   }
@@ -96,7 +102,7 @@ class Container extends Component<ContainerProps> {
       if (containerOptions.hasOwnProperty(key)) {
         const prop = containerOptions[key];
 
-        if (typeof prop !== 'function' && prop !== prevProps[key]) {
+        if (typeof prop !== "function" && prop !== prevProps[key]) {
           return true;
         }
       }
@@ -107,35 +113,38 @@ class Container extends Component<ContainerProps> {
 
   render() {
     if (this.props.render) {
-			return this.props.render(this.containerRef);
+      return this.props.render(this.containerRef);
     } else {
       return (
         <div style={this.props.style} ref={this.containerRef}>
           {this.props.children}
         </div>
       );
     }
-	}
-	
+  }
+
   getContainer() {
-		return this.containerRef.current;
-	}
+    return this.containerRef.current;
+  }
 
   getContainerOptions(): ContainerOptions {
-    return Object.keys(this.props).reduce((result: ContainerOptions, key: string) => {
-      const optionName = key as keyof ContainerOptions;
-      const prop = this.props[optionName];
-
-      if (typeof prop === 'function') {
-        result[optionName] = (...params: any[]) => {
-          return (this.props[optionName] as Function)(...params);
+    return Object.keys(this.props).reduce(
+      (result: ContainerOptions, key: string) => {
+        const optionName = key as keyof ContainerOptions;
+        const prop = this.props[optionName];
+
+        if (typeof prop === "function") {
+          result[optionName] = (...params: any[]) => {
+            return (this.props[optionName] as Function)(...params);
+          };
+        } else {
+          result[optionName] = prop;
         }
-      } else {
-        result[optionName] = prop;
-      }
 
-      return result;
-    },{}) as ContainerOptions;
+        return result;
+      },
+      {}
+    ) as ContainerOptions;
   }
 }