MobileTable tsx Refactor

packages/desktop-client/src/components/budget/MobileTable.js → packages/desktop-client/src/components/budget/MobileTable.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { colors } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
 
-export const ListItem = ({ children, style, ...props }) => {
+type ListItemProps = {
+  children?: ReactNode;
+  style: CSSProperties;
+};
+
+export const ListItem = ({ children, style, ...props }: ListItemProps) => {
   return (
     <View
       style={[

packages/desktop-client/src/components/schedules/EditSchedule.js

@@ -9,7 +9,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { extractScheduleConds } from 'loot-core/src/shared/schedules';
 
 import useSelected, { SelectedProvider } from '../../hooks/useSelected';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
 import Button from '../common/Button';
@@ -488,7 +488,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
               }}
               style={{
                 padding: '0 10px',
-                color: colors.n5,
+                color: theme.altpageTextSubdued,
                 fontSize: 12,
               }}
               onChange={(_, op) =>
@@ -548,13 +548,13 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
 
           {state.upcomingDates && (
             <View style={{ fontSize: 13, marginTop: 20 }}>
-              <Text style={{ color: colors.n4, fontWeight: 600 }}>
+              <Text style={{ color: theme.pageTextLight, fontWeight: 600 }}>
                 Upcoming dates
               </Text>
               <Stack
                 direction="column"
                 spacing={1}
-                style={{ marginTop: 10, color: colors.n4 }}
+                style={{ marginTop: 10, color: theme.pageTextLight }}
               >
                 {state.upcomingDates.map(date => (
                   <View key={date}>
@@ -625,7 +625,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
             style={{
               width: 350,
               textAlign: 'right',
-              color: colors.n4,
+              color: theme.pageTextLight,
               marginTop: 10,
               fontSize: 13,
               lineHeight: '1.4em',
@@ -640,7 +640,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
               {state.isCustom && (
                 <Text
                   style={{
-                    color: colors.b5,
+                    color: theme.altpageTextSubdued,
                     fontSize: 13,
                     textAlign: 'right',
                     width: 350,
@@ -661,11 +661,11 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
         <SelectedProvider instance={selectedInst}>
           {adding ? (
             <View style={{ flexDirection: 'row', padding: '5px 0' }}>
-              <Text style={{ color: colors.n4 }}>
+              <Text style={{ color: theme.pageTextLight }}>
                 These transactions match this schedule:
               </Text>
               <View style={{ flex: 1 }} />
-              <Text style={{ color: colors.n6 }}>
+              <Text style={{ color: theme.pageTextLight }}>
                 Select transactions to link on save
               </Text>
             </View>
@@ -675,7 +675,9 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
                 type="bare"
                 style={{
                   color:
-                    state.transactionsMode === 'linked' ? colors.b4 : colors.n7,
+                    state.transactionsMode === 'linked'
+                      ? theme.pageTextLink
+                      : theme.pageTextSubdued,
                   marginRight: 10,
                   fontSize: 14,
                 }}
@@ -688,8 +690,8 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
                 style={{
                   color:
                     state.transactionsMode === 'matched'
-                      ? colors.b4
-                      : colors.n7,
+                      ? theme.pageTextLink
+                      : theme.pageTextSubdued,
                   fontSize: 14,
                 }}
                 onClick={() => onSwitchTransactions('matched')}
@@ -721,28 +723,19 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
 
           <SimpleTransactionsTable
             renderEmpty={
-              state.transactionsMode === 'matched' &&
-              (() => (
-                <View
-                  style={{ padding: 20, color: colors.n4, textAlign: 'center' }}
-                >
-                  {state.error ? (
-                    <Text style={{ color: colors.r4 }}>
-                      Could not search: {state.error}
-                    </Text>
-                  ) : (
-                    'No transactions found'
-                  )}
-                </View>
-              ))
+              <NoTransactionsMessage
+                error={state.error}
+                transactionsMode={state.transactionsMode}
+              />
             }
             transactions={state.transactions}
             fields={['date', 'payee', 'amount']}
             style={{
-              border: '1px solid ' + colors.border,
+              border: '1px solid ' + theme.tableBorder,
               borderRadius: 4,
               overflow: 'hidden',
               marginTop: 5,
+              maxHeight: 200,
             }}
           />
         </SelectedProvider>
@@ -754,7 +747,9 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
         align="center"
         style={{ marginTop: 20 }}
       >
-        {state.error && <Text style={{ color: colors.r4 }}>{state.error}</Text>}
+        {state.error && (
+          <Text style={{ color: theme.errorText }}>{state.error}</Text>
+        )}
         <Button style={{ marginRight: 10 }} onClick={actions.popModal}>
           Cancel
         </Button>
@@ -765,3 +760,25 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
     </Modal>
   );
 }
+
+function NoTransactionsMessage(props) {
+  return (
+    <View
+      style={{
+        padding: 20,
+        color: theme.pageTextLight,
+        textAlign: 'center',
+      }}
+    >
+      {props.error ? (
+        <Text style={{ color: theme.errorText }}>
+          Could not search: {props.error}
+        </Text>
+      ) : props.transactionsMode === 'matched' ? (
+        'No matching transactions'
+      ) : (
+        'No linked transactions'
+      )}
+    </View>
+  );
+}

packages/desktop-client/src/components/table.tsx

@@ -1111,7 +1111,12 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
             {...(Array.isArray(headers) ? { headers } : { children: headers })}
           />
         )}
-        <View style={{ flex: 1, backgroundColor }}>
+        <View
+          style={{
+            flex: `1 1 ${rowHeight * Math.max(2, items.length)}px`,
+            backgroundColor,
+          }}
+        >
           {isEmpty ? (
             getEmptyContent(renderEmpty)
           ) : (

upcoming-release-notes/1571.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [trevdor]
+---
+
+Fix collapsed linked transactions table in Schedule editor modal

upcoming-release-notes/1578.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [Jod929]
+---
+
+Refactor MobileTable to tsx.