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

[Sheets] [Pt. 4] Convert Pressable in Menu (WIP) #5562

Merged
merged 13 commits into from
Oct 2, 2024
Merged

[Sheets] [Pt. 4] Convert Pressable in Menu (WIP) #5562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
801cb62
close all dialogs
haileyok Oct 1, 2024
a17892d
remove a bunch of to-be-useless stuff
haileyok Oct 1, 2024
3971254
remove `Dialog.Handle` uses
haileyok Oct 1, 2024
64f849b
rm handle component
haileyok Oct 1, 2024
6dec099
type
haileyok Oct 1, 2024
d0149a9
get scrollview working
haileyok Oct 1, 2024
40030ba
tidy
haileyok Oct 1, 2024
0b55acd
bump
haileyok Oct 1, 2024
368a9df
bump gesture handler
haileyok Oct 1, 2024
a4c7e2f
tweak types
haileyok Oct 1, 2024
e1ccacc
add props back
haileyok Oct 1, 2024
32bb8cb
Merge remote-tracking branch 'origin/hailey/dialogs-pt1' into hailey/…
haileyok Oct 2, 2024
7c09a94
rm
haileyok Oct 2, 2024
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
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-native-fontawesome": "^0.3.2",
"@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.7",
"@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.8",
"@haileyok/bluesky-video": "0.1.10",
"@lingui/react": "^4.5.0",
"@mattermost/react-native-paste-input": "^0.7.1",
Expand Down Expand Up @@ -172,7 +172,7 @@
"react-native-compressor": "^1.8.24",
"react-native-date-picker": "^4.4.2",
"react-native-drawer-layout": "^4.0.0-alpha.3",
"react-native-gesture-handler": "~2.16.2",
"react-native-gesture-handler": "2.20.0",
"react-native-get-random-values": "~1.11.0",
"react-native-image-crop-picker": "0.41.2",
"react-native-ios-context-menu": "^1.15.3",
Expand Down
8 changes: 0 additions & 8 deletions src/components/Dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,20 +89,12 @@ export function Outer({
[open, close],
)

// @TODO DIALOG REFACTOR - what is this? rm i think?
// React.useEffect(() => {
// return () => {
// setDialogIsOpen(control.id, false)
// }
// }, [control.id, setDialogIsOpen])

const context = React.useMemo(() => ({close}), [close])

return (
<Portal>
<Context.Provider value={context}>
<BlueskyBottomSheetView
// handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
ref={ref}
topInset={30}
bottomInset={insets.bottom}
Expand Down
18 changes: 10 additions & 8 deletions src/components/Menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react'
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
import {StyleProp, View, ViewStyle} from 'react-native'
import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import flattenReactChildren from 'react-keyed-flatten-children'
Expand Down Expand Up @@ -102,7 +103,11 @@ export function Outer({
export function Item({children, label, style, onPress, ...rest}: ItemProps) {
const t = useTheme()
const {control} = React.useContext(Context)
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
const {
state: focused,
onIn: onHoverIn,
onOut: onHoverOut,
} = useInteractionState()
Comment on lines +106 to +110
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is it hover now instead of focus?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as comment below 👍

const {
state: pressed,
onIn: onPressIn,
Expand All @@ -115,14 +120,9 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
accessibilityHint=""
accessibilityLabel={label}
onPress={e => {
control?.close()
onPress(e)

if (!e.defaultPrevented) {
control?.close()
}
Comment on lines -120 to -122
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what's wrong with this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm cleaning these up in a second PR actually, good catch here. Let me get back to you once I do that (and just pick the change back down to here so its clear)

Copy link
Contributor Author

@haileyok haileyok Oct 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3fabcc2 (#5581)

Reverted in this PR, not picking because types are still borked in this PR (didn't normalize the pressables yet)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any usages of this, but I may have missed one. We have the same functionality in Link so that you can exit the action on failure e.g. show a toast or something. Seems harmless to keep this?

Copy link
Contributor Author

@haileyok haileyok Oct 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea I added it back in the commit linked above. Just wasn't typed correctly at this stage in the refactor.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I hadn't refreshed the page, was replying to your prev 👍

}}
onFocus={onFocus}
onBlur={onBlur}
onPressIn={e => {
onPressIn()
rest.onPressIn?.(e)
Expand All @@ -131,6 +131,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
onPressOut()
rest.onPressOut?.(e)
}}
onHoverIn={onHoverIn}
onHoverOut={onHoverOut}
style={[
a.flex_row,
a.align_center,
Expand Down
6 changes: 4 additions & 2 deletions src/components/Menu/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
GestureResponderEvent,
PressableProps,
} from 'react-native'
import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'

import {TextStyleProp, ViewStyleProp} from '#/alf'
import * as Dialog from '#/components/Dialog'
Expand Down Expand Up @@ -87,10 +89,10 @@ export type TriggerChildProps =
}

export type ItemProps = React.PropsWithChildren<
Omit<PressableProps, 'style'> &
Omit<BueskyBottomSheetPressableProps, 'style'> &
ViewStyleProp & {
label: string
onPress: (e: GestureResponderEvent) => void
onPress: (e: PressableEvent | GestureResponderEvent) => void
}
>

Expand Down
17 changes: 8 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4120,10 +4120,10 @@
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==

"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7":
version "0.1.1-alpha.7"
resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.8":
version "0.1.1-alpha.8"
resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.8.tgz#c5fd503cdd5556a686a1f5c0974b1527fceda900"
integrity sha512-305MSNscniLZpxd80QO4OCuMXkm+U/v/YW/x0fVQtBilVTikOOPIkiYge+kCUdryFPD3LU/GdrsQZL+y8qAiMQ==

"@haileyok/[email protected]":
version "0.1.10"
Expand Down Expand Up @@ -18068,15 +18068,14 @@ react-native-drawer-layout@^4.0.0-alpha.3:
dependencies:
use-latest-callback "^0.1.9"

react-native-gesture-handler@~2.16.2:
version "2.16.2"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
integrity sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==
react-native-gesture-handler@2.20.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.0.tgz#2d9ec4e9bd22619ebe36269dda3ecb1173928276"
integrity sha512-rFKqgHRfxQ7uSAivk8vxCiW4SB3G0U7jnv7kZD4Y90K5kp6YrU8Q3tWhxe3Rx55BIvSd3mBe9ZWbWVJ0FsSHPA==
dependencies:
"@egjs/hammerjs" "^2.0.17"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"
lodash "^4.17.21"
prop-types "^15.7.2"

react-native-get-random-values@^1.6.0:
Expand Down
Loading