Encapsulate the row rendering logic in a separate component #27
Conversation
sherrif10
changed the title
|
hey @sherrif10 do you mind fixing the build errors |
|
Fixed linters cc @jabahum |
There was a problem hiding this comment.
Thanks @sherrif10 just one more tweak before we can get this in
| <TableCell> | ||
| <span>{formatDate(parseDate(dateActivated))}</span> | ||
| </TableCell> |
There was a problem hiding this comment.
add class to make the cell display date on a single line
There was a problem hiding this comment.
@sherrif10 and @pirupius hopefully the actions button will also be in a single line
|
@sherrif10 to avoid lint errors just make sure to run yarn verify before pushing to confirm everything is fine |
| .single-line-date { | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .single-line-action { | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
This is duplication. You can change the class name to something more generic and reuse it in both scenarios
There was a problem hiding this comment.
@sherrif10 please update the PR description with the latest screenshot
There was a problem hiding this comment.
@pirupius i added the lasted screen shot.
There was a problem hiding this comment.
@sherrif10 your screenshot shows the date breaking to the next line. The date should be on a single line.
There was a problem hiding this comment.
@sherrif10 You can use something like this in the class you added
white-space: nowrap;
src/queue-list/laboratory-queue.scss
Outdated
| } | ||
|
|
||
| .table { |
There was a problem hiding this comment.
Let's change this to something more intentional and also not to conflict with other usages. What do u think of changing it to .single-line-display
| @@ -111,7 +111,9 @@ const LaboratoryPatientList: React.FC<LaboratoryPatientListProps> = () => { | |||
| date: { | |||
| content: ( | |||
| <> | |||
| <span>{formatDate(parseDate(entry.dateActivated))}</span> | |||
| <span className={styles.table}> | |||
Requirements
Summary
Screenshots
Related Issue
Other
I introduced CustomTableRow Component which Promotes a cleaner and more modular structure by encapsulating the row rendering logic in a CustomTableRow component.
Also i did some code refactory makes it easier to manage the changes in the structure of the table.
Though the initial approach also has an advantage in the way that it makes each table cell individually defined which makes customization little easy than this approach which is more generic. Let me know your suggestions. cc @denniskigen @pirupius @jabahum . Thanks.