Skip to content

Commit 284de89

Browse files
frontendphilfrontendphil
committed
clauderic#98 do not pass private props to wrapped component
- removed number of instance properties - removed unused method getHelperDimensions from props and class
1 parent 55ce2a0 commit 284de89

File tree

5 files changed

+79
-49
lines changed

5 files changed

+79
-49
lines changed

‎src/SortableContainer/index.js‎

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import React, {Component, PropTypes} from 'react';
22
import ReactDOM from 'react-dom';
3-
import Manager from '../Manager';
4-
import {closest, events, vendorPrefix, limit, getElementMargin} from '../utils';
3+
import { omit } from 'lodash'
54
import invariant from 'invariant';
65

6+
import Manager from '../Manager';
7+
import {closest, events, vendorPrefix, limit, getElementMargin, provideDisplayName} from '../utils';
8+
79
// Export Higher Order Sortable Container Component
8-
export default function SortableContainer(WrappedComponent, config = {withRef: false}) {
10+
export default function sortableContainer(WrappedComponent, config = {withRef: false}) {
911
return class extends Component {
1012
constructor(props) {
1113
super(props);
@@ -24,9 +26,7 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
2426
this.state = {};
2527
}
2628

27-
static displayName = (WrappedComponent.displayName) ? `SortableList(${WrappedComponent.displayName})` : 'SortableList';
28-
29-
static WrappedComponent = WrappedComponent;
29+
static displayName = provideDisplayName('sortableList', WrappedComponent);
3030

3131
static defaultProps = {
3232
axis: 'y',
@@ -43,11 +43,7 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
4343
}
4444
},
4545
lockToContainerEdges: false,
46-
lockOffset: '50%',
47-
getHelperDimensions: ({node}) => ({
48-
width: node.offsetWidth,
49-
height: node.offsetHeight
50-
})
46+
lockOffset: '50%'
5147
};
5248

5349
static propTypes = {
@@ -71,8 +67,7 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
7167
PropTypes.string,
7268
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
7369
]),
74-
getContainer: PropTypes.func,
75-
getHelperDimensions: PropTypes.func
70+
getContainer: PropTypes.func
7671
};
7772

7873
static childContextTypes = {
@@ -168,22 +163,17 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
168163
const active = this.manager.getActive();
169164

170165
if (active) {
171-
const {axis, onSortStart, helperClass, hideSortableGhost, useWindowAsScrollContainer, getHelperDimensions} = this.props;
166+
const {axis, onSortStart, helperClass, hideSortableGhost, useWindowAsScrollContainer} = this.props;
172167
let {node, collection} = active;
173168
const {index} = node.sortableInfo;
174169
const margin = getElementMargin(node);
175170

176171
const containerBoundingRect = this.container.getBoundingClientRect();
177-
const dimensions = getHelperDimensions({index, node, collection})
178172

179173
this.node = node;
180-
this.width = dimensions.width
181-
this.height = dimensions.height
182174
this.margin = margin;
183175
this.width = node.offsetWidth;
184176
this.height = node.offsetHeight;
185-
this.halfWidth = this.width / 2;
186-
this.halfHeight = this.height / 2;
187177
this.marginOffset = {
188178
x: this.margin.left + this.margin.right,
189179
y: Math.max(this.margin.top, this.margin.bottom)
@@ -219,12 +209,12 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
219209
this.minTranslate = {};
220210
this.maxTranslate = {};
221211
if (this.axis.x) {
222-
this.minTranslate.x = ((useWindowAsScrollContainer) ? 0 : containerBoundingRect.left) - this.boundingClientRect.left - this.halfWidth;
223-
this.maxTranslate.x = ((useWindowAsScrollContainer) ? this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - this.boundingClientRect.left - this.halfWidth;
212+
this.minTranslate.x = ((useWindowAsScrollContainer) ? 0 : containerBoundingRect.left) - this.boundingClientRect.left - (this.width / 2);
213+
this.maxTranslate.x = ((useWindowAsScrollContainer) ? this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - this.boundingClientRect.left - (this.width / 2);
224214
}
225215
if (this.axis.y) {
226-
this.minTranslate.y = ((useWindowAsScrollContainer) ? 0 : containerBoundingRect.top) - this.boundingClientRect.top - this.halfHeight;
227-
this.maxTranslate.y = ((useWindowAsScrollContainer) ? this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - this.boundingClientRect.top - this.halfHeight;
216+
this.minTranslate.y = ((useWindowAsScrollContainer) ? 0 : containerBoundingRect.top) - this.boundingClientRect.top - (this.height / 2);
217+
this.maxTranslate.y = ((useWindowAsScrollContainer) ? this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - this.boundingClientRect.top - (this.height / 2);
228218
}
229219

230220
if (helperClass) {
@@ -400,12 +390,12 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
400390
if (lockToContainerEdges) {
401391
const [minLockOffset, maxLockOffset] = this.getLockPixelOffsets();
402392
const minOffset = {
403-
x: this.halfWidth - minLockOffset.x,
404-
y: this.halfHeight - minLockOffset.y
393+
x: (this.width / 2) - minLockOffset.x,
394+
y: (this.height / 2) - minLockOffset.y
405395
};
406396
const maxOffset = {
407-
x: this.halfWidth - maxLockOffset.x,
408-
y: this.halfHeight - maxLockOffset.y
397+
x: (this.width / 2) - maxLockOffset.x,
398+
y: (this.height / 2) - maxLockOffset.y
409399
};
410400

411401
translate.x = limit(
@@ -449,12 +439,10 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
449439
let {node, edgeOffset} = nodes[i];
450440
const index = node.sortableInfo.index;
451441
const width = node.offsetWidth;
452-
const halfWidth = width / 2;
453442
const height = node.offsetHeight;
454-
const halfHeight = height / 2;
455443
const offset = {
456-
width: (this.width > width) ? halfWidth : this.halfWidth,
457-
height: (this.height > height) ? halfHeight : this.halfHeight
444+
width: (this.width > width) ? (width / 2) : (this.width / 2),
445+
height: (this.height > height) ? (height / 2) : (this.height / 2)
458446
};
459447
let translate = {
460448
x: 0,
@@ -580,21 +568,21 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
580568
y: 10
581569
};
582570

583-
if (translate.y >= this.maxTranslate.y - this.halfHeight) {
571+
if (translate.y >= this.maxTranslate.y - (this.height / 2)) {
584572
direction.y = 1; // Scroll Down
585-
speed.y = acceleration.y * Math.abs((this.maxTranslate.y - this.halfHeight - translate.y) / this.height);
573+
speed.y = acceleration.y * Math.abs((this.maxTranslate.y - (this.height / 2) - translate.y) / this.height);
586574
}
587-
else if (translate.x >= this.maxTranslate.x - this.halfWidth) {
575+
else if (translate.x >= this.maxTranslate.x - (this.width / 2)) {
588576
direction.x = 1; // Scroll Right
589-
speed.x = acceleration.x * Math.abs((this.maxTranslate.x - this.halfWidth - translate.x) / this.width);
577+
speed.x = acceleration.x * Math.abs((this.maxTranslate.x - (this.width / 2) - translate.x) / this.width);
590578
}
591-
else if (translate.y <= this.minTranslate.y + this.halfHeight) {
579+
else if (translate.y <= this.minTranslate.y + (this.height / 2)) {
592580
direction.y = -1; // Scroll Up
593-
speed.y = acceleration.y * Math.abs((translate.y - this.halfHeight - this.minTranslate.y) / this.height);
581+
speed.y = acceleration.y * Math.abs((translate.y - (this.height / 2) - this.minTranslate.y) / this.height);
594582
}
595-
else if (translate.x <= this.minTranslate.x + this.halfWidth) {
583+
else if (translate.x <= this.minTranslate.x + (this.width / 2)) {
596584
direction.x = -1; // Scroll Left
597-
speed.x = acceleration.x * Math.abs((translate.x - this.halfWidth - this.minTranslate.x) / this.width);
585+
speed.x = acceleration.x * Math.abs((translate.x - (this.width / 2) - this.minTranslate.x) / this.width);
598586
}
599587

600588
if (this.autoscrollInterval) {
@@ -627,7 +615,33 @@ export default function SortableContainer(WrappedComponent, config = {withRef: f
627615
render() {
628616
const ref = (config.withRef) ? 'wrappedInstance' : null;
629617

630-
return <WrappedComponent ref={ref} {...this.props} {...this.state} />;
618+
return (
619+
<WrappedComponent
620+
ref={ref}
621+
{...omit(this.props,
622+
'contentWindow',
623+
'useWindowAsScrollContainer',
624+
'distance',
625+
'helperClass',
626+
'hideSortableGhost',
627+
'transitionDuration',
628+
'useDragHandle',
629+
'pressDelay',
630+
631+
'shouldCancelStart',
632+
'onSortStart',
633+
'onSortMove',
634+
'onSortEnd',
635+
636+
'axis',
637+
'lockAxis',
638+
'lockOffset',
639+
'lockToContainerEdges',
640+
641+
'getContainer',
642+
)}
643+
/>
644+
);
631645
}
632646
};
633647
}

‎src/SortableElement/index.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, {Component, PropTypes} from 'react';
22
import {findDOMNode} from 'react-dom';
3+
import { omit } from 'lodash'
34
import invariant from 'invariant';
45

6+
import { provideDisplayName } from '../utils'
7+
58
// Export Higher Order Sortable Element Component
6-
export default function SortableElement (WrappedComponent, config = {withRef: false}) {
9+
export default function sortableElement (WrappedComponent, config = {withRef: false}) {
710
return class extends Component {
8-
static displayName = (WrappedComponent.displayName) ? `SortableElement(${WrappedComponent.displayName})` : 'SortableElement';
9-
10-
static WrappedComponent = WrappedComponent;
11+
static displayName = provideDisplayName('sortableElement', WrappedComponent);
1112

1213
static contextTypes = {
1314
manager: PropTypes.object.isRequired
@@ -75,8 +76,12 @@ export default function SortableElement (WrappedComponent, config = {withRef: fa
7576

7677
render() {
7778
const ref = (config.withRef) ? 'wrappedInstance' : null;
79+
7880
return (
79-
<WrappedComponent ref={ref} {...this.props} />
81+
<WrappedComponent
82+
ref={ref}
83+
{...omit(this.props, 'collection', 'disabled', 'index')}
84+
/>
8085
);
8186
}
8287
};

‎src/SortableHandle/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React, {Component} from 'react';
22
import {findDOMNode} from 'react-dom';
33
import invariant from 'invariant';
44

5+
import { provideDisplayName } from '../utils'
6+
57
// Export Higher Order Sortable Element Component
6-
export default function SortableHandle (WrappedComponent, config = {withRef: false}) {
8+
export default function sortableHandle (WrappedComponent, config = {withRef: false}) {
79
return class extends Component {
8-
static displayName = (WrappedComponent.displayName) ? `SortableHandle(${WrappedComponent.displayName})` : 'SortableHandle';
9-
10-
static WrappedComponent = WrappedComponent;
10+
static displayName = provideDisplayName('sortableHandle', WrappedComponent)
1111

1212
componentDidMount() {
1313
let node = findDOMNode(this);

‎src/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
export SortableContainer from './SortableContainer';
22
export SortableElement from './SortableElement';
33
export SortableHandle from './SortableHandle';
4+
5+
export sortableContainer from './SortableContainer';
6+
export sortableElement from './SortableElement';
7+
export sortableHandle from './SortableHandle';
8+
49
export {arrayMove} from './utils';

‎src/utils.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,9 @@ export function getElementMargin(element) {
6767
left: getCSSPixelValue(style.marginLeft)
6868
};
6969
}
70+
71+
export function provideDisplayName(prefix, Component) {
72+
const componentName = Component.displayName || Component.name
73+
74+
return componentName ? `${prefix}(${componentName})` : prefix;
75+
}

0 commit comments

Comments
 (0)