Skip to content

Commit 7bd3101

Browse files
diogofcunhadiogofcunha
committed
feat: 🎸 injected node styles as children prop
Injecting sugestion style as prop on the node children function rather then setting it BREAKING CHANGE: as nodes are not wrapped in a styled div anymore, styles need to be assigned on the node render from now on Issues: #49
1 parent e979d95 commit 7bd3101

File tree

12 files changed

+99
-75
lines changed

12 files changed

+99
-75
lines changed

‎demo/src/examples/Basic/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ class BasicTree extends Component {
107107
<Header as="h4">Ouput tree</Header>
108108
<div style={{height: 200}}>
109109
<Tree nodes={this.state.nodes} onChange={this.handleChange}>
110-
{p => this.createNodeRenderer(this.state.selectedRenderers, p)}
110+
{({style, ...p}) => <div style={style}>{this.createNodeRenderer(this.state.selectedRenderers, p)}</div>}
111111
</Tree>
112112
</div>
113113
</Grid.Column>

‎demo/src/examples/ChangeRenderers.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,20 @@ class ChangeRenderers extends Component {
1919
render() {
2020
return (
2121
<Tree nodes={this.state.nodes} onChange={this.handleChange}>
22-
{({node, ...rest}) => (
23-
<Expandable
24-
node={node}
25-
{...rest}
26-
iconsClassNameMap={{
27-
expanded: 'mi mi-folder-open',
28-
collapsed: 'mi mi-folder',
29-
lastChild: 'mi mi-insert-drive-file',
30-
}}
31-
>
32-
{node.name}
33-
</Expandable>
22+
{({style, node, ...rest}) => (
23+
<div style={style}>
24+
<Expandable
25+
node={node}
26+
{...rest}
27+
iconsClassNameMap={{
28+
expanded: 'mi mi-folder-open',
29+
collapsed: 'mi mi-folder',
30+
lastChild: 'mi mi-insert-drive-file',
31+
}}
32+
>
33+
{node.name}
34+
</Expandable>
35+
</div>
3436
)}
3537
</Tree>
3638
);

‎demo/src/examples/Extensions.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,14 @@ class Extensions extends Component {
8585
},
8686
}}
8787
>
88-
{({node, ...rest}) => (
89-
<Expandable node={node} {...rest}>
90-
<Selection node={node} {...rest}>
91-
{node.name}
92-
</Selection>
93-
</Expandable>
88+
{({style, node, ...rest}) => (
89+
<div style={style}>
90+
<Expandable node={node} {...rest}>
91+
<Selection node={node} {...rest}>
92+
{node.name}
93+
</Selection>
94+
</Expandable>
95+
</div>
9496
)}
9597
</Tree>
9698
);

‎demo/src/examples/Filterable.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,14 @@ class Filterable extends Component {
7474
{({nodes}) => (
7575
<div style={{height: 500}}>
7676
<Tree nodes={nodes} onChange={this.handleChange}>
77-
{({node, ...rest}) => (
78-
<Expandable node={node} {...rest}>
79-
<Favorite node={node} {...rest}>
80-
{node.name}
81-
</Favorite>
82-
</Expandable>
77+
{({style, node, ...rest}) => (
78+
<div style={style}>
79+
<Expandable node={node} {...rest}>
80+
<Favorite node={node} {...rest}>
81+
{node.name}
82+
</Favorite>
83+
</Expandable>
84+
</div>
8385
)}
8486
</Tree>
8587
</div>

‎demo/src/examples/LargeCollection.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,15 @@ class LargeCollection extends Component {
2929
render() {
3030
return (
3131
<Tree nodes={this.state.nodes} onChange={this.handleChange}>
32-
{({node, ...rest}) => (
33-
<Expandable node={node} {...rest}>
34-
{node.name}
35-
<Deletable node={node} {...rest}>
36-
<Favorite node={node} {...rest} />
37-
</Deletable>
38-
</Expandable>
32+
{({style, node, ...rest}) => (
33+
<div style={style}>
34+
<Expandable node={node} {...rest}>
35+
{node.name}
36+
<Deletable node={node} {...rest}>
37+
<Favorite node={node} {...rest} />
38+
</Deletable>
39+
</Expandable>
40+
</div>
3941
)}
4042
</Tree>
4143
);

‎demo/src/examples/NodeMeasure.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,12 @@ class NodeMeasure extends Component {
140140
render() {
141141
return (
142142
<Tree nodes={this.state.nodes} onChange={this.handleChange}>
143-
{p => (
144-
<FootballPlayerRenderer {...p}>
145-
<Expandable {...p} />
146-
</FootballPlayerRenderer>
143+
{({style, ...p}) => (
144+
<div style={style}>
145+
<FootballPlayerRenderer {...p}>
146+
<Expandable {...p} />
147+
</FootballPlayerRenderer>
148+
</div>
147149
)}
148150
</Tree>
149151
);

‎demo/src/examples/Renderers.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ class Renderers extends Component {
2424
render() {
2525
return (
2626
<Tree nodes={Nodes}>
27-
{({node, ...rest}) => (
28-
<Deepness node={node} {...rest}>
29-
{node.name}
30-
</Deepness>
27+
{({style, node, ...rest}) => (
28+
<div style={style}>
29+
<Deepness node={node} {...rest}>
30+
{node.name}
31+
</Deepness>
32+
</div>
3133
)}
3234
</Tree>
3335
);

‎demo/src/examples/WorldCup.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,23 @@ class WorldCupExample extends Component {
8383
render() {
8484
return (
8585
<Tree nodes={this.state.nodes} onChange={this.handleChange}>
86-
{({node, ...rest}) => {
86+
{({style, node, ...rest}) => {
8787
const country = countries[node.id] && countries[node.id].flag.toLowerCase();
8888

8989
return (
90-
<Expandable node={node} {...rest}>
91-
{country && <span className={`flag-icon flag-icon-${country}`} />}
92-
<span
93-
style={{
94-
marginLeft: 7,
95-
fontWeight: !country ? 'bold' : 'normal',
96-
}}
97-
>
98-
{node.name}
99-
</span>
100-
</Expandable>
90+
<div style={style}>
91+
<Expandable node={node} {...rest}>
92+
{country && <span className={`flag-icon flag-icon-${country}`} />}
93+
<span
94+
style={{
95+
marginLeft: 7,
96+
fontWeight: !country ? 'bold' : 'normal',
97+
}}
98+
>
99+
{node.name}
100+
</span>
101+
</Expandable>
102+
</div>
101103
);
102104
}}
103105
</Tree>

‎index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export interface RendererProps<T> {
4646
onChange: (updateParams: NodeAction) => void;
4747
node: FlattenedNode;
4848
iconsClassNameMap?: T;
49+
style: React.CSSProperties;
4950
children?: React.ReactNode;
5051
}
5152

‎src/Tree.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,18 @@ export default class Tree extends React.Component {
1414
const {nodeMarginLeft} = this.props;
1515

1616
return (
17-
<div key={key} className="tree-node" style={{...style, marginLeft: node.deepness * nodeMarginLeft}}>
18-
<NodeRenderer node={node} onChange={this.props.onChange} measure={measure} />
19-
</div>
17+
<NodeRenderer
18+
key={key}
19+
style={{
20+
...style,
21+
marginLeft: node.deepness * nodeMarginLeft,
22+
userSelect: 'none',
23+
cursor: 'pointer',
24+
}}
25+
node={node}
26+
onChange={this.props.onChange}
27+
measure={measure}
28+
/>
2029
);
2130
};
2231

0 commit comments

Comments
 (0)