Skip to content

Commit 204e803

Browse files
fritz-cfritz-c
authored
Merge pull request #73 from fritz-c/react-16-compat
Make components stateful for compatibility with react@16 / react-dnd.
2 parents 9a77452 + ccef3cc commit 204e803

File tree

2 files changed

+249
-234
lines changed

2 files changed

+249
-234
lines changed

‎src/node-renderer-default.js

+124-120
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PropTypes } from 'react';
1+
import React, { Component, PropTypes } from 'react';
22
import { getIEVersion } from './utils/browser-utils';
33
import baseStyles from './node-renderer-default.scss';
44
import { isDescendant } from './utils/tree-data-utils';
@@ -15,139 +15,143 @@ if (getIEVersion < 10) {
1515
};
1616
}
1717

18-
const NodeRendererDefault = ({
19-
scaffoldBlockPxWidth,
20-
toggleChildrenVisibility,
21-
connectDragPreview,
22-
connectDragSource,
23-
isDragging,
24-
canDrop,
25-
node,
26-
draggedNode,
27-
path,
28-
treeIndex,
29-
isSearchMatch,
30-
isSearchFocus,
31-
buttons,
32-
className,
33-
style = {},
34-
didDrop,
35-
isOver: _isOver, // Not needed, but preserved for other renderers
36-
parentNode: _parentNode, // Needed for drag-and-drop utils
37-
endDrag: _endDrag, // Needed for drag-and-drop utils
38-
startDrag: _startDrag, // Needed for drag-and-drop utils
39-
...otherProps,
40-
}) => {
41-
let handle;
42-
if (typeof node.children === 'function' && node.expanded) {
43-
// Show a loading symbol on the handle when the children are expanded
44-
// and yet still defined by a function (a callback to fetch the children)
45-
handle = (
46-
<div className={styles.loadingHandle}>
47-
<div className={styles.loadingCircle}>
48-
<div className={styles.loadingCirclePoint} />
49-
<div className={styles.loadingCirclePoint} />
50-
<div className={styles.loadingCirclePoint} />
51-
<div className={styles.loadingCirclePoint} />
52-
<div className={styles.loadingCirclePoint} />
53-
<div className={styles.loadingCirclePoint} />
54-
<div className={styles.loadingCirclePoint} />
55-
<div className={styles.loadingCirclePoint} />
56-
<div className={styles.loadingCirclePoint} />
57-
<div className={styles.loadingCirclePoint} />
58-
<div className={styles.loadingCirclePoint} />
59-
<div className={styles.loadingCirclePoint} />
60-
</div>
61-
</div>
62-
);
63-
} else {
64-
// Show the handle used to initiate a drag-and-drop
65-
handle = connectDragSource((
66-
<div className={styles.moveHandle} />
67-
), { dropEffect: 'copy' });
68-
}
18+
class NodeRendererDefault extends Component {
19+
render() {
20+
const {
21+
scaffoldBlockPxWidth,
22+
toggleChildrenVisibility,
23+
connectDragPreview,
24+
connectDragSource,
25+
isDragging,
26+
canDrop,
27+
node,
28+
draggedNode,
29+
path,
30+
treeIndex,
31+
isSearchMatch,
32+
isSearchFocus,
33+
buttons,
34+
className,
35+
style = {},
36+
didDrop,
37+
isOver: _isOver, // Not needed, but preserved for other renderers
38+
parentNode: _parentNode, // Needed for drag-and-drop utils
39+
endDrag: _endDrag, // Needed for drag-and-drop utils
40+
startDrag: _startDrag, // Needed for drag-and-drop utils
41+
...otherProps,
42+
} = this.props;
6943

70-
const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
71-
const isLandingPadActive = !didDrop && isDragging;
44+
let handle;
45+
if (typeof node.children === 'function' && node.expanded) {
46+
// Show a loading symbol on the handle when the children are expanded
47+
// and yet still defined by a function (a callback to fetch the children)
48+
handle = (
49+
<div className={styles.loadingHandle}>
50+
<div className={styles.loadingCircle}>
51+
<div className={styles.loadingCirclePoint} />
52+
<div className={styles.loadingCirclePoint} />
53+
<div className={styles.loadingCirclePoint} />
54+
<div className={styles.loadingCirclePoint} />
55+
<div className={styles.loadingCirclePoint} />
56+
<div className={styles.loadingCirclePoint} />
57+
<div className={styles.loadingCirclePoint} />
58+
<div className={styles.loadingCirclePoint} />
59+
<div className={styles.loadingCirclePoint} />
60+
<div className={styles.loadingCirclePoint} />
61+
<div className={styles.loadingCirclePoint} />
62+
<div className={styles.loadingCirclePoint} />
63+
</div>
64+
</div>
65+
);
66+
} else {
67+
// Show the handle used to initiate a drag-and-drop
68+
handle = connectDragSource((
69+
<div className={styles.moveHandle} />
70+
), { dropEffect: 'copy' });
71+
}
7272

73-
return (
74-
<div
75-
style={{ height: '100%' }}
76-
{...otherProps}
77-
>
78-
{toggleChildrenVisibility && node.children && node.children.length > 0 && (
79-
<div>
80-
<button
81-
aria-label={node.expanded ? 'Collapse' : 'Expand'}
82-
className={node.expanded ? styles.collapseButton : styles.expandButton}
83-
style={{ left: -0.5 * scaffoldBlockPxWidth }}
84-
onClick={() => toggleChildrenVisibility({node, path, treeIndex})}
85-
/>
73+
const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
74+
const isLandingPadActive = !didDrop && isDragging;
8675

87-
{node.expanded && !isDragging &&
88-
<div
89-
style={{ width: scaffoldBlockPxWidth }}
90-
className={styles.lineChildren}
76+
return (
77+
<div
78+
style={{ height: '100%' }}
79+
{...otherProps}
80+
>
81+
{toggleChildrenVisibility && node.children && node.children.length > 0 && (
82+
<div>
83+
<button
84+
aria-label={node.expanded ? 'Collapse' : 'Expand'}
85+
className={node.expanded ? styles.collapseButton : styles.expandButton}
86+
style={{ left: -0.5 * scaffoldBlockPxWidth }}
87+
onClick={() => toggleChildrenVisibility({node, path, treeIndex})}
9188
/>
92-
}
93-
</div>
94-
)}
9589

96-
<div className={styles.rowWrapper}>
97-
{/* Set the row preview to be used during drag and drop */}
98-
{connectDragPreview(
99-
<div
100-
className={styles.row +
101-
(isLandingPadActive ? ` ${styles.rowLandingPad}` : '') +
102-
(isLandingPadActive && !canDrop ? ` ${styles.rowCancelPad}` : '') +
103-
(isSearchMatch ? ` ${styles.rowSearchMatch}` : '') +
104-
(isSearchFocus ? ` ${styles.rowSearchFocus}` : '') +
105-
(className ? ` ${className}` : '')
90+
{node.expanded && !isDragging &&
91+
<div
92+
style={{ width: scaffoldBlockPxWidth }}
93+
className={styles.lineChildren}
94+
/>
10695
}
107-
style={{
108-
opacity: isDraggedDescendant ? 0.5 : 1,
109-
...style,
110-
}}
111-
>
112-
{handle}
96+
</div>
97+
)}
11398

114-
<div className={styles.rowContents}>
115-
<div className={styles.rowLabel}>
116-
<span
117-
className={styles.rowTitle +
118-
(node.subtitle ? ` ${styles.rowTitleWithSubtitle}` : '')
119-
}
120-
>
121-
{typeof node.title === 'function' ?
122-
node.title({node, path, treeIndex }) :
123-
node.title
124-
}
125-
</span>
99+
<div className={styles.rowWrapper}>
100+
{/* Set the row preview to be used during drag and drop */}
101+
{connectDragPreview(
102+
<div
103+
className={styles.row +
104+
(isLandingPadActive ? ` ${styles.rowLandingPad}` : '') +
105+
(isLandingPadActive && !canDrop ? ` ${styles.rowCancelPad}` : '') +
106+
(isSearchMatch ? ` ${styles.rowSearchMatch}` : '') +
107+
(isSearchFocus ? ` ${styles.rowSearchFocus}` : '') +
108+
(className ? ` ${className}` : '')
109+
}
110+
style={{
111+
opacity: isDraggedDescendant ? 0.5 : 1,
112+
...style,
113+
}}
114+
>
115+
{handle}
126116

127-
{node.subtitle &&
128-
<span className={styles.rowSubtitle}>
129-
{typeof node.subtitle === 'function' ?
130-
node.subtitle({node, path, treeIndex }) :
131-
node.subtitle
117+
<div className={styles.rowContents}>
118+
<div className={styles.rowLabel}>
119+
<span
120+
className={styles.rowTitle +
121+
(node.subtitle ? ` ${styles.rowTitleWithSubtitle}` : '')
122+
}
123+
>
124+
{typeof node.title === 'function' ?
125+
node.title({node, path, treeIndex }) :
126+
node.title
132127
}
133128
</span>
134-
}
135-
</div>
136129

137-
<div className={styles.rowToolbar}>
138-
{buttons && buttons.map((btn, index) => (
139-
<div key={index} className={styles.toolbarButton}>
140-
{btn}
141-
</div>
142-
))}
130+
{node.subtitle &&
131+
<span className={styles.rowSubtitle}>
132+
{typeof node.subtitle === 'function' ?
133+
node.subtitle({node, path, treeIndex }) :
134+
node.subtitle
135+
}
136+
</span>
137+
}
138+
</div>
139+
140+
<div className={styles.rowToolbar}>
141+
{buttons && buttons.map((btn, index) => (
142+
<div key={index} className={styles.toolbarButton}>
143+
{btn}
144+
</div>
145+
))}
146+
</div>
143147
</div>
144148
</div>
145-
</div>
146-
)}
149+
)}
150+
</div>
147151
</div>
148-
</div>
149-
);
150-
};
152+
);
153+
}
154+
}
151155

152156
NodeRendererDefault.propTypes = {
153157
node: PropTypes.object.isRequired,

0 commit comments

Comments
 (0)