From 4c0bd80f2425575dbdd46db0bac69b0b0d9eeb50 Mon Sep 17 00:00:00 2001 From: Tom French <15848336+TomAFrench@users.noreply.github.com> Date: Thu, 1 Sep 2022 12:47:34 +0100 Subject: [PATCH] Enforce linting in loot-design (#233) * build: add linter to loot-design package * style: automated fixes * style: manual linter fixes --- packages/loot-design/package.json | 10 ++-- .../src/components/PayeeAutocomplete.js | 4 +- .../loot-design/src/components/View.mobile.js | 2 +- .../components/budget/report/components.js | 10 ++-- packages/loot-design/src/components/common.js | 2 +- packages/loot-design/src/components/hooks.js | 2 +- .../src/components/manager/ImportYNAB4.js | 17 ++----- .../src/components/mobile/ScalableImage.js | 2 +- .../src/components/mobile/account.js | 2 +- .../src/components/mobile/budget.js | 48 ++++++++++--------- .../src/components/mobile/budget.test.js | 4 +- .../src/components/mobile/dragdrop.js | 2 +- .../src/components/mobile/transaction.js | 16 ++----- .../components/mobile/transaction.usage.js | 4 +- .../src/components/modals/CloseAccount.js | 10 +--- .../src/components/modals/PlaidExternalMsg.js | 9 +--- .../src/components/payees.usage.js | 7 ++- .../components/spreadsheet/CellDebugger.js | 4 +- .../src/components/spreadsheet/SheetValue.js | 29 +++++------ .../components/spreadsheet/useSheetValue.js | 29 +++++------ packages/loot-design/src/components/table.js | 40 +++++++--------- .../loot-design/src/components/tooltips.js | 3 +- packages/loot-design/src/parse-figma-theme.js | 2 +- packages/loot-design/src/setupTests.js | 2 +- packages/loot-design/src/svg/Add.mobile.js | 8 ++-- packages/loot-design/src/svg/Add.web.js | 8 ++-- packages/loot-design/src/svg/Bank.mobile.js | 6 +-- packages/loot-design/src/svg/Bank.web.js | 6 +-- packages/loot-design/src/svg/Budget.mobile.js | 6 +-- packages/loot-design/src/svg/Budget.web.js | 6 +-- packages/loot-design/src/svg/Check.mobile.js | 3 +- packages/loot-design/src/svg/Check.web.js | 6 +-- packages/loot-design/src/svg/Delete.mobile.js | 6 +-- packages/loot-design/src/svg/Delete.web.js | 6 +-- .../loot-design/src/svg/DownArrow.mobile.js | 6 +-- packages/loot-design/src/svg/DownArrow.web.js | 6 +-- .../loot-design/src/svg/DragIOS.mobile.js | 6 +-- packages/loot-design/src/svg/DragIOS.web.js | 6 +-- .../loot-design/src/svg/ExpandArrow.mobile.js | 6 +-- .../loot-design/src/svg/ExpandArrow.web.js | 12 +++-- .../loot-design/src/svg/LeftArrow.mobile.js | 7 ++- packages/loot-design/src/svg/LeftArrow.web.js | 7 ++- .../loot-design/src/svg/LeftArrow2.mobile.js | 6 +-- .../loot-design/src/svg/LeftArrow2.web.js | 6 +-- .../loot-design/src/svg/LeftArrow3.mobile.js | 6 +-- .../loot-design/src/svg/LeftArrow3.web.js | 6 +-- .../loot-design/src/svg/Loading.mobile.js | 6 +-- packages/loot-design/src/svg/Loading.web.js | 6 +-- packages/loot-design/src/svg/Logo.mobile.js | 6 +-- packages/loot-design/src/svg/Logo.web.js | 6 +-- packages/loot-design/src/svg/Math.mobile.js | 6 +-- packages/loot-design/src/svg/Math.web.js | 6 +-- packages/loot-design/src/svg/Pencil.mobile.js | 7 ++- packages/loot-design/src/svg/Pencil.web.js | 7 ++- .../loot-design/src/svg/Reports.mobile.js | 6 +-- packages/loot-design/src/svg/Reports.web.js | 6 +-- .../loot-design/src/svg/RightArrow.mobile.js | 7 ++- .../loot-design/src/svg/RightArrow.web.js | 7 ++- .../loot-design/src/svg/RightArrow2.mobile.js | 6 +-- .../loot-design/src/svg/RightArrow2.web.js | 6 +-- packages/loot-design/src/svg/Search.mobile.js | 6 +-- packages/loot-design/src/svg/Search.web.js | 6 +-- .../loot-design/src/svg/Settings.mobile.js | 6 +-- packages/loot-design/src/svg/Settings.web.js | 6 +-- .../loot-design/src/svg/Subtract.mobile.js | 6 +-- packages/loot-design/src/svg/Subtract.web.js | 1 - packages/loot-design/src/svg/logo/Logo.ios.js | 6 +-- packages/loot-design/src/svg/merge.mobile.js | 6 +-- packages/loot-design/src/svg/merge.web.js | 6 +-- packages/loot-design/src/svg/split.mobile.js | 6 +-- packages/loot-design/src/svg/split.web.js | 6 +-- yarn.lock | 2 + 72 files changed, 259 insertions(+), 293 deletions(-) diff --git a/packages/loot-design/package.json b/packages/loot-design/package.json index 1b54ea5..4d9a147 100644 --- a/packages/loot-design/package.json +++ b/packages/loot-design/package.json @@ -12,6 +12,8 @@ "chroma-js": "^1.3.3", "date-fns": "2.0.0-alpha.27", "downshift": "1.31.16", + "eslint": "5.6.0", + "eslint-plugin-prettier": "^3.1.4", "fast-glob": "^2.2.2", "formik": "^0.11.10", "glamor": "^2.20.40", @@ -48,7 +50,8 @@ "start:mobile": "IS_REACT_NATIVE=1 react-scripts start", "test": "npm-run-all -cp 'test:*'", "test:web": "jest -c jest.config.js", - "test:react-native": "jest -c jest.rn.config.js" + "test:react-native": "jest -c jest.rn.config.js", + "lint": "eslint src" }, "homepage": "./", "manifest": "manifest.json", @@ -61,8 +64,5 @@ }, "browserslist": [ "electron 3.0" - ], - "eslintConfig": { - "extends": "react-app" - } + ] } diff --git a/packages/loot-design/src/components/PayeeAutocomplete.js b/packages/loot-design/src/components/PayeeAutocomplete.js index 9f48367..4c3ee16 100644 --- a/packages/loot-design/src/components/PayeeAutocomplete.js +++ b/packages/loot-design/src/components/PayeeAutocomplete.js @@ -183,7 +183,9 @@ export default function PayeeAutocomplete({ let payees = useCachedPayees(); let accounts = useCachedAccounts(); - let [focusTransferPayees, setFocusTransferPayees] = useState(defaultFocusTransferPayees); + let [focusTransferPayees, setFocusTransferPayees] = useState( + defaultFocusTransferPayees + ); let payeeSuggestions = useMemo( () => [ { id: 'new', name: '' }, diff --git a/packages/loot-design/src/components/View.mobile.js b/packages/loot-design/src/components/View.mobile.js index e4418c8..f20f299 100644 --- a/packages/loot-design/src/components/View.mobile.js +++ b/packages/loot-design/src/components/View.mobile.js @@ -1,3 +1,3 @@ import { View } from 'react-native'; -export default View +export default View; diff --git a/packages/loot-design/src/components/budget/report/components.js b/packages/loot-design/src/components/budget/report/components.js index 51bdb80..b3d87f9 100644 --- a/packages/loot-design/src/components/budget/report/components.js +++ b/packages/loot-design/src/components/budget/report/components.js @@ -33,7 +33,7 @@ export const BudgetTotalsMonth = React.memo(function BudgetTotalsMonth() { binding={reportBudget.totalBudgetedExpense} type="financial" style={{ color: colors.n4, fontWeight: 600 }} - formatter={(value) => { + formatter={value => { return format(parseFloat(value || '0'), 'financial'); }} /> @@ -136,7 +136,7 @@ function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) { onClose={tooltip.close} > { + onMenuSelect={type => { onBudgetAction(monthIndex, 'carryover', { category: categoryId, flag: !carryover @@ -199,10 +199,10 @@ export const CategoryMonth = React.memo(function CategoryMonth({ binding: reportBudget.catBudgeted(category.id), type: 'financial', getValueStyle: makeAmountGrey, - formatExpr: (expr) => { + formatExpr: expr => { return integerToCurrency(expr); }, - unformatExpr: (expr) => { + unformatExpr: expr => { return amountToInteger(evalArithmetic(expr, 0)); } }} @@ -211,7 +211,7 @@ export const CategoryMonth = React.memo(function CategoryMonth({ onEdit(null); } }} - onSave={(amount) => { + onSave={amount => { onBudgetAction(monthIndex, 'budget-amount', { category: category.id, amount diff --git a/packages/loot-design/src/components/common.js b/packages/loot-design/src/components/common.js index b54c259..1aea5a5 100644 --- a/packages/loot-design/src/components/common.js +++ b/packages/loot-design/src/components/common.js @@ -3,7 +3,7 @@ import React, { useEffect, useLayoutEffect, useState, - useCallback, + useCallback } from 'react'; import { css } from 'glamor'; import mergeRefs from 'react-merge-refs'; diff --git a/packages/loot-design/src/components/hooks.js b/packages/loot-design/src/components/hooks.js index e6eb234..315d1e0 100644 --- a/packages/loot-design/src/components/hooks.js +++ b/packages/loot-design/src/components/hooks.js @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; export function useScrollFlasher() { let scrollRef = useRef(null); diff --git a/packages/loot-design/src/components/manager/ImportYNAB4.js b/packages/loot-design/src/components/manager/ImportYNAB4.js index ebb4662..dbe9f93 100644 --- a/packages/loot-design/src/components/manager/ImportYNAB4.js +++ b/packages/loot-design/src/components/manager/ImportYNAB4.js @@ -1,14 +1,7 @@ import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { importBudget } from 'loot-core/src/client/actions/budgets'; -import { - View, - Block, - Modal, - Button, - ButtonWithLoading, - P -} from '../common'; +import { View, Block, Modal, Button, ButtonWithLoading, P } from '../common'; import { styles, colors } from '../../style'; function getErrorMessage(error) { @@ -67,10 +60,10 @@ function Import({ modalProps, availableImports }) {

When you've located your data,{' '} - compress it into a zip file. On macOS, right-click - the folder and select "Compress". On Windows, right-click and - select "Send to > Compressed (zipped) folder". Upload the zipped - folder for importing. + compress it into a zip file. On macOS, + right-click the folder and select "Compress". On Windows, + right-click and select "Send to > Compressed (zipped) folder". + Upload the zipped folder for importing.

diff --git a/packages/loot-design/src/components/mobile/ScalableImage.js b/packages/loot-design/src/components/mobile/ScalableImage.js index 5f50fab..531e1dd 100644 --- a/packages/loot-design/src/components/mobile/ScalableImage.js +++ b/packages/loot-design/src/components/mobile/ScalableImage.js @@ -64,7 +64,7 @@ export default function ScalableImage(props) { width: scalableWidth, height: scalableHeight, flex: -1, - overflow: 'hidden', + overflow: 'hidden' }, props.style ]} diff --git a/packages/loot-design/src/components/mobile/account.js b/packages/loot-design/src/components/mobile/account.js index bb7e490..ae3a2fe 100644 --- a/packages/loot-design/src/components/mobile/account.js +++ b/packages/loot-design/src/components/mobile/account.js @@ -64,7 +64,7 @@ export function AccountDetails({ return prependTransactions.concat(transactions); }, [prependTransactions, transactions]); - console.log('rendering') + console.log('rendering'); return ( diff --git a/packages/loot-design/src/components/mobile/budget.js b/packages/loot-design/src/components/mobile/budget.js index 5eb4461..65033ff 100644 --- a/packages/loot-design/src/components/mobile/budget.js +++ b/packages/loot-design/src/components/mobile/budget.js @@ -123,7 +123,7 @@ export class BudgetCell extends React.PureComponent { return ( - {(node) => { + {node => { return ( { + onBlur={value => { onBudgetAction(month, 'budget-amount', { category: categoryId, amount: amountToInteger(value) @@ -288,7 +288,7 @@ export class BudgetCategory extends React.PureComponent { let content = ( (this.container = el)} + ref={el => (this.container = el)} style={[ { backgroundColor: editing ? colors.p11 : 'transparent', @@ -323,7 +323,7 @@ export class BudgetCategory extends React.PureComponent { name="balance" binding={balance} style={[styles.smallText, { width: 90, textAlign: 'right' }]} - getStyle={(value) => value < 0 && { color: colors.r4 }} + getStyle={value => value < 0 && { color: colors.r4 }} type="financial" /> @@ -487,8 +487,14 @@ export class TotalsRow extends React.PureComponent { export class IncomeCategory extends React.PureComponent { render() { - const { name, budget, balance, style, nameTextStyle, amountTextStyle } = - this.props; + const { + name, + budget, + balance, + style, + nameTextStyle, + amountTextStyle + } = this.props; return ( { + getGroups = memoizeOne(groups => { return { - incomeGroup: groups.find((group) => group.is_income), - expenseGroups: groups.filter((group) => !group.is_income) + incomeGroup: groups.find(group => group.is_income), + expenseGroups: groups.filter(group => !group.is_income) }; }); @@ -742,7 +748,7 @@ export class BudgetGroups extends React.Component { return ( - {expenseGroups.map((group) => { + {expenseGroups.map(group => { return ( { + const keyboardWillHide = e => { if (ACTScrollViewManager) { ACTScrollViewManager.setFocused(-1); } @@ -831,7 +837,7 @@ export class BudgetTable extends React.Component { this.cleanup(); } - onEditCategory = (id) => { + onEditCategory = id => { this.setState({ editingCategory: id }); }; @@ -849,11 +855,9 @@ export class BudgetTable extends React.Component { onMoveUp = () => { const { categories } = this.props; const { editingCategory } = this.state; - const expenseCategories = categories.filter((cat) => !cat.is_income); + const expenseCategories = categories.filter(cat => !cat.is_income); - const idx = expenseCategories.findIndex( - (cat) => editingCategory === cat.id - ); + const idx = expenseCategories.findIndex(cat => editingCategory === cat.id); if (idx - 1 >= 0) { this.onEditCategory(expenseCategories[idx - 1].id); } @@ -862,11 +866,9 @@ export class BudgetTable extends React.Component { onMoveDown = () => { const { categories } = this.props; const { editingCategory } = this.state; - const expenseCategories = categories.filter((cat) => !cat.is_income); + const expenseCategories = categories.filter(cat => !cat.is_income); - const idx = expenseCategories.findIndex( - (cat) => editingCategory === cat.id - ); + const idx = expenseCategories.findIndex(cat => editingCategory === cat.id); if (idx + 1 < expenseCategories.length) { this.onEditCategory(expenseCategories[idx + 1].id); } @@ -937,7 +939,7 @@ export class BudgetTable extends React.Component { styles.smallText, { color: colors.n1, textAlign: 'right', fontWeight: '500' } ]} - formatter={(value) => { + formatter={value => { return format(-parseFloat(value || '0'), 'financial'); }} /> @@ -958,7 +960,7 @@ export class BudgetTable extends React.Component { {!editMode ? ( (this.list = el)} + ref={el => (this.list = el)} keyboardShouldPersistTaps="always" refreshControl={refreshControl} style={{ backgroundColor: colors.n10 }} @@ -993,7 +995,7 @@ export class BudgetTable extends React.Component { ref={this.gestures.scroll} > { + ref={el => { scrollRef.current = el; this.list = el; }} diff --git a/packages/loot-design/src/components/mobile/budget.test.js b/packages/loot-design/src/components/mobile/budget.test.js index 12454e1..3fd5929 100644 --- a/packages/loot-design/src/components/mobile/budget.test.js +++ b/packages/loot-design/src/components/mobile/budget.test.js @@ -178,7 +178,7 @@ describe('Budget', () => { expectToBeEditingRow(container, 1); // It should never go past the last expense category - let lastCat = categories.findIndex((c) => c.is_income) - 1; + let lastCat = categories.findIndex(c => c.is_income) - 1; editRow(container, lastCat); expectToBeEditingRow(container, lastCat); fireEvent.press(getButton(container, 'down')); @@ -247,7 +247,7 @@ describe('Budget', () => { fireEvent.press(getButton(container, 'done')); expectToNotBeEditing(container); - await new Promise((resolve) => setTimeout(resolve, 100)); + await new Promise(resolve => setTimeout(resolve, 100)); expect(getField(container, 1, 'budgeted').textContent).toBe('22.00'); }); }); diff --git a/packages/loot-design/src/components/mobile/dragdrop.js b/packages/loot-design/src/components/mobile/dragdrop.js index 812495f..959af4d 100644 --- a/packages/loot-design/src/components/mobile/dragdrop.js +++ b/packages/loot-design/src/components/mobile/dragdrop.js @@ -173,7 +173,7 @@ export function DragDrop({ makeHighlight, children, style }) { A.set(ax, absoluteX), A.set(ay, absoluteY), - A.call([ax, ay], onDragMove), + A.call([ax, ay], onDragMove) ]) ]) } diff --git a/packages/loot-design/src/components/mobile/transaction.js b/packages/loot-design/src/components/mobile/transaction.js index 9f9c6d0..fcedc83 100644 --- a/packages/loot-design/src/components/mobile/transaction.js +++ b/packages/loot-design/src/components/mobile/transaction.js @@ -1,11 +1,5 @@ import React from 'react'; -import { - View, - Text, - SectionList, - ScrollView, - Animated -} from 'react-native'; +import { View, Text, SectionList, ScrollView, Animated } from 'react-native'; import memoizeOne from 'memoize-one'; import { format as formatDate, @@ -772,8 +766,8 @@ export class Transaction extends React.PureComponent { let prettyCategory = transferAcct ? 'Transfer' : is_parent - ? 'Split' - : categoryName; + ? 'Split' + : categoryName; let isPreview = isPreviewId(id); let textStyle = isPreview && { @@ -787,8 +781,8 @@ export class Transaction extends React.PureComponent { notes === 'missed' ? colors.r6 : notes === 'due' - ? colors.y4 - : colors.n5 + ? colors.y4 + : colors.n5 } ]; diff --git a/packages/loot-design/src/components/mobile/transaction.usage.js b/packages/loot-design/src/components/mobile/transaction.usage.js index 2edf4f7..90830f9 100644 --- a/packages/loot-design/src/components/mobile/transaction.usage.js +++ b/packages/loot-design/src/components/mobile/transaction.usage.js @@ -33,8 +33,8 @@ transactions.sort((t1, t2) => { return monthUtils.isBefore(t1.date, t2.date) ? 1 : monthUtils.isAfter(t1.date, t2.date) - ? -1 - : 0; + ? -1 + : 0; }); transactions[1].description = 'A really long one to test to see what happens when there iss too much'; diff --git a/packages/loot-design/src/components/modals/CloseAccount.js b/packages/loot-design/src/components/modals/CloseAccount.js index 6e53820..b53a8b3 100644 --- a/packages/loot-design/src/components/modals/CloseAccount.js +++ b/packages/loot-design/src/components/modals/CloseAccount.js @@ -1,14 +1,6 @@ import React, { useState } from 'react'; import { Formik } from 'formik'; -import { - View, - Text, - Modal, - Button, - P, - Select, - FormError, -} from '../common'; +import { View, Text, Modal, Button, P, Select, FormError } from '../common'; import { integerToCurrency } from 'loot-core/src/shared/util'; import { colors } from '../../style'; diff --git a/packages/loot-design/src/components/modals/PlaidExternalMsg.js b/packages/loot-design/src/components/modals/PlaidExternalMsg.js index 31e3d6b..edfbb32 100644 --- a/packages/loot-design/src/components/modals/PlaidExternalMsg.js +++ b/packages/loot-design/src/components/modals/PlaidExternalMsg.js @@ -1,12 +1,5 @@ import React, { useState, useRef } from 'react'; -import { - View, - Text, - Modal, - Button, - P, - ModalButtons -} from '../common'; +import { View, Text, Modal, Button, P, ModalButtons } from '../common'; import { Error } from '../alerts'; import { colors } from '../../style'; import AnimatedLoading from '../../svg/v1/AnimatedLoading'; diff --git a/packages/loot-design/src/components/payees.usage.js b/packages/loot-design/src/components/payees.usage.js index 549d06c..c40aa48 100644 --- a/packages/loot-design/src/components/payees.usage.js +++ b/packages/loot-design/src/components/payees.usage.js @@ -95,7 +95,12 @@ export default () => ( onClose: () => setState({ isCurrent: true }) }} payees={state.payees} - ruleCounts={new Map([['three', 1], ['tw', 3]])} + ruleCounts={ + new Map([ + ['three', 1], + ['tw', 3] + ]) + } categoryGroups={categoryGroups} onBatchChange={changes => { setState({ payees: applyChanges(changes, state.payees) }); diff --git a/packages/loot-design/src/components/spreadsheet/CellDebugger.js b/packages/loot-design/src/components/spreadsheet/CellDebugger.js index c7c84ad..1339ced 100644 --- a/packages/loot-design/src/components/spreadsheet/CellDebugger.js +++ b/packages/loot-design/src/components/spreadsheet/CellDebugger.js @@ -34,9 +34,7 @@ class CellDebugger extends Component { render() { return ( - - {this.props.name}:{' '} - + {this.props.name}: { - if (binding.query) { - spreadsheet.createQuery(sheetName, binding.name, binding.query); + useLayoutEffect(() => { + if (binding.query) { + spreadsheet.createQuery(sheetName, binding.name, binding.query); + } + + return spreadsheet.bind(sheetName, binding, null, newResult => { + if (latestOnChange.current) { + latestOnChange.current(newResult); } - return spreadsheet.bind(sheetName, binding, null, newResult => { - if (latestOnChange.current) { - latestOnChange.current(newResult); - } - - if (newResult.value !== latestValue.current) { - setResult(newResult); - } - }); - }, - [sheetName, binding.name] - ); + if (newResult.value !== latestValue.current) { + setResult(newResult); + } + }); + }, [sheetName, binding.name]); return result.value != null ? children(result, setCell) : null; } diff --git a/packages/loot-design/src/components/spreadsheet/useSheetValue.js b/packages/loot-design/src/components/spreadsheet/useSheetValue.js index 3dc9f56..6ed20ef 100644 --- a/packages/loot-design/src/components/spreadsheet/useSheetValue.js +++ b/packages/loot-design/src/components/spreadsheet/useSheetValue.js @@ -51,24 +51,21 @@ export default function useSheetValue(binding, onChange) { latestValue.current = result.value; }); - useLayoutEffect( - () => { - if (binding.query) { - spreadsheet.createQuery(sheetName, binding.name, binding.query); + useLayoutEffect(() => { + if (binding.query) { + spreadsheet.createQuery(sheetName, binding.name, binding.query); + } + + return spreadsheet.bind(sheetName, binding, null, newResult => { + if (latestOnChange.current) { + latestOnChange.current(newResult); } - return spreadsheet.bind(sheetName, binding, null, newResult => { - if (latestOnChange.current) { - latestOnChange.current(newResult); - } - - if (newResult.value !== latestValue.current) { - setResult(newResult); - } - }); - }, - [sheetName, binding.name] - ); + if (newResult.value !== latestValue.current) { + setResult(newResult); + } + }); + }, [sheetName, binding.name]); return result.value; } diff --git a/packages/loot-design/src/components/table.js b/packages/loot-design/src/components/table.js index efe1ee1..4ff5922 100644 --- a/packages/loot-design/src/components/table.js +++ b/packages/loot-design/src/components/table.js @@ -31,10 +31,7 @@ import SheetValue from './spreadsheet/SheetValue'; import DateSelect from './DateSelect'; import format from './spreadsheet/format'; import { keys } from '../util/keys'; -import { - AvoidRefocusScrollProvider, - useProperFocus, -} from './useProperFocus'; +import { AvoidRefocusScrollProvider, useProperFocus } from './useProperFocus'; import { useSelectedItems } from './useSelected'; export const ROW_HEIGHT = 32; @@ -250,26 +247,23 @@ export function Row({ let rowRef = useRef(null); let timer = useRef(null); - useEffect( - () => { - if (highlighted && !prevHighlighted.current && rowRef.current) { - rowRef.current.classList.add('animated'); - setShouldHighlight(true); + useEffect(() => { + if (highlighted && !prevHighlighted.current && rowRef.current) { + rowRef.current.classList.add('animated'); + setShouldHighlight(true); + + clearTimeout(timer.current); + timer.current = setTimeout(() => { + setShouldHighlight(false); - clearTimeout(timer.current); timer.current = setTimeout(() => { - setShouldHighlight(false); - - timer.current = setTimeout(() => { - if (rowRef.current) { - rowRef.current.classList.remove('animated'); - } - }, 500); + if (rowRef.current) { + rowRef.current.classList.remove('animated'); + } }, 500); - } - }, - [highlighted] - ); + }, 500); + } + }, [highlighted]); useEffect(() => { prevHighlighted.current = highlighted; @@ -1233,8 +1227,8 @@ export function useTableNavigator(data, fields, opts = {}) { ? 'up' : 'down' : e.shiftKey - ? 'left' - : 'right' + ? 'left' + : 'right' ); break; default: diff --git a/packages/loot-design/src/components/tooltips.js b/packages/loot-design/src/components/tooltips.js index afc2f39..acd99d3 100644 --- a/packages/loot-design/src/components/tooltips.js +++ b/packages/loot-design/src/components/tooltips.js @@ -189,7 +189,8 @@ export class Tooltip extends React.Component { // If it doesn't fit below it, switch it above only if it does // fit above it (this.position.indexOf('bottom') !== -1 && - (testBottom > containerRect.height && testTop > 0)) + testBottom > containerRect.height && + testTop > 0) ) { // Invert the position this.position = this.getOppositePosition(this.position); diff --git a/packages/loot-design/src/parse-figma-theme.js b/packages/loot-design/src/parse-figma-theme.js index 28c2a56..8795388 100644 --- a/packages/loot-design/src/parse-figma-theme.js +++ b/packages/loot-design/src/parse-figma-theme.js @@ -1,7 +1,7 @@ let fs = require('fs'); let contents = fs.readFileSync(process.argv[2], 'utf8'); -let list = contents.match(/(\#[0-9a-fA-F]*)/g); +let list = contents.match(/(#[0-9a-fA-F]*)/g); let groups = ['y', 'r', 'b', 'n', 'g', 'p']; let colors = {}; diff --git a/packages/loot-design/src/setupTests.js b/packages/loot-design/src/setupTests.js index ebf5e77..27fad9d 100644 --- a/packages/loot-design/src/setupTests.js +++ b/packages/loot-design/src/setupTests.js @@ -53,7 +53,7 @@ process.on('unhandledRejection', reason => { }); global.afterEach(() => { - __resetWorld(); + global.__resetWorld(); }); // https://github.com/testing-library/react-testing-library#suppressing-unnecessary-warnings-on-react-dom-168 diff --git a/packages/loot-design/src/svg/Add.mobile.js b/packages/loot-design/src/svg/Add.mobile.js index 1f16d3a..a121771 100644 --- a/packages/loot-design/src/svg/Add.mobile.js +++ b/packages/loot-design/src/svg/Add.mobile.js @@ -1,5 +1,5 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; +import React from 'react'; import { Svg, @@ -18,9 +18,9 @@ import { Use, Defs, Stop -} from "mobile/node_modules/react-native-svg"; +} from 'mobile/node_modules/react-native-svg'; -function Add({ width, height, style, color = "black", ...props }) { +function Add({ width, height, style, color = 'black', ...props }) { return ( diff --git a/packages/loot-design/src/svg/Add.web.js b/packages/loot-design/src/svg/Add.web.js index c651c73..ad94f41 100644 --- a/packages/loot-design/src/svg/Add.web.js +++ b/packages/loot-design/src/svg/Add.web.js @@ -1,8 +1,8 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; -import { css } from "glamor"; +import React from 'react'; +import { css } from 'glamor'; -function Add({ width, height, style, color = "black", ...props }) { +function Add({ width, height, style, color = 'black', ...props }) { return ( diff --git a/packages/loot-design/src/svg/Bank.mobile.js b/packages/loot-design/src/svg/Bank.mobile.js index 6f619a6..d71ce89 100644 --- a/packages/loot-design/src/svg/Bank.mobile.js +++ b/packages/loot-design/src/svg/Bank.mobile.js @@ -1,5 +1,5 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; +import React from 'react'; import { Svg, @@ -18,9 +18,9 @@ import { Use, Defs, Stop -} from "mobile/node_modules/react-native-svg"; +} from 'mobile/node_modules/react-native-svg'; -function Bank({ width, height, style, color = "black", ...props }) { +function Bank({ width, height, style, color = 'black', ...props }) { return ( ; -function LeftArrow3({ width, height, style, color = "black", ...props }) { +function LeftArrow3({ width, height, style, color = 'black', ...props }) { return ( diff --git a/packages/loot-design/src/svg/Pencil.web.js b/packages/loot-design/src/svg/Pencil.web.js index b3d23ce..1e82041 100644 --- a/packages/loot-design/src/svg/Pencil.web.js +++ b/packages/loot-design/src/svg/Pencil.web.js @@ -1,8 +1,8 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; -import { css } from "glamor"; +import React from 'react'; +import { css } from 'glamor'; -function Pencil({ width, height, style, color = "black", ...props }) { +function Pencil({ width, height, style, color = 'black', ...props }) { return ( diff --git a/packages/loot-design/src/svg/Reports.mobile.js b/packages/loot-design/src/svg/Reports.mobile.js index 073f8dc..2ab8844 100644 --- a/packages/loot-design/src/svg/Reports.mobile.js +++ b/packages/loot-design/src/svg/Reports.mobile.js @@ -1,5 +1,5 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; +import React from 'react'; import { Svg, @@ -18,9 +18,9 @@ import { Use, Defs, Stop -} from "mobile/node_modules/react-native-svg"; +} from 'mobile/node_modules/react-native-svg'; -function Reports({ width, height, style, color = "black", ...props }) { +function Reports({ width, height, style, color = 'black', ...props }) { return ( diff --git a/packages/loot-design/src/svg/logo/Logo.ios.js b/packages/loot-design/src/svg/logo/Logo.ios.js index ec43b37..cd74b3a 100644 --- a/packages/loot-design/src/svg/logo/Logo.ios.js +++ b/packages/loot-design/src/svg/logo/Logo.ios.js @@ -1,5 +1,5 @@ -import React from "react"; -import Svg, { Path } from "react-native-svg"; +import React from 'react'; +import Svg, { Path } from 'react-native-svg'; const SvgLogo = props => ( ( height={32} fill="none" style={{ - color: "#242134", + color: '#242134', ...props.style }} > diff --git a/packages/loot-design/src/svg/merge.mobile.js b/packages/loot-design/src/svg/merge.mobile.js index 0a22c2e..ca01b67 100644 --- a/packages/loot-design/src/svg/merge.mobile.js +++ b/packages/loot-design/src/svg/merge.mobile.js @@ -1,5 +1,5 @@ /* This file is auto-generated, do not touch! Please edit the SVG file instead. */ -import React from "react"; +import React from 'react'; import { Svg, @@ -18,9 +18,9 @@ import { Use, Defs, Stop -} from "mobile/node_modules/react-native-svg"; +} from 'mobile/node_modules/react-native-svg'; -function Merge({ width, height, style, color = "black", ...props }) { +function Merge({ width, height, style, color = 'black', ...props }) { return (