feat: 🎸 manual width prop (#56)

Author: diogofcunha

index.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 interface BasicNode {
   id: number | string;
   name: string;
-  state?: { [stateKey: string]: any };
+  state?: {[stateKey: string]: any};
 }
 
 export interface Node extends BasicNode {
@@ -20,35 +20,36 @@ export interface FlattenedNode extends Node {
 
 interface NodeAction {
   type: string;
-  node: FlattenedNode
+  node: FlattenedNode;
 }
 
 type onChange = (updateParams: NodeAction) => void;
 
 export interface Extensions {
-  updateTypeHandlers: { [type: number]: onChange }
+  updateTypeHandlers: {[type: number]: onChange};
 }
 
 export interface TreeProps {
   extensions: Extensions;
   nodes: Node[];
   onChange: (nodes: Node[]) => void;
-  children: (props: RendererProps) => JSX.Element
+  children: (props: RendererProps) => JSX.Element;
   nodeMarginLeft?: number;
+  width?: number;
   scrollToId?: number;
 }
 
 export default class Tree extends React.Component<TreeProps> {}
 
 export interface RendererProps {
   measure: () => void;
-  onChange: onChange,
-  node: FlattenedNode
+  onChange: onChange;
+  node: FlattenedNode;
 }
 
 declare const Deletable: React.SFC<RendererProps>;
 declare const Expandable: React.SFC<RendererProps>;
-declare const Favorite: React.SFC<RendererProps>
+declare const Favorite: React.SFC<RendererProps>;
 
 interface Renderers {
   Deletable: React.SFC<RendererProps>;
@@ -60,19 +61,19 @@ export const renderers: Renderers;
 
 export interface Group {
   filter: (node: Node) => boolean;
-  name: string
+  name: string;
 }
 
 interface GroupRendererProps {
   onChange: (c: string) => void;
-  groups: { [g: string]: Group };
+  groups: {[g: string]: Group};
   selectedGroup: string;
 }
 
 export interface FilteringContainerProps {
   children: (nodes: Node[]) => JSX.Element;
   debouncer: (func: (...p: any[]) => any, timeout: number) => void;
-  groups: { [g: string]: Group };
+  groups: {[g: string]: Group};
   selectedGroup: string;
   groupRenderer: React.StatelessComponent<GroupRendererProps> | React.Component<GroupRendererProps>;
   onSelectedGroupChange: (c: string) => void;
@@ -83,14 +84,14 @@ export class FilteringContainer extends React.Component<FilteringContainerProps>
 export enum UPDATE_TYPE {
   ADD = 0,
   DELETE = 1,
-  UPDATE = 2
+  UPDATE = 2,
 }
 
 interface Constants {
-  UPDATE_TYPE: UPDATE_TYPE
+  UPDATE_TYPE: UPDATE_TYPE;
 }
 
-export const constants: Constants
+export const constants: Constants;
 
 interface NodeRenderOptions {
   hasChildren: boolean;
@@ -101,16 +102,16 @@ interface NodeRenderOptions {
 
 export enum NODE_CHANGE_OPERATIONS {
   CHANGE_NODE = 'CHANGE_NODE',
-  DELETE_NODE = 'DELETE_NODE'
+  DELETE_NODE = 'DELETE_NODE',
 }
 
 interface Selectors {
-  getNodeRenderOptions: (node: FlattenedNode) => NodeRenderOptions,
-  replaceNodeFromTree: (nodes: Node[], updatedNode: FlattenedNode, operation?: NODE_CHANGE_OPERATIONS) => Node[],
-  deleteNodeFromTree: (nodes: Node[], nodeToDelete: FlattenedNode) => Node[],
-  deleteNode: (node: FlattenedNode[]) => NodeAction,
-  addNode: (node: FlattenedNode[]) => NodeAction,
-  updateNode: (node: FlattenedNode, state: { [stateKey: string]: any }) => NodeAction
+  getNodeRenderOptions: (node: FlattenedNode) => NodeRenderOptions;
+  replaceNodeFromTree: (nodes: Node[], updatedNode: FlattenedNode, operation?: NODE_CHANGE_OPERATIONS) => Node[];
+  deleteNodeFromTree: (nodes: Node[], nodeToDelete: FlattenedNode) => Node[];
+  deleteNode: (node: FlattenedNode[]) => NodeAction;
+  addNode: (node: FlattenedNode[]) => NodeAction;
+  updateNode: (node: FlattenedNode, state: {[stateKey: string]: any}) => NodeAction;
 }
 
 export const selectors: Selectors;

src/Tree.js

@@ -32,19 +32,19 @@ export default class Tree extends React.Component {
   };
 
   render() {
-    const {nodes, scrollToIndex} = this.props;
+    const {nodes, width, scrollToIndex} = this.props;
 
     return (
-      <AutoSizer>
-        {({height, width}) => (
+      <AutoSizer disableWidth={Boolean(width)}>
+        {({height, width: autoWidth}) => (
           <List
             deferredMeasurementCache={this._cache}
             ref={r => (this._list = r)}
             height={height}
             rowCount={nodes.length}
             rowHeight={this._cache.rowHeight}
             rowRenderer={this.measureRowRenderer(nodes)}
-            width={width}
+            width={width || autoWidth}
             scrollToIndex={scrollToIndex}
           />
         )}
@@ -58,4 +58,5 @@ Tree.propTypes = {
   NodeRenderer: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   nodeMarginLeft: PropTypes.number,
+  width: PropTypes.number,
 };

src/TreeContainer.js

@@ -42,9 +42,8 @@ export default class TreeContainer extends React.Component {
     this.props.onChange(updatedNodes);
   };
 
-  
   render() {
-    const flattenedTree = getFlattenedTree(this.props.nodes) 
+    const flattenedTree = getFlattenedTree(this.props.nodes);
     const rowIndex = getRowIndexFromId(flattenedTree, this.props.scrollToId);
     return (
       <Tree
@@ -66,6 +65,7 @@ TreeContainer.propTypes = {
   onChange: PropTypes.func,
   children: PropTypes.func.isRequired,
   nodeMarginLeft: PropTypes.number,
+  width: PropTypes.number,
   scrollToId: PropTypes.number,
 };
 

src/selectors/nodes.js

@@ -3,7 +3,7 @@ import omit from 'lodash.omit';
 
 import {UPDATE_TYPE} from '../contants';
 
-export { getFlattenedTree } from './getFlattenedTree';
+export {getFlattenedTree} from './getFlattenedTree';
 
 export const getNodeRenderOptions = createSelector(
   node => (node.state || {}).expanded,
@@ -89,5 +89,4 @@ export const addNode = node => ({
   type: UPDATE_TYPE.ADD,
 });
 
-export const getRowIndexFromId = (flattenedTree, id) => 
-  flattenedTree.findIndex((node) => node.id === id);
+export const getRowIndexFromId = (flattenedTree, id) => flattenedTree.findIndex(node => node.id === id);