-
-
- {showChildren && (
-
- {node.children.map(child => {
- const childProps = {
- className,
- style,
- expandedNodeIds,
- node: child,
- onClick,
- depth: depth + 1,
- iconSize,
- headerMarginLeft,
- selectedNodeId,
- decorators,
- };
-
- return NodeDecorator ? (
-
- ) : (
-
- );
- })}
-
- )}
-
-
- );
-};
-
-Node.propTypes = {
- className: PropTypes.string,
- style: PropTypes.object,
- node: nodePropType,
- onClick: PropTypes.func,
- expandedNodeIds: PropTypes.arrayOf(PropTypes.string),
- depth: PropTypes.number,
- iconSize: PropTypes.number,
- headerMarginLeft: PropTypes.number,
- selectedNodeId: PropTypes.string,
- decorators: decoratorsPropType.isRequired,
-};
-
-Node.defaultProps = {
- className: '',
- style: undefined,
- node: { id: '', name: '', children: [] },
- onClick: undefined,
- expandedNodeIds: [],
- depth: 0,
- iconSize: 24,
- headerMarginLeft: 10,
- selectedNodeId: undefined,
- decorators: {
- Container,
- Toggle,
- Header,
- },
-};
-
-export { Node };
diff --git a/src/Node/Node.stories.jsx b/src/Node/Node.stories.jsx
deleted file mode 100644
index 9c08361..0000000
--- a/src/Node/Node.stories.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-
-import { dummyNode } from '../stories/node';
-import { Node } from './Node';
-
-class StatefulNode extends React.Component {
- state = {
- expandedNodeIds: [],
- };
-
- toggle = node =>
- this.setState(({ expandedNodeIds }) => ({
- expandedNodeIds: expandedNodeIds.includes(node.id)
- ? expandedNodeIds.filter(id => id !== node.id)
- : [...expandedNodeIds, node.id],
- }));
-
- render() {
- const { expandedNodeIds } = this.state;
-
- return
+
onClick(node)}
+ >
+ {!noIndent && }
+ {!CustomRenderContent && }
+ {CustomRenderContent && }
+
+ {customRenderChildren &&
+ customRenderChildren({ node, depth, ...rest, isExpanded, hasChildren, indentLeft })}
+ {!customRenderChildren && (
+
+ {showChildren && (
+
+ {node.children.map(child => (
+
+ ))}
+
+ )}
+
+ )}
+
+ );
+};
+
+Row.propTypes = {
+ /** CSS classes for the 'root' div and the 'content' div that wraps `renderContent` */
+ classes: PropTypes.shape({
+ root: PropTypes.string,
+ content: PropTypes.string,
+ }),
+ /** Inline styles for convenience */
+ styles: PropTypes.shape({
+ root: PropTypes.object,
+ content: PropTypes.object,
+ }),
+ /** object map where the kays are the ids of the expanded rows. The values just need to be truthy/falsy */
+ expandedRowIds: PropTypes.object,
+ /** @returns {Object} props that will be given to VelocityTransitionGroup */
+ getAnimation: PropTypes.func,
+ /** Size of the Toggle icon */
+ iconSize: PropTypes.number,
+ node: nodePropType,
+ /**
+ * Renders the content of this row (except child nodes)
+ * Receives all the props of the component plus `isExpanded`, `hasChildren` and `indentLeft`
+ */
+ renderContent: PropTypes.func,
+ /**
+ * Renders the div (VelocityTransitionGroup) containing the child nodes
+ * Receives the same props as `renderContent`
+ * Use this to replace the recursive mapping, or the transitions
+ */
+ renderChildren: PropTypes.func,
+ /** The current depth of this row, used to calculate indentLeft given to `renderContent` */
+ depth: PropTypes.number,
+ /**
+ * Do not apply paddingLeft according to depth.
+ * You may want to apply paddingLeft in renderContent depending on how you
+ * need to implement margins and padding
+ * */
+ noIndent: PropTypes.bool,
+};
+
+Row.defaultProps = {
+ classes: {
+ root: '',
+ content: '',
+ },
+ styles: {
+ root: undefined,
+ content: undefined,
+ },
+ expandedRowIds: {},
+ getAnimation: animations.node,
+ iconSize: 24,
+ node: defaultNode,
+ renderContent: undefined,
+ renderChildren: undefined,
+ depth: 0,
+ noIndent: false,
+};
+
+export { Row };
diff --git a/src/Row/Row.stories.jsx b/src/Row/Row.stories.jsx
new file mode 100644
index 0000000..88607f0
--- /dev/null
+++ b/src/Row/Row.stories.jsx
@@ -0,0 +1,128 @@
+import './rowStories.scss';
+
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+
+import { Cell } from '../Cell';
+import { RowLayout } from '../RowLayout';
+import { dummyNode } from '../stories/node';
+import { WithExpandedRowIdsState } from '../stories/WithExpandedRowIdsState';
+import { Toggle } from '../Toggle';
+import { Row } from './Row';
+
+storiesOf('Row', module)
+ .addDecorator(storyFn =>