-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Conversation
Can you catchup master, we just synced next and master |
Done @amanmahajan7 |
There was a problem hiding this 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} />; | ||
} | ||
|
There was a problem hiding this comment.
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} />`
);
packages/react-data-grid/src/Cell.js
Outdated
return ( | ||
<div className="react-grid-Cell__value"> | ||
{cellDeleter} | ||
<div style={{ marginLeft: marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}> |
There was a problem hiding this comment.
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%)' }}>
}; | ||
}; |
There was a problem hiding this comment.
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'; |
There was a problem hiding this comment.
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(); |
There was a problem hiding this comment.
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(); |
There was a problem hiding this comment.
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(); |
There was a problem hiding this comment.
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
* 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
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.