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.

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

RDG Tree Cell Expand Styling Issues. #1316

Merged
merged 9 commits into from
Oct 31, 2018
Merged

Conversation

JamesPortelli
Copy link
Contributor

@JamesPortelli JamesPortelli commented Oct 24, 2018

  • Modify styling so that Tree view with rows larger than 35px will be styled correctly.

  • Modify code and styles so that the Cell Exapnder will not be overlapped by the cell content.

@JamesPortelli JamesPortelli requested review from amanmahajan7 and malonecj and removed request for amanmahajan7 October 24, 2018 13:51
@JamesPortelli JamesPortelli self-assigned this Oct 24, 2018
@amanmahajan7
Copy link
Contributor

Can you catchup master, we just synced next and master

@JamesPortelli
Copy link
Contributor Author

Done @amanmahajan7

Copy link
Contributor

@amanmahajan7 amanmahajan7 left a comment

Choose a reason for hiding this comment

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

A few cleanup comments

if (this.canExpand()) {
cellExpander = <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />;
}

Copy link
Contributor

Choose a reason for hiding this comment

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

const cellExpander =  this.canExpand() && (
  <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />`
);

return (
<div className="react-grid-Cell__value">
{cellDeleter}
<div style={{ marginLeft: marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Shorthand property names can be used

<div style={{ marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}>

};
};
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@@ -1,68 +1,60 @@
import React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we rename the test file to CellExpander.spec.js to match the component file

expect(testElement.find('span.rdg-cell-expand').text()).toBe(CellExpand.DOWN_TRIANGLE);
const { wrapper } = setup({ expanded: true });

expect(wrapper.state('expanded')).toBeTruthy();
Copy link
Contributor

@amanmahajan7 amanmahajan7 Oct 29, 2018

Choose a reason for hiding this comment

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

Rather than setting the state, can we use simulate to mimic users behavior

wrapper.simulate('click'); // Not sure if this will work but the idea is to simulate a click event
expect(wrapper.find('span').text()).toBe(CellExpand.DOWN_TRIANGLE);

expect(testElement.find('span.rdg-cell-expand').text()).toBe(CellExpand.RIGHT_TRIANGLE);
const { wrapper } = setup({ expanded: false });

expect(wrapper.state('expanded')).toBeFalsy();
Copy link
Contributor

Choose a reason for hiding this comment

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

We should not test state, that is an implementation detail. If expanded variable name is changed then the tests should not break

wrapper.find('span').simulate('click');
expect(wrapper.state('expanded')).toBeTruthy();
wrapper.find('span').simulate('click');
expect(wrapper.state('expanded')).toBeFalsy();
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we can delete some of these tests and just check the span's text after the click event

@amanmahajan7 amanmahajan7 merged commit 08e500b into master Oct 31, 2018
@amanmahajan7 amanmahajan7 deleted the ja-rdg-tree-view-fixes branch October 31, 2018 13:20
malonecj pushed a commit that referenced this pull request Nov 15, 2018
* Fix cell actions exmaple.

* Fix styling issues for cell expansion and childrow indents.

* fix minor styling issue

* fix test

* remove f describe

* address comments

* address comments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants