Merge pull request #892 from lmachens/lm-fix-dynamic-remount

fix: dynamic isDraggable and isResizable remount

css/styles.css

@@ -55,3 +55,7 @@
   border-right: 2px solid rgba(0, 0, 0, 0.4);
   border-bottom: 2px solid rgba(0, 0, 0, 0.4);
 }
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}

lib/GridItem.jsx

@@ -267,9 +267,13 @@ export default class GridItem extends React.Component<Props, State> {
    * @param  {Element} child    Child element.
    * @return {Element}          Child wrapped in Draggable.
    */
-  mixinDraggable(child: ReactElement<any>): ReactElement<any> {
+  mixinDraggable(
+    child: ReactElement<any>,
+    isDraggable: boolean
+  ): ReactElement<any> {
     return (
       <DraggableCore
+        disabled={!isDraggable}
         onStart={this.onDragStart}
         onDrag={this.onDrag}
         onStop={this.onDragStop}
@@ -293,7 +297,8 @@ export default class GridItem extends React.Component<Props, State> {
    */
   mixinResizable(
     child: ReactElement<any>,
-    position: Position
+    position: Position,
+    isResizable: boolean
   ): ReactElement<any> {
     const { cols, x, minW, minH, maxW, maxH, transformScale } = this.props;
     const positionParams = this.getPositionParams();
@@ -311,6 +316,10 @@ export default class GridItem extends React.Component<Props, State> {
     ];
     return (
       <Resizable
+        draggableOpts={{
+          disabled: !isResizable
+        }}
+        className={isResizable ? undefined : "react-resizable-hide"}
         width={position.width}
         height={position.height}
         minConstraints={minConstraints}
@@ -552,10 +561,10 @@ export default class GridItem extends React.Component<Props, State> {
     });
 
     // Resizable support. This is usually on but the user can toggle it off.
-    if (isResizable) newChild = this.mixinResizable(newChild, pos);
+    newChild = this.mixinResizable(newChild, pos, isResizable);
 
     // Draggable support. This is always on, except for with placeholders.
-    if (isDraggable) newChild = this.mixinDraggable(newChild);
+    newChild = this.mixinDraggable(newChild, isDraggable);
 
     return newChild;
   }