Auto include collapse/expand icon for first column as a part of row component

This commit is contained in:
dannyrb 2020-05-11 21:17:22 -04:00 committed by James A. Petts
parent e3b0f60e69
commit 1b9c0fcfae
3 changed files with 29 additions and 22 deletions

View File

@ -1,13 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from './../Icon';
const StudyListTableRow = (props) => {
const StudyListTableRow = props => {
const { tableData } = props;
const { row, expandedContent, onClickRow, isExpanded } = tableData;
return (
<>
<tr>
<tr className="select-none">
<td
className={classnames('border-0 p-0', {
@ -34,7 +34,7 @@ const StudyListTableRow = (props) => {
)}
onClick={onClickRow}
>
{row.map((cell) => {
{row.map((cell, index) => {
const { content, gridCol, name } = cell;
return (
@ -45,8 +45,30 @@ const StudyListTableRow = (props) => {
{ 'border-b border-secondary-light': !isExpanded },
`w-${gridCol}/24` || ''
)}
style={{
maxWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
<div className="flex flex-row items-center pl-1">
<div
className="flex flex-row items-center pl-1"
style={{
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{index === 0 && (
<Icon
name={
isExpanded ? 'chevron-down' : 'chevron-right'
}
className="mr-4"
/>
)}
{content}
</div>
</td>

View File

@ -142,15 +142,7 @@ const StudyList = () => {
row: [
{
key: 'patientName',
content: (
<>
<Icon
name={isExpanded ? 'chevron-down' : 'chevron-right'}
className="mr-4"
/>
{PatientName}
</>
),
content: PatientName,
gridCol: 4,
},
{

View File

@ -62,6 +62,7 @@ function StudyListContainer({ history, data: studies }) {
skipEmptyString: true,
})}`,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedFilterValues]);
const filtersMeta = [
@ -163,15 +164,7 @@ function StudyListContainer({ history, data: studies }) {
row: [
{
key: 'patientName',
content: (
<>
<Icon
name={isExpanded ? 'chevron-down' : 'chevron-right'}
className="mr-4"
/>
{patientName}
</>
),
content: patientName,
gridCol: 4,
},
{