diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 28b81e5ee1..041d387fbe 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -7,7 +7,7 @@ sidebar_label: Buttons import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; @@ -39,9 +39,9 @@ exclusive?: boolean; Defines if more than one button could be pressed simultaneously. By default set to `true`. - + ### rippleColor - + ```ts rippleColor?: number | ColorValue | null; @@ -49,9 +49,9 @@ rippleColor?: number | ColorValue | null; Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. - + ### rippleRadius - + ```ts @@ -60,9 +60,9 @@ rippleRadius?: number | null; Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. - + ### borderless - + ```ts borderless?: boolean; @@ -70,9 +70,9 @@ borderless?: boolean; If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds. - + ### foreground - + ```ts foreground?: boolean; @@ -80,9 +80,9 @@ foreground?: boolean; Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view. - + ### touchSoundDisabled - + ```ts touchSoundDisabled?: boolean; @@ -140,9 +140,9 @@ underlayColor?: string; Background color that will be dimmed when button is in active state. - + ### activeOpacity - + ```ts activeOpacity?: number; @@ -154,9 +154,9 @@ Opacity applied to the underlay when button is in active state. This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following: - + ### activeOpacity - + ```ts activeOpacity?: number; diff --git a/packages/docs-gesture-handler/docs/components/pressable.mdx b/packages/docs-gesture-handler/docs/components/pressable.mdx index 50aa71af38..5c89da1876 100644 --- a/packages/docs-gesture-handler/docs/components/pressable.mdx +++ b/packages/docs-gesture-handler/docs/components/pressable.mdx @@ -7,7 +7,7 @@ sidebar_label: Pressable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; :::info This component is a drop-in replacement for the `Pressable` component. @@ -89,9 +89,9 @@ cancelable?: null | boolean; Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`. - + ### onHoverIn - + ```ts onHoverIn?: null | ((event: PressableEvent) => void); @@ -99,9 +99,9 @@ onHoverIn?: null | ((event: PressableEvent) => void); Called when pointer is hovering over the element. - + ### onHoverOut - + ```ts onHoverOut?: null | ((event: PressableEvent) => void); @@ -109,9 +109,9 @@ onHoverOut?: null | ((event: PressableEvent) => void); Called when pointer stops hovering over the element. - + ### delayHoverIn - + ```ts delayHoverIn?: number | null; @@ -119,9 +119,9 @@ delayHoverIn?: number | null; Duration to wait after hover in before calling `onHoverIn`. - + ### delayHoverOut - + ```ts delayHoverOut?: number | null; @@ -145,9 +145,9 @@ disabled?: null | boolean; Whether the `Pressable` behavior is disabled. - + ### hitSlop - + ```ts hitSlop?: null | Insets | number; @@ -157,9 +157,9 @@ Additional distance outside of the view in which a press is detected and [`onPre The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect). - + ### pressRetentionOffset - + ```ts pressRetentionOffset?: null | Insets | number; @@ -170,9 +170,9 @@ press before [`onPressOut`](#onpressout) is triggered. The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect). - + ### android_disableSound - + ```ts android_disableSound?: null | boolean; @@ -180,9 +180,9 @@ android_disableSound?: null | boolean; If `true`, doesn't play system sound on touch. - + ### android_ripple - + ```ts android_ripple?: null | PressableAndroidRippleConfig; diff --git a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx index 0bba411540..89d8c8cff0 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx @@ -6,7 +6,7 @@ sidebar_label: Reanimated Drawer Layout import useBaseUrl from '@docusaurus/useBaseUrl'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; :::info This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html). @@ -134,9 +134,9 @@ export enum DrawerState { A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise. - + ### enableTrackpadTwoFingerGesture - + ```ts enableTrackpadTwoFingerGesture?: boolean; @@ -153,9 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue) => ReactNode); Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter - [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node). - + ### mouseButton - + + ### enableContextMenu - + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx index 1c06ee50ef..c864df16b2 100644 --- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx +++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx @@ -7,7 +7,7 @@ sidebar_label: Reanimated Swipeable import useBaseUrl from '@docusaurus/useBaseUrl'; import GifGallery from '@site/components/GifGallery' -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; :::info This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). @@ -242,9 +242,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[]; Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)). - + ### enableTrackpadTwoFingerGesture - + ```ts enableTrackpadTwoFingerGesture?: boolean; @@ -252,9 +252,9 @@ enableTrackpadTwoFingerGesture?: boolean; Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture. - + ### mouseButton - + + ### enableContextMenu - + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx index 69b96ded94..448855177d 100644 --- a/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx +++ b/packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx @@ -6,7 +6,7 @@ sidebar_position: 4 --- import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; ## Gesture Detector @@ -190,9 +190,9 @@ gesture: SingleGesture | ComposedGesture; A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition). - + ### userSelect - + ```ts userSelect: 'none' | 'auto' | 'text'; @@ -200,9 +200,9 @@ userSelect: 'none' | 'auto' | 'text'; This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`. - + ### touchAction - + ```ts touchAction: TouchAction; @@ -210,9 +210,9 @@ touchAction: TouchAction; This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`. - + ### enableContextMenu - + ```ts enableContextMenu: boolean; diff --git a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx index 7e13710ee5..5b8fcd62f0 100644 --- a/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx +++ b/packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx @@ -1,6 +1,6 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; ### enabled @@ -69,9 +69,9 @@ testID: string; Sets a `testID` property for gesture object, allowing for querying for it in tests. - + ### cancelsTouchesInView - + ```ts cancelsTouchesInView: boolean | SharedValue; diff --git a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx index 30f57bb3fe..056fe93efd 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx @@ -12,7 +12,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; import FlingGestureBasic from '@site/static/examples/FlingGestureBasic'; import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
@@ -142,9 +142,9 @@ numberOfPointers: number | SharedValue; Determine exact number of points required to handle the fling gesture. - + ### mouseButton - +
@@ -93,9 +93,9 @@ const styles = StyleSheet.create({ - + ### effect - +
@@ -75,9 +75,9 @@ maxDistance: number | SharedValue; Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a long press gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. The default value is 10. - + ### mouseButton - + - + ### shouldActivateOnStart - + ```ts diff --git a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx index 37448165b1..26b4d5304b 100644 --- a/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx +++ b/packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx @@ -21,7 +21,7 @@ import SharedValueInfo from './\_shared/shared-value-info.md'; import CollapsibleCode from '@site/src/components/CollapsibleCode'; -import HeaderWithBadge from '@site/src/components/HeaderWithBadge'; +import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
@@ -211,9 +211,9 @@ When the finger moves outside this range (in points) along X axis and gesture ha If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number `p` is given a range of `(-inf, p)` will be used if `p` is higher or equal to 0 and `(-p, inf)` otherwise. - + ### averageTouches - + ```ts averageTouches: boolean | SharedValue; @@ -221,9 +221,9 @@ averageTouches: boolean | SharedValue; Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values. - + ### enableTrackpadTwoFingerGesture - + ```ts enableTrackpadTwoFingerGesture: boolean | SharedValue; @@ -231,9 +231,9 @@ enableTrackpadTwoFingerGesture: boolean | SharedValue; Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture. - + ### mouseButton - +
@@ -155,9 +155,9 @@ maxDistance: number | SharedValue; Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture. If the finger travels further than the defined distance and the gesture hasn't yet activated, it will fail to recognize the gesture. - + ### mouseButton - + = { + android: 'Android', + ios: 'iOS', + web: 'Web', +}; + +export function VersionBadge({ version }: VersionBadgeProps) { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + return ( +
+ Available from {version} +
+ ); +} + +export function PlatformBadge({ platform }: PlatformBadgeProps) { + let platformBadgeStyle; + + switch (platform) { + case 'android': + platformBadgeStyle = styles.androidBadge; + break; + case 'ios': + platformBadgeStyle = styles.iosBadge; + break; + case 'web': + platformBadgeStyle = styles.webBadge; + break; + default: + platformBadgeStyle = {}; + } + + return ( +
+ {platformNameMap[platform]} +
+ ); +} + +export default function HeaderWithBadges({ + platforms, + version, + children, +}: HeaderWithBadgesProps) { + return ( +
+ {children} + + {platforms + ?.map((platform) => platform.toLowerCase() as Platform) + .sort() + .map((platform) => ( + + ))} + + {version && } +
+ ); +} diff --git a/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css b/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css new file mode 100644 index 0000000000..b79c0b3fb3 --- /dev/null +++ b/packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css @@ -0,0 +1,61 @@ +.headerWithBadges { + display: flex; + flex-direction: row; + gap: 10px; + margin-bottom: 20px; +} + +.badge { + border-radius: 16px; + padding: 2px 10px; + color: white; + display: flex; + align-items: center; + justify-content: space-around; +} + +.androidBadge { + background-color: #34a853; +} + +.iosBadge { + background-color: #000000; +} + +.webBadge { + background-color: #1067c4; +} + +.versionBadge { + margin-left: auto; + border-width: 1px; + border-style: solid; +} + +.versionBadgeLight { + border-color: var(--swm-purple-light-100); + background-color: var(--swm-off-white); + color: var(--swm-purple-light-100); +} + +.versionBadgeDark { + border-color: var(--swm-navy-light-60); + background-color: var(--swm-navy); + color: var(--swm-off-white); +} + +@media (max-width: 420px) { + .headerWithBadges { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 20px; + } + + .versionBadge { + margin-left: 0px; + border-width: 1px; + border-style: solid; + } +} diff --git a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx index 544377b02f..a44326dd76 100644 --- a/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx +++ b/packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { Network } from 'vis-network/standalone'; import { useColorMode } from '@docusaurus/theme-common';