From bbdecf1161b64656bb4fd8c65ebd1b73d4bc917b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 May 2016 23:11:33 +0100 Subject: [PATCH 1/3] Fix nasty bug where all Panes could end up sharing the same static style If you don't specify an explicit style prop for Panes, then the Object.assign in the motion cycle assigns to the static default {} object shared by all Panes. This causes all the Panes to jump to the same position and overlap. This seems only noticeable if you disable effects. The fix is to clone the Pane's style property rather than direct-manipulating it. Also remove a needless spring interpolation if you have disabled effects. --- src/index.js | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index c55b422..af83d98 100644 --- a/src/index.js +++ b/src/index.js @@ -363,8 +363,8 @@ class SortablePane extends Component { y: !this.isHorizontal() ? mouse : 0, } : { - scale: spring(1, springConfig), - shadow: spring(0, springConfig), + scale: disableEffect ? 1 : spring(1, springConfig), + shadow: disableEffect ? 0 : spring(0, springConfig), x: this.isHorizontal() ? springPosition : 0, y: !this.isHorizontal() ? springPosition : 0, }; @@ -376,6 +376,21 @@ class SortablePane extends Component { const onTouchStart = this.handleTouchStart.bind(this, i, x, y); const onResizeStart = this.handleResizeStart.bind(this, i); const onResizeStop = this.handleResizeStop.bind(this, i); + + // take a copy rather than direct-manipulating the child's prop, which violates React + // and causes problems if the child's prop is a static default {}, which then will be + // shared across all children! + var customStyle = Object.assign({}, child.props.style); + Object.assign(customStyle, { + boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`, + transform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + WebkitTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + MozTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + MsTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + zIndex: i === lastPressed ? 99 : i, // TODO: Add this.props.zIndex + position: 'absolute', + }); + return ( Date: Tue, 24 May 2016 23:19:17 +0100 Subject: [PATCH 2/3] fix indentation --- src/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index af83d98..4fde044 100644 --- a/src/index.js +++ b/src/index.js @@ -382,13 +382,13 @@ class SortablePane extends Component { // shared across all children! var customStyle = Object.assign({}, child.props.style); Object.assign(customStyle, { - boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`, - transform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, - WebkitTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, - MozTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, - MsTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, - zIndex: i === lastPressed ? 99 : i, // TODO: Add this.props.zIndex - position: 'absolute', + boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`, + transform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + WebkitTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + MozTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + MsTransform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`, + zIndex: i === lastPressed ? 99 : i, // TODO: Add this.props.zIndex + position: 'absolute', }); return ( From 465a58325ddd417a635f29027d437ad2cce90c3a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 24 May 2016 23:21:56 +0100 Subject: [PATCH 3/3] fix lint --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 4fde044..08b9bf4 100644 --- a/src/index.js +++ b/src/index.js @@ -380,7 +380,7 @@ class SortablePane extends Component { // take a copy rather than direct-manipulating the child's prop, which violates React // and causes problems if the child's prop is a static default {}, which then will be // shared across all children! - var customStyle = Object.assign({}, child.props.style); + const customStyle = Object.assign({}, child.props.style); Object.assign(customStyle, { boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`, transform: `translate3d(${x}px, ${y}px, 0px) scale(${scale})`,