Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do not include hidden Categories when adding transactions #1914

Closed
wants to merge 5 commits into from
Closed

Do not include hidden Categories when adding transactions #1914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0085215
add filter to not include hidden categories when adding transaction
ioslife Nov 16, 2023
60bc0e8
adding release notes
ioslife Nov 16, 2023
c0171da
addressing linting failure
ioslife Nov 16, 2023
849a3ee
making authors a list
ioslife Nov 16, 2023
e18fd5c
running yarn eslint --fix
ioslife Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 92 additions & 90 deletions packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,102 +46,104 @@ function CategoryList({
...(!embedded && { maxHeight: 175 }),
}}
>
{items.map((item, idx) => {
if (item.id === 'split') {
return (
<View
key="split"
{...(getItemProps ? getItemProps({ item }) : null)}
// Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
// event handler they set on this element. When this code runs
// in WebKit on touch-enabled devices, taps on this element end
// up not triggering the `onClick` event (and therefore delaying
// response to user input) until after the `setTimeout` callback
// finishes executing. This is caused by content observation code
// that implements various strategies to prevent the user from
// accidentally clicking content that changed as a result of code
// run in the `onMouseMove` event.
//
// Long story short, we don't want any delay here between the user
// tapping and the resulting action being performed. It turns out
// there's some "fast path" logic that can be triggered in various
// ways to force WebKit to bail on the content observation process.
// One of those ways is setting `role="button"` (or a number of
// other aria roles) on the element, which is what we're doing here.
//
// ref:
// * https://github.com/WebKit/WebKit/blob/447d90b0c52b2951a69df78f06bb5e6b10262f4b/LayoutTests/fast/events/touch/ios/content-observation/400ms-hover-intent.html
// * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
// * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
role="button"
style={{
backgroundColor:
highlightedIndex === idx
? theme.menuAutoCompleteBackgroundHover
: 'transparent',
borderRadius: embedded ? 4 : 0,
flexShrink: 0,
flexDirection: 'row',
alignItems: 'center',
fontSize: 11,
fontWeight: 500,
color: theme.noticeTextMenu,
padding: '6px 8px',
':active': {
backgroundColor: 'rgba(100, 100, 100, .25)',
},
}}
data-testid="split-transaction-button"
>
<Text style={{ lineHeight: 0 }}>
<Split width={10} height={10} style={{ marginRight: 5 }} />
</Text>
Split Transaction
</View>
);
}

const showGroup = item.cat_group !== lastGroup;
lastGroup = item.cat_group;
return (
<Fragment key={item.id}>
{showGroup && (
<div
{items
.filter(item => !item.hidden)
.map((item, idx) => {
if (item.id === 'split') {
return (
<View
key="split"
{...(getItemProps ? getItemProps({ item }) : null)}
// Downshift calls `setTimeout(..., 250)` in the `onMouseMove`
// event handler they set on this element. When this code runs
// in WebKit on touch-enabled devices, taps on this element end
// up not triggering the `onClick` event (and therefore delaying
// response to user input) until after the `setTimeout` callback
// finishes executing. This is caused by content observation code
// that implements various strategies to prevent the user from
// accidentally clicking content that changed as a result of code
// run in the `onMouseMove` event.
//
// Long story short, we don't want any delay here between the user
// tapping and the resulting action being performed. It turns out
// there's some "fast path" logic that can be triggered in various
// ways to force WebKit to bail on the content observation process.
// One of those ways is setting `role="button"` (or a number of
// other aria roles) on the element, which is what we're doing here.
//
// ref:
// * https://github.com/WebKit/WebKit/blob/447d90b0c52b2951a69df78f06bb5e6b10262f4b/LayoutTests/fast/events/touch/ios/content-observation/400ms-hover-intent.html
// * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
// * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
role="button"
style={{
color: theme.menuAutoCompleteTextHeader,
padding: '4px 9px',
...groupHeaderStyle,
}}
data-testid="category-item-group"
>
{`${item.group?.name}`}
</div>
)}
<div
{...(getItemProps ? getItemProps({ item }) : null)}
// See comment above.
role="button"
className={`${css([
{
backgroundColor:
highlightedIndex === idx
? theme.menuAutoCompleteBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,
},
])}`}
data-testid={
'category-item' +
(highlightedIndex === idx ? '-highlighted' : '')
}
>
{item.name}
</div>
</Fragment>
);
})}
flexShrink: 0,
flexDirection: 'row',
alignItems: 'center',
fontSize: 11,
fontWeight: 500,
color: theme.noticeTextMenu,
padding: '6px 8px',
':active': {
backgroundColor: 'rgba(100, 100, 100, .25)',
},
}}
data-testid="split-transaction-button"
>
<Text style={{ lineHeight: 0 }}>
<Split width={10} height={10} style={{ marginRight: 5 }} />
</Text>
Split Transaction
</View>
);
}

const showGroup = item.cat_group !== lastGroup;
lastGroup = item.cat_group;
return (
<Fragment key={item.id}>
{showGroup && (
<div
style={{
color: theme.menuAutoCompleteTextHeader,
padding: '4px 9px',
...groupHeaderStyle,
}}
data-testid="category-item-group"
>
{`${item.group?.name}`}
</div>
)}
<div
{...(getItemProps ? getItemProps({ item }) : null)}
// See comment above.
role="button"
className={`${css([
{
backgroundColor:
highlightedIndex === idx
? theme.menuAutoCompleteBackgroundHover
: 'transparent',
padding: 4,
paddingLeft: 20,
borderRadius: embedded ? 4 : 0,
},
])}`}
data-testid={
'category-item' +
(highlightedIndex === idx ? '-highlighted' : '')
}
>
{item.name}
</div>
</Fragment>
);
})}
</View>
{footer}
</View>
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/1914.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Features
authors: [iOSLife]
---

Adds a filter on the item list in the CategoryAutocomplete component. This will prevent users from accidentally adding a transaction to a hidden category.