From 12d3bcc114af30f34c271b0e2b87631ecb1ad3e5 Mon Sep 17 00:00:00 2001 From: Crazypkr Date: Wed, 6 Sep 2023 12:40:47 -0400 Subject: [PATCH] Revert "Added support Iphone SE Size (Not 100% DONT PULL)" This reverts commit 9b5d1876b0808833f84dac279048c1613e5ded9e. --- .../desktop-client/src/ResponsiveProvider.tsx | 4 +- .../components/budget/MobileBudgetSmall.js | 317 ----- .../budget/MobileBudgetTableSmall.js | 1092 ----------------- .../src/components/responsive/index.tsx | 13 +- .../src/components/responsive/small.ts | 4 - packages/desktop-client/src/tokens.ts | 3 - 6 files changed, 4 insertions(+), 1429 deletions(-) delete mode 100644 packages/desktop-client/src/components/budget/MobileBudgetSmall.js delete mode 100644 packages/desktop-client/src/components/budget/MobileBudgetTableSmall.js delete mode 100644 packages/desktop-client/src/components/responsive/small.ts diff --git a/packages/desktop-client/src/ResponsiveProvider.tsx b/packages/desktop-client/src/ResponsiveProvider.tsx index 0e421f2a45e..d31ec6e3e3d 100644 --- a/packages/desktop-client/src/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/ResponsiveProvider.tsx @@ -6,7 +6,6 @@ import { breakpoints } from './tokens'; type TResponsiveContext = { atLeastMediumWidth: boolean; - isExtraSmallWidth: boolean; isNarrowWidth: boolean; isSmallWidth: boolean; isMediumWidth: boolean; @@ -35,8 +34,7 @@ export function ResponsiveProvider(props: { children: ReactNode }) { const viewportInfo = { // atLeastMediumWidth is provided to avoid checking (isMediumWidth || isWideWidth) atLeastMediumWidth: width >= breakpoints.medium, - isExtraSmallWidth: width < breakpoints.extrasmall, - isNarrowWidth: width >= breakpoints.extrasmall && width < breakpoints.small, + isNarrowWidth: width < breakpoints.small, isSmallWidth: width >= breakpoints.small && width < breakpoints.medium, isMediumWidth: width >= breakpoints.medium && width < breakpoints.wide, // No atLeastWideWidth because that's identical to isWideWidth diff --git a/packages/desktop-client/src/components/budget/MobileBudgetSmall.js b/packages/desktop-client/src/components/budget/MobileBudgetSmall.js deleted file mode 100644 index 559d42f4239..00000000000 --- a/packages/desktop-client/src/components/budget/MobileBudgetSmall.js +++ /dev/null @@ -1,317 +0,0 @@ -import React, { Component } from 'react'; -import { useSelector } from 'react-redux'; - -import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider'; -import { send, listen } from 'loot-core/src/platform/client/fetch'; -import { - addCategory, - moveCategory, - moveCategoryGroup, -} from 'loot-core/src/shared/categories'; -import * as monthUtils from 'loot-core/src/shared/months'; - -import { useActions } from '../../hooks/useActions'; -import useCategories from '../../hooks/useCategories'; -import { useSetThemeColor } from '../../hooks/useSetThemeColor'; -import AnimatedLoading from '../../icons/AnimatedLoading'; -import { theme } from '../../style'; -import View from '../common/View'; -import SyncRefresh from '../SyncRefresh'; - -import { BudgetTable } from './MobileBudgetTable'; - -class Budget extends Component { - constructor(props) { - super(props); - - this.summary = 0; - - const currentMonth = monthUtils.currentMonth(); - this.state = { - bounds: { start: currentMonth, end: currentMonth }, - currentMonth: currentMonth, - initialized: false, - editMode: false, - categoryGroups: null, - }; - } - - async loadCategories() { - let result = await this.props.getCategories(); - this.setState({ categoryGroups: result.grouped }); - } - - async componentDidMount() { - // let removeBlur = this.props.navigation.addListener('didBlur', () => { - // this.setState({ editMode: false }); - // }); - - this.loadCategories(); - - const { start, end } = await send('get-budget-bounds'); - this.setState({ bounds: { start, end } }); - - this.prewarmMonth(this.state.currentMonth); - - let unlisten = listen('sync-event', ({ type, tables }) => { - if ( - type === 'success' && - (tables.includes('categories') || - tables.includes('category_mapping') || - tables.includes('category_groups')) - ) { - // TODO: is this loading every time? - this.loadCategories(); - } - }); - - this.cleanup = () => { - // removeBlur(); - unlisten(); - }; - } - - componentWillUnmount() { - // this.cleanup(); - } - - prewarmMonth = async (month, type = null) => { - type = type || this.props.budgetType; - - let method = - type === 'report' ? 'report-budget-month' : 'rollover-budget-month'; - - let values = await send(method, { month }); - - for (let value of values) { - this.props.spreadsheet.prewarmCache(value.name, value); - } - - if (!this.state.initialized) { - this.setState({ initialized: true }); - } - }; - - onShowBudgetDetails = () => { - this.props.pushModal('budget-summary', { month: this.state.currentMonth }); - }; - - onBudgetAction = type => { - const { currentMonth } = this.state; - this.props.applyBudgetAction(currentMonth, type, this.state.bounds); - }; - - onAddCategory = groupId => { - this.props.navigation.navigate('AddCategoryModal', { - groupId, - onAdd: async name => { - let id = await this.props.createCategory(name, groupId); - let { categoryGroups } = this.state; - - this.setState({ - categoryGroups: addCategory(categoryGroups, { - name, - cat_group: groupId, - is_income: 0, - id, - }), - }); - }, - }); - }; - - onReorderCategory = (id, { inGroup, aroundCategory }) => { - let { categoryGroups } = this.state; - let groupId, targetId; - - if (inGroup) { - groupId = inGroup; - } else if (aroundCategory) { - let { id: catId, position } = aroundCategory; - - let group = categoryGroups.find(group => - group.categories.find(cat => cat.id === catId), - ); - - if (position === 'bottom') { - let { categories } = group; - let idx = categories.findIndex(cat => cat.id === catId); - catId = idx < categories.length - 1 ? categories[idx + 1].id : null; - } - - groupId = group.id; - targetId = catId; - } - - this.props.moveCategory(id, groupId, targetId); - - this.setState({ - categoryGroups: moveCategory(categoryGroups, id, groupId, targetId), - }); - }; - - onReorderGroup = (id, targetId, position) => { - let { categoryGroups } = this.state; - - if (position === 'bottom') { - let idx = categoryGroups.findIndex(group => group.id === targetId); - targetId = - idx < categoryGroups.length - 1 ? categoryGroups[idx + 1].id : null; - } - - this.props.moveCategoryGroup(id, targetId); - - this.setState({ - categoryGroups: moveCategoryGroup(categoryGroups, id, targetId), - }); - }; - - sync = async () => { - const { updated, error } = await this.props.sync(); - if (error) { - return 'error'; - } else if (updated) { - return 'updated'; - } - return null; - }; - - onPrevMonth = async () => { - let month = monthUtils.subMonths(this.state.currentMonth, 1); - await this.prewarmMonth(month); - this.setState({ currentMonth: month }); - }; - - onNextMonth = async () => { - let month = monthUtils.addMonths(this.state.currentMonth, 1); - await this.prewarmMonth(month); - this.setState({ currentMonth: month }); - }; - - onOpenActionSheet = () => { - let { budgetType } = this.props; - - let options = [ - 'Edit Categories', - 'Copy last month’s budget', - 'Set budgets to zero', - 'Set budgets to 3 month average', - budgetType === 'report' && 'Apply to all future budgets', - 'Cancel', - ].filter(Boolean); - - this.props.showActionSheetWithOptions( - { - options, - cancelButtonIndex: options.length - 1, - title: 'Actions', - }, - idx => { - switch (idx) { - case 0: - this.setState({ editMode: true }); - break; - case 1: - this.onBudgetAction('copy-last'); - break; - case 2: - this.onBudgetAction('set-zero'); - break; - case 3: - this.onBudgetAction('set-3-avg'); - break; - case 4: - if (budgetType === 'report') { - this.onBudgetAction('set-all-future'); - } - break; - default: - } - }, - ); - }; - - render() { - const { currentMonth, bounds, editMode, initialized } = this.state; - const { - categories, - categoryGroups, - prefs, - budgetType, - navigation, - applyBudgetAction, - } = this.props; - let numberFormat = prefs.numberFormat || 'comma-dot'; - let hideFraction = prefs.hideFraction || false; - - if (!categoryGroups || !initialized) { - return ( - - - - ); - } - - return ( - - {({ refreshing, onRefresh }) => ( - - // } - onEditMode={flag => this.setState({ editMode: flag })} - onShowBudgetDetails={this.onShowBudgetDetails} - onPrevMonth={this.onPrevMonth} - onNextMonth={this.onNextMonth} - onAddCategory={this.onAddCategory} - onReorderCategory={this.onReorderCategory} - onReorderGroup={this.onReorderGroup} - onOpenActionSheet={() => {}} //this.onOpenActionSheet} - onBudgetAction={applyBudgetAction} - /> - )} - - ); - } -} - -export default function BudgetWrapper() { - let { list: categories, grouped: categoryGroups } = useCategories(); - let budgetType = useSelector( - state => state.prefs.local.budgetType || 'rollover', - ); - let prefs = useSelector(state => state.prefs.local); - - let actions = useActions(); - let spreadsheet = useSpreadsheet(); - - useSetThemeColor(theme.mobileBudgetViewTheme); - return ( - - ); -} diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTableSmall.js b/packages/desktop-client/src/components/budget/MobileBudgetTableSmall.js deleted file mode 100644 index ea6c0681fd1..00000000000 --- a/packages/desktop-client/src/components/budget/MobileBudgetTableSmall.js +++ /dev/null @@ -1,1092 +0,0 @@ -import React, { Component, memo, PureComponent, useState } from 'react'; -// import { -// RectButton, -// PanGestureHandler, -// NativeViewGestureHandler -// } from 'react-native-gesture-handler'; -// import Animated, { Easing } from 'react-native-reanimated'; -// import AndroidKeyboardAvoidingView from './AndroidKeyboardAvoidingView'; - -import memoizeOne from 'memoize-one'; - -import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries'; -import * as monthUtils from 'loot-core/src/shared/months'; -import { amountToInteger, integerToAmount } from 'loot-core/src/shared/util'; - -import Add from '../../icons/v1/Add'; -import ArrowThinLeft from '../../icons/v1/ArrowThinLeft'; -import ArrowThinRight from '../../icons/v1/ArrowThinRight'; -// eslint-disable-next-line no-restricted-imports -import { colors, styles } from '../../style'; -import Button from '../common/Button'; -import Card from '../common/Card'; -import Label from '../common/Label'; -import Text from '../common/Text'; -import View from '../common/View'; -import { useServerURL } from '../ServerContext'; -import CellValue from '../spreadsheet/CellValue'; -import NamespaceContext from '../spreadsheet/NamespaceContext'; -import useFormat from '../spreadsheet/useFormat'; -import useSheetValue from '../spreadsheet/useSheetValue'; -import { SyncButton } from '../Titlebar'; -import { AmountInput } from '../util/AmountInput'; -// import { -// AmountAccessoryContext, -// MathOperations -// } from '../mobile/AmountInput'; - -// import { DragDrop, Draggable, Droppable, DragDropHighlight } from './dragdrop'; -import { ListItem, ROW_HEIGHT } from './MobileTable'; - -function ToBudget({ toBudget, onClick }) { - let amount = useSheetValue(toBudget); - let format = useFormat(); - return ( - - ); -} - -function Saved({ projected }) { - let budgetedSaved = useSheetValue(reportBudget.totalBudgetedSaved) || 0; - let totalSaved = useSheetValue(reportBudget.totalSaved) || 0; - let format = useFormat(); - let saved = projected ? budgetedSaved : totalSaved; - let isNegative = saved < 0; - - return ( - - {projected ? ( - - ); -} - -const BudgetCell = memo(function BudgetCell(props) { - const { - name, - binding, - editing, - style, - textStyle, - categoryId, - month, - onBudgetAction, - } = props; - - let sheetValue = useSheetValue(binding); - let format = useFormat(); - - return ( - - {}} // temporarily disabled for read-only view - onBlur={value => { - onBudgetAction(month, 'budget-amount', { - category: categoryId, - amount: amountToInteger(value), - }); - }} - /> - - - - {format(sheetValue || 0, 'financial')} - - - - ); -}); - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function BudgetGroupPreview({ group, pending, style }) { - // let opacity = useMemo(() => new Animated.Value(0), []); - - // useEffect(() => { - // Animated.timing(opacity, { - // toValue: 1, - // duration: 100, - // easing: Easing.inOut(Easing.ease) - // }).start(); - // }, []); - - return ( - // - - - - {group.categories.map((cat, index) => ( - - ))} - - // - ); -} - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -function BudgetCategoryPreview({ name, pending, style }) { - return ( - // - - {name} - - // - ); -} - -class BudgetCategory extends PureComponent { - constructor(props) { - super(props); - - let { editMode, blank } = props; - // this.opacity = new Animated.Value(editMode || blank ? 0 : 1); - this.opacity = editMode || blank ? 0 : 1; - } - - // componentDidUpdate(prevProps) { - // if (prevProps.editing !== this.props.editing) { - // if (this.props.editing && ACTScrollViewManager) { - // ACTScrollViewManager.setFocused(findNodeHandle(this.container)); - // } - // } - - // if (prevProps.editMode !== this.props.editMode) { - // Animated.timing(this.opacity, { - // toValue: this.props.editMode ? 0 : 1, - // duration: 200, - // easing: Easing.inOut(Easing.ease) - // }).start(); - // } - // } - - render() { - let { - category, - editing, - index, - // gestures, - // editMode, - style, - month, - // onEdit, - onBudgetAction, - } = this.props; - - let budgeted = rolloverBudget.catBudgeted(category.id); - let balance = rolloverBudget.catBalance(category.id); - - let content = !category.hidden && ( - (this.container = el)} - style={{ - backgroundColor: editing ? colors.p11 : 'transparent', - borderBottomWidth: 0, - borderTopWidth: index > 0 ? 1 : 0, - ...style, - }} - data-testid="row" - > - - - {category.name} - - - {/* */} - - - value < 0 && { color: colors.r4 }} - type="financial" - /> - - {/* */} - - ); - - return
{content}
; - // ( - // - // )} - // gestures={gestures} - // > - // { - // let pos = (y - layout.y) / layout.height; - // return pos < 0.5 ? 'top' : 'bottom'; - // }} - // onDrop={(id, type, droppable, status) => - // this.props.onReorder(id.replace('category:', ''), { - // aroundCategory: { - // id: category.id, - // position: status - // } - // }) - // } - // > - // {() => content} - // - // - } -} - -class TotalsRow extends PureComponent { - constructor(props) { - super(props); - - let { editMode, blank } = props; - // this.animation = new Animated.Value(editMode || blank ? 0 : 1); - this.opacity = editMode || blank ? 0 : 1; - } - - // componentDidUpdate(prevProps) { - // if (prevProps.editMode !== this.props.editMode) { - // Animated.timing(this.animation, { - // toValue: this.props.editMode ? 0 : 1, - // duration: 200, - // easing: Easing.inOut(Easing.ease) - // }).start(); - // } - // } - - render() { - let { group, editMode, onAddCategory } = this.props; - - let content = ( - - - - {group.name} - - - {/* */} - - - - - {/* */} - - {editMode && ( - // - - - - // - )} - - ); - - if (!editMode) { - return content; - } - - return content; - // { - // return 'bottom'; - // }} - // onDrop={(id, type, droppable, status) => - // this.props.onReorderCategory(id, { inGroup: group.id }) - // } - // > - // {() => content} - // - } -} - -class IncomeCategory extends PureComponent { - render() { - const { name, budget, balance, style, nameTextStyle, amountTextStyle } = - this.props; - return ( - - - - {name} - - - {budget && ( - - )} - - - ); - } -} - -// export function BudgetAccessoryView() { -// let emitter = useContext(AmountAccessoryContext); - -// return ( -// -// -// -// -// -// -// -// -// -// ); -// } - -class BudgetGroup extends PureComponent { - render() { - const { - group, - // editingId, - editMode, - // gestures, - month, - onEditCategory, - onReorderCategory, - // onReorderGroup, - onAddCategory, - onBudgetAction, - } = this.props; - - function editable(content) { - if (!editMode) { - return content; - } - - return content; - // ( - // - // )} - // gestures={gestures} - // > - // { - // let pos = (y - layout.y) / layout.height; - // return pos < 0.5 ? 'top' : 'bottom'; - // }} - // onDrop={(id, type, droppable, status) => { - // onReorderGroup(id, group.id, status); - // }} - // > - // {() => content} - // - // - } - - return editable( - - - - {group.categories.map((category, index) => { - // const editing = editingId === category.id; - return ( - - ); - })} - , - ); - } -} - -class IncomeBudgetGroup extends Component { - render() { - const { type, group } = this.props; - return ( - - - {type === 'report' && ( - - - - - - {group.categories.map((category, index) => { - return ( - - ); - })} - - - ); - } -} - -class BudgetGroups extends Component { - getGroups = memoizeOne(groups => { - return { - incomeGroup: groups.find(group => group.is_income), - expenseGroups: groups.filter(group => !group.is_income), - }; - }); - - render() { - const { - type, - categoryGroups, - editingId, - // editMode, - gestures, - month, - onEditCategory, - onAddCategory, - onReorderCategory, - onReorderGroup, - onBudgetAction, - } = this.props; - const { incomeGroup, expenseGroups } = this.getGroups(categoryGroups); - - return ( - - {expenseGroups.map(group => { - return ( - - ); - })} - - {incomeGroup && } - - ); - } -} - -export function BudgetTable(props) { - const [editingCategory, setEditingCategory] = useState(null); - - function onEditCategory(id) { - setEditingCategory(id); - } - - const { - type, - categoryGroups, - month, - monthBounds, - editMode, - // refreshControl, - onPrevMonth, - onNextMonth, - onAddCategory, - onEditMode, - onReorderCategory, - onReorderGroup, - onShowBudgetDetails, - onOpenActionSheet, - onBudgetAction, - } = props; - - // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now - let currentMonth = monthUtils.currentMonth(); - let format = useFormat(); - - return ( - - - onEditMode(false)} - onOpenActionSheet={onOpenActionSheet} - onPrevMonth={onPrevMonth} - onNextMonth={onNextMonth} - /> - - {type === 'report' ? ( - = currentMonth} /> - ) : ( - - )} - - - - - - - - - - {!editMode ? ( - // (this.list = el)} - // keyboardShouldPersistTaps="always" - // refreshControl={refreshControl} - // style={{ backgroundColor: colors.n10 }} - // automaticallyAdjustContentInsets={false} - // > - - - - ) : ( - // - // - // {({ - // dragging, - // onGestureEvent, - // onHandlerStateChange, - // scrollRef, - // onScroll - // }) => ( - <> - - {}} //onEditCategory} - onAddCategory={onAddCategory} - onReorderCategory={onReorderCategory} - onReorderGroup={onReorderGroup} - /> - - - {/* */} - - // )} - // - )} - - - - ); -} - -function BudgetHeader({ - currentMonth, - monthBounds, - editMode, - onDone, - onPrevMonth, - onNextMonth, -}) { - let serverURL = useServerURL(); - - // let [menuOpen, setMenuOpen] = useState(false); - - // let onMenuSelect = type => { - // setMenuOpen(false); - - // switch (type) { - // case 'sync': - // sync(); - // break; - // default: - // } - // }; - - let prevEnabled = currentMonth > monthBounds.start; - let nextEnabled = currentMonth < monthUtils.subMonths(monthBounds.end, 1); - - let buttonStyle = { - paddingLeft: 15, - paddingRight: 15, - backgroundColor: 'transparent', - }; - - return ( - - {!editMode && ( - - )} - - {/* eslint-disable-next-line rulesdir/typography */} - {monthUtils.format(currentMonth, "MMMM ''yy")} - - {editMode ? ( - - ) : ( - <> - - - {serverURL && ( - - )} - {/* */} - - )} - - ); -} diff --git a/packages/desktop-client/src/components/responsive/index.tsx b/packages/desktop-client/src/components/responsive/index.tsx index 360193029bf..570e533aabe 100644 --- a/packages/desktop-client/src/components/responsive/index.tsx +++ b/packages/desktop-client/src/components/responsive/index.tsx @@ -2,14 +2,12 @@ import { useResponsive } from '../../ResponsiveProvider'; import { LoadComponent } from '../util/LoadComponent'; import type * as NarrowComponents from './narrow'; -import type * as SmallComponents from './small'; import type * as WideComponents from './wide'; let loadNarrow = () => import(/* webpackChunkName: "narrow-components" */ './narrow'); let loadWide = () => import(/* webpackChunkName: "wide-components" */ './wide'); -let loadSmall = () => - import(/* webpackChunkName: "small-components" */ './small'); + export function WideComponent({ name }: { name: keyof typeof WideComponents }) { return ; } @@ -17,18 +15,13 @@ export function WideComponent({ name }: { name: keyof typeof WideComponents }) { export function NarrowAlternate({ name, }: { - name: keyof typeof WideComponents & - keyof typeof NarrowComponents & - keyof typeof SmallComponents; + name: keyof typeof WideComponents & keyof typeof NarrowComponents; }) { const { isNarrowWidth } = useResponsive(); - const { isExtraSmallWidth } = useResponsive(); return ( ); } diff --git a/packages/desktop-client/src/components/responsive/small.ts b/packages/desktop-client/src/components/responsive/small.ts deleted file mode 100644 index 69eb870d180..00000000000 --- a/packages/desktop-client/src/components/responsive/small.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as Budget } from '../budget/MobileBudgetSmall'; - -export { default as Accounts } from '../accounts/MobileAccounts'; -export { default as Account } from '../accounts/MobileAccount'; diff --git a/packages/desktop-client/src/tokens.ts b/packages/desktop-client/src/tokens.ts index 2b73ad1441d..280dc7f9eb7 100644 --- a/packages/desktop-client/src/tokens.ts +++ b/packages/desktop-client/src/tokens.ts @@ -1,5 +1,4 @@ enum BreakpointNames { - extrasmall = 'extrasmall', small = 'small', medium = 'medium', wide = 'wide', @@ -10,7 +9,6 @@ type NumericBreakpoints = { }; export const breakpoints: NumericBreakpoints = { - extrasmall: 370, small: 512, medium: 730, wide: 1100, @@ -22,7 +20,6 @@ type BreakpointsPx = { // Provide the same breakpoints in a form usable by CSS media queries // { -// breakpoint_extrasmall: '370px', // breakpoint_small: '512px', // breakpoint_medium: '740px', // breakpoint_wide: '1100px',