Skip to content
This repository was archived by the owner on Apr 5, 2022. It is now read-only.

Commit b500e10

Browse files
joshhidleyjoshhidley
committed
CJPM-17455: Linted changed files.
1 parent 6af6901 commit b500e10

2 files changed

Lines changed: 136 additions & 115 deletions

File tree

‎packages/visual-stack/src/components/Table/DataTable/index.js‎

Lines changed: 115 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,7 @@ import PropTypes from 'prop-types';
1616
import './DataTable.css';
1717
import LoadingAnimation from '../../LoadingAnimation';
1818

19-
const generateHeaders = ({ columns, ...tableProps }) => {
20-
return columns.map((column, index) => generateHeader(column, index, tableProps));
21-
}
22-
23-
const generateHeader = (
24-
column,
25-
index,
26-
tableProps,
27-
) => {
19+
const generateHeader = (column, index, tableProps) => {
2820
const { sortable, sortingOption, onSort, data } = tableProps;
2921
const { label: currentLabel, width, alignment } = column;
3022
const isCurrentColumnSorted = () => {
@@ -69,47 +61,64 @@ const generateHeader = (
6961
);
7062
};
7163

72-
const generateRows = ({ data, ...tableProps }) => {
73-
return data.map((rowData, index) => generateRow(rowData, index, tableProps));
74-
}
64+
const generateHeaders = ({ columns, ...tableProps }) => {
65+
return columns.map((column, index) =>
66+
generateHeader(column, index, tableProps)
67+
);
68+
};
7569

7670
const generateRow = (rowData, index, tableProps) => {
7771
const { onClick, columns, selectable, onSelect } = tableProps;
7872
const { id, row, selected } = rowData;
7973

80-
return <Tr key={id}>
81-
{selectable && <Td>
82-
<input type="checkbox" aria-label="Select row from data table" checked={selected} onChange={() => {
83-
onSelect(id)
84-
}} />
85-
</Td>}
86-
{row.map((item, columnIndex) => {
87-
const getColumn = R.compose(
88-
R.defaultTo({}),
89-
R.prop(columnIndex)
90-
);
91-
const { label, clickable, renderCell = R.identity } = getColumn(columns);
92-
return (
93-
<Td key={columnIndex}>
94-
{clickable && (
95-
<a
96-
className="vs-data-table-clickable-cell"
97-
onClick={() => {
98-
onClick({
99-
value: item,
100-
rowIndex: index,
101-
label,
102-
});
103-
}}
104-
>
105-
{renderCell(item)}
106-
</a>
107-
)}
108-
{!clickable && renderCell(item)}
74+
return (
75+
<Tr key={id}>
76+
{selectable && (
77+
<Td>
78+
<input
79+
type="checkbox"
80+
aria-label="Select row from data table"
81+
checked={selected}
82+
onChange={() => {
83+
onSelect(id);
84+
}}
85+
/>
10986
</Td>
110-
);
111-
})}
112-
</Tr>
87+
)}
88+
{row.map((item, columnIndex) => {
89+
const getColumn = R.compose(
90+
R.defaultTo({}),
91+
R.prop(columnIndex)
92+
);
93+
const { label, clickable, renderCell = R.identity } = getColumn(
94+
columns
95+
);
96+
return (
97+
<Td key={columnIndex}>
98+
{clickable && (
99+
<a
100+
className="vs-data-table-clickable-cell"
101+
onClick={() => {
102+
onClick({
103+
value: item,
104+
rowIndex: index,
105+
label,
106+
});
107+
}}
108+
>
109+
{renderCell(item)}
110+
</a>
111+
)}
112+
{!clickable && renderCell(item)}
113+
</Td>
114+
);
115+
})}
116+
</Tr>
117+
);
118+
};
119+
120+
const generateRows = ({ data, ...tableProps }) => {
121+
return data.map((rowData, index) => generateRow(rowData, index, tableProps));
113122
};
114123

115124
const getDataWithPagination = (rowsPerPage, page) =>
@@ -122,22 +131,28 @@ const NoDataLabel = ({ label }) => {
122131
return <div className="vs-data-table-no-data-label">{label}</div>;
123132
};
124133

125-
const omitGeneratedIdsFromData = data => R.map(R.dissoc("id"))(data)
126-
134+
const omitGeneratedIdsFromData = data => R.map(R.dissoc('id'))(data);
127135

128136
const toggleSelectedInRowData = rowData => ({
129137
...rowData,
130-
selected: !rowData.selected
131-
})
138+
selected: !rowData.selected,
139+
});
132140

133141
const selectAllCheckbox = ({ data, onSelect }) => {
134142
const checked = R.all(R.propEq('selected', true))(data);
135-
let onChange = () => onSelect({
136-
data: R.map(rowData => ({ ...rowData, selected: !checked }))(data)
137-
});
138-
return <input type="checkbox" aria-label="Select all from data table" checked={checked} onChange={(onChange)} />
139-
}
140-
143+
const onChange = () =>
144+
onSelect({
145+
data: R.map(rowData => ({ ...rowData, selected: !checked }))(data),
146+
});
147+
return (
148+
<input
149+
type="checkbox"
150+
aria-label="Select all from data table"
151+
checked={checked}
152+
onChange={onChange}
153+
/>
154+
);
155+
};
141156

142157
export const DataTable = ({
143158
caption = '',
@@ -168,9 +183,12 @@ export const DataTable = ({
168183

169184
const onSelectId = id => {
170185
const selectedRowIndex = R.findIndex(R.propEq('id', id), data);
171-
const dataWithSelectedRow = R.adjust(selectedRowIndex, toggleSelectedInRowData)(data);
172-
onSelect({ data: dataWithSelectedRow })
173-
}
186+
const dataWithSelectedRow = R.adjust(
187+
selectedRowIndex,
188+
toggleSelectedInRowData
189+
)(data);
190+
onSelect({ data: dataWithSelectedRow });
191+
};
174192

175193
return (
176194
<TableContainer {...restProps} className="vs-data-table-container">
@@ -180,54 +198,55 @@ export const DataTable = ({
180198
{caption}
181199
<p>{description}</p>
182200
</div>
183-
<div>{renderToolbar && renderToolbar({ columns, data: omitGeneratedIdsFromData(data) })}</div>
201+
<div>
202+
{renderToolbar &&
203+
renderToolbar({ columns, data: omitGeneratedIdsFromData(data) })}
204+
</div>
184205
</div>
185206
</TableTitle>
186207
{isLoading ? (
187208
<div className={'vs-data-table-loading-animation-wrapper'}>
188209
<LoadingAnimation loadingMessage={loadingMessage} />
189210
</div>
190211
) : (
191-
<>
192-
<Table>
193-
<THead>
194-
<Tr>
195-
{selectable && <Th>
196-
{selectAllCheckbox({ data, onSelect })}
197-
</Th>}
198-
{generateHeaders({
199-
columns,
200-
sortable,
201-
sortingOption,
202-
onSort,
203-
data
204-
})}
205-
</Tr>
206-
</THead>
207-
<TBody>
208-
{generateRows({
209-
data: paginatedData,
210-
onClick,
212+
<>
213+
<Table>
214+
<THead>
215+
<Tr>
216+
{selectable && <Th>{selectAllCheckbox({ data, onSelect })}</Th>}
217+
{generateHeaders({
211218
columns,
212-
selectable,
213-
onSelect: onSelectId
219+
sortable,
220+
sortingOption,
221+
onSort,
222+
data,
214223
})}
215-
</TBody>
216-
</Table>
217-
{paginatedData.length === 0 && <NoDataLabel label={noDataLabel} />}
218-
{pagination && (
219-
<Pagination
220-
className="vs-table-pagination"
221-
numberOfRows={data.length}
222-
rowsPerPage={rowsPerPage}
223-
page={page}
224-
onChange={onPageChange}
225-
rowsPerPageTemplate={rowsPerPageTemplate}
226-
totalRecordsTemplate={totalRecordsTemplate}
227-
/>
228-
)}
229-
</>
230-
)}
224+
</Tr>
225+
</THead>
226+
<TBody>
227+
{generateRows({
228+
data: paginatedData,
229+
onClick,
230+
columns,
231+
selectable,
232+
onSelect: onSelectId,
233+
})}
234+
</TBody>
235+
</Table>
236+
{paginatedData.length === 0 && <NoDataLabel label={noDataLabel} />}
237+
{pagination && (
238+
<Pagination
239+
className="vs-table-pagination"
240+
numberOfRows={data.length}
241+
rowsPerPage={rowsPerPage}
242+
page={page}
243+
onChange={onPageChange}
244+
rowsPerPageTemplate={rowsPerPageTemplate}
245+
totalRecordsTemplate={totalRecordsTemplate}
246+
/>
247+
)}
248+
</>
249+
)}
231250
</TableContainer>
232251
);
233252
};

‎packages/visual-stack/src/components/TopNav/TopNav.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import React from 'react'
2-
import cn from 'classnames'
3-
import CJLogo from '../../components/CJLogo'
4-
import PropTypes from 'prop-types'
1+
import React from 'react';
2+
import cn from 'classnames';
3+
import CJLogo from '../../components/CJLogo';
4+
import PropTypes from 'prop-types';
55

66
export const TopNav = ({
7-
className,
8-
title,
9-
actionChildren,
10-
children,
11-
contentSize,
12-
...restProps
13-
}) => {
14-
7+
className,
8+
title,
9+
actionChildren,
10+
children,
11+
contentSize,
12+
...restProps
13+
}) => {
1514
return (
1615
<div {...restProps} className={cn(`vs-topnav`, className)}>
1716
<div className="vs-topnav-header vs-topnav-page-title">
@@ -21,21 +20,24 @@ export const TopNav = ({
2120
</div>
2221
<h1 className="vs-topnav-title">{title}</h1>
2322
</div>
24-
<div className="vs-topnav-button-bar">
25-
{actionChildren}
26-
</div>
23+
<div className="vs-topnav-button-bar">{actionChildren}</div>
2724
</div>
28-
<div className={cn('vs-topnav-content', `vs-topnav-content-${contentSize ? contentSize : 'normal'}`)}>
25+
<div
26+
className={cn(
27+
'vs-topnav-content',
28+
`vs-topnav-content-${contentSize ? contentSize : 'normal'}`
29+
)}
30+
>
2931
{children}
3032
</div>
3133
</div>
32-
)
33-
}
34+
);
35+
};
3436

3537
TopNav.propTypes = {
3638
className: PropTypes.string,
3739
title: PropTypes.string,
3840
actionChildren: PropTypes.object,
3941
children: PropTypes.object,
4042
contentSize: PropTypes.string,
41-
}
43+
};

0 commit comments

Comments
 (0)