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

+1-1
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

+14-12
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

+8-6
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

+8-6
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

+9-7
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

+6-4
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

+6-4
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

+14-12
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

+1
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

+12-3
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

‎src/__tests__/__snapshots__/Tree.test.js.snap

+5
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ Object {
6767
},
6868
},
6969
"onChange": [MockFunction],
70+
"style": Object {
71+
"cursor": "pointer",
72+
"marginLeft": NaN,
73+
"userSelect": "none",
74+
},
7075
}
7176
`;
7277

‎src/main.css

+15-20
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
1-
.tree-node {
2-
user-select: none;
3-
cursor: pointer;
4-
}
5-
61
.tree-lookup-input {
72
font-size: 1em;
83
position: relative;
94
font-weight: 400;
105
font-style: normal;
11-
color: rgba(0,0,0,.87);
6+
color: rgba(0, 0, 0, 0.87);
127
}
138

149
.tree-lookup-input input {
1510
width: 100%;
1611
margin: 0;
1712
outline: 0;
18-
-webkit-tap-highlight-color: rgba(255,255,255,0);
13+
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
1914
text-align: left;
2015
line-height: 1.21428571em;
21-
padding: .7em 1em;
16+
padding: 0.7em 1em;
2217
background: #fff;
23-
border: 1px solid rgba(34,36,38,.15);
24-
color: rgba(0,0,0,.87);
25-
border-radius: .28571429rem;
26-
-webkit-transition: box-shadow .1s ease,border.1s ease;
27-
transition: box-shadow .1s ease, border .1s ease;
18+
border: 1px solid rgba(34, 36, 38, 0.15);
19+
color: rgba(0, 0, 0, 0.87);
20+
border-radius: 0.28571429rem;
21+
-webkit-transition: box-shadow 0.1s ease, border.1s ease;
22+
transition: box-shadow 0.1s ease, border 0.1s ease;
2823
box-shadow: none;
29-
padding-right: 2.67142857em!important;
24+
padding-right: 2.67142857em !important;
3025
margin-bottom: 7px;
3126
}
3227

@@ -37,20 +32,20 @@
3732
.tree-lookup-input input:focus {
3833
border: 1px solid #85b7d9;
3934
background: #fff;
40-
color: rgba(0,0,0,.8);
35+
color: rgba(0, 0, 0, 0.8);
4136
box-shadow: none;
4237
}
4338

4439
.tree-lookup-input i {
4540
margin-left: -3em;
46-
padding: .7em 1em;
47-
color: rgba(0,0,0,.3);
41+
padding: 0.7em 1em;
42+
color: rgba(0, 0, 0, 0.3);
4843
cursor: text;
4944
}
5045

5146
.tree-filter-container {
52-
border: 1px solid rgba(0, 0, 0, .3);
53-
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
47+
border: 1px solid rgba(0, 0, 0, 0.3);
48+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
5449
padding: 2%;
5550
}
5651

@@ -62,5 +57,5 @@
6257
cursor: pointer;
6358
border: 1px solid #2185d0;
6459
font-weight: 700;
65-
padding: .7em 1em;
60+
padding: 0.7em 1em;
6661
}

0 commit comments

Comments
 (0)