Skip to content

Commit

Permalink
running yarn eslint --fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@ioslife
ioslife committed Nov 16, 2023
1 parent 849a3ee commit e18fd5c
Showing 1 changed file with 92 additions and 91 deletions.
183 changes: 92 additions & 91 deletions packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,103 +46,104 @@ function CategoryList({
...(!embedded && { maxHeight: 175 }),
}}
>
{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={{
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

0 comments on commit e18fd5c

Please sign in to comment.