Skip to content

Commit 22d6998

Browse files
nick-torresnick-torres
authored
Merge pull request #240 from fedspendingtransparency/fix/DEV12718
DEV-12718: Remove additional click on mobile stacked table (DTUI)
2 parents 019618d + 0fb6f2e commit 22d6998

File tree

45 files changed

+831
-631
lines changed

Some content is hidden

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

45 files changed

+831
-631
lines changed

‎components/table/MobileRowSlider.jsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,25 @@ const propTypes = {
1717
row: PropTypes.array,
1818
columns: PropTypes.array,
1919
iValue: PropTypes.number,
20-
firstClick: PropTypes.bool,
21-
rowIndexForMessage: PropTypes.number
20+
atMaxLevel: PropTypes.bool
2221
};
2322
const MobileRowSlider = (props) => {
2423
const [rowOpen, setRowOpen] = useState(false);
24+
25+
const onClickHandler = (e) => {
26+
e.stopPropagation();
27+
setRowOpen(!rowOpen);
28+
};
29+
30+
const viewNextLevel = !props.atMaxLevel
31+
? (
32+
<div className="usda-table__cell usda-table__cell_right button-type__text-left-icon-light">
33+
View next level
34+
{' '}
35+
<FontAwesomeIcon icon={faAngleDoubleRight} />
36+
</div>
37+
) : null;
38+
2539
const toReturn = props.columns.length >= 6
2640
? (
2741
<div className={`collapsible-row-div ${rowOpen ? `row-opened` : ''}`}>
@@ -44,21 +58,12 @@ const MobileRowSlider = (props) => {
4458
<div
4559
key={uniqueId()}
4660
className={`usda-table__cell${props.columns[j]?.right ? ' usda-table__cell_right' : ''}
47-
${(j === 0 && props.stickyFirstColumn) ? ' stickyColumn' : ''} `}>
48-
{props.columns[j]
49-
&& (
50-
<div className="usda-table__cell-heading-container">
51-
<div className="usda-table__cell-heading">{props.columns[j].displayName}</div>
52-
{(props.firstClick && j === 0 && props.rowIndexForMessage === props.iValue)
53-
&& (
54-
<div className="usda-table__cell-message">
55-
View next level
56-
{' '}
57-
<FontAwesomeIcon icon={faAngleDoubleRight} color="#2378c3" />
61+
${(j === 0 && props.stickyFirstColumn) ? ' stickyColumn' : ''} `}>
62+
{props.columns[j] && (
63+
<div className="usda-table__cell-heading-container">
64+
<div className="usda-table__cell-heading">{props.columns[j].displayName}</div>
5865
</div>
5966
)}
60-
</div>
61-
)}
6267
<div>
6368
{data}
6469
</div>
@@ -71,17 +76,16 @@ const MobileRowSlider = (props) => {
7176
</div>
7277
)}
7378
<div className="mobile-gradient__wrapper">
74-
{/* {!rowOpen && <div id="mobile-row-gradient" />} */}
7579
<span
7680
className="collapsible-row-button"
7781
role="button"
7882
tabIndex={0}
79-
onClick={() => {
80-
setRowOpen(!rowOpen);
83+
onClick={(e) => {
84+
onClickHandler(e);
8185
}}
8286
onKeyUp={(e) => {
8387
if (e.key === 'Enter') {
84-
setRowOpen(!rowOpen);
88+
onClickHandler(e);
8589
}
8690
}}>
8791
{rowOpen ? 'Collapse additional details' : 'View additional details'}
@@ -94,7 +98,7 @@ const MobileRowSlider = (props) => {
9498
</div>
9599
</div>
96100
) : null;
97-
return toReturn;
101+
return toReturn || viewNextLevel;
98102
};
99103
MobileRowSlider.propTypes = propTypes;
100104
export default MobileRowSlider;

‎components/table/TableData.jsx‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import React, { useEffect, useState } from 'react';
99
import PropTypes, { oneOfType } from 'prop-types';
1010
import { uniqueId } from 'lodash';
1111
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
12-
import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
1312
import ExpandableRow from './ExpandableRow';
1413
import TableHeader from './TableHeader';
1514
import MobileRowSlider from './MobileRowSlider';
@@ -43,7 +42,6 @@ const TableData = ({
4342
isStacked,
4443
newMobileView = false
4544
}) => {
46-
const [firstClick, setFirstClick] = useState(false);
4745
const [rowIndexForMessage, setRowIndexForMessage] = useState();
4846
const setFocus = () => {
4947
const selectedElement = document.querySelector(".selected-row");
@@ -55,23 +53,11 @@ const TableData = ({
5553
const localClickHandler = (row, index) => {
5654
if (!atMaxLevel) {
5755
// user taps a row in mobile
58-
if (isMobile && !firstClick) {
59-
setFirstClick(true);
56+
if (isMobile) {
6057
setRowIndexForMessage(index);
6158
}
62-
// user taps the same row again, go to next level
63-
else if (isMobile && firstClick && rowIndexForMessage === index) {
64-
onClickHandler(row);
65-
setFirstClick(false);
66-
}
67-
// user taps a row after already tapping a different row first
68-
else if (isMobile && firstClick && rowIndexForMessage !== index) {
69-
setRowIndexForMessage(index);
70-
}
71-
// desktop or tablet, just go to next level
72-
else if (!isMobile) {
73-
onClickHandler(row);
74-
}
59+
60+
if (onClickHandler) onClickHandler(row);
7561
}
7662
};
7763

@@ -115,20 +101,12 @@ const TableData = ({
115101
${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''} ${(j === 0 && stickyFirstColumn) ? ' stickyColumn' : ''}
116102
${j === 0 ? 'usda-mobile__header' : ''}`}>
117103
{columns[j]
118-
&& (
119-
<div className="usda-table__cell-heading-container">
120-
{isMobile
121-
&& <div className="usda-table__cell-heading">{columns[j].displayName}</div>}
122-
{(isMobile && firstClick && j === 0 && rowIndexForMessage === i)
123-
&& (
124-
<div className="usda-table__cell-message">
125-
View next level
126-
{' '}
127-
<FontAwesomeIcon icon={faAngleDoubleRight} color="#2378c3" />
128-
</div>
129-
)}
130-
</div>
131-
)}
104+
&& (
105+
<div className="usda-table__cell-heading-container">
106+
{isMobile
107+
&& <div className="usda-table__cell-heading">{columns[j].displayName}</div>}
108+
</div>
109+
)}
132110
<div className="usda-table__cell-text">
133111
{data.type === 'a' && j === 0 && isStacked && isMobile
134112
? (
@@ -154,8 +132,7 @@ const TableData = ({
154132
row={row}
155133
columns={columns}
156134
iValue={i}
157-
firstClick={firstClick}
158-
rowIndexForMessage={rowIndexForMessage} />
135+
atMaxLevel={atMaxLevel} />
159136
</div>
160137
</div>
161138
)
@@ -213,14 +190,6 @@ const TableData = ({
213190
<div className="usda-table__cell-heading-container">
214191
{isMobile
215192
&& <div className="usda-table__cell-heading">{columns[j].displayName}</div>}
216-
{(isMobile && firstClick && j === 0 && rowIndexForMessage === i)
217-
&& (
218-
<div className="usda-table__cell-message">
219-
View next level
220-
{' '}
221-
<FontAwesomeIcon icon={faAngleDoubleRight} color="#2378c3" />
222-
</div>
223-
)}
224193
</div>
225194
)}
226195
<div>

‎dist/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/1057.0486dbde.iframe.bundle.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/1057.0bca07cb.iframe.bundle.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/1879.18fa04e5.iframe.bundle.js‎

Lines changed: 0 additions & 497 deletions
This file was deleted.

‎docs/1879.18fa04e5.iframe.bundle.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/3301.897021de.iframe.bundle.js‎

Lines changed: 497 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/1879.18fa04e5.iframe.bundle.js.LICENSE.txt renamed to docs/3301.897021de.iframe.bundle.js.LICENSE.txt

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,39 @@
55

66
/**
77
* @license React
8-
* react-dom-test-utils.production.min.js
8+
* react-dom.production.js
99
*
10-
* Copyright (c) Facebook, Inc. and its affiliates.
10+
* Copyright (c) Meta Platforms, Inc. and affiliates.
1111
*
1212
* This source code is licensed under the MIT license found in the
1313
* LICENSE file in the root directory of this source tree.
1414
*/
1515

1616
/**
1717
* @license React
18-
* react-dom.production.min.js
18+
* react-jsx-runtime.production.js
1919
*
20-
* Copyright (c) Facebook, Inc. and its affiliates.
20+
* Copyright (c) Meta Platforms, Inc. and affiliates.
2121
*
2222
* This source code is licensed under the MIT license found in the
2323
* LICENSE file in the root directory of this source tree.
2424
*/
2525

2626
/**
2727
* @license React
28-
* react-jsx-runtime.production.min.js
28+
* react.production.js
2929
*
30-
* Copyright (c) Facebook, Inc. and its affiliates.
30+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3131
*
3232
* This source code is licensed under the MIT license found in the
3333
* LICENSE file in the root directory of this source tree.
3434
*/
3535

3636
/**
3737
* @license React
38-
* react.production.min.js
38+
* scheduler.production.js
3939
*
40-
* Copyright (c) Facebook, Inc. and its affiliates.
41-
*
42-
* This source code is licensed under the MIT license found in the
43-
* LICENSE file in the root directory of this source tree.
44-
*/
45-
46-
/**
47-
* @license React
48-
* scheduler.production.min.js
49-
*
50-
* Copyright (c) Facebook, Inc. and its affiliates.
40+
* Copyright (c) Meta Platforms, Inc. and affiliates.
5141
*
5242
* This source code is licensed under the MIT license found in the
5343
* LICENSE file in the root directory of this source tree.

‎docs/3301.897021de.iframe.bundle.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)