Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Prop spreading for Tree #264

Merged
merged 1 commit into from
Jan 19, 2019
Merged

fix: Prop spreading for Tree #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions src/Tree/Tree.Component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,10 @@ export const TreeComponent = () => {

<Properties properties={[
{ name: 'headers', description: 'array of strings for the column headers of the tree' },
{ name: 'treeData', description: 'array of objects that contain several properties, id (the id of the row), values (an array of strings containing data for each column in the row), hasChildren(a boolean value whether the row contains children or not) and children (an array of objects containing additional rows).' }
{ name: 'treeData', description: 'array of objects that contain several properties, id (the id of the row), values (an array of strings containing data for each column in the row), hasChildren(a boolean value whether the row contains children or not) and children (an array of objects containing additional rows).' },
{ name: 'headerProps', description: 'object - additional props to be spread to the header element.' },
{ name: 'headerButtonProps', description: 'object - additional props to be spread to the header expand button element.' },
{ name: 'listProps', description: 'object - additional props to be spread to the list element.' }
]} type='Inputs' />

<Separator />
Expand Down Expand Up @@ -188,12 +191,14 @@ export const TreeComponent = () => {
<Properties properties={[
{ name: 'displayText', description: 'The text to display in the cell. If omitted, the link url will be displayed.' },
{ name: 'linkUrl', description: 'If provided, this is the URL the link will navigate to.' }

]} type='Properties' />

<Properties properties={[
{ name: 'headers', description: 'Array of strings for the column headers of the tree' },
{ name: 'treeData', description: ' Array of objects that contain several properties, id(the id of the row), hasChildren(a boolean value whether the row contains children or not), values (an array of objects containing data for each column in the row), and children (an array of objects containing additional rows).' }

{ name: 'treeData', description: ' Array of objects that contain several properties, id(the id of the row), hasChildren(a boolean value whether the row contains children or not), values (an array of objects containing data for each column in the row), and children (an array of objects containing additional rows).' },
{ name: 'headerProps', description: 'object - additional props to be spread to the header element.' },
{ name: 'headerButtonProps', description: 'object - additional props to be spread to the header expand button element.' },
{ name: 'listProps', description: 'object - additional props to be spread to the list element.' }
]} type='Inputs' />
<Separator />
<DocsTile>
Expand Down
22 changes: 14 additions & 8 deletions src/Tree/Tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export class Tree extends Component {
role='treeitem'>
<div className='fd-tree__row'>
{parent}
{<Dropdown isContextual />}
{<Dropdown />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did we ever get an answer on this isContexual prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, @chrismanciero found a commit where it was removed from Dropdown, but apparently just missed in a few of the places that called it.

</div>
{tree}
</li>
Expand All @@ -163,7 +163,7 @@ export class Tree extends Component {
role='treeitem'>
<div className='fd-tree__row'>
{parent}
{<Dropdown isContextual />}
{<Dropdown />}
</div>
{tree}
</li>
Expand All @@ -174,10 +174,10 @@ export class Tree extends Component {
};

render() {
const { headers, treeData } = this.props;
const { headers, treeData, headerProps, headerButtonProps, listProps, ...props } = this.props;
return (
<div>
<div className='fd-tree fd-tree--header'>
<div {...props}>
<div {...headerProps} className='fd-tree fd-tree--header'>
<div className='fd-tree__row fd-tree__row--header'>
{headers.map((header, index) => {
if (headers.indexOf(header) === 0) {
Expand All @@ -186,6 +186,7 @@ export class Tree extends Component {
className='fd-tree__col fd-tree__col--control'
key={index}>
<button
{...headerButtonProps}
aria-label='expand'
aria-pressed={this.state.expandAllClicked}
className='fd-tree__control '
Expand All @@ -202,15 +203,17 @@ export class Tree extends Component {
})}
</div>
</div>

<ul className='fd-tree' id=''
<ul
{...listProps}
className='fd-tree'
role='tree'>
{this.createTreeList(treeData)}
</ul>
</div>
);
}
}

Tree.propTypes = {
treeData: PropTypes.arrayOf(
PropTypes.shape({
Expand All @@ -220,6 +223,9 @@ Tree.propTypes = {
children: PropTypes.array
}).isRequired
).isRequired,
headerButtonProps: PropTypes.object,
headerProps: PropTypes.object,
headers: PropTypes.arrayOf(PropTypes.string),
id: PropTypes.string
id: PropTypes.string,
listProps: PropTypes.object
};
56 changes: 47 additions & 9 deletions src/Tree/Tree.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,28 +216,66 @@ describe('<Tree />', () => {
});

describe('Prop spreading', () => {
xtest('should allow props to be spread to the Tree component', () => {
// TODO: placeholder for this test description once that functionality is built
const data = [
];
test('should allow props to be spread to the Tree component', () => {
const data = [];
const element = mount(
<Tree
data-sample='Sample'
headers={defaultHeaders}
treeData={data} />)
;
;

expect(
element.getDOMNode().attributes['data-sample'].value
).toBe('Sample');
});

xtest('should allow props to be spread to the Tree component\'s ul element', () => {
// TODO: placeholder for this test description once that functionality is built
test('should allow props to be spread to the Tree component\'s header element', () => {
const data = [];
const element = mount(
<Tree
headerProps={{
'data-sample': 'Sample'
}}
headers={defaultHeaders}
treeData={data} />)
;

expect(
element.find('.fd-tree--header').getDOMNode().attributes['data-sample'].value
).toBe('Sample');
});

xtest('should allow props to be spread to the Tree component\'s button elements', () => {
// TODO: placeholder for this test description once that functionality is built
test('should allow props to be spread to the Tree component\'s header button elements', () => {
const data = [];
const element = mount(
<Tree
headerButtonProps={{
'data-sample': 'Sample'
}}
headers={defaultHeaders}
treeData={data} />)
;

expect(
element.find('.fd-tree--header button').getDOMNode().attributes['data-sample'].value
).toBe('Sample');
});

test('should allow props to be spread to the Tree component\'s list element', () => {
const data = [];
const element = mount(
<Tree
headers={defaultHeaders}
listProps={{
'data-sample': 'Sample'
}}
treeData={data} />)
;

expect(
element.find('ul.fd-tree').getDOMNode().attributes['data-sample'].value
).toBe('Sample');
});
});
});
8 changes: 0 additions & 8 deletions src/Tree/__snapshots__/Tree.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ exports[`<Tree /> create tree component 1`] = `
</div>
<ul
className="fd-tree"
id=""
role="tree"
>
<li
Expand Down Expand Up @@ -77,7 +76,6 @@ exports[`<Tree /> create tree component 1`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down Expand Up @@ -117,7 +115,6 @@ exports[`<Tree /> create tree component 1`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down Expand Up @@ -151,7 +148,6 @@ exports[`<Tree /> create tree component 1`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down Expand Up @@ -196,7 +192,6 @@ exports[`<Tree /> create tree component 1`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down Expand Up @@ -242,7 +237,6 @@ exports[`<Tree /> create tree component 2`] = `
</div>
<ul
className="fd-tree"
id=""
role="tree"
>
<li
Expand Down Expand Up @@ -286,7 +280,6 @@ exports[`<Tree /> create tree component 2`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down Expand Up @@ -326,7 +319,6 @@ exports[`<Tree /> create tree component 2`] = `
</div>
<div
className="fd-dropdown"
isContextual={true}
/>
</div>
</li>
Expand Down