chore: replace do expressions

To avoid breaking CodeQL
bluecatengineering · Jul 5, 2024 · 3fead6f · 3fead6f
1 parent 05ba13a
commit 3fead6f
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 141 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,6 @@
 module.exports = {
 	presets: [['@babel/react', {useBuiltIns: true, runtime: 'automatic'}]],
-	plugins: ['macros', '@babel/plugin-proposal-do-expressions'],
+	plugins: ['macros'],
 	env: {
 		test: {
 			sourceMaps: 'both',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/core": "^7.16.7",
-    "@babel/plugin-proposal-do-expressions": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@bluecateng/commitlint-config-bluecateng": "^1.0.1",

diff --git a/packages/pelagos/src/components/Calendar.js b/packages/pelagos/src/components/Calendar.js
@@ -79,6 +79,56 @@ const updateMonth = (focused, month) => {
 	return date;
 };
 
+const renderHeaders = (firstDate, weekDayFmtLong, weekDayFmtNarrow) => {
+	const headers = [];
+	const day = new Date(firstDate);
+	for (let i = 0; i < 7; ++i) {
+		headers.push(
+			<th key={i} className="Calendar__dayLabel" abbr={weekDayFmtLong.format(day)} aria-hidden="true">
+				{weekDayFmtNarrow.format(day)}
+			</th>
+		);
+		day.setDate(day.getDate() + 1);
+	}
+	return headers;
+};
+
+const renderCells = (day, curMonth, curTime, highlighted, rangeStart, rangeEnd) => {
+	const cells = [];
+	for (let c = 0; c < 7; ++c) {
+		const time = day.getTime();
+		const isCurMonth = day.getMonth() === curMonth;
+		const isSelected = time === curTime;
+		cells.push(
+			<td
+				key={c}
+				className={`Calendar__cell${
+					!isCurMonth
+						? ' Calendar__cell--disabled'
+						: highlighted
+							? tempHighlight(time, curTime, highlighted)
+							: curHighlight(time, rangeStart, rangeEnd)
+				}`}
+				tabIndex={isSelected ? 0 : -1}
+				aria-selected={isSelected}
+				data-time={isCurMonth ? time : null}>
+				{isCurMonth ? day.getDate() : ''}
+			</td>
+		);
+		day.setDate(day.getDate() + 1);
+	}
+	return cells;
+};
+
+const renderRows = (firstDate, curMonth, curTime, highlighted, rangeStart, rangeEnd) => {
+	const rows = [];
+	const day = new Date(firstDate);
+	for (let r = 0; r < 6; ++r) {
+		rows.push(<tr key={r}>{renderCells(day, curMonth, curTime, highlighted, rangeStart, rangeEnd)}</tr>);
+	}
+	return rows;
+};
+
 const preventDefault = (event) => event.preventDefault();
 
 /** A component which allows selecting either a single date or a date range. Passing an array in `value` enables range selection. */
@@ -257,61 +307,9 @@ const Calendar = forwardRef(({id, className, value, onChange, ...props}, ref) =>
 				onFocusCapture={handleFocus}
 				onBlurCapture={handleBlur}>
 				<thead>
-					<tr>
-						{do {
-							const headers = [];
-							const day = new Date(firstDate);
-							for (let i = 0; i < 7; ++i) {
-								headers.push(
-									<th key={i} className="Calendar__dayLabel" abbr={weekDayFmtLong.format(day)} aria-hidden="true">
-										{weekDayFmtNarrow.format(day)}
-									</th>
-								);
-								day.setDate(day.getDate() + 1);
-							}
-							headers;
-						}}
-					</tr>
+					<tr>{renderHeaders(firstDate, weekDayFmtLong, weekDayFmtNarrow)}</tr>
 				</thead>
-				<tbody>
-					{do {
-						const rows = [];
-						const day = new Date(firstDate);
-						for (let r = 0; r < 6; ++r) {
-							rows.push(
-								<tr key={r}>
-									{do {
-										const cells = [];
-										for (let c = 0; c < 7; ++c) {
-											const time = day.getTime();
-											const isCurMonth = day.getMonth() === curMonth;
-											const isSelected = time === curTime;
-											cells.push(
-												<td
-													key={c}
-													className={`Calendar__cell${
-														!isCurMonth
-															? ' Calendar__cell--disabled'
-															: highlighted
-																? tempHighlight(time, curTime, highlighted)
-																: curHighlight(time, rangeStart, rangeEnd)
-													}`}
-													tabIndex={isSelected ? 0 : -1}
-													aria-selected={isSelected}
-													data-time={isCurMonth ? time : null}>
-													{isCurMonth ? day.getDate() : ''}
-												</td>
-											);
-											day.setDate(day.getDate() + 1);
-										}
-										cells;
-									}}
-								</tr>
-							);
-						}
-						rows;
-					}}
-				</tbody>
+				<tbody>{renderRows(firstDate, curMonth, curTime, highlighted, rangeStart, rangeEnd)}</tbody>
 			</table>
 		</div>
 	);

diff --git a/packages/pelagos/src/components/MultiColumn.js b/packages/pelagos/src/components/MultiColumn.js
@@ -96,6 +96,31 @@ export const useDataLoader = (path, getItemCount, isLeaf) => {
 	return columns;
 };
 
+const renderElements = (id, path, colIndex, column, count, isLeaf, colCurr, itmCurr, renderItem) => {
+	const itmPath = path.slice(0, colIndex);
+	const elements = [];
+	for (let itmIndex = 0; itmIndex < count; ++itmIndex) {
+		itmPath[colIndex] = itmIndex;
+		const leaf = isLeaf(itmPath);
+		const text = renderItem(itmPath);
+		elements.push(
+			<div
+				key={itmIndex}
+				id={`${id}-${colIndex}-${itmIndex}`}
+				className="MultiColumn__item"
+				tabIndex={colIndex === colCurr && itmIndex === itmCurr ? 0 : -1}
+				role="option"
+				aria-label={t`${text}, column ${column}, ${select(leaf, {true: 'leaf', other: 'group'})}`}
+				aria-selected={itmIndex === path[colIndex]}
+				data-index={itmIndex}>
+				<div className="MultiColumn__text">{text}</div>
+				{!leaf && <CaretRight className="MultiColumn__arrow" />}
+			</div>
+		);
+	}
+	return elements;
+};
+
 /** A component which presents a tree path as multiple columns. */
 const MultiColumn = ({
 	id,
@@ -293,30 +318,7 @@ const MultiColumn = ({
 						{count === -1 ? (
 							<Spinner size="tiny" aria-hidden />
 						) : (
-							do {
-								const itmPath = path.slice(0, colIndex);
-								const elements = [];
-								for (let itmIndex = 0; itmIndex < count; ++itmIndex) {
-									itmPath[colIndex] = itmIndex;
-									const leaf = isLeaf(itmPath);
-									const text = renderItem(itmPath);
-									elements.push(
-										<div
-											key={itmIndex}
-											id={`${id}-${colIndex}-${itmIndex}`}
-											className="MultiColumn__item"
-											tabIndex={colIndex === colCurr && itmIndex === itmCurr ? 0 : -1}
-											role="option"
-											aria-label={t`${text}, column ${column}, ${select(leaf, {true: 'leaf', other: 'group'})}`}
-											aria-selected={itmIndex === path[colIndex]}
-											data-index={itmIndex}>
-											<div className="MultiColumn__text">{text}</div>
-											{!leaf && <CaretRight className="MultiColumn__arrow" />}
-										</div>
-									);
-								}
-								elements;
-							}
+							renderElements(id, path, colIndex, column, count, isLeaf, colCurr, itmCurr, renderItem)
 						)}
 					</div>
 				);

diff --git a/packages/pelagos/src/filters/FilterList.js b/packages/pelagos/src/filters/FilterList.js
@@ -11,6 +11,36 @@ import MenuArrow from '../components/MenuArrow';
 import FilterEditor from './LegacyFilterEditor';
 import './FilterList.less';
 
+const renderEntry = (filterName, key, v, getFilterTitle, getValues) => {
+	const name = getFilterTitle(key);
+	return (
+		<Layer key={key} as="li" className="FilterList__item">
+			<button
+				id={`filter-${key}`}
+				className="FilterList__button"
+				type="button"
+				aria-haspopup="dialog"
+				aria-expanded={key === filterName}
+				aria-controls={key === filterName ? 'filterListDropDown' : null}
+				data-kind="item"
+				data-key={key}>
+				<span className="FilterList__filterTitle">{name}</span>
+				{getValues(key, v)}
+				<MenuArrow />
+			</button>
+			<button
+				id={`filter-${key}-remove`}
+				className="FilterList__remove"
+				type="button"
+				aria-label={t`Remove ${name} filter`}
+				data-kind="remove"
+				data-key={key}>
+				<Close />
+			</button>
+		</Layer>
+	);
+};
+
 /** @deprecated use FilterArea instead. */
 const FilterList = ({className, filters, excludedKeys = [], getFilterTitle, getValues, getEditor, onApply}) => {
 	const [filterName, setFilterName] = useState(null);
@@ -43,35 +73,7 @@ const FilterList = ({className, filters, excludedKeys = [], getFilterTitle, getV
 					<ul className="FilterList__items" onClick={handleClick}>
 						{filters &&
 							Object.entries(filters).map(([key, v]) =>
-								!excludedKeys.includes(key)
-									? do {
-											const name = getFilterTitle(key);
-											<Layer key={key} as="li" className="FilterList__item">
-												<button
-													id={`filter-${key}`}
-													className="FilterList__button"
-													type="button"
-													aria-haspopup="dialog"
-													aria-expanded={key === filterName}
-													aria-controls={key === filterName ? 'filterListDropDown' : null}
-													data-kind="item"
-													data-key={key}>
-													<span className="FilterList__filterTitle">{name}</span>
-													{getValues(key, v)}
-													<MenuArrow />
-												</button>
-												<button
-													id={`filter-${key}-remove`}
-													className="FilterList__remove"
-													type="button"
-													aria-label={t`Remove ${name} filter`}
-													data-kind="remove"
-													data-key={key}>
-													<Close />
-												</button>
-											</Layer>;
-										}
-									: null
+								!excludedKeys.includes(key) ? renderEntry(filterName, key, v, getFilterTitle, getValues) : null
 							)}
 					</ul>
 				</ScrollBox>