Skip to content

Commit 18c884f

Browse files
anjenkinanjenkin
authored
Merge pull request #244 from fedspendingtransparency/fix/DEV12825-dtui
DEV-12825 fix mobile dom table
2 parents 25d4115 + 04fdd1c commit 18c884f

File tree

138 files changed

+239
-151
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+239
-151
lines changed

‎components/table/MobileRowSlider.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const MobileRowSlider = (props) => {
6464
<div className="usda-table__cell-heading">{props.columns[j].displayName}</div>
6565
</div>
6666
)}
67-
<div>
67+
<div className="usda-table__cell-text">
6868
{data}
6969
</div>
7070
</div>

‎components/table/Table.jsx‎

Lines changed: 103 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -137,57 +137,116 @@ const Table = ({
137137
options={union(getTablePickerOptionsAsc, getTablePickerOptionsDesc)} />
138138
</div>
139139
)}
140-
<table className={`usda-table ${stackedClass} ${classNames}`}>
141-
{screenReaderCaption && (
142-
<caption className="usa-dt-sr-only">{screenReaderCaption}</caption>
140+
{isStacked && isMobile
141+
? (
142+
<div className={`usda-table ${stackedClass} ${classNames}`}>
143+
{screenReaderCaption && (
144+
<caption className="usa-dt-sr-only">{screenReaderCaption}</caption>
145+
)}
146+
{highlightedColumns
147+
&& (
148+
<colgroup>
149+
<col span={highlightedColumns.standardColumns} />
150+
<col span={highlightedColumns.highlightedColumns} className="usda-table__body-special-color" />
151+
</colgroup>
143152
)}
144-
{highlightedColumns
153+
<div className="usda-table__head">
154+
<div className="usda-table__row" style={{ height: headerRowHeight }}>
155+
{columns.map((col, index) => (
156+
<TableHeader
157+
key={uniqueId()}
158+
currentSort={currentSort}
159+
updateSort={updateSort}
160+
stickyFirstColumn={stickyFirstColumn}
161+
highlightedColumns={highlightedColumns}
162+
index={index}
163+
isMobile={isMobile}
164+
isStacked={isStacked}
165+
{...col} />
166+
))}
167+
</div>
168+
<div className="usda-table__row">
169+
{columns
170+
.filter((col) => col?.subColumnNames?.length)
171+
.reduce((acc, col) => {
172+
if (col?.subColumnNames?.length) {
173+
return acc.concat(col.subColumnNames);
174+
}
175+
return acc.concat([{
176+
...col, displayName: '', className: 'empty-subheader'
177+
}]);
178+
}, [])
179+
.map((col, index) => (
180+
<TableHeader
181+
key={uniqueId()}
182+
className={col?.title ? 'nested-header' : 'empty'}
183+
currentSort={currentSort}
184+
updateSort={updateSort}
185+
stickyFirstColumn={stickyFirstColumn}
186+
index={index}
187+
isMobile={isMobile}
188+
isStacked={isStacked}
189+
{...col} />
190+
))}
191+
</div>
192+
</div>
193+
<div className="usda-table__body">
194+
{body}
195+
</div>
196+
</div>
197+
) : (
198+
<table className={`usda-table ${stackedClass} ${classNames}`}>
199+
{screenReaderCaption && (
200+
<caption className="usa-dt-sr-only">{screenReaderCaption}</caption>
201+
)}
202+
{highlightedColumns
145203
&& (
146204
<colgroup>
147205
<col span={highlightedColumns.standardColumns} />
148206
<col span={highlightedColumns.highlightedColumns} className="usda-table__body-special-color" />
149207
</colgroup>
150208
)}
151-
<thead className="usda-table__head">
152-
<tr className="usda-table__row" style={{ height: headerRowHeight }}>
153-
{columns.map((col, index) => (
154-
<TableHeader
155-
key={uniqueId()}
156-
currentSort={currentSort}
157-
updateSort={updateSort}
158-
stickyFirstColumn={stickyFirstColumn}
159-
highlightedColumns={highlightedColumns}
160-
index={index}
161-
{...col} />
162-
))}
163-
</tr>
164-
<tr className="usda-table__row">
165-
{columns
166-
.filter((col) => col?.subColumnNames?.length)
167-
.reduce((acc, col) => {
168-
if (col?.subColumnNames?.length) {
169-
return acc.concat(col.subColumnNames);
170-
}
171-
return acc.concat([{
172-
...col, displayName: '', className: 'empty-subheader'
173-
}]);
174-
}, [])
175-
.map((col, index) => (
176-
<TableHeader
177-
key={uniqueId()}
178-
className={col?.title ? 'nested-header' : 'empty'}
179-
currentSort={currentSort}
180-
updateSort={updateSort}
181-
stickyFirstColumn={stickyFirstColumn}
182-
index={index}
183-
{...col} />
184-
))}
185-
</tr>
186-
</thead>
187-
<tbody className="usda-table__body">
188-
{body}
189-
</tbody>
190-
</table>
209+
<thead className="usda-table__head">
210+
<tr className="usda-table__row" style={{ height: headerRowHeight }}>
211+
{columns.map((col, index) => (
212+
<TableHeader
213+
key={uniqueId()}
214+
currentSort={currentSort}
215+
updateSort={updateSort}
216+
stickyFirstColumn={stickyFirstColumn}
217+
highlightedColumns={highlightedColumns}
218+
index={index}
219+
{...col} />
220+
))}
221+
</tr>
222+
<tr className="usda-table__row">
223+
{columns
224+
.filter((col) => col?.subColumnNames?.length)
225+
.reduce((acc, col) => {
226+
if (col?.subColumnNames?.length) {
227+
return acc.concat(col.subColumnNames);
228+
}
229+
return acc.concat([{
230+
...col, displayName: '', className: 'empty-subheader'
231+
}]);
232+
}, [])
233+
.map((col, index) => (
234+
<TableHeader
235+
key={uniqueId()}
236+
className={col?.title ? 'nested-header' : 'empty'}
237+
currentSort={currentSort}
238+
updateSort={updateSort}
239+
stickyFirstColumn={stickyFirstColumn}
240+
index={index}
241+
{...col} />
242+
))}
243+
</tr>
244+
</thead>
245+
<tbody className="usda-table__body">
246+
{body}
247+
</tbody>
248+
</table>
249+
)}
191250
</>
192251
);
193252
};

‎components/table/TableData.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const TableData = ({
8181
}
8282
}}
8383
className={`usda-table__row-item usda-table__row ${rowIndexForMessage === i ? 'selected-row' : ''} ${highlightedColumns ? `special-hover-color-${highlightedColumns.highlightedColumns}` : ''}`}
84-
style={{ height: rowHeight }}>
84+
style={{ height: rowHeight, display: "table-row" }}>
8585
{row.map((data, j) => {
8686
if (j < 6) {
8787
return (

‎components/table/TableHeader.jsx‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,9 @@ const propTypes = {
7272
stickyFirstColumn: PropTypes.bool,
7373
columnWidth: PropTypes.number,
7474
highlightedColumns: PropTypes.object,
75-
index: PropTypes.number
75+
index: PropTypes.number,
76+
isMobile: PropTypes.bool,
77+
isStacked: PropTypes.bool
7678
};
7779

7880
const TableHeaderCell = ({
@@ -90,7 +92,9 @@ const TableHeaderCell = ({
9092
stickyFirstColumn = false,
9193
columnWidth,
9294
highlightedColumns,
93-
index
95+
index,
96+
isMobile = false,
97+
isStacked = false
9498
}) => {
9599
const handleClickedSort = (e, sortOn = title) => {
96100
updateSort(sortOn, e.target.value);
@@ -101,7 +105,28 @@ const TableHeaderCell = ({
101105
}
102106
return subColumnNames.length ? "1" : "2";
103107
};
104-
return (
108+
return isStacked && isMobile ? (
109+
<div
110+
className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''}
111+
${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${highlightedColumns ? `table-header__subaward-color-${highlightedColumns.highlightedColumns}` : ''}`}
112+
style={{ minWidth: columnWidth, display: "table-column" }}
113+
colSpan={columnWidth ? '' : columnSpan}
114+
rowSpan={rowsSpan()}>
115+
<div className={`table-header__content${right ? ' table-header__content_right' : ''}`}>
116+
<div className="table-header__label">
117+
{displayName}
118+
{icon && icon}
119+
{(updateSort && !subColumnNames.length && displayName) && (
120+
<SortIcon
121+
clickedSort={handleClickedSort}
122+
currentSort={currentSort}
123+
title={title}
124+
displayName={displayName} />
125+
)}
126+
</div>
127+
</div>
128+
</div>
129+
) : (
105130
<th
106131
className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''}
107132
${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${highlightedColumns ? `table-header__subaward-color-${highlightedColumns.highlightedColumns}` : ''}`}

0 commit comments

Comments
 (0)