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
diogofcunha · Jan 18, 2019 · 7bd3101 · 7bd3101
1 parent e979d95
commit 7bd3101
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 75 deletions.
diff --git a/demo/src/examples/Basic/index.js b/demo/src/examples/Basic/index.js
@@ -107,7 +107,7 @@ class BasicTree extends Component {
             <Header as="h4">Ouput tree</Header>
             <div style={{height: 200}}>
               <Tree nodes={this.state.nodes} onChange={this.handleChange}>
-                {p => this.createNodeRenderer(this.state.selectedRenderers, p)}
+                {({style, ...p}) => <div style={style}>{this.createNodeRenderer(this.state.selectedRenderers, p)}</div>}
               </Tree>
             </div>
           </Grid.Column>

diff --git a/demo/src/examples/ChangeRenderers.js b/demo/src/examples/ChangeRenderers.js
@@ -19,18 +19,20 @@ class ChangeRenderers extends Component {
   render() {
     return (
       <Tree nodes={this.state.nodes} onChange={this.handleChange}>
-        {({node, ...rest}) => (
-          <Expandable
-            node={node}
-            {...rest}
-            iconsClassNameMap={{
-              expanded: 'mi mi-folder-open',
-              collapsed: 'mi mi-folder',
-              lastChild: 'mi mi-insert-drive-file',
-            }}
-          >
-            {node.name}
-          </Expandable>
+        {({style, node, ...rest}) => (
+          <div style={style}>
+            <Expandable
+              node={node}
+              {...rest}
+              iconsClassNameMap={{
+                expanded: 'mi mi-folder-open',
+                collapsed: 'mi mi-folder',
+                lastChild: 'mi mi-insert-drive-file',
+              }}
+            >
+              {node.name}
+            </Expandable>
+          </div>
         )}
       </Tree>
     );

diff --git a/demo/src/examples/Extensions.js b/demo/src/examples/Extensions.js
@@ -85,12 +85,14 @@ class Extensions extends Component {
           },
         }}
       >
-        {({node, ...rest}) => (
-          <Expandable node={node} {...rest}>
-            <Selection node={node} {...rest}>
-              {node.name}
-            </Selection>
-          </Expandable>
+        {({style, node, ...rest}) => (
+          <div style={style}>
+            <Expandable node={node} {...rest}>
+              <Selection node={node} {...rest}>
+                {node.name}
+              </Selection>
+            </Expandable>
+          </div>
         )}
       </Tree>
     );

diff --git a/demo/src/examples/Filterable.js b/demo/src/examples/Filterable.js
@@ -74,12 +74,14 @@ class Filterable extends Component {
           {({nodes}) => (
             <div style={{height: 500}}>
               <Tree nodes={nodes} onChange={this.handleChange}>
-                {({node, ...rest}) => (
-                  <Expandable node={node} {...rest}>
-                    <Favorite node={node} {...rest}>
-                      {node.name}
-                    </Favorite>
-                  </Expandable>
+                {({style, node, ...rest}) => (
+                  <div style={style}>
+                    <Expandable node={node} {...rest}>
+                      <Favorite node={node} {...rest}>
+                        {node.name}
+                      </Favorite>
+                    </Expandable>
+                  </div>
                 )}
               </Tree>
             </div>

diff --git a/demo/src/examples/LargeCollection.js b/demo/src/examples/LargeCollection.js
@@ -29,13 +29,15 @@ class LargeCollection extends Component {
   render() {
     return (
       <Tree nodes={this.state.nodes} onChange={this.handleChange}>
-        {({node, ...rest}) => (
-          <Expandable node={node} {...rest}>
-            {node.name}
-            <Deletable node={node} {...rest}>
-              <Favorite node={node} {...rest} />
-            </Deletable>
-          </Expandable>
+        {({style, node, ...rest}) => (
+          <div style={style}>
+            <Expandable node={node} {...rest}>
+              {node.name}
+              <Deletable node={node} {...rest}>
+                <Favorite node={node} {...rest} />
+              </Deletable>
+            </Expandable>
+          </div>
         )}
       </Tree>
     );

diff --git a/demo/src/examples/NodeMeasure.js b/demo/src/examples/NodeMeasure.js
@@ -140,10 +140,12 @@ class NodeMeasure extends Component {
   render() {
     return (
       <Tree nodes={this.state.nodes} onChange={this.handleChange}>
-        {p => (
-          <FootballPlayerRenderer {...p}>
-            <Expandable {...p} />
-          </FootballPlayerRenderer>
+        {({style, ...p}) => (
+          <div style={style}>
+            <FootballPlayerRenderer {...p}>
+              <Expandable {...p} />
+            </FootballPlayerRenderer>
+          </div>
         )}
       </Tree>
     );

diff --git a/demo/src/examples/Renderers.js b/demo/src/examples/Renderers.js
@@ -24,10 +24,12 @@ class Renderers extends Component {
   render() {
     return (
       <Tree nodes={Nodes}>
-        {({node, ...rest}) => (
-          <Deepness node={node} {...rest}>
-            {node.name}
-          </Deepness>
+        {({style, node, ...rest}) => (
+          <div style={style}>
+            <Deepness node={node} {...rest}>
+              {node.name}
+            </Deepness>
+          </div>
         )}
       </Tree>
     );

diff --git a/demo/src/examples/WorldCup.js b/demo/src/examples/WorldCup.js
@@ -83,21 +83,23 @@ class WorldCupExample extends Component {
   render() {
     return (
       <Tree nodes={this.state.nodes} onChange={this.handleChange}>
-        {({node, ...rest}) => {
+        {({style, node, ...rest}) => {
           const country = countries[node.id] && countries[node.id].flag.toLowerCase();
 
           return (
-            <Expandable node={node} {...rest}>
-              {country && <span className={`flag-icon flag-icon-${country}`} />}
-              <span
-                style={{
-                  marginLeft: 7,
-                  fontWeight: !country ? 'bold' : 'normal',
-                }}
-              >
-                {node.name}
-              </span>
-            </Expandable>
+            <div style={style}>
+              <Expandable node={node} {...rest}>
+                {country && <span className={`flag-icon flag-icon-${country}`} />}
+                <span
+                  style={{
+                    marginLeft: 7,
+                    fontWeight: !country ? 'bold' : 'normal',
+                  }}
+                >
+                  {node.name}
+                </span>
+              </Expandable>
+            </div>
           );
         }}
       </Tree>

diff --git a/index.d.ts b/index.d.ts
@@ -46,6 +46,7 @@ export interface RendererProps<T> {
   onChange: (updateParams: NodeAction) => void;
   node: FlattenedNode;
   iconsClassNameMap?: T;
+  style: React.CSSProperties;
   children?: React.ReactNode;
 }
 

diff --git a/src/Tree.js b/src/Tree.js
@@ -14,9 +14,18 @@ export default class Tree extends React.Component {
     const {nodeMarginLeft} = this.props;
 
     return (
-      <div key={key} className="tree-node" style={{...style, marginLeft: node.deepness * nodeMarginLeft}}>
-        <NodeRenderer node={node} onChange={this.props.onChange} measure={measure} />
-      </div>
+      <NodeRenderer
+        key={key}
+        style={{
+          ...style,
+          marginLeft: node.deepness * nodeMarginLeft,
+          userSelect: 'none',
+          cursor: 'pointer',
+        }}
+        node={node}
+        onChange={this.props.onChange}
+        measure={measure}
+      />
     );
   };
 

diff --git a/src/__tests__/__snapshots__/Tree.test.js.snap b/src/__tests__/__snapshots__/Tree.test.js.snap
@@ -67,6 +67,11 @@ Object {
     },
   },
   "onChange": [MockFunction],
+  "style": Object {
+    "cursor": "pointer",
+    "marginLeft": NaN,
+    "userSelect": "none",
+  },
 }
 `;
 

diff --git a/src/main.css b/src/main.css
@@ -1,32 +1,27 @@
-.tree-node {
-  user-select: none;
-  cursor: pointer;
-}
-
 .tree-lookup-input {
   font-size: 1em;
   position: relative;
   font-weight: 400;
   font-style: normal;
-  color: rgba(0,0,0,.87);
+  color: rgba(0, 0, 0, 0.87);
 }
 
 .tree-lookup-input input {
   width: 100%;
   margin: 0;
   outline: 0;
-  -webkit-tap-highlight-color: rgba(255,255,255,0);
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   text-align: left;
   line-height: 1.21428571em;
-  padding: .7em 1em;
+  padding: 0.7em 1em;
   background: #fff;
-  border: 1px solid rgba(34,36,38,.15);
-  color: rgba(0,0,0,.87);
-  border-radius: .28571429rem;
-  -webkit-transition: box-shadow .1s ease,border.1s ease;
-  transition: box-shadow .1s ease, border .1s ease;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  -webkit-transition: box-shadow 0.1s ease, border.1s ease;
+  transition: box-shadow 0.1s ease, border 0.1s ease;
   box-shadow: none;
-  padding-right: 2.67142857em!important;
+  padding-right: 2.67142857em !important;
   margin-bottom: 7px;
 }
 
@@ -37,20 +32,20 @@
 .tree-lookup-input input:focus {
   border: 1px solid #85b7d9;
   background: #fff;
-  color: rgba(0,0,0,.8);
+  color: rgba(0, 0, 0, 0.8);
   box-shadow: none;
 }
 
 .tree-lookup-input i {
   margin-left: -3em;
-  padding: .7em 1em;
-  color: rgba(0,0,0,.3);
+  padding: 0.7em 1em;
+  color: rgba(0, 0, 0, 0.3);
   cursor: text;
 }
 
 .tree-filter-container {
-  border: 1px solid rgba(0, 0, 0, .3);
-  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   padding: 2%;
 }
 
@@ -62,5 +57,5 @@
   cursor: pointer;
   border: 1px solid #2185d0;
   font-weight: 700;
-  padding: .7em 1em;
+  padding: 0.7em 1em;
 }