feat: added helperContainer prop

Author: Claudéric Demers

README.md

@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
+    "@storybook/addon-options": "^4.1.4",
     "@storybook/react": "^4.1.4",
     "autoprefixer": "^6.3.6",
     "babel-loader": "^8.0.5",
@@ -69,16 +70,17 @@
     "husky": "^1.3.1",
     "lodash": "^4.12.0",
     "microbundle": "^0.9.0",
-    "node-sass": "^3.7.0",
-    "postcss-loader": "^0.9.1",
+    "node-sass": "^4.11.0",
+    "postcss": "^7.0.7",
+    "postcss-loader": "^3.0.0",
     "prettier": "^1.15.3",
     "pretty-quick": "^1.8.0",
-    "react": "^15.4.2",
+    "react": "^16.7.0",
     "react-addons-pure-render-mixin": "^15.0.2",
     "react-addons-shallow-compare": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.4.2",
-    "react-infinite": "^0.9.2",
+    "react-dom": "^16.7.0",
+    "react-infinite": "^0.13.0",
     "react-tiny-virtual-list": "^2.0.1",
     "react-virtualized": "^9.2.2",
     "sass-loader": "^7.1.0",

package.json

@@ -65,6 +65,26 @@ const SortableList = SortableContainer(
   },
 );
 
+class SortableListWithCustomContainer extends React.Component {
+  state = {
+    container: null,
+  };
+
+  render() {
+    const {container} = this.state;
+
+    return (
+      <div id="CustomHelperContainer" ref={this.setContainerNode}>
+        <SortableList {...this.props} helperContainer={container} />
+      </div>
+    );
+  }
+
+  setContainerNode = (node) => {
+    this.setState({container: node});
+  };
+}
+
 const Category = SortableElement((props) => {
   return (
     <div className={style.category}>
@@ -84,13 +104,11 @@ const Category = SortableElement((props) => {
 });
 
 class ListWrapper extends Component {
-  constructor({items}) {
-    super();
-    this.state = {
-      items,
-      isSorting: false,
-    };
-  }
+  state = {
+    items: this.props.items,
+    isSorting: false,
+  };
+
   static propTypes = {
     items: PropTypes.array,
     className: PropTypes.string,
@@ -102,12 +120,14 @@ class ListWrapper extends Component {
     component: PropTypes.func,
     shouldUseDragHandle: PropTypes.bool,
   };
+
   static defaultProps = {
     className: classNames(style.list, style.stylizedList),
     itemClass: classNames(style.item, style.stylizedItem),
     width: 400,
     height: 600,
   };
+
   onSortStart = () => {
     const {onSortStart} = this.props;
     this.setState({isSorting: true});
@@ -116,6 +136,7 @@ class ListWrapper extends Component {
       onSortStart(this.refs.component);
     }
   };
+
   onSortEnd = ({oldIndex, newIndex}) => {
     const {onSortEnd} = this.props;
     const {items} = this.state;
@@ -129,6 +150,7 @@ class ListWrapper extends Component {
       onSortEnd(this.refs.component);
     }
   };
+
   render() {
     const Component = this.props.component;
     const {items, isSorting} = this.state;
@@ -455,6 +477,15 @@ storiesOf('Advanced', module)
         helperClass={style.stylizedHelper}
       />
     );
+  })
+  .add('Custom sortable helper container', () => {
+    return (
+      <ListWrapper
+        component={SortableListWithCustomContainer}
+        items={getItems(50, 59)}
+        helperClass={style.stylizedHelper}
+      />
+    );
   });
 
 storiesOf('Customization', module)

src/.stories/index.js

@@ -105,6 +105,7 @@ export default function sortableContainer(
       ]),
       getContainer: PropTypes.func,
       getHelperDimensions: PropTypes.func,
+      helperContainer: PropTypes.instanceOf(HTMLElement),
     };
 
     static childContextTypes = {
@@ -350,7 +351,7 @@ export default function sortableContainer(
           }
         });
 
-        this.helper = this.document.body.appendChild(clonedNode);
+        this.helper = this.helperContainer.appendChild(clonedNode);
 
         this.helper.style.position = 'fixed';
         this.helper.style.top = `${this.boundingClientRect.top - margin.top}px`;
@@ -877,5 +878,9 @@ export default function sortableContainer(
         />
       );
     }
+
+    get helperContainer() {
+      return this.props.helperContainer || this.document.body;
+    }
   };
 }

src/SortableContainer/index.js

@@ -69,6 +69,7 @@ export interface SortableContainerProps {
   lockOffset?: Offset | [Offset, Offset];
   getContainer?: ContainerGetter;
   getHelperDimensions?: (sort: SortStart) => Dimensions;
+  helperContainer?: HTMLElement;
 }
 
 export interface SortableElementProps {