chore: add mobile app

This commit is contained in:
2026-02-07 22:33:02 +01:00
parent db34640acc
commit e89384ad4e
29327 changed files with 3886944 additions and 12 deletions
@@ -0,0 +1,11 @@
"use strict";
export const ActionType = {
REANIMATED_WORKLET: 1,
NATIVE_ANIMATED_EVENT: 2,
JS_FUNCTION_OLD_API: 3,
JS_FUNCTION_NEW_API: 4
};
// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
//# sourceMappingURL=ActionType.js.map
@@ -0,0 +1 @@
{"version":3,"names":["ActionType","REANIMATED_WORKLET","NATIVE_ANIMATED_EVENT","JS_FUNCTION_OLD_API","JS_FUNCTION_NEW_API"],"sourceRoot":"../../src","sources":["ActionType.ts"],"mappings":";;AAAA,OAAO,MAAMA,UAAU,GAAG;EACxBC,kBAAkB,EAAE,CAAC;EACrBC,qBAAqB,EAAE,CAAC;EACxBC,mBAAmB,EAAE,CAAC;EACtBC,mBAAmB,EAAE;AACvB,CAAU;;AAEV","ignoreList":[]}
@@ -0,0 +1,27 @@
"use strict";
const RIGHT = 1;
const LEFT = 2;
const UP = 4;
const DOWN = 8;
// Public interface
export const Directions = {
RIGHT: RIGHT,
LEFT: LEFT,
UP: UP,
DOWN: DOWN
};
// Internal interface
export const DiagonalDirections = {
UP_RIGHT: UP | RIGHT,
DOWN_RIGHT: DOWN | RIGHT,
UP_LEFT: UP | LEFT,
DOWN_LEFT: DOWN | LEFT
};
// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
// eslint-disable-next-line @typescript-eslint/no-redeclare
//# sourceMappingURL=Directions.js.map
@@ -0,0 +1 @@
{"version":3,"names":["RIGHT","LEFT","UP","DOWN","Directions","DiagonalDirections","UP_RIGHT","DOWN_RIGHT","UP_LEFT","DOWN_LEFT"],"sourceRoot":"../../src","sources":["Directions.ts"],"mappings":";;AAAA,MAAMA,KAAK,GAAG,CAAC;AACf,MAAMC,IAAI,GAAG,CAAC;AACd,MAAMC,EAAE,GAAG,CAAC;AACZ,MAAMC,IAAI,GAAG,CAAC;;AAEd;AACA,OAAO,MAAMC,UAAU,GAAG;EACxBJ,KAAK,EAAEA,KAAK;EACZC,IAAI,EAAEA,IAAI;EACVC,EAAE,EAAEA,EAAE;EACNC,IAAI,EAAEA;AACR,CAAU;;AAEV;AACA,OAAO,MAAME,kBAAkB,GAAG;EAChCC,QAAQ,EAAEJ,EAAE,GAAGF,KAAK;EACpBO,UAAU,EAAEJ,IAAI,GAAGH,KAAK;EACxBQ,OAAO,EAAEN,EAAE,GAAGD,IAAI;EAClBQ,SAAS,EAAEN,IAAI,GAAGF;AACpB,CAAU;;AAEV;;AAEA","ignoreList":[]}
@@ -0,0 +1,34 @@
"use strict";
import { Platform } from 'react-native';
import { tagMessage } from './utils';
let useNewWebImplementation = true;
let getWasCalled = false;
/**
* @deprecated new web implementation is enabled by default. This function will be removed in Gesture Handler 3
*/
export function enableExperimentalWebImplementation(_shouldEnable = true) {
// NO-OP since the new implementation is now the default
console.warn(tagMessage('New web implementation is enabled by default. This function will be removed in Gesture Handler 3.'));
}
/**
* @deprecated legacy implementation is no longer supported. This function will be removed in Gesture Handler 3
*/
export function enableLegacyWebImplementation(shouldUseLegacyImplementation = true) {
console.warn(tagMessage('Legacy web implementation is deprecated. This function will be removed in Gesture Handler 3.'));
if (Platform.OS !== 'web' || useNewWebImplementation === !shouldUseLegacyImplementation) {
return;
}
if (getWasCalled) {
console.error('Some parts of this application have already started using the new gesture handler implementation. No changes will be applied. You can try enabling legacy implementation earlier.');
return;
}
useNewWebImplementation = !shouldUseLegacyImplementation;
}
export function isNewWebImplementationEnabled() {
getWasCalled = true;
return useNewWebImplementation;
}
//# sourceMappingURL=EnableNewWebImplementation.js.map
@@ -0,0 +1 @@
{"version":3,"names":["Platform","tagMessage","useNewWebImplementation","getWasCalled","enableExperimentalWebImplementation","_shouldEnable","console","warn","enableLegacyWebImplementation","shouldUseLegacyImplementation","OS","error","isNewWebImplementationEnabled"],"sourceRoot":"../../src","sources":["EnableNewWebImplementation.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,UAAU,QAAQ,SAAS;AAEpC,IAAIC,uBAAuB,GAAG,IAAI;AAClC,IAAIC,YAAY,GAAG,KAAK;;AAExB;AACA;AACA;AACA,OAAO,SAASC,mCAAmCA,CACjDC,aAAa,GAAG,IAAI,EACd;EACN;EACAC,OAAO,CAACC,IAAI,CACVN,UAAU,CACR,mGACF,CACF,CAAC;AACH;;AAEA;AACA;AACA;AACA,OAAO,SAASO,6BAA6BA,CAC3CC,6BAA6B,GAAG,IAAI,EAC9B;EACNH,OAAO,CAACC,IAAI,CACVN,UAAU,CACR,8FACF,CACF,CAAC;EAED,IACED,QAAQ,CAACU,EAAE,KAAK,KAAK,IACrBR,uBAAuB,KAAK,CAACO,6BAA6B,EAC1D;IACA;EACF;EAEA,IAAIN,YAAY,EAAE;IAChBG,OAAO,CAACK,KAAK,CACX,mLACF,CAAC;IACD;EACF;EAEAT,uBAAuB,GAAG,CAACO,6BAA6B;AAC1D;AAEA,OAAO,SAASG,6BAA6BA,CAAA,EAAY;EACvDT,YAAY,GAAG,IAAI;EACnB,OAAOD,uBAAuB;AAChC","ignoreList":[]}
@@ -0,0 +1,5 @@
"use strict";
import React from 'react';
export default /*#__PURE__*/React.createContext(false);
//# sourceMappingURL=GestureHandlerRootViewContext.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","createContext"],"sourceRoot":"../../src","sources":["GestureHandlerRootViewContext.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,4BAAeA,KAAK,CAACC,aAAa,CAAC,KAAK,CAAC","ignoreList":[]}
@@ -0,0 +1,5 @@
"use strict";
import { NativeModules, Platform } from 'react-native';
export default NativeModules?.PlatformConstants ?? Platform.constants;
//# sourceMappingURL=PlatformConstants.js.map
@@ -0,0 +1 @@
{"version":3,"names":["NativeModules","Platform","PlatformConstants","constants"],"sourceRoot":"../../src","sources":["PlatformConstants.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,cAAc;AAMtD,eAAgBD,aAAa,EAAEE,iBAAiB,IAC9CD,QAAQ,CAACE,SAAS","ignoreList":[]}
@@ -0,0 +1,8 @@
"use strict";
export default {
get forceTouchAvailable() {
return false;
}
};
//# sourceMappingURL=PlatformConstants.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["forceTouchAvailable"],"sourceRoot":"../../src","sources":["PlatformConstants.web.ts"],"mappings":";;AAAA,eAAe;EACb,IAAIA,mBAAmBA,CAAA,EAAG;IACxB,OAAO,KAAK;EACd;AACF,CAAC","ignoreList":[]}
@@ -0,0 +1,11 @@
"use strict";
export let PointerType = /*#__PURE__*/function (PointerType) {
PointerType[PointerType["TOUCH"] = 0] = "TOUCH";
PointerType[PointerType["STYLUS"] = 1] = "STYLUS";
PointerType[PointerType["MOUSE"] = 2] = "MOUSE";
PointerType[PointerType["KEY"] = 3] = "KEY";
PointerType[PointerType["OTHER"] = 4] = "OTHER";
return PointerType;
}({});
//# sourceMappingURL=PointerType.js.map
@@ -0,0 +1 @@
{"version":3,"names":["PointerType"],"sourceRoot":"../../src","sources":["PointerType.ts"],"mappings":";;AAAA,WAAYA,WAAW,0BAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA","ignoreList":[]}
@@ -0,0 +1,8 @@
"use strict";
// Reexport the native module spec used by codegen. The relevant files are inluded on Android
// to ensure the compatibility with the old arch, while iOS doesn't require those at all.
import Module from './specs/NativeRNGestureHandlerModule';
export default Module;
//# sourceMappingURL=RNGestureHandlerModule.js.map
@@ -0,0 +1 @@
{"version":3,"names":["Module"],"sourceRoot":"../../src","sources":["RNGestureHandlerModule.ts"],"mappings":";;AAAA;AACA;;AAEA,OAAOA,MAAM,MAAM,sCAAsC;AACzD,eAAeA,MAAM","ignoreList":[]}
@@ -0,0 +1,90 @@
"use strict";
import React from 'react';
import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
import { Gestures, HammerGestures } from './web/Gestures';
import InteractionManager from './web/tools/InteractionManager';
import NodeManager from './web/tools/NodeManager';
import * as HammerNodeManager from './web_hammer/NodeManager';
import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
// init method is called inside attachGestureHandler function. However, this function may
// fail when received view is not valid HTML element. On the other hand, dropGestureHandler
// will be called even if attach failed, which will result in crash.
//
// We use this flag to check whether or not dropGestureHandler should be called.
let shouldPreventDrop = false;
export default {
handleSetJSResponder(tag, blockNativeResponder) {
console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
},
handleClearJSResponder() {
console.warn('handleClearJSResponder: ');
},
createGestureHandler(handlerName, handlerTag, config) {
if (isNewWebImplementationEnabled()) {
if (!(handlerName in Gestures)) {
throw new Error(`react-native-gesture-handler: ${handlerName} is not supported on web.`);
}
const GestureClass = Gestures[handlerName];
NodeManager.createGestureHandler(handlerTag, new GestureClass(new GestureHandlerWebDelegate()));
InteractionManager.instance.configureInteractions(NodeManager.getHandler(handlerTag), config);
} else {
if (!(handlerName in HammerGestures)) {
throw new Error(`react-native-gesture-handler: ${handlerName} is not supported on web.`);
}
// @ts-ignore If it doesn't exist, the error is thrown
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const GestureClass = HammerGestures[handlerName];
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
}
this.updateGestureHandler(handlerTag, config);
},
attachGestureHandler(handlerTag,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
newView, _actionType, propsRef) {
if (!(newView instanceof Element || newView instanceof React.Component)) {
shouldPreventDrop = true;
const handler = isNewWebImplementationEnabled() ? NodeManager.getHandler(handlerTag) : HammerNodeManager.getHandler(handlerTag);
const handlerName = handler.constructor.name;
throw new Error(`${handlerName} with tag ${handlerTag} received child that is not valid HTML element.`);
}
if (isNewWebImplementationEnabled()) {
// @ts-ignore Types should be HTMLElement or React.Component
NodeManager.getHandler(handlerTag).init(newView, propsRef);
} else {
// @ts-ignore Types should be HTMLElement or React.Component
HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
}
},
updateGestureHandler(handlerTag, newConfig) {
if (isNewWebImplementationEnabled()) {
NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
InteractionManager.instance.configureInteractions(NodeManager.getHandler(handlerTag), newConfig);
} else {
HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
}
},
getGestureHandlerNode(handlerTag) {
if (isNewWebImplementationEnabled()) {
return NodeManager.getHandler(handlerTag);
} else {
return HammerNodeManager.getHandler(handlerTag);
}
},
dropGestureHandler(handlerTag) {
if (shouldPreventDrop) {
return;
}
if (isNewWebImplementationEnabled()) {
NodeManager.dropGestureHandler(handlerTag);
} else {
HammerNodeManager.dropGestureHandler(handlerTag);
}
},
// eslint-disable-next-line @typescript-eslint/no-empty-function
flushOperations() {}
};
//# sourceMappingURL=RNGestureHandlerModule.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","isNewWebImplementationEnabled","Gestures","HammerGestures","InteractionManager","NodeManager","HammerNodeManager","GestureHandlerWebDelegate","shouldPreventDrop","handleSetJSResponder","tag","blockNativeResponder","console","warn","handleClearJSResponder","createGestureHandler","handlerName","handlerTag","config","Error","GestureClass","instance","configureInteractions","getHandler","updateGestureHandler","attachGestureHandler","newView","_actionType","propsRef","Element","Component","handler","constructor","name","init","setView","newConfig","updateGestureConfig","getGestureHandlerNode","dropGestureHandler","flushOperations"],"sourceRoot":"../../src","sources":["RNGestureHandlerModule.web.ts"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,50 @@
"use strict";
// GestureHandlers
import PanGestureHandler from './web/handlers/PanGestureHandler';
import TapGestureHandler from './web/handlers/TapGestureHandler';
import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
import PinchGestureHandler from './web/handlers/PinchGestureHandler';
import RotationGestureHandler from './web/handlers/RotationGestureHandler';
import FlingGestureHandler from './web/handlers/FlingGestureHandler';
import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
import ManualGestureHandler from './web/handlers/ManualGestureHandler';
export const Gestures = {
NativeViewGestureHandler,
PanGestureHandler,
TapGestureHandler,
LongPressGestureHandler,
PinchGestureHandler,
RotationGestureHandler,
FlingGestureHandler,
ManualGestureHandler
};
export default {
handleSetJSResponder(_tag, _blockNativeResponder) {
// NO-OP
},
handleClearJSResponder() {
// NO-OP
},
createGestureHandler(_handlerName, _handlerTag, _config) {
// NO-OP
},
attachGestureHandler(_handlerTag,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_newView, _actionType, _propsRef) {
// NO-OP
},
updateGestureHandler(_handlerTag, _newConfig) {
// NO-OP
},
getGestureHandlerNode(_handlerTag) {
// NO-OP
},
dropGestureHandler(_handlerTag) {
// NO-OP
},
flushOperations() {
// NO-OP
}
};
//# sourceMappingURL=RNGestureHandlerModule.windows.js.map
@@ -0,0 +1 @@
{"version":3,"names":["PanGestureHandler","TapGestureHandler","LongPressGestureHandler","PinchGestureHandler","RotationGestureHandler","FlingGestureHandler","NativeViewGestureHandler","ManualGestureHandler","Gestures","handleSetJSResponder","_tag","_blockNativeResponder","handleClearJSResponder","createGestureHandler","_handlerName","_handlerTag","_config","attachGestureHandler","_newView","_actionType","_propsRef","updateGestureHandler","_newConfig","getGestureHandlerNode","dropGestureHandler","flushOperations"],"sourceRoot":"../../src","sources":["RNGestureHandlerModule.windows.ts"],"mappings":";;AAIA;AACA,OAAOA,iBAAiB,MAAM,kCAAkC;AAChE,OAAOC,iBAAiB,MAAM,kCAAkC;AAChE,OAAOC,uBAAuB,MAAM,wCAAwC;AAC5E,OAAOC,mBAAmB,MAAM,oCAAoC;AACpE,OAAOC,sBAAsB,MAAM,uCAAuC;AAC1E,OAAOC,mBAAmB,MAAM,oCAAoC;AACpE,OAAOC,wBAAwB,MAAM,yCAAyC;AAC9E,OAAOC,oBAAoB,MAAM,qCAAqC;AAGtE,OAAO,MAAMC,QAAQ,GAAG;EACtBF,wBAAwB;EACxBN,iBAAiB;EACjBC,iBAAiB;EACjBC,uBAAuB;EACvBC,mBAAmB;EACnBC,sBAAsB;EACtBC,mBAAmB;EACnBE;AACF,CAAC;AAED,eAAe;EACbE,oBAAoBA,CAACC,IAAY,EAAEC,qBAA8B,EAAE;IACjE;EAAA,CACD;EACDC,sBAAsBA,CAAA,EAAG;IACvB;EAAA,CACD;EACDC,oBAAoBA,CAClBC,YAAmC,EACnCC,WAAmB,EACnBC,OAAU,EACV;IACA;EAAA,CACD;EACDC,oBAAoBA,CAClBF,WAAmB;EACnB;EACAG,QAAa,EACbC,WAAuB,EACvBC,SAAmC,EACnC;IACA;EAAA,CACD;EACDC,oBAAoBA,CAACN,WAAmB,EAAEO,UAAkB,EAAE;IAC5D;EAAA,CACD;EACDC,qBAAqBA,CAACR,WAAmB,EAAE;IACzC;EAAA,CACD;EACDS,kBAAkBA,CAACT,WAAmB,EAAE;IACtC;EAAA,CACD;EACDU,eAAeA,CAAA,EAAG;IAChB;EAAA;AAEJ,CAAC","ignoreList":[]}
@@ -0,0 +1,6 @@
"use strict";
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-nocheck
export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative';
//# sourceMappingURL=RNRenderer.js.map
@@ -0,0 +1 @@
{"version":3,"names":["default","RNRenderer"],"sourceRoot":"../../src","sources":["RNRenderer.ts"],"mappings":";;AAAA;AACA;AACA,SAASA,OAAO,IAAIC,UAAU,QAAQ,mDAAmD","ignoreList":[]}
@@ -0,0 +1,6 @@
"use strict";
export const RNRenderer = {
findHostInstance_DEPRECATED: _ref => null
};
//# sourceMappingURL=RNRenderer.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["RNRenderer","findHostInstance_DEPRECATED","_ref"],"sourceRoot":"../../src","sources":["RNRenderer.web.ts"],"mappings":";;AAAA,OAAO,MAAMA,UAAU,GAAG;EACxBC,2BAA2B,EAAGC,IAAS,IAAK;AAC9C,CAAC","ignoreList":[]}
@@ -0,0 +1,15 @@
"use strict";
// TODO use State from RNModule
export const State = {
UNDETERMINED: 0,
FAILED: 1,
BEGAN: 2,
CANCELLED: 3,
ACTIVE: 4,
END: 5
};
// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
//# sourceMappingURL=State.js.map
@@ -0,0 +1 @@
{"version":3,"names":["State","UNDETERMINED","FAILED","BEGAN","CANCELLED","ACTIVE","END"],"sourceRoot":"../../src","sources":["State.ts"],"mappings":";;AAAA;;AAEA,OAAO,MAAMA,KAAK,GAAG;EACnBC,YAAY,EAAE,CAAC;EACfC,MAAM,EAAE,CAAC;EACTC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAE,CAAC;EACZC,MAAM,EAAE,CAAC;EACTC,GAAG,EAAE;AACP,CAAU;;AAEV","ignoreList":[]}
@@ -0,0 +1,12 @@
"use strict";
export const TouchEventType = {
UNDETERMINED: 0,
TOUCHES_DOWN: 1,
TOUCHES_MOVE: 2,
TOUCHES_UP: 3,
TOUCHES_CANCELLED: 4
};
// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
//# sourceMappingURL=TouchEventType.js.map
@@ -0,0 +1 @@
{"version":3,"names":["TouchEventType","UNDETERMINED","TOUCHES_DOWN","TOUCHES_MOVE","TOUCHES_UP","TOUCHES_CANCELLED"],"sourceRoot":"../../src","sources":["TouchEventType.ts"],"mappings":";;AAAA,OAAO,MAAMA,cAAc,GAAG;EAC5BC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,CAAC;EACfC,UAAU,EAAE,CAAC;EACbC,iBAAiB,EAAE;AACrB,CAAU;;AAEV","ignoreList":[]}
@@ -0,0 +1,541 @@
"use strict";
// This component is based on RN's DrawerLayoutAndroid API
//
// It perhaps deserves to be put in a separate repo, but since it relies on
// react-native-gesture-handler library which isn't very popular at the moment I
// decided to keep it here for the time being. It will allow us to move faster
// and fix issues that may arise in gesture handler library that could be found
// when using the drawer component
import * as React from 'react';
import { Component } from 'react';
import invariant from 'invariant';
import { Animated, StyleSheet, View, Keyboard, StatusBar, I18nManager } from 'react-native';
import { PanGestureHandler } from '../handlers/PanGestureHandler';
import { TapGestureHandler } from '../handlers/TapGestureHandler';
import { State } from '../State';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DRAG_TOSS = 0.05;
const IDLE = 'Idle';
const DRAGGING = 'Dragging';
const SETTLING = 'Settling';
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
// Animated.AnimatedInterpolation has been converted to a generic type
// in @types/react-native 0.70. This way we can maintain compatibility
// with all versions of @types/react-native`
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
*/
/**
* @deprecated use Reanimated version of DrawerLayout instead
*/
export default class DrawerLayout extends Component {
static defaultProps = {
drawerWidth: 200,
drawerPosition: 'left',
useNativeAnimations: true,
drawerType: 'front',
edgeWidth: 20,
minSwipeDistance: 3,
overlayColor: 'rgba(0, 0, 0, 0.7)',
drawerLockMode: 'unlocked',
enableTrackpadTwoFingerGesture: false
};
constructor(props) {
super(props);
const dragX = new Animated.Value(0);
const touchX = new Animated.Value(0);
const drawerTranslation = new Animated.Value(0);
this.state = {
dragX,
touchX,
drawerTranslation,
containerWidth: 0,
drawerState: IDLE,
drawerOpened: false
};
this.updateAnimatedEvent(props, this.state);
}
shouldComponentUpdate(props, state) {
if (this.props.drawerPosition !== props.drawerPosition || this.props.drawerWidth !== props.drawerWidth || this.props.drawerType !== props.drawerType || this.state.containerWidth !== state.containerWidth) {
this.updateAnimatedEvent(props, state);
}
return true;
}
accessibilityIsModalView = /*#__PURE__*/React.createRef();
pointerEventsView = /*#__PURE__*/React.createRef();
panGestureHandler = /*#__PURE__*/React.createRef();
drawerShown = false;
static positions = {
Left: 'left',
Right: 'right'
};
updateAnimatedEvent = (props, state) => {
// Event definition is based on
const {
drawerPosition,
drawerWidth,
drawerType
} = props;
const {
dragX: dragXValue,
touchX: touchXValue,
drawerTranslation,
containerWidth
} = state;
let dragX = dragXValue;
let touchX = touchXValue;
if (drawerPosition !== 'left') {
// Most of the code is written in a way to handle left-side drawer. In
// order to handle right-side drawer the only thing we need to do is to
// reverse events coming from gesture handler in a way they emulate
// left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
// calulcated by subtracing real touchX from the width of the container
// (such that when touch happens at the right edge the value is simply 0)
dragX = Animated.multiply(new Animated.Value(-1), dragXValue); // TODO(TS): (for all "as" in this file) make sure we can map this
touchX = Animated.add(new Animated.Value(containerWidth), Animated.multiply(new Animated.Value(-1), touchXValue)); // TODO(TS): make sure we can map this;
touchXValue.setValue(containerWidth);
} else {
touchXValue.setValue(0);
}
// While closing the drawer when user starts gesture outside of its area (in greyed
// out part of the window), we want the drawer to follow only once finger reaches the
// edge of the drawer.
// E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
// dots. The touch gesture starts at '*' and moves left, touch path is indicated by
// an arrow pointing left
// 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|.<-*..| |XXXXXXXX|<--*..| |XXXXX|<-----*..|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// +---------------+ +---------------+ +---------------+ +---------------+
//
// For the above to work properly we define animated value that will keep
// start position of the gesture. Then we use that value to calculate how
// much we need to subtract from the dragX. If the gesture started on the
// greyed out area we take the distance from the edge of the drawer to the
// start position. Otherwise we don't subtract at all and the drawer be
// pulled back as soon as you start the pan.
//
// This is used only when drawerType is "front"
//
let translationX = dragX;
if (drawerType === 'front') {
const startPositionX = Animated.add(touchX, Animated.multiply(new Animated.Value(-1), dragX));
const dragOffsetFromOnStartPosition = startPositionX.interpolate({
inputRange: [drawerWidth - 1, drawerWidth, drawerWidth + 1],
outputRange: [0, 0, 1]
});
translationX = Animated.add(dragX, dragOffsetFromOnStartPosition); // TODO: as above
}
this.openValue = Animated.add(translationX, drawerTranslation).interpolate({
inputRange: [0, drawerWidth],
outputRange: [0, 1],
extrapolate: 'clamp'
});
const gestureOptions = {
useNativeDriver: props.useNativeAnimations
};
if (this.props.onDrawerSlide) {
gestureOptions.listener = ev => {
const translationX = Math.floor(Math.abs(ev.nativeEvent.translationX));
const position = translationX / this.state.containerWidth;
this.props.onDrawerSlide?.(position);
};
}
this.onGestureEvent = Animated.event([{
nativeEvent: {
translationX: dragXValue,
x: touchXValue
}
}], gestureOptions);
};
handleContainerLayout = ({
nativeEvent
}) => {
this.setState({
containerWidth: nativeEvent.layout.width
});
};
emitStateChanged = (newState, drawerWillShow) => {
this.props.onDrawerStateChanged?.(newState, drawerWillShow);
};
openingHandlerStateChange = ({
nativeEvent
}) => {
if (nativeEvent.oldState === State.ACTIVE) {
this.handleRelease({
nativeEvent
});
} else if (nativeEvent.state === State.ACTIVE) {
this.emitStateChanged(DRAGGING, false);
this.setState({
drawerState: DRAGGING
});
if (this.props.keyboardDismissMode === 'on-drag') {
Keyboard.dismiss();
}
if (this.props.hideStatusBar) {
StatusBar.setHidden(true, this.props.statusBarAnimation || 'slide');
}
}
};
onTapHandlerStateChange = ({
nativeEvent
}) => {
if (this.drawerShown && nativeEvent.oldState === State.ACTIVE && this.props.drawerLockMode !== 'locked-open') {
this.closeDrawer();
}
};
handleRelease = ({
nativeEvent
}) => {
const {
drawerWidth,
drawerPosition,
drawerType
} = this.props;
const {
containerWidth
} = this.state;
let {
translationX: dragX,
velocityX,
x: touchX
} = nativeEvent;
if (drawerPosition !== 'left') {
// See description in _updateAnimatedEvent about why events are flipped
// for right-side drawer
dragX = -dragX;
touchX = containerWidth - touchX;
velocityX = -velocityX;
}
const gestureStartX = touchX - dragX;
let dragOffsetBasedOnStart = 0;
if (drawerType === 'front') {
dragOffsetBasedOnStart = gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
}
const startOffsetX = dragX + dragOffsetBasedOnStart + (this.drawerShown ? drawerWidth : 0);
const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
const shouldOpen = projOffsetX > drawerWidth / 2;
if (shouldOpen) {
this.animateDrawer(startOffsetX, drawerWidth, velocityX);
} else {
this.animateDrawer(startOffsetX, 0, velocityX);
}
};
updateShowing = showing => {
this.drawerShown = showing;
this.accessibilityIsModalView.current?.setNativeProps({
accessibilityViewIsModal: showing
});
this.pointerEventsView.current?.setNativeProps({
pointerEvents: showing ? 'auto' : 'none'
});
const {
drawerPosition,
minSwipeDistance,
edgeWidth
} = this.props;
const fromLeft = drawerPosition === 'left';
// gestureOrientation is 1 if the expected gesture is from left to right and
// -1 otherwise e.g. when drawer is on the left and is closed we expect left
// to right gesture, thus orientation will be 1.
const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
// When drawer is closed we want the hitSlop to be horizontally shorter than
// the container size by the value of SLOP. This will make it only activate
// when gesture happens not further than SLOP away from the edge
const hitSlop = fromLeft ? {
left: 0,
width: showing ? undefined : edgeWidth
} : {
right: 0,
width: showing ? undefined : edgeWidth
};
// @ts-ignore internal API, maybe could be fixed in handler types
this.panGestureHandler.current?.setNativeProps({
hitSlop,
activeOffsetX: gestureOrientation * minSwipeDistance
});
};
animateDrawer = (fromValue, toValue, velocity, speed) => {
this.state.dragX.setValue(0);
this.state.touchX.setValue(this.props.drawerPosition === 'left' ? 0 : this.state.containerWidth);
if (fromValue != null) {
let nextFramePosition = fromValue;
if (this.props.useNativeAnimations) {
// When using native driver, we predict the next position of the
// animation because it takes one frame of a roundtrip to pass RELEASE
// event from native driver to JS before we can start animating. Without
// it, it is more noticable that the frame is dropped.
if (fromValue < toValue && velocity > 0) {
nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
} else if (fromValue > toValue && velocity < 0) {
nextFramePosition = Math.max(fromValue + velocity / 60.0, toValue);
}
}
this.state.drawerTranslation.setValue(nextFramePosition);
}
const willShow = toValue !== 0;
this.updateShowing(willShow);
this.emitStateChanged(SETTLING, willShow);
this.setState({
drawerState: SETTLING
});
if (this.props.hideStatusBar) {
StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
}
Animated.spring(this.state.drawerTranslation, {
velocity,
bounciness: 0,
toValue,
useNativeDriver: this.props.useNativeAnimations,
speed: speed ?? undefined
}).start(({
finished
}) => {
if (finished) {
this.emitStateChanged(IDLE, willShow);
this.setState({
drawerOpened: willShow
});
if (this.state.drawerState !== DRAGGING) {
// It's possilbe that user started drag while the drawer
// was settling, don't override state in this case
this.setState({
drawerState: IDLE
});
}
if (willShow) {
this.props.onDrawerOpen?.();
} else {
this.props.onDrawerClose?.();
}
}
});
};
// eslint-disable-next-line @eslint-react/no-unused-class-component-members
openDrawer = (options = {}) => {
this.animateDrawer(
// TODO: decide if it should be null or undefined is the proper value
undefined, this.props.drawerWidth, options.velocity ? options.velocity : 0, options.speed);
// We need to force the update, otherwise the overlay is not rerendered and
// it would not be clickable
this.forceUpdate();
};
closeDrawer = (options = {}) => {
// TODO: decide if it should be null or undefined is the proper value
this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0, options.speed);
// We need to force the update, otherwise the overlay is not rerendered and
// it would be still clickable
this.forceUpdate();
};
renderOverlay = () => {
/* Overlay styles */
invariant(this.openValue, 'should be set');
let overlayOpacity;
if (this.state.drawerState !== IDLE) {
overlayOpacity = this.openValue;
} else {
overlayOpacity = this.state.drawerOpened ? 1 : 0;
}
const dynamicOverlayStyles = {
opacity: overlayOpacity,
backgroundColor: this.props.overlayColor
};
return /*#__PURE__*/_jsx(TapGestureHandler, {
onHandlerStateChange: this.onTapHandlerStateChange,
children: /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: this.drawerShown ? 'auto' : 'none',
ref: this.pointerEventsView,
style: [styles.overlay, dynamicOverlayStyles]
})
});
};
renderDrawer = () => {
const {
drawerBackgroundColor,
drawerWidth,
drawerPosition,
drawerType,
drawerContainerStyle,
contentContainerStyle
} = this.props;
const fromLeft = drawerPosition === 'left';
const drawerSlide = drawerType !== 'back';
const containerSlide = drawerType !== 'front';
// We rely on row and row-reverse flex directions to position the drawer
// properly. Apparently for RTL these are flipped which requires us to use
// the opposite setting for the drawer to appear from left or right
// according to the drawerPosition prop
const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
const dynamicDrawerStyles = {
backgroundColor: drawerBackgroundColor,
width: drawerWidth
};
const openValue = this.openValue;
invariant(openValue, 'should be set');
let containerStyles;
if (containerSlide) {
const containerTranslateX = openValue.interpolate({
inputRange: [0, 1],
outputRange: fromLeft ? [0, drawerWidth] : [0, -drawerWidth],
extrapolate: 'clamp'
});
containerStyles = {
transform: [{
translateX: containerTranslateX
}]
};
}
let drawerTranslateX = 0;
if (drawerSlide) {
const closedDrawerOffset = fromLeft ? -drawerWidth : drawerWidth;
if (this.state.drawerState !== IDLE) {
drawerTranslateX = openValue.interpolate({
inputRange: [0, 1],
outputRange: [closedDrawerOffset, 0],
extrapolate: 'clamp'
});
} else {
drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
}
}
const drawerStyles = {
transform: [{
translateX: drawerTranslateX
}],
flexDirection: reverseContentDirection ? 'row-reverse' : 'row'
};
return /*#__PURE__*/_jsxs(Animated.View, {
style: styles.main,
onLayout: this.handleContainerLayout,
children: [/*#__PURE__*/_jsxs(Animated.View, {
style: [drawerType === 'front' ? styles.containerOnBack : styles.containerInFront, containerStyles, contentContainerStyle],
importantForAccessibility: this.drawerShown ? 'no-hide-descendants' : 'yes',
children: [typeof this.props.children === 'function' ? this.props.children(this.openValue) : this.props.children, this.renderOverlay()]
}), /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: "box-none",
ref: this.accessibilityIsModalView,
accessibilityViewIsModal: this.drawerShown,
style: [styles.drawerContainer, drawerStyles, drawerContainerStyle],
children: /*#__PURE__*/_jsx(View, {
style: dynamicDrawerStyles,
children: this.props.renderNavigationView(this.openValue)
})
})]
});
};
setPanGestureRef = ref => {
// TODO(TS): make sure it is OK taken from
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
this.panGestureHandler.current = ref;
this.props.onGestureRef?.(ref);
};
render() {
const {
drawerPosition,
drawerLockMode,
edgeWidth,
minSwipeDistance
} = this.props;
const fromLeft = drawerPosition === 'left';
// gestureOrientation is 1 if the expected gesture is from left to right and
// -1 otherwise e.g. when drawer is on the left and is closed we expect left
// to right gesture, thus orientation will be 1.
const gestureOrientation = (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
// When drawer is closed we want the hitSlop to be horizontally shorter than
// the container size by the value of SLOP. This will make it only activate
// when gesture happens not further than SLOP away from the edge
const hitSlop = fromLeft ? {
left: 0,
width: this.drawerShown ? undefined : edgeWidth
} : {
right: 0,
width: this.drawerShown ? undefined : edgeWidth
};
return /*#__PURE__*/_jsx(PanGestureHandler
// @ts-ignore could be fixed in handler types
, {
userSelect: this.props.userSelect,
activeCursor: this.props.activeCursor,
mouseButton: this.props.mouseButton,
enableContextMenu: this.props.enableContextMenu,
ref: this.setPanGestureRef,
hitSlop: hitSlop,
activeOffsetX: gestureOrientation * minSwipeDistance,
failOffsetY: [-15, 15],
onGestureEvent: this.onGestureEvent,
onHandlerStateChange: this.openingHandlerStateChange,
enableTrackpadTwoFingerGesture: this.props.enableTrackpadTwoFingerGesture,
enabled: drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open',
children: this.renderDrawer()
});
}
}
const styles = StyleSheet.create({
drawerContainer: {
...StyleSheet.absoluteFillObject,
zIndex: 1001,
flexDirection: 'row'
},
containerInFront: {
...StyleSheet.absoluteFillObject,
zIndex: 1002
},
containerOnBack: {
...StyleSheet.absoluteFillObject
},
main: {
flex: 1,
zIndex: 0,
overflow: 'hidden'
},
overlay: {
...StyleSheet.absoluteFillObject,
zIndex: 1000
}
});
//# sourceMappingURL=DrawerLayout.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,199 @@
"use strict";
import * as React from 'react';
import { Animated, Platform, processColor, StyleSheet } from 'react-native';
import createNativeWrapper from '../handlers/createNativeWrapper';
import GestureHandlerButton from './GestureHandlerButton';
import { State } from '../State';
import { isFabric } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const RawButton = createNativeWrapper(GestureHandlerButton, {
shouldCancelWhenOutside: false,
shouldActivateOnStart: false
});
let IS_FABRIC = null;
class InnerBaseButton extends React.Component {
static defaultProps = {
delayLongPress: 600
};
constructor(props) {
super(props);
this.lastActive = false;
this.longPressDetected = false;
}
handleEvent = ({
nativeEvent
}) => {
const {
state,
oldState,
pointerInside
} = nativeEvent;
const active = pointerInside && state === State.ACTIVE;
if (active !== this.lastActive && this.props.onActiveStateChange) {
this.props.onActiveStateChange(active);
}
if (!this.longPressDetected && oldState === State.ACTIVE && state !== State.CANCELLED && this.lastActive && this.props.onPress) {
this.props.onPress(pointerInside);
}
if (!this.lastActive &&
// NativeViewGestureHandler sends different events based on platform
state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) && pointerInside) {
this.longPressDetected = false;
if (this.props.onLongPress) {
this.longPressTimeout = setTimeout(this.onLongPress, this.props.delayLongPress);
}
} else if (
// Cancel longpress timeout if it's set and the finger moved out of the view
state === State.ACTIVE && !pointerInside && this.longPressTimeout !== undefined) {
clearTimeout(this.longPressTimeout);
this.longPressTimeout = undefined;
} else if (
// Cancel longpress timeout if it's set and the gesture has finished
this.longPressTimeout !== undefined && (state === State.END || state === State.CANCELLED || state === State.FAILED)) {
clearTimeout(this.longPressTimeout);
this.longPressTimeout = undefined;
}
this.lastActive = active;
};
onLongPress = () => {
this.longPressDetected = true;
this.props.onLongPress?.();
};
// Normally, the parent would execute it's handler first, then forward the
// event to listeners. However, here our handler is virtually only forwarding
// events to listeners, so we reverse the order to keep the proper order of
// the callbacks (from "raw" ones to "processed").
onHandlerStateChange = e => {
this.props.onHandlerStateChange?.(e);
this.handleEvent(e);
};
onGestureEvent = e => {
this.props.onGestureEvent?.(e);
this.handleEvent(e); // TODO: maybe it is not correct
};
render() {
const {
rippleColor: unprocessedRippleColor,
style,
...rest
} = this.props;
if (IS_FABRIC === null) {
IS_FABRIC = isFabric();
}
const rippleColor = IS_FABRIC ? unprocessedRippleColor : processColor(unprocessedRippleColor ?? undefined);
return /*#__PURE__*/_jsx(RawButton, {
ref: this.props.innerRef,
rippleColor: rippleColor,
style: [style, Platform.OS === 'ios' && {
cursor: undefined
}],
...rest,
onGestureEvent: this.onGestureEvent,
onHandlerStateChange: this.onHandlerStateChange
});
}
}
const AnimatedInnerBaseButton = Animated.createAnimatedComponent(InnerBaseButton);
export const BaseButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(InnerBaseButton, {
innerRef: ref,
...props
}));
const AnimatedBaseButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(AnimatedInnerBaseButton, {
innerRef: ref,
...props
}));
const btnStyles = StyleSheet.create({
underlay: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
top: 0
}
});
class InnerRectButton extends React.Component {
static defaultProps = {
activeOpacity: 0.105,
underlayColor: 'black'
};
constructor(props) {
super(props);
this.opacity = new Animated.Value(0);
}
onActiveStateChange = active => {
if (Platform.OS !== 'android') {
this.opacity.setValue(active ? this.props.activeOpacity : 0);
}
this.props.onActiveStateChange?.(active);
};
render() {
const {
children,
style,
...rest
} = this.props;
const resolvedStyle = StyleSheet.flatten(style) ?? {};
return /*#__PURE__*/_jsxs(BaseButton, {
...rest,
ref: this.props.innerRef,
style: resolvedStyle,
onActiveStateChange: this.onActiveStateChange,
children: [/*#__PURE__*/_jsx(Animated.View, {
style: [btnStyles.underlay, {
opacity: this.opacity,
backgroundColor: this.props.underlayColor,
borderRadius: resolvedStyle.borderRadius,
borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
borderTopRightRadius: resolvedStyle.borderTopRightRadius,
borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
borderBottomRightRadius: resolvedStyle.borderBottomRightRadius
}]
}), children]
});
}
}
export const RectButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(InnerRectButton, {
innerRef: ref,
...props
}));
class InnerBorderlessButton extends React.Component {
static defaultProps = {
activeOpacity: 0.3,
borderless: true
};
constructor(props) {
super(props);
this.opacity = new Animated.Value(1);
}
onActiveStateChange = active => {
if (Platform.OS !== 'android') {
this.opacity.setValue(active ? this.props.activeOpacity : 1);
}
this.props.onActiveStateChange?.(active);
};
render() {
const {
children,
style,
innerRef,
...rest
} = this.props;
return /*#__PURE__*/_jsx(AnimatedBaseButton, {
...rest,
innerRef: innerRef,
onActiveStateChange: this.onActiveStateChange,
style: [style, Platform.OS === 'ios' && {
opacity: this.opacity
}],
children: children
});
}
}
export const BorderlessButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(InnerBorderlessButton, {
innerRef: ref,
...props
}));
export { default as PureNativeButton } from './GestureHandlerButton';
//# sourceMappingURL=GestureButtons.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
"use strict";
export {};
//# sourceMappingURL=GestureButtonsProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/GestureButtonsProps.ts"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,100 @@
"use strict";
import * as React from 'react';
import { ScrollView as RNScrollView, Switch as RNSwitch, TextInput as RNTextInput, DrawerLayoutAndroid as RNDrawerLayoutAndroid, FlatList as RNFlatList, RefreshControl as RNRefreshControl } from 'react-native';
import createNativeWrapper from '../handlers/createNativeWrapper';
import { nativeViewProps } from '../handlers/NativeViewGestureHandler';
import { toArray } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
export const RefreshControl = createNativeWrapper(RNRefreshControl, {
disallowInterruption: true,
shouldCancelWhenOutside: false
});
// eslint-disable-next-line @typescript-eslint/no-redeclare
const GHScrollView = createNativeWrapper(RNScrollView, {
disallowInterruption: true,
shouldCancelWhenOutside: false
});
export const ScrollView = /*#__PURE__*/React.forwardRef((props, ref) => {
const refreshControlGestureRef = React.useRef(null);
const {
refreshControl,
waitFor,
...rest
} = props;
return /*#__PURE__*/_jsx(GHScrollView, {
...rest,
// @ts-ignore `ref` exists on `GHScrollView`
ref: ref,
waitFor: [...toArray(waitFor ?? []), refreshControlGestureRef]
// @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
,
refreshControl: refreshControl ? /*#__PURE__*/React.cloneElement(refreshControl, {
// @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
ref: refreshControlGestureRef
}) : undefined
});
});
// Backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
// include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
// eslint-disable-next-line @typescript-eslint/no-redeclare
export const Switch = createNativeWrapper(RNSwitch, {
shouldCancelWhenOutside: false,
shouldActivateOnStart: true,
disallowInterruption: true
});
// eslint-disable-next-line @typescript-eslint/no-redeclare
export const TextInput = createNativeWrapper(RNTextInput);
// eslint-disable-next-line @typescript-eslint/no-redeclare
export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
disallowInterruption: true
});
// eslint-disable-next-line @typescript-eslint/no-redeclare
export const FlatList = /*#__PURE__*/React.forwardRef((props, ref) => {
const refreshControlGestureRef = React.useRef(null);
const {
waitFor,
refreshControl,
...rest
} = props;
const flatListProps = {};
const scrollViewProps = {};
for (const [propName, value] of Object.entries(rest)) {
// https://github.com/microsoft/TypeScript/issues/26255
if (nativeViewProps.includes(propName)) {
// @ts-ignore - this function cannot have generic type so we have to ignore this error
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
scrollViewProps[propName] = value;
} else {
// @ts-ignore - this function cannot have generic type so we have to ignore this error
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
flatListProps[propName] = value;
}
}
return (
/*#__PURE__*/
// @ts-ignore - this function cannot have generic type so we have to ignore this error
_jsx(RNFlatList, {
ref: ref,
...flatListProps,
renderScrollComponent: scrollProps => /*#__PURE__*/_jsx(ScrollView, {
...scrollProps,
...scrollViewProps,
waitFor: [...toArray(waitFor ?? []), refreshControlGestureRef]
})
// @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
,
refreshControl: refreshControl ? /*#__PURE__*/React.cloneElement(refreshControl, {
// @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
ref: refreshControlGestureRef
}) : undefined
})
);
});
// eslint-disable-next-line @typescript-eslint/no-redeclare
//# sourceMappingURL=GestureComponents.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","ScrollView","RNScrollView","Switch","RNSwitch","TextInput","RNTextInput","DrawerLayoutAndroid","RNDrawerLayoutAndroid","FlatList","RNFlatList","RefreshControl","RNRefreshControl","createNativeWrapper","nativeViewProps","toArray","jsx","_jsx","disallowInterruption","shouldCancelWhenOutside","GHScrollView","forwardRef","props","ref","refreshControlGestureRef","useRef","refreshControl","waitFor","rest","cloneElement","undefined","shouldActivateOnStart","flatListProps","scrollViewProps","propName","value","Object","entries","includes","renderScrollComponent","scrollProps"],"sourceRoot":"../../../src","sources":["components/GestureComponents.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,32 @@
"use strict";
import * as React from 'react';
import { FlatList as RNFlatList, Switch as RNSwitch, TextInput as RNTextInput, ScrollView as RNScrollView, View } from 'react-native';
import createNativeWrapper from '../handlers/createNativeWrapper';
import { jsx as _jsx } from "react/jsx-runtime";
export const ScrollView = createNativeWrapper(RNScrollView, {
disallowInterruption: false
});
export const Switch = createNativeWrapper(RNSwitch, {
shouldCancelWhenOutside: false,
shouldActivateOnStart: true,
disallowInterruption: true
});
export const TextInput = createNativeWrapper(RNTextInput);
export const DrawerLayoutAndroid = () => {
console.warn('DrawerLayoutAndroid is not supported on web!');
return /*#__PURE__*/_jsx(View, {});
};
// RefreshControl is implemented as a functional component, rendering a View
// NativeViewGestureHandler needs to set a ref on its child, which cannot be done
// on functional components
export const RefreshControl = createNativeWrapper(View);
export const FlatList = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(RNFlatList, {
ref: ref,
...props,
renderScrollComponent: scrollProps => /*#__PURE__*/_jsx(ScrollView, {
...scrollProps
})
}));
//# sourceMappingURL=GestureComponents.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","FlatList","RNFlatList","Switch","RNSwitch","TextInput","RNTextInput","ScrollView","RNScrollView","View","createNativeWrapper","jsx","_jsx","disallowInterruption","shouldCancelWhenOutside","shouldActivateOnStart","DrawerLayoutAndroid","console","warn","RefreshControl","forwardRef","props","ref","renderScrollComponent","scrollProps"],"sourceRoot":"../../../src","sources":["components/GestureComponents.web.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,IAAIC,UAAU,EACtBC,MAAM,IAAIC,QAAQ,EAClBC,SAAS,IAAIC,WAAW,EACxBC,UAAU,IAAIC,YAAY,EAE1BC,IAAI,QACC,cAAc;AAErB,OAAOC,mBAAmB,MAAM,iCAAiC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElE,OAAO,MAAML,UAAU,GAAGG,mBAAmB,CAACF,YAAY,EAAE;EAC1DK,oBAAoB,EAAE;AACxB,CAAC,CAAC;AAEF,OAAO,MAAMV,MAAM,GAAGO,mBAAmB,CAACN,QAAQ,EAAE;EAClDU,uBAAuB,EAAE,KAAK;EAC9BC,qBAAqB,EAAE,IAAI;EAC3BF,oBAAoB,EAAE;AACxB,CAAC,CAAC;AACF,OAAO,MAAMR,SAAS,GAAGK,mBAAmB,CAACJ,WAAW,CAAC;AACzD,OAAO,MAAMU,mBAAmB,GAAGA,CAAA,KAAM;EACvCC,OAAO,CAACC,IAAI,CAAC,8CAA8C,CAAC;EAC5D,oBAAON,IAAA,CAACH,IAAI,IAAE,CAAC;AACjB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMU,cAAc,GAAGT,mBAAmB,CAACD,IAAI,CAAC;AAEvD,OAAO,MAAMR,QAAQ,gBAAGD,KAAK,CAACoB,UAAU,CACtC,CAASC,KAA2B,EAAEC,GAAQ,kBAC5CV,IAAA,CAACV,UAAU;EACToB,GAAG,EAAEA,GAAI;EAAA,GACLD,KAAK;EACTE,qBAAqB,EAAGC,WAAW,iBAAKZ,IAAA,CAACL,UAAU;IAAA,GAAKiB;EAAW,CAAG;AAAE,CACzE,CAEL,CAAC","ignoreList":[]}
@@ -0,0 +1,5 @@
"use strict";
import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
export default RNGestureHandlerButtonNativeComponent;
//# sourceMappingURL=GestureHandlerButton.js.map
@@ -0,0 +1 @@
{"version":3,"names":["RNGestureHandlerButtonNativeComponent"],"sourceRoot":"../../../src","sources":["components/GestureHandlerButton.tsx"],"mappings":";;AAEA,OAAOA,qCAAqC,MAAM,gDAAgD;AAElG,eAAeA,qCAAqC","ignoreList":[]}
@@ -0,0 +1,11 @@
"use strict";
import * as React from 'react';
import { View } from 'react-native';
import { jsx as _jsx } from "react/jsx-runtime";
export default /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(View, {
ref: ref,
accessibilityRole: "button",
...props
}));
//# sourceMappingURL=GestureHandlerButton.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","View","jsx","_jsx","forwardRef","props","ref","accessibilityRole"],"sourceRoot":"../../../src","sources":["components/GestureHandlerButton.web.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,4BAAeH,KAAK,CAACI,UAAU,CAC7B,CAACC,KAAK,EAAEC,GAAG,kBAAKH,IAAA,CAACF,IAAI;EAACK,GAAG,EAAEA,GAAI;EAACC,iBAAiB,EAAC,QAAQ;EAAA,GAAKF;AAAK,CAAG,CACzE,CAAC","ignoreList":[]}
@@ -0,0 +1,30 @@
"use strict";
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { maybeInitializeFabric } from '../init';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
import { jsx as _jsx } from "react/jsx-runtime";
export default function GestureHandlerRootView({
style,
...rest
}) {
// Try initialize fabric on the first render, at this point we can
// reliably check if fabric is enabled (the function contains a flag
// to make sure it's called only once)
maybeInitializeFabric();
return /*#__PURE__*/_jsx(GestureHandlerRootViewContext.Provider, {
value: true,
children: /*#__PURE__*/_jsx(GestureHandlerRootViewNativeComponent, {
style: style ?? styles.container,
...rest
})
});
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
//# sourceMappingURL=GestureHandlerRootView.android.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","maybeInitializeFabric","GestureHandlerRootViewContext","GestureHandlerRootViewNativeComponent","jsx","_jsx","GestureHandlerRootView","style","rest","Provider","value","children","styles","container","create","flex"],"sourceRoot":"../../../src","sources":["components/GestureHandlerRootView.android.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAAoBC,UAAU,QAAQ,cAAc;AACpD,SAASC,qBAAqB,QAAQ,SAAS;AAC/C,OAAOC,6BAA6B,MAAM,kCAAkC;AAC5E,OAAOC,qCAAqC,MAAM,kDAAkD;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKrG,eAAe,SAASC,sBAAsBA,CAAC;EAC7CC,KAAK;EACL,GAAGC;AACwB,CAAC,EAAE;EAC9B;EACA;EACA;EACAP,qBAAqB,CAAC,CAAC;EAEvB,oBACEI,IAAA,CAACH,6BAA6B,CAACO,QAAQ;IAACC,KAAK;IAAAC,QAAA,eAC3CN,IAAA,CAACF,qCAAqC;MACpCI,KAAK,EAAEA,KAAK,IAAIK,MAAM,CAACC,SAAU;MAAA,GAC7BL;IAAI,CACT;EAAC,CACoC,CAAC;AAE7C;AAEA,MAAMI,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,SAAS,EAAE;IAAEE,IAAI,EAAE;EAAE;AACvB,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,29 @@
"use strict";
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { maybeInitializeFabric } from '../init';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
import { jsx as _jsx } from "react/jsx-runtime";
export default function GestureHandlerRootView({
style,
...rest
}) {
// Try initialize fabric on the first render, at this point we can
// reliably check if fabric is enabled (the function contains a flag
// to make sure it's called only once)
maybeInitializeFabric();
return /*#__PURE__*/_jsx(GestureHandlerRootViewContext.Provider, {
value: true,
children: /*#__PURE__*/_jsx(View, {
style: style ?? styles.container,
...rest
})
});
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
//# sourceMappingURL=GestureHandlerRootView.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","View","StyleSheet","maybeInitializeFabric","GestureHandlerRootViewContext","jsx","_jsx","GestureHandlerRootView","style","rest","Provider","value","children","styles","container","create","flex"],"sourceRoot":"../../../src","sources":["components/GestureHandlerRootView.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,IAAI,EAAaC,UAAU,QAAQ,cAAc;AAC1D,SAASC,qBAAqB,QAAQ,SAAS;AAC/C,OAAOC,6BAA6B,MAAM,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK7E,eAAe,SAASC,sBAAsBA,CAAC;EAC7CC,KAAK;EACL,GAAGC;AACwB,CAAC,EAAE;EAC9B;EACA;EACA;EACAN,qBAAqB,CAAC,CAAC;EAEvB,oBACEG,IAAA,CAACF,6BAA6B,CAACM,QAAQ;IAACC,KAAK;IAAAC,QAAA,eAC3CN,IAAA,CAACL,IAAI;MAACO,KAAK,EAAEA,KAAK,IAAIK,MAAM,CAACC,SAAU;MAAA,GAAKL;IAAI,CAAG;EAAC,CACd,CAAC;AAE7C;AAEA,MAAMI,MAAM,GAAGX,UAAU,CAACa,MAAM,CAAC;EAC/BD,SAAS,EAAE;IAAEE,IAAI,EAAE;EAAE;AACvB,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,24 @@
"use strict";
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
import { jsx as _jsx } from "react/jsx-runtime";
export default function GestureHandlerRootView({
style,
...rest
}) {
return /*#__PURE__*/_jsx(GestureHandlerRootViewContext.Provider, {
value: true,
children: /*#__PURE__*/_jsx(View, {
style: style ?? styles.container,
...rest
})
});
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
//# sourceMappingURL=GestureHandlerRootView.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","View","StyleSheet","GestureHandlerRootViewContext","jsx","_jsx","GestureHandlerRootView","style","rest","Provider","value","children","styles","container","create","flex"],"sourceRoot":"../../../src","sources":["components/GestureHandlerRootView.web.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,IAAI,EAAaC,UAAU,QAAQ,cAAc;AAC1D,OAAOC,6BAA6B,MAAM,kCAAkC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAK7E,eAAe,SAASC,sBAAsBA,CAAC;EAC7CC,KAAK;EACL,GAAGC;AACwB,CAAC,EAAE;EAC9B,oBACEH,IAAA,CAACF,6BAA6B,CAACM,QAAQ;IAACC,KAAK;IAAAC,QAAA,eAC3CN,IAAA,CAACJ,IAAI;MAACM,KAAK,EAAEA,KAAK,IAAIK,MAAM,CAACC,SAAU;MAAA,GAAKL;IAAI,CAAG;EAAC,CACd,CAAC;AAE7C;AAEA,MAAMI,MAAM,GAAGV,UAAU,CAACY,MAAM,CAAC;EAC/BD,SAAS,EAAE;IAAEE,IAAI,EAAE;EAAE;AACvB,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,260 @@
"use strict";
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObjects';
import { GestureDetector } from '../../handlers/gestures/GestureDetector';
import { Platform, processColor } from 'react-native';
import NativeButton from '../GestureHandlerButton';
import { gestureToPressableEvent, addInsets, numberAsInset, gestureTouchToPressableEvent, isTouchWithinInset } from './utils';
import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
import { INT32_MAX, isFabric, isTestEnv } from '../../utils';
import { applyRelationProp } from '../utils';
import { getStatesConfig, StateMachineEvent } from './stateDefinitions';
import { PressableStateMachine } from './StateMachine';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DEFAULT_LONG_PRESS_DURATION = 500;
const IS_TEST_ENV = isTestEnv();
let IS_FABRIC = null;
const Pressable = props => {
const {
testOnly_pressed,
hitSlop,
pressRetentionOffset,
delayHoverIn,
delayHoverOut,
delayLongPress,
unstable_pressDelay,
onHoverIn,
onHoverOut,
onPress,
onPressIn,
onPressOut,
onLongPress,
onLayout,
style,
children,
android_disableSound,
android_ripple,
disabled,
accessible,
simultaneousWithExternalGesture,
requireExternalGestureToFail,
blocksExternalGesture,
...remainingProps
} = props;
const relationProps = {
simultaneousWithExternalGesture,
requireExternalGestureToFail,
blocksExternalGesture
};
const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
const longPressTimeoutRef = useRef(null);
const pressDelayTimeoutRef = useRef(null);
const isOnPressAllowed = useRef(true);
const isCurrentlyPressed = useRef(false);
const dimensions = useRef({
width: 0,
height: 0
});
const normalizedHitSlop = useMemo(() => typeof hitSlop === 'number' ? numberAsInset(hitSlop) : hitSlop ?? {}, [hitSlop]);
const normalizedPressRetentionOffset = useMemo(() => typeof pressRetentionOffset === 'number' ? numberAsInset(pressRetentionOffset) : pressRetentionOffset ?? {}, [pressRetentionOffset]);
const appliedHitSlop = addInsets(normalizedHitSlop, normalizedPressRetentionOffset);
const cancelLongPress = useCallback(() => {
if (longPressTimeoutRef.current) {
clearTimeout(longPressTimeoutRef.current);
longPressTimeoutRef.current = null;
isOnPressAllowed.current = true;
}
}, []);
const cancelDelayedPress = useCallback(() => {
if (pressDelayTimeoutRef.current) {
clearTimeout(pressDelayTimeoutRef.current);
pressDelayTimeoutRef.current = null;
}
}, []);
const startLongPress = useCallback(event => {
if (onLongPress) {
cancelLongPress();
longPressTimeoutRef.current = setTimeout(() => {
isOnPressAllowed.current = false;
onLongPress(event);
}, delayLongPress ?? DEFAULT_LONG_PRESS_DURATION);
}
}, [onLongPress, cancelLongPress, delayLongPress]);
const innerHandlePressIn = useCallback(event => {
onPressIn?.(event);
startLongPress(event);
setPressedState(true);
if (pressDelayTimeoutRef.current) {
clearTimeout(pressDelayTimeoutRef.current);
pressDelayTimeoutRef.current = null;
}
}, [onPressIn, startLongPress]);
const handleFinalize = useCallback(() => {
isCurrentlyPressed.current = false;
cancelLongPress();
cancelDelayedPress();
setPressedState(false);
}, [cancelDelayedPress, cancelLongPress]);
const handlePressIn = useCallback(event => {
if (!isTouchWithinInset(dimensions.current, normalizedHitSlop, event.nativeEvent.changedTouches.at(-1))) {
// Ignoring pressIn within pressRetentionOffset
return;
}
isCurrentlyPressed.current = true;
if (unstable_pressDelay) {
pressDelayTimeoutRef.current = setTimeout(() => {
innerHandlePressIn(event);
}, unstable_pressDelay);
} else {
innerHandlePressIn(event);
}
}, [innerHandlePressIn, normalizedHitSlop, unstable_pressDelay]);
const handlePressOut = useCallback((event, success = true) => {
if (!isCurrentlyPressed.current) {
// Some prop configurations may lead to handlePressOut being called mutliple times.
return;
}
isCurrentlyPressed.current = false;
if (pressDelayTimeoutRef.current) {
innerHandlePressIn(event);
}
onPressOut?.(event);
if (isOnPressAllowed.current && success) {
onPress?.(event);
}
handleFinalize();
}, [handleFinalize, innerHandlePressIn, onPress, onPressOut]);
const stateMachine = useMemo(() => new PressableStateMachine(), []);
useEffect(() => {
const configuration = getStatesConfig(handlePressIn, handlePressOut);
stateMachine.setStates(configuration);
}, [handlePressIn, handlePressOut, stateMachine]);
const hoverInTimeout = useRef(null);
const hoverOutTimeout = useRef(null);
const hoverGesture = useMemo(() => Gesture.Hover().manualActivation(true) // Prevents Hover blocking Gesture.Native() on web
.cancelsTouchesInView(false).onBegin(event => {
if (hoverOutTimeout.current) {
clearTimeout(hoverOutTimeout.current);
}
if (delayHoverIn) {
hoverInTimeout.current = setTimeout(() => onHoverIn?.(gestureToPressableEvent(event)), delayHoverIn);
return;
}
onHoverIn?.(gestureToPressableEvent(event));
}).onFinalize(event => {
if (hoverInTimeout.current) {
clearTimeout(hoverInTimeout.current);
}
if (delayHoverOut) {
hoverOutTimeout.current = setTimeout(() => onHoverOut?.(gestureToPressableEvent(event)), delayHoverOut);
return;
}
onHoverOut?.(gestureToPressableEvent(event));
}), [delayHoverIn, delayHoverOut, onHoverIn, onHoverOut]);
const pressAndTouchGesture = useMemo(() => Gesture.LongPress().minDuration(INT32_MAX) // Stops long press from blocking Gesture.Native()
.maxDistance(INT32_MAX) // Stops long press from cancelling on touch move
.cancelsTouchesInView(false).onTouchesDown(event => {
const pressableEvent = gestureTouchToPressableEvent(event);
stateMachine.handleEvent(StateMachineEvent.LONG_PRESS_TOUCHES_DOWN, pressableEvent);
}).onTouchesUp(() => {
if (Platform.OS === 'android') {
// Prevents potential soft-locks
stateMachine.reset();
handleFinalize();
}
}).onTouchesCancelled(event => {
const pressableEvent = gestureTouchToPressableEvent(event);
stateMachine.reset();
handlePressOut(pressableEvent, false);
}).onFinalize(() => {
if (Platform.OS === 'web') {
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
handleFinalize();
}
}), [stateMachine, handleFinalize, handlePressOut]);
// RNButton is placed inside ButtonGesture to enable Android's ripple and to capture non-propagating events
const buttonGesture = useMemo(() => Gesture.Native().onTouchesCancelled(event => {
if (Platform.OS !== 'macos' && Platform.OS !== 'web') {
// On MacOS cancel occurs in middle of gesture
// On Web cancel occurs on mouse move, which is unwanted
const pressableEvent = gestureTouchToPressableEvent(event);
stateMachine.reset();
handlePressOut(pressableEvent, false);
}
}).onBegin(() => {
stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
}).onStart(() => {
if (Platform.OS !== 'android') {
// Gesture.Native().onStart() is broken with Android + hitSlop
stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
}
}).onFinalize(() => {
if (Platform.OS !== 'web') {
// On Web we use LongPress().onFinalize() instead of Native().onFinalize(),
// as Native cancels on mouse move, and LongPress does not.
stateMachine.handleEvent(StateMachineEvent.FINALIZE);
handleFinalize();
}
}), [stateMachine, handlePressOut, handleFinalize]);
const isPressableEnabled = disabled !== true;
const gestures = [buttonGesture, pressAndTouchGesture, hoverGesture];
for (const gesture of gestures) {
gesture.enabled(isPressableEnabled);
gesture.runOnJS(true);
gesture.hitSlop(appliedHitSlop);
gesture.shouldCancelWhenOutside(Platform.OS !== 'web');
Object.entries(relationProps).forEach(([relationName, relation]) => {
applyRelationProp(gesture, relationName, relation);
});
}
const gesture = Gesture.Simultaneous(...gestures);
// `cursor: 'pointer'` on `RNButton` crashes iOS
const pointerStyle = Platform.OS === 'web' ? {
cursor: 'pointer'
} : {};
const styleProp = typeof style === 'function' ? style({
pressed: pressedState
}) : style;
const childrenProp = typeof children === 'function' ? children({
pressed: pressedState
}) : children;
const rippleColor = useMemo(() => {
if (IS_FABRIC === null) {
IS_FABRIC = isFabric();
}
const defaultRippleColor = android_ripple ? undefined : 'transparent';
const unprocessedRippleColor = android_ripple?.color ?? defaultRippleColor;
return IS_FABRIC ? unprocessedRippleColor : processColor(unprocessedRippleColor);
}, [android_ripple]);
const setDimensions = useCallback(event => {
onLayout?.(event);
dimensions.current = event.nativeEvent.layout;
}, [onLayout]);
return /*#__PURE__*/_jsx(GestureDetector, {
gesture: gesture,
children: /*#__PURE__*/_jsxs(NativeButton, {
...remainingProps,
onLayout: setDimensions,
accessible: accessible !== false,
hitSlop: appliedHitSlop,
enabled: isPressableEnabled,
touchSoundDisabled: android_disableSound ?? undefined,
rippleColor: rippleColor,
rippleRadius: android_ripple?.radius ?? undefined,
style: [pointerStyle, styleProp],
testOnly_onPress: IS_TEST_ENV ? onPress : undefined,
testOnly_onPressIn: IS_TEST_ENV ? onPressIn : undefined,
testOnly_onPressOut: IS_TEST_ENV ? onPressOut : undefined,
testOnly_onLongPress: IS_TEST_ENV ? onLongPress : undefined,
children: [childrenProp, __DEV__ ? /*#__PURE__*/_jsx(PressabilityDebugView, {
color: "red",
hitSlop: normalizedHitSlop
}) : null]
})
});
};
export default Pressable;
//# sourceMappingURL=Pressable.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
"use strict";
export {};
//# sourceMappingURL=PressableProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/Pressable/PressableProps.tsx"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,40 @@
"use strict";
class PressableStateMachine {
constructor() {
this.states = null;
this.currentStepIndex = 0;
this.eventPayload = null;
}
setStates(states) {
this.states = states;
}
reset() {
this.currentStepIndex = 0;
this.eventPayload = null;
}
handleEvent(eventName, eventPayload) {
if (!this.states) {
return;
}
const step = this.states[this.currentStepIndex];
this.eventPayload = eventPayload || this.eventPayload;
if (step.eventName !== eventName) {
if (this.currentStepIndex > 0) {
// retry with position at index 0
this.reset();
this.handleEvent(eventName, eventPayload);
}
return;
}
if (this.eventPayload && step.callback) {
step.callback(this.eventPayload);
}
this.currentStepIndex++;
if (this.currentStepIndex === this.states.length) {
this.reset();
}
}
}
export { PressableStateMachine };
//# sourceMappingURL=StateMachine.js.map
@@ -0,0 +1 @@
{"version":3,"names":["PressableStateMachine","constructor","states","currentStepIndex","eventPayload","setStates","reset","handleEvent","eventName","step","callback","length"],"sourceRoot":"../../../../src","sources":["components/Pressable/StateMachine.tsx"],"mappings":";;AAOA,MAAMA,qBAAqB,CAAC;EAK1BC,WAAWA,CAAA,EAAG;IACZ,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,gBAAgB,GAAG,CAAC;IACzB,IAAI,CAACC,YAAY,GAAG,IAAI;EAC1B;EAEOC,SAASA,CAACH,MAAyB,EAAE;IAC1C,IAAI,CAACA,MAAM,GAAGA,MAAM;EACtB;EAEOI,KAAKA,CAAA,EAAG;IACb,IAAI,CAACH,gBAAgB,GAAG,CAAC;IACzB,IAAI,CAACC,YAAY,GAAG,IAAI;EAC1B;EAEOG,WAAWA,CAACC,SAAiB,EAAEJ,YAA6B,EAAE;IACnE,IAAI,CAAC,IAAI,CAACF,MAAM,EAAE;MAChB;IACF;IAEA,MAAMO,IAAI,GAAG,IAAI,CAACP,MAAM,CAAC,IAAI,CAACC,gBAAgB,CAAC;IAC/C,IAAI,CAACC,YAAY,GAAGA,YAAY,IAAI,IAAI,CAACA,YAAY;IAErD,IAAIK,IAAI,CAACD,SAAS,KAAKA,SAAS,EAAE;MAChC,IAAI,IAAI,CAACL,gBAAgB,GAAG,CAAC,EAAE;QAC7B;QACA,IAAI,CAACG,KAAK,CAAC,CAAC;QACZ,IAAI,CAACC,WAAW,CAACC,SAAS,EAAEJ,YAAY,CAAC;MAC3C;MACA;IACF;IAEA,IAAI,IAAI,CAACA,YAAY,IAAIK,IAAI,CAACC,QAAQ,EAAE;MACtCD,IAAI,CAACC,QAAQ,CAAC,IAAI,CAACN,YAAY,CAAC;IAClC;IAEA,IAAI,CAACD,gBAAgB,EAAE;IAEvB,IAAI,IAAI,CAACA,gBAAgB,KAAK,IAAI,CAACD,MAAM,CAACS,MAAM,EAAE;MAChD,IAAI,CAACL,KAAK,CAAC,CAAC;IACd;EACF;AACF;AAEA,SAASN,qBAAqB","ignoreList":[]}
@@ -0,0 +1,4 @@
"use strict";
export { default } from './Pressable';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"names":["default"],"sourceRoot":"../../../../src","sources":["components/Pressable/index.ts"],"mappings":";;AAIA,SAASA,OAAO,QAAQ,aAAa","ignoreList":[]}
@@ -0,0 +1,82 @@
"use strict";
import { Platform } from 'react-native';
export let StateMachineEvent = /*#__PURE__*/function (StateMachineEvent) {
StateMachineEvent["NATIVE_BEGIN"] = "nativeBegin";
StateMachineEvent["NATIVE_START"] = "nativeStart";
StateMachineEvent["FINALIZE"] = "finalize";
StateMachineEvent["LONG_PRESS_TOUCHES_DOWN"] = "longPressTouchesDown";
return StateMachineEvent;
}({});
function getAndroidStatesConfig(handlePressIn, handlePressOut) {
return [{
eventName: StateMachineEvent.NATIVE_BEGIN
}, {
eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
callback: handlePressIn
}, {
eventName: StateMachineEvent.FINALIZE,
callback: handlePressOut
}];
}
function getIosStatesConfig(handlePressIn, handlePressOut) {
return [{
eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN
}, {
eventName: StateMachineEvent.NATIVE_START,
callback: handlePressIn
}, {
eventName: StateMachineEvent.FINALIZE,
callback: handlePressOut
}];
}
function getWebStatesConfig(handlePressIn, handlePressOut) {
return [{
eventName: StateMachineEvent.NATIVE_BEGIN
}, {
eventName: StateMachineEvent.NATIVE_START
}, {
eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
callback: handlePressIn
}, {
eventName: StateMachineEvent.FINALIZE,
callback: handlePressOut
}];
}
function getMacosStatesConfig(handlePressIn, handlePressOut) {
return [{
eventName: StateMachineEvent.LONG_PRESS_TOUCHES_DOWN
}, {
eventName: StateMachineEvent.NATIVE_BEGIN,
callback: handlePressIn
}, {
eventName: StateMachineEvent.NATIVE_START
}, {
eventName: StateMachineEvent.FINALIZE,
callback: handlePressOut
}];
}
function getUniversalStatesConfig(handlePressIn, handlePressOut) {
return [{
eventName: StateMachineEvent.FINALIZE,
callback: event => {
handlePressIn(event);
handlePressOut(event);
}
}];
}
export function getStatesConfig(handlePressIn, handlePressOut) {
if (Platform.OS === 'android') {
return getAndroidStatesConfig(handlePressIn, handlePressOut);
} else if (Platform.OS === 'ios') {
return getIosStatesConfig(handlePressIn, handlePressOut);
} else if (Platform.OS === 'web') {
return getWebStatesConfig(handlePressIn, handlePressOut);
} else if (Platform.OS === 'macos') {
return getMacosStatesConfig(handlePressIn, handlePressOut);
} else {
// Unknown platform - using minimal universal setup.
return getUniversalStatesConfig(handlePressIn, handlePressOut);
}
}
//# sourceMappingURL=stateDefinitions.js.map
@@ -0,0 +1 @@
{"version":3,"names":["Platform","StateMachineEvent","getAndroidStatesConfig","handlePressIn","handlePressOut","eventName","NATIVE_BEGIN","LONG_PRESS_TOUCHES_DOWN","callback","FINALIZE","getIosStatesConfig","NATIVE_START","getWebStatesConfig","getMacosStatesConfig","getUniversalStatesConfig","event","getStatesConfig","OS"],"sourceRoot":"../../../../src","sources":["components/Pressable/stateDefinitions.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAIvC,WAAYC,iBAAiB,0BAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAO7B,SAASC,sBAAsBA,CAC7BC,aAA8C,EAC9CC,cAA+C,EAC/C;EACA,OAAO,CACL;IACEC,SAAS,EAAEJ,iBAAiB,CAACK;EAC/B,CAAC,EACD;IACED,SAAS,EAAEJ,iBAAiB,CAACM,uBAAuB;IACpDC,QAAQ,EAAEL;EACZ,CAAC,EACD;IACEE,SAAS,EAAEJ,iBAAiB,CAACQ,QAAQ;IACrCD,QAAQ,EAAEJ;EACZ,CAAC,CACF;AACH;AAEA,SAASM,kBAAkBA,CACzBP,aAA8C,EAC9CC,cAA+C,EAC/C;EACA,OAAO,CACL;IACEC,SAAS,EAAEJ,iBAAiB,CAACM;EAC/B,CAAC,EACD;IACEF,SAAS,EAAEJ,iBAAiB,CAACU,YAAY;IACzCH,QAAQ,EAAEL;EACZ,CAAC,EACD;IACEE,SAAS,EAAEJ,iBAAiB,CAACQ,QAAQ;IACrCD,QAAQ,EAAEJ;EACZ,CAAC,CACF;AACH;AAEA,SAASQ,kBAAkBA,CACzBT,aAA8C,EAC9CC,cAA+C,EAC/C;EACA,OAAO,CACL;IACEC,SAAS,EAAEJ,iBAAiB,CAACK;EAC/B,CAAC,EACD;IACED,SAAS,EAAEJ,iBAAiB,CAACU;EAC/B,CAAC,EACD;IACEN,SAAS,EAAEJ,iBAAiB,CAACM,uBAAuB;IACpDC,QAAQ,EAAEL;EACZ,CAAC,EACD;IACEE,SAAS,EAAEJ,iBAAiB,CAACQ,QAAQ;IACrCD,QAAQ,EAAEJ;EACZ,CAAC,CACF;AACH;AAEA,SAASS,oBAAoBA,CAC3BV,aAA8C,EAC9CC,cAA+C,EAC/C;EACA,OAAO,CACL;IACEC,SAAS,EAAEJ,iBAAiB,CAACM;EAC/B,CAAC,EACD;IACEF,SAAS,EAAEJ,iBAAiB,CAACK,YAAY;IACzCE,QAAQ,EAAEL;EACZ,CAAC,EACD;IACEE,SAAS,EAAEJ,iBAAiB,CAACU;EAC/B,CAAC,EACD;IACEN,SAAS,EAAEJ,iBAAiB,CAACQ,QAAQ;IACrCD,QAAQ,EAAEJ;EACZ,CAAC,CACF;AACH;AAEA,SAASU,wBAAwBA,CAC/BX,aAA8C,EAC9CC,cAA+C,EAC/C;EACA,OAAO,CACL;IACEC,SAAS,EAAEJ,iBAAiB,CAACQ,QAAQ;IACrCD,QAAQ,EAAGO,KAAqB,IAAK;MACnCZ,aAAa,CAACY,KAAK,CAAC;MACpBX,cAAc,CAACW,KAAK,CAAC;IACvB;EACF,CAAC,CACF;AACH;AAEA,OAAO,SAASC,eAAeA,CAC7Bb,aAA8C,EAC9CC,cAA+C,EAC5B;EACnB,IAAIJ,QAAQ,CAACiB,EAAE,KAAK,SAAS,EAAE;IAC7B,OAAOf,sBAAsB,CAACC,aAAa,EAAEC,cAAc,CAAC;EAC9D,CAAC,MAAM,IAAIJ,QAAQ,CAACiB,EAAE,KAAK,KAAK,EAAE;IAChC,OAAOP,kBAAkB,CAACP,aAAa,EAAEC,cAAc,CAAC;EAC1D,CAAC,MAAM,IAAIJ,QAAQ,CAACiB,EAAE,KAAK,KAAK,EAAE;IAChC,OAAOL,kBAAkB,CAACT,aAAa,EAAEC,cAAc,CAAC;EAC1D,CAAC,MAAM,IAAIJ,QAAQ,CAACiB,EAAE,KAAK,OAAO,EAAE;IAClC,OAAOJ,oBAAoB,CAACV,aAAa,EAAEC,cAAc,CAAC;EAC5D,CAAC,MAAM;IACL;IACA,OAAOU,wBAAwB,CAACX,aAAa,EAAEC,cAAc,CAAC;EAChE;AACF","ignoreList":[]}
@@ -0,0 +1,84 @@
"use strict";
const numberAsInset = value => ({
left: value,
right: value,
top: value,
bottom: value
});
const addInsets = (a, b) => ({
left: (a.left ?? 0) + (b.left ?? 0),
right: (a.right ?? 0) + (b.right ?? 0),
top: (a.top ?? 0) + (b.top ?? 0),
bottom: (a.bottom ?? 0) + (b.bottom ?? 0)
});
const touchDataToPressEvent = (data, timestamp, targetId) => ({
identifier: data.id,
locationX: data.x,
locationY: data.y,
pageX: data.absoluteX,
pageY: data.absoluteY,
target: targetId,
timestamp: timestamp,
touches: [],
// Always empty - legacy compatibility
changedTouches: [] // Always empty - legacy compatibility
});
const gestureToPressEvent = (event, timestamp, targetId) => ({
identifier: event.handlerTag,
locationX: event.x,
locationY: event.y,
pageX: event.absoluteX,
pageY: event.absoluteY,
target: targetId,
timestamp: timestamp,
touches: [],
// Always empty - legacy compatibility
changedTouches: [] // Always empty - legacy compatibility
});
const isTouchWithinInset = (dimensions, inset, touch) => (touch?.locationX ?? 0) < (inset.right ?? 0) + dimensions.width && (touch?.locationY ?? 0) < (inset.bottom ?? 0) + dimensions.height && (touch?.locationX ?? 0) > -(inset.left ?? 0) && (touch?.locationY ?? 0) > -(inset.top ?? 0);
const gestureToPressableEvent = event => {
const timestamp = Date.now();
// As far as I can see, there isn't a conventional way of getting targetId with the data we get
const targetId = 0;
const pressEvent = gestureToPressEvent(event, timestamp, targetId);
return {
nativeEvent: {
touches: [pressEvent],
changedTouches: [pressEvent],
identifier: pressEvent.identifier,
locationX: event.x,
locationY: event.y,
pageX: event.absoluteX,
pageY: event.absoluteY,
target: targetId,
timestamp: timestamp,
force: undefined
}
};
};
const gestureTouchToPressableEvent = event => {
const timestamp = Date.now();
// As far as I can see, there isn't a conventional way of getting targetId with the data we get
const targetId = 0;
const touchesList = event.allTouches.map(touch => touchDataToPressEvent(touch, timestamp, targetId));
const changedTouchesList = event.changedTouches.map(touch => touchDataToPressEvent(touch, timestamp, targetId));
return {
nativeEvent: {
touches: touchesList,
changedTouches: changedTouchesList,
identifier: event.handlerTag,
locationX: event.allTouches.at(0)?.x ?? -1,
locationY: event.allTouches.at(0)?.y ?? -1,
pageX: event.allTouches.at(0)?.absoluteX ?? -1,
pageY: event.allTouches.at(0)?.absoluteY ?? -1,
target: targetId,
timestamp: timestamp,
force: undefined
}
};
};
export { numberAsInset, addInsets, isTouchWithinInset, gestureToPressableEvent, gestureTouchToPressableEvent };
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"names":["numberAsInset","value","left","right","top","bottom","addInsets","a","b","touchDataToPressEvent","data","timestamp","targetId","identifier","id","locationX","x","locationY","y","pageX","absoluteX","pageY","absoluteY","target","touches","changedTouches","gestureToPressEvent","event","handlerTag","isTouchWithinInset","dimensions","inset","touch","width","height","gestureToPressableEvent","Date","now","pressEvent","nativeEvent","force","undefined","gestureTouchToPressableEvent","touchesList","allTouches","map","changedTouchesList","at"],"sourceRoot":"../../../../src","sources":["components/Pressable/utils.ts"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,352 @@
"use strict";
// This component is based on RN's DrawerLayoutAndroid API
// It's cross-compatible with all platforms despite
// `DrawerLayoutAndroid` only being available on android
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import { StyleSheet, Keyboard, StatusBar, I18nManager, Platform } from 'react-native';
import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
import { GestureDetector } from '../handlers/gestures/GestureDetector';
import { MouseButton } from '../handlers/gestureHandlerCommon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DRAG_TOSS = 0.05;
export let DrawerPosition = /*#__PURE__*/function (DrawerPosition) {
DrawerPosition[DrawerPosition["LEFT"] = 0] = "LEFT";
DrawerPosition[DrawerPosition["RIGHT"] = 1] = "RIGHT";
return DrawerPosition;
}({});
export let DrawerState = /*#__PURE__*/function (DrawerState) {
DrawerState[DrawerState["IDLE"] = 0] = "IDLE";
DrawerState[DrawerState["DRAGGING"] = 1] = "DRAGGING";
DrawerState[DrawerState["SETTLING"] = 2] = "SETTLING";
return DrawerState;
}({});
export let DrawerType = /*#__PURE__*/function (DrawerType) {
DrawerType[DrawerType["FRONT"] = 0] = "FRONT";
DrawerType[DrawerType["BACK"] = 1] = "BACK";
DrawerType[DrawerType["SLIDE"] = 2] = "SLIDE";
return DrawerType;
}({});
export let DrawerLockMode = /*#__PURE__*/function (DrawerLockMode) {
DrawerLockMode[DrawerLockMode["UNLOCKED"] = 0] = "UNLOCKED";
DrawerLockMode[DrawerLockMode["LOCKED_CLOSED"] = 1] = "LOCKED_CLOSED";
DrawerLockMode[DrawerLockMode["LOCKED_OPEN"] = 2] = "LOCKED_OPEN";
return DrawerLockMode;
}({});
export let DrawerKeyboardDismissMode = /*#__PURE__*/function (DrawerKeyboardDismissMode) {
DrawerKeyboardDismissMode[DrawerKeyboardDismissMode["NONE"] = 0] = "NONE";
DrawerKeyboardDismissMode[DrawerKeyboardDismissMode["ON_DRAG"] = 1] = "ON_DRAG";
return DrawerKeyboardDismissMode;
}({});
const defaultProps = {
drawerWidth: 200,
drawerPosition: DrawerPosition.LEFT,
drawerType: DrawerType.FRONT,
edgeWidth: 20,
minSwipeDistance: 3,
overlayColor: 'rgba(0, 0, 0, 0.7)',
drawerLockMode: DrawerLockMode.UNLOCKED,
enableTrackpadTwoFingerGesture: false,
activeCursor: 'auto',
mouseButton: MouseButton.LEFT,
statusBarAnimation: 'slide'
};
// StatusBar.setHidden and Keyboard.dismiss cannot be directly referenced in worklets.
const setStatusBarHidden = StatusBar.setHidden;
const dismissKeyboard = Keyboard.dismiss;
const DrawerLayout = /*#__PURE__*/forwardRef(function DrawerLayout(props, ref) {
const [containerWidth, setContainerWidth] = useState(0);
const [drawerState, setDrawerState] = useState(DrawerState.IDLE);
const [drawerOpened, setDrawerOpened] = useState(false);
const {
drawerPosition = defaultProps.drawerPosition,
drawerWidth = defaultProps.drawerWidth,
drawerType = defaultProps.drawerType,
drawerBackgroundColor,
drawerContainerStyle,
contentContainerStyle,
minSwipeDistance = defaultProps.minSwipeDistance,
edgeWidth = defaultProps.edgeWidth,
drawerLockMode = defaultProps.drawerLockMode,
overlayColor = defaultProps.overlayColor,
enableTrackpadTwoFingerGesture = defaultProps.enableTrackpadTwoFingerGesture,
activeCursor = defaultProps.activeCursor,
mouseButton = defaultProps.mouseButton,
statusBarAnimation = defaultProps.statusBarAnimation,
hideStatusBar,
keyboardDismissMode,
userSelect,
enableContextMenu,
renderNavigationView,
onDrawerSlide,
onDrawerClose,
onDrawerOpen,
onDrawerStateChanged,
animationSpeed: animationSpeedProp
} = props;
const isFromLeft = drawerPosition === DrawerPosition.LEFT;
const sideCorrection = isFromLeft ? 1 : -1;
// While closing the drawer when user starts gesture in the greyed out part of the window,
// we want the drawer to follow only once the finger reaches the edge of the drawer.
// See the diagram for reference. * = starting finger position, < = current finger position
// 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|..<*..| |XXXXXXXX|.<-*..| |XXXXXXXX|<--*..| |XXXXX|<-----*..|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// |XXXXXXXX|......| |XXXXXXXX|......| |XXXXXXXX|......| |XXXXX|.........|
// +---------------+ +---------------+ +---------------+ +---------------+
const openValue = useSharedValue(0);
useDerivedValue(() => {
onDrawerSlide && runOnJS(onDrawerSlide)(openValue.value);
}, []);
const isDrawerOpen = useSharedValue(false);
const handleContainerLayout = ({
nativeEvent
}) => {
setContainerWidth(nativeEvent.layout.width);
};
const emitStateChanged = useCallback((newState, drawerWillShow) => {
'worklet';
onDrawerStateChanged && runOnJS(onDrawerStateChanged)?.(newState, drawerWillShow);
}, [onDrawerStateChanged]);
const drawerAnimatedProps = useAnimatedProps(() => ({
accessibilityViewIsModal: isDrawerOpen.value
}));
const overlayAnimatedProps = useAnimatedProps(() => ({
pointerEvents: isDrawerOpen.value ? 'auto' : 'none'
}));
// While the drawer is hidden, it's hitSlop overflows onto the main view by edgeWidth
// This way it can be swiped open even when it's hidden
const [edgeHitSlop, setEdgeHitSlop] = useState(isFromLeft ? {
left: 0,
width: edgeWidth
} : {
right: 0,
width: edgeWidth
});
// gestureOrientation is 1 if the gesture is expected to move from left to right and -1 otherwise
const gestureOrientation = useMemo(() => sideCorrection * (drawerOpened ? -1 : 1), [sideCorrection, drawerOpened]);
useEffect(() => {
setEdgeHitSlop(isFromLeft ? {
left: 0,
width: edgeWidth
} : {
right: 0,
width: edgeWidth
});
}, [isFromLeft, edgeWidth]);
const animateDrawer = useCallback((toValue, initialVelocity, animationSpeed) => {
'worklet';
const willShow = toValue !== 0;
isDrawerOpen.value = willShow;
emitStateChanged(DrawerState.SETTLING, willShow);
runOnJS(setDrawerState)(DrawerState.SETTLING);
if (hideStatusBar) {
runOnJS(setStatusBarHidden)(willShow, statusBarAnimation);
}
const normalizedToValue = interpolate(toValue, [0, drawerWidth], [0, 1], Extrapolation.CLAMP);
const normalizedInitialVelocity = interpolate(initialVelocity, [0, drawerWidth], [0, 1], Extrapolation.CLAMP);
openValue.value = withSpring(normalizedToValue, {
overshootClamping: true,
velocity: normalizedInitialVelocity,
mass: animationSpeed ? 1 / animationSpeed : 1 / (animationSpeedProp ?? 1),
damping: 40,
stiffness: 500
}, finished => {
if (finished) {
emitStateChanged(DrawerState.IDLE, willShow);
runOnJS(setDrawerOpened)(willShow);
runOnJS(setDrawerState)(DrawerState.IDLE);
if (willShow) {
onDrawerOpen && runOnJS(onDrawerOpen)?.();
} else {
onDrawerClose && runOnJS(onDrawerClose)?.();
}
}
});
}, [openValue, emitStateChanged, isDrawerOpen, hideStatusBar, onDrawerClose, onDrawerOpen, drawerWidth, statusBarAnimation]);
const handleRelease = useCallback(event => {
'worklet';
let {
translationX: dragX,
velocityX,
x: touchX
} = event;
if (drawerPosition !== DrawerPosition.LEFT) {
// See description in _updateAnimatedEvent about why events are flipped
// for right-side drawer
dragX = -dragX;
touchX = containerWidth - touchX;
velocityX = -velocityX;
}
const gestureStartX = touchX - dragX;
let dragOffsetBasedOnStart = 0;
if (drawerType === DrawerType.FRONT) {
dragOffsetBasedOnStart = gestureStartX > drawerWidth ? gestureStartX - drawerWidth : 0;
}
const startOffsetX = dragX + dragOffsetBasedOnStart + (isDrawerOpen.value ? drawerWidth : 0);
const projOffsetX = startOffsetX + DRAG_TOSS * velocityX;
const shouldOpen = projOffsetX > drawerWidth / 2;
if (shouldOpen) {
animateDrawer(drawerWidth, velocityX);
} else {
animateDrawer(0, velocityX);
}
}, [animateDrawer, containerWidth, drawerPosition, drawerType, drawerWidth, isDrawerOpen]);
const openDrawer = useCallback((options = {}) => {
'worklet';
animateDrawer(drawerWidth, options.initialVelocity ?? 0, options.animationSpeed);
}, [animateDrawer, drawerWidth]);
const closeDrawer = useCallback((options = {}) => {
'worklet';
animateDrawer(0, options.initialVelocity ?? 0, options.animationSpeed);
}, [animateDrawer]);
const overlayDismissGesture = useMemo(() => Gesture.Tap().maxDistance(25).onEnd(() => {
if (isDrawerOpen.value && drawerLockMode !== DrawerLockMode.LOCKED_OPEN) {
closeDrawer();
}
}), [closeDrawer, isDrawerOpen, drawerLockMode]);
const overlayAnimatedStyle = useAnimatedStyle(() => ({
opacity: openValue.value,
backgroundColor: overlayColor
}));
const fillHitSlop = useMemo(() => isFromLeft ? {
left: drawerWidth
} : {
right: drawerWidth
}, [drawerWidth, isFromLeft]);
const panGesture = useMemo(() => {
return Gesture.Pan().activeCursor(activeCursor).mouseButton(mouseButton).hitSlop(drawerOpened ? fillHitSlop : edgeHitSlop).minDistance(drawerOpened ? 100 : 0).activeOffsetX(gestureOrientation * minSwipeDistance).failOffsetY([-15, 15]).simultaneousWithExternalGesture(overlayDismissGesture).enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture).enabled(drawerState !== DrawerState.SETTLING && (drawerOpened ? drawerLockMode !== DrawerLockMode.LOCKED_OPEN : drawerLockMode !== DrawerLockMode.LOCKED_CLOSED)).onStart(() => {
emitStateChanged(DrawerState.DRAGGING, false);
runOnJS(setDrawerState)(DrawerState.DRAGGING);
if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
runOnJS(dismissKeyboard)();
}
if (hideStatusBar) {
runOnJS(setStatusBarHidden)(true, statusBarAnimation);
}
}).onUpdate(event => {
const startedOutsideTranslation = isFromLeft ? interpolate(event.x, [0, drawerWidth, drawerWidth + 1], [0, drawerWidth, drawerWidth]) : interpolate(event.x - containerWidth, [-drawerWidth - 1, -drawerWidth, 0], [drawerWidth, drawerWidth, 0]);
const startedInsideTranslation = sideCorrection * (event.translationX + (drawerOpened ? drawerWidth * -gestureOrientation : 0));
const adjustedTranslation = Math.max(drawerOpened ? startedOutsideTranslation : 0, startedInsideTranslation);
openValue.value = interpolate(adjustedTranslation, [-drawerWidth, 0, drawerWidth], [1, 0, 1], Extrapolation.CLAMP);
}).onEnd(handleRelease);
}, [drawerLockMode, openValue, drawerWidth, emitStateChanged, gestureOrientation, handleRelease, edgeHitSlop, fillHitSlop, minSwipeDistance, hideStatusBar, keyboardDismissMode, overlayDismissGesture, drawerOpened, isFromLeft, containerWidth, sideCorrection, drawerState, activeCursor, enableTrackpadTwoFingerGesture, mouseButton, statusBarAnimation]);
// When using RTL, row and row-reverse flex directions are flipped.
const reverseContentDirection = I18nManager.isRTL ? isFromLeft : !isFromLeft;
const dynamicDrawerStyles = {
backgroundColor: drawerBackgroundColor,
width: drawerWidth
};
const containerStyles = useAnimatedStyle(() => {
if (drawerType === DrawerType.FRONT) {
return {};
}
return {
transform: [{
translateX: interpolate(openValue.value, [0, 1], [0, drawerWidth * sideCorrection], Extrapolation.CLAMP)
}]
};
});
const drawerAnimatedStyle = useAnimatedStyle(() => {
const closedDrawerOffset = drawerWidth * -sideCorrection;
const isBack = drawerType === DrawerType.BACK;
const isIdle = drawerState === DrawerState.IDLE;
if (isBack) {
return {
transform: [{
translateX: 0
}],
flexDirection: reverseContentDirection ? 'row-reverse' : 'row'
};
}
let translateX = 0;
if (isIdle) {
translateX = drawerOpened ? 0 : closedDrawerOffset;
} else {
translateX = interpolate(openValue.value, [0, 1], [closedDrawerOffset, 0], Extrapolation.CLAMP);
}
return {
transform: [{
translateX
}],
flexDirection: reverseContentDirection ? 'row-reverse' : 'row'
};
});
const containerAnimatedProps = useAnimatedProps(() => ({
importantForAccessibility: Platform.OS === 'android' ? isDrawerOpen.value ? 'no-hide-descendants' : 'yes' : undefined
}));
const children = typeof props.children === 'function' ? props.children(openValue) // renderer function
: props.children;
useImperativeHandle(ref, () => ({
openDrawer,
closeDrawer
}), [openDrawer, closeDrawer]);
return /*#__PURE__*/_jsx(GestureDetector, {
gesture: panGesture,
userSelect: userSelect,
enableContextMenu: enableContextMenu,
children: /*#__PURE__*/_jsxs(Animated.View, {
style: styles.main,
onLayout: handleContainerLayout,
children: [/*#__PURE__*/_jsx(GestureDetector, {
gesture: overlayDismissGesture,
children: /*#__PURE__*/_jsxs(Animated.View, {
style: [drawerType === DrawerType.FRONT ? styles.containerOnBack : styles.containerInFront, containerStyles, contentContainerStyle],
animatedProps: containerAnimatedProps,
children: [children, /*#__PURE__*/_jsx(Animated.View, {
animatedProps: overlayAnimatedProps,
style: [styles.overlay, overlayAnimatedStyle]
})]
})
}), /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: "box-none",
animatedProps: drawerAnimatedProps,
style: [styles.drawerContainer, drawerAnimatedStyle, drawerContainerStyle],
children: /*#__PURE__*/_jsx(Animated.View, {
style: dynamicDrawerStyles,
children: renderNavigationView(openValue)
})
})]
})
});
});
export default DrawerLayout;
const styles = StyleSheet.create({
drawerContainer: {
...StyleSheet.absoluteFillObject,
zIndex: 1001,
flexDirection: 'row'
},
containerInFront: {
...StyleSheet.absoluteFillObject,
zIndex: 1002
},
containerOnBack: {
...StyleSheet.absoluteFillObject
},
main: {
flex: 1,
zIndex: 0,
overflow: 'hidden'
},
overlay: {
...StyleSheet.absoluteFillObject,
zIndex: 1000
}
});
//# sourceMappingURL=ReanimatedDrawerLayout.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,332 @@
"use strict";
import { useMemo, useCallback, useImperativeHandle } from 'react';
import { View, I18nManager, StyleSheet } from 'react-native';
import Animated, { useSharedValue, interpolate, runOnJS, ReduceMotion, withSpring, useAnimatedRef, measure, runOnUI, useAnimatedStyle } from 'react-native-reanimated';
import { SwipeDirection } from '.';
import { Gesture } from '../..';
import { GestureDetector } from '../../handlers/gestures/GestureDetector';
import { applyRelationProp } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DRAG_TOSS = 0.05;
const DEFAULT_FRICTION = 1;
const DEFAULT_OVERSHOOT_FRICTION = 1;
const DEFAULT_DRAG_OFFSET = 10;
const DEFAULT_ENABLE_TRACKING_TWO_FINGER_GESTURE = false;
const Swipeable = props => {
const {
ref,
leftThreshold,
rightThreshold,
enabled,
containerStyle,
childrenContainerStyle,
animationOptions,
overshootLeft,
overshootRight,
testID,
children,
enableTrackpadTwoFingerGesture = DEFAULT_ENABLE_TRACKING_TWO_FINGER_GESTURE,
dragOffsetFromLeftEdge = DEFAULT_DRAG_OFFSET,
dragOffsetFromRightEdge = DEFAULT_DRAG_OFFSET,
friction = DEFAULT_FRICTION,
overshootFriction = DEFAULT_OVERSHOOT_FRICTION,
onSwipeableOpenStartDrag,
onSwipeableCloseStartDrag,
onSwipeableWillOpen,
onSwipeableWillClose,
onSwipeableOpen,
onSwipeableClose,
renderLeftActions,
renderRightActions,
simultaneousWithExternalGesture,
requireExternalGestureToFail,
blocksExternalGesture,
hitSlop,
...remainingProps
} = props;
const relationProps = useMemo(() => ({
simultaneousWithExternalGesture,
requireExternalGestureToFail,
blocksExternalGesture
}), [blocksExternalGesture, requireExternalGestureToFail, simultaneousWithExternalGesture]);
const rowState = useSharedValue(0);
const userDrag = useSharedValue(0);
const appliedTranslation = useSharedValue(0);
const rowWidth = useSharedValue(0);
const leftWidth = useSharedValue(0);
const rightWidth = useSharedValue(0);
const showLeftProgress = useSharedValue(0);
const showRightProgress = useSharedValue(0);
const updateAnimatedEvent = useCallback(() => {
'worklet';
const shouldOvershootLeft = overshootLeft ?? leftWidth.value > 0;
const shouldOvershootRight = overshootRight ?? rightWidth.value > 0;
const startOffset = rowState.value === 1 ? leftWidth.value : rowState.value === -1 ? -rightWidth.value : 0;
const offsetDrag = userDrag.value / friction + startOffset;
appliedTranslation.value = interpolate(offsetDrag, [-rightWidth.value - 1, -rightWidth.value, leftWidth.value, leftWidth.value + 1], [-rightWidth.value - (shouldOvershootRight ? 1 / overshootFriction : 0), -rightWidth.value, leftWidth.value, leftWidth.value + (shouldOvershootLeft ? 1 / overshootFriction : 0)]);
showLeftProgress.value = leftWidth.value > 0 ? interpolate(appliedTranslation.value, [-1, 0, leftWidth.value], [0, 0, 1]) : 0;
showRightProgress.value = rightWidth.value > 0 ? interpolate(appliedTranslation.value, [-rightWidth.value, 0, 1], [1, 0, 0]) : 0;
}, [appliedTranslation, friction, leftWidth, overshootFriction, rightWidth, rowState, showLeftProgress, showRightProgress, userDrag, overshootLeft, overshootRight]);
const dispatchImmediateEvents = useCallback((fromValue, toValue) => {
'worklet';
if (onSwipeableWillOpen && toValue !== 0) {
runOnJS(onSwipeableWillOpen)(toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT);
}
if (onSwipeableWillClose && toValue === 0) {
runOnJS(onSwipeableWillClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
}
}, [onSwipeableWillClose, onSwipeableWillOpen]);
const dispatchEndEvents = useCallback((fromValue, toValue) => {
'worklet';
if (onSwipeableOpen && toValue !== 0) {
runOnJS(onSwipeableOpen)(toValue > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT);
}
if (onSwipeableClose && toValue === 0) {
runOnJS(onSwipeableClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
}
}, [onSwipeableClose, onSwipeableOpen]);
const animateRow = useCallback((toValue, velocityX) => {
'worklet';
const translationSpringConfig = {
mass: 2,
damping: 1000,
stiffness: 700,
velocity: velocityX,
overshootClamping: true,
reduceMotion: ReduceMotion.System,
...animationOptions
};
const isClosing = toValue === 0;
const moveToRight = isClosing ? rowState.value < 0 : toValue > 0;
const usedWidth = isClosing ? moveToRight ? rightWidth.value : leftWidth.value : moveToRight ? leftWidth.value : rightWidth.value;
const progressSpringConfig = {
...translationSpringConfig,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 0.01,
velocity: velocityX && interpolate(velocityX, [-usedWidth, usedWidth], [-1, 1])
};
const frozenRowState = rowState.value;
appliedTranslation.value = withSpring(toValue, translationSpringConfig, isFinished => {
if (isFinished) {
dispatchEndEvents(frozenRowState, toValue);
}
});
const progressTarget = toValue === 0 ? 0 : 1 * Math.sign(toValue);
showLeftProgress.value = withSpring(Math.max(progressTarget, 0), progressSpringConfig);
showRightProgress.value = withSpring(Math.max(-progressTarget, 0), progressSpringConfig);
dispatchImmediateEvents(frozenRowState, toValue);
rowState.value = Math.sign(toValue);
}, [rowState, animationOptions, appliedTranslation, showLeftProgress, leftWidth, showRightProgress, rightWidth, dispatchImmediateEvents, dispatchEndEvents]);
const leftLayoutRef = useAnimatedRef();
const leftWrapperLayoutRef = useAnimatedRef();
const rightLayoutRef = useAnimatedRef();
const updateElementWidths = useCallback(() => {
'worklet';
const leftLayout = measure(leftLayoutRef);
const leftWrapperLayout = measure(leftWrapperLayoutRef);
const rightLayout = measure(rightLayoutRef);
leftWidth.value = (leftLayout?.pageX ?? 0) - (leftWrapperLayout?.pageX ?? 0);
rightWidth.value = rowWidth.value - (rightLayout?.pageX ?? rowWidth.value) + (leftWrapperLayout?.pageX ?? 0);
}, [leftLayoutRef, leftWrapperLayoutRef, rightLayoutRef, leftWidth, rightWidth, rowWidth]);
const swipeableMethods = useMemo(() => ({
close() {
'worklet';
if (_WORKLET) {
animateRow(0);
return;
}
runOnUI(() => {
animateRow(0);
})();
},
openLeft() {
'worklet';
if (_WORKLET) {
updateElementWidths();
animateRow(leftWidth.value);
return;
}
runOnUI(() => {
updateElementWidths();
animateRow(leftWidth.value);
})();
},
openRight() {
'worklet';
if (_WORKLET) {
updateElementWidths();
animateRow(-rightWidth.value);
return;
}
runOnUI(() => {
updateElementWidths();
animateRow(-rightWidth.value);
})();
},
reset() {
'worklet';
userDrag.value = 0;
showLeftProgress.value = 0;
appliedTranslation.value = 0;
rowState.value = 0;
}
}), [animateRow, updateElementWidths, leftWidth, rightWidth, userDrag, showLeftProgress, appliedTranslation, rowState]);
const onRowLayout = useCallback(({
nativeEvent
}) => {
rowWidth.value = nativeEvent.layout.width;
}, [rowWidth]);
// As stated in `Dimensions.get` docstring, this function should be called on every render
// since dimensions may change (e.g. orientation change)
const leftActionAnimation = useAnimatedStyle(() => {
return {
opacity: showLeftProgress.value === 0 ? 0 : 1
};
});
const leftElement = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
ref: leftWrapperLayoutRef,
style: [styles.leftActions, leftActionAnimation],
children: [renderLeftActions?.(showLeftProgress, appliedTranslation, swipeableMethods), /*#__PURE__*/_jsx(Animated.View, {
ref: leftLayoutRef
})]
}), [appliedTranslation, leftActionAnimation, leftLayoutRef, leftWrapperLayoutRef, renderLeftActions, showLeftProgress, swipeableMethods]);
const rightActionAnimation = useAnimatedStyle(() => {
return {
opacity: showRightProgress.value === 0 ? 0 : 1
};
});
const rightElement = useCallback(() => /*#__PURE__*/_jsxs(Animated.View, {
style: [styles.rightActions, rightActionAnimation],
children: [renderRightActions?.(showRightProgress, appliedTranslation, swipeableMethods), /*#__PURE__*/_jsx(Animated.View, {
ref: rightLayoutRef
})]
}), [appliedTranslation, renderRightActions, rightActionAnimation, rightLayoutRef, showRightProgress, swipeableMethods]);
const handleRelease = useCallback(event => {
'worklet';
const {
velocityX
} = event;
userDrag.value = event.translationX;
const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
let toValue = 0;
if (rowState.value === 0) {
if (translationX > leftThresholdProp) {
toValue = leftWidth.value;
} else if (translationX < -rightThresholdProp) {
toValue = -rightWidth.value;
}
} else if (rowState.value === 1) {
// Swiped to left
if (translationX > -leftThresholdProp) {
toValue = leftWidth.value;
}
} else {
// Swiped to right
if (translationX < rightThresholdProp) {
toValue = -rightWidth.value;
}
}
animateRow(toValue, velocityX / friction);
}, [animateRow, friction, leftThreshold, leftWidth, rightThreshold, rightWidth, rowState, userDrag]);
const close = useCallback(() => {
'worklet';
animateRow(0);
}, [animateRow]);
const dragStarted = useSharedValue(false);
const tapGesture = useMemo(() => {
const tap = Gesture.Tap().shouldCancelWhenOutside(true).onStart(() => {
if (rowState.value !== 0) {
close();
}
});
Object.entries(relationProps).forEach(([relationName, relation]) => {
applyRelationProp(tap, relationName, relation);
});
return tap;
}, [close, relationProps, rowState]);
const panGesture = useMemo(() => {
const pan = Gesture.Pan().enabled(enabled !== false).enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture).activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]).onStart(updateElementWidths).onUpdate(event => {
userDrag.value = event.translationX;
const direction = rowState.value === -1 ? SwipeDirection.RIGHT : rowState.value === 1 ? SwipeDirection.LEFT : event.translationX > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT;
if (!dragStarted.value) {
dragStarted.value = true;
if (rowState.value === 0 && onSwipeableOpenStartDrag) {
runOnJS(onSwipeableOpenStartDrag)(direction);
} else if (onSwipeableCloseStartDrag) {
runOnJS(onSwipeableCloseStartDrag)(direction);
}
}
updateAnimatedEvent();
}).onEnd(event => {
handleRelease(event);
}).onFinalize(() => {
dragStarted.value = false;
});
Object.entries(relationProps).forEach(([relationName, relation]) => {
applyRelationProp(pan, relationName, relation);
});
return pan;
}, [enabled, enableTrackpadTwoFingerGesture, dragOffsetFromRightEdge, dragOffsetFromLeftEdge, updateElementWidths, relationProps, userDrag, rowState, dragStarted, updateAnimatedEvent, onSwipeableOpenStartDrag, onSwipeableCloseStartDrag, handleRelease]);
useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{
translateX: appliedTranslation.value
}],
pointerEvents: rowState.value === 0 ? 'auto' : 'box-only'
}), [appliedTranslation, rowState]);
const swipeableComponent = /*#__PURE__*/_jsx(GestureDetector, {
gesture: panGesture,
touchAction: "pan-y",
children: /*#__PURE__*/_jsxs(Animated.View, {
...remainingProps,
onLayout: onRowLayout,
hitSlop: hitSlop ?? undefined,
style: [styles.container, containerStyle],
children: [leftElement(), rightElement(), /*#__PURE__*/_jsx(GestureDetector, {
gesture: tapGesture,
touchAction: "pan-y",
children: /*#__PURE__*/_jsx(Animated.View, {
style: [animatedStyle, childrenContainerStyle],
children: children
})
})]
})
});
return testID ? /*#__PURE__*/_jsx(View, {
testID: testID,
children: swipeableComponent
}) : swipeableComponent;
};
export default Swipeable;
const styles = StyleSheet.create({
container: {
overflow: 'hidden'
},
leftActions: {
...StyleSheet.absoluteFillObject,
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
overflow: 'hidden'
},
rightActions: {
...StyleSheet.absoluteFillObject,
flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
overflow: 'hidden'
}
});
//# sourceMappingURL=ReanimatedSwipeable.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
"use strict";
export let SwipeDirection = /*#__PURE__*/function (SwipeDirection) {
SwipeDirection["LEFT"] = "left";
SwipeDirection["RIGHT"] = "right";
return SwipeDirection;
}({});
//# sourceMappingURL=ReanimatedSwipeableProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":["SwipeDirection"],"sourceRoot":"../../../../src","sources":["components/ReanimatedSwipeable/ReanimatedSwipeableProps.ts"],"mappings":";;AAWA,WAAYA,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
@@ -0,0 +1,5 @@
"use strict";
export { SwipeDirection } from './ReanimatedSwipeableProps';
export { default } from './ReanimatedSwipeable';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"names":["SwipeDirection","default"],"sourceRoot":"../../../../src","sources":["components/ReanimatedSwipeable/index.ts"],"mappings":";;AAAA,SAGEA,cAAc,QACT,4BAA4B;AACnC,SAASC,OAAO,QAAQ,uBAAuB","ignoreList":[]}
@@ -0,0 +1,364 @@
"use strict";
// Similarily to the DrawerLayout component this deserves to be put in a
// separate repo. Although, keeping it here for the time being will allow us to
// move faster and fix possible issues quicker
import * as React from 'react';
import { Component } from 'react';
import { Animated, StyleSheet, View, I18nManager } from 'react-native';
import { PanGestureHandler } from '../handlers/PanGestureHandler';
import { TapGestureHandler } from '../handlers/TapGestureHandler';
import { State } from '../State';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DRAG_TOSS = 0.05;
// Animated.AnimatedInterpolation has been converted to a generic type
// in @types/react-native 0.70. This way we can maintain compatibility
// with all versions of @types/react-native
/**
* @deprecated use Reanimated version of Swipeable instead
*
* This component allows for implementing swipeable rows or similar interaction.
*/
export default class Swipeable extends Component {
static defaultProps = {
friction: 1,
overshootFriction: 1,
useNativeAnimations: true
};
constructor(props) {
super(props);
const dragX = new Animated.Value(0);
this.state = {
dragX,
rowTranslation: new Animated.Value(0),
rowState: 0,
leftWidth: undefined,
rightOffset: undefined,
rowWidth: undefined
};
this.updateAnimatedEvent(props, this.state);
this.onGestureEvent = Animated.event([{
nativeEvent: {
translationX: dragX
}
}], {
useNativeDriver: props.useNativeAnimations
});
}
shouldComponentUpdate(props, state) {
if (this.props.friction !== props.friction || this.props.overshootLeft !== props.overshootLeft || this.props.overshootRight !== props.overshootRight || this.props.overshootFriction !== props.overshootFriction || this.state.leftWidth !== state.leftWidth || this.state.rightOffset !== state.rightOffset || this.state.rowWidth !== state.rowWidth) {
this.updateAnimatedEvent(props, state);
}
return true;
}
updateAnimatedEvent = (props, state) => {
const {
friction,
overshootFriction
} = props;
const {
dragX,
rowTranslation,
leftWidth = 0,
rowWidth = 0
} = state;
const {
rightOffset = rowWidth
} = state;
const rightWidth = Math.max(0, rowWidth - rightOffset);
const {
overshootLeft = leftWidth > 0,
overshootRight = rightWidth > 0
} = props;
const transX = Animated.add(rowTranslation, dragX.interpolate({
inputRange: [0, friction],
outputRange: [0, 1]
})).interpolate({
inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
outputRange: [-rightWidth - (overshootRight ? 1 / overshootFriction : 0), -rightWidth, leftWidth, leftWidth + (overshootLeft ? 1 / overshootFriction : 0)]
});
this.transX = transX;
this.showLeftAction = leftWidth > 0 ? transX.interpolate({
inputRange: [-1, 0, leftWidth],
outputRange: [0, 0, 1]
}) : new Animated.Value(0);
this.leftActionTranslate = this.showLeftAction.interpolate({
inputRange: [0, Number.MIN_VALUE],
outputRange: [-10000, 0],
extrapolate: 'clamp'
});
this.showRightAction = rightWidth > 0 ? transX.interpolate({
inputRange: [-rightWidth, 0, 1],
outputRange: [1, 0, 0]
}) : new Animated.Value(0);
this.rightActionTranslate = this.showRightAction.interpolate({
inputRange: [0, Number.MIN_VALUE],
outputRange: [-10000, 0],
extrapolate: 'clamp'
});
};
onTapHandlerStateChange = ({
nativeEvent
}) => {
if (nativeEvent.oldState === State.ACTIVE) {
this.close();
}
};
onHandlerStateChange = ev => {
if (ev.nativeEvent.oldState === State.ACTIVE) {
this.handleRelease(ev);
}
if (ev.nativeEvent.state === State.ACTIVE) {
const {
velocityX,
translationX: dragX
} = ev.nativeEvent;
const {
rowState
} = this.state;
const {
friction
} = this.props;
const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
const direction = rowState === -1 ? 'right' : rowState === 1 ? 'left' : translationX > 0 ? 'left' : 'right';
if (rowState === 0) {
this.props.onSwipeableOpenStartDrag?.(direction);
} else {
this.props.onSwipeableCloseStartDrag?.(direction);
}
}
};
handleRelease = ev => {
const {
velocityX,
translationX: dragX
} = ev.nativeEvent;
const {
leftWidth = 0,
rowWidth = 0,
rowState
} = this.state;
const {
rightOffset = rowWidth
} = this.state;
const rightWidth = rowWidth - rightOffset;
const {
friction,
leftThreshold = leftWidth / 2,
rightThreshold = rightWidth / 2
} = this.props;
const startOffsetX = this.currentOffset() + dragX / friction;
const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
let toValue = 0;
if (rowState === 0) {
if (translationX > leftThreshold) {
toValue = leftWidth;
} else if (translationX < -rightThreshold) {
toValue = -rightWidth;
}
} else if (rowState === 1) {
// Swiped to left
if (translationX > -leftThreshold) {
toValue = leftWidth;
}
} else {
// Swiped to right
if (translationX < rightThreshold) {
toValue = -rightWidth;
}
}
this.animateRow(startOffsetX, toValue, velocityX / friction);
};
animateRow = (fromValue, toValue, velocityX) => {
const {
dragX,
rowTranslation
} = this.state;
dragX.setValue(0);
rowTranslation.setValue(fromValue);
this.setState({
rowState: Math.sign(toValue)
});
Animated.spring(rowTranslation, {
restSpeedThreshold: 1.7,
restDisplacementThreshold: 0.4,
velocity: velocityX,
bounciness: 0,
toValue,
useNativeDriver: this.props.useNativeAnimations,
...this.props.animationOptions
}).start(({
finished
}) => {
if (finished) {
if (toValue > 0) {
this.props.onSwipeableLeftOpen?.();
this.props.onSwipeableOpen?.('left', this);
} else if (toValue < 0) {
this.props.onSwipeableRightOpen?.();
this.props.onSwipeableOpen?.('right', this);
} else {
const closingDirection = fromValue > 0 ? 'left' : 'right';
this.props.onSwipeableClose?.(closingDirection, this);
}
}
});
if (toValue > 0) {
this.props.onSwipeableLeftWillOpen?.();
this.props.onSwipeableWillOpen?.('left');
} else if (toValue < 0) {
this.props.onSwipeableRightWillOpen?.();
this.props.onSwipeableWillOpen?.('right');
} else {
const closingDirection = fromValue > 0 ? 'left' : 'right';
this.props.onSwipeableWillClose?.(closingDirection);
}
};
onRowLayout = ({
nativeEvent
}) => {
this.setState({
rowWidth: nativeEvent.layout.width
});
};
currentOffset = () => {
const {
leftWidth = 0,
rowWidth = 0,
rowState
} = this.state;
const {
rightOffset = rowWidth
} = this.state;
const rightWidth = rowWidth - rightOffset;
if (rowState === 1) {
return leftWidth;
} else if (rowState === -1) {
return -rightWidth;
}
return 0;
};
close = () => {
this.animateRow(this.currentOffset(), 0);
};
// eslint-disable-next-line @eslint-react/no-unused-class-component-members
openLeft = () => {
const {
leftWidth = 0
} = this.state;
this.animateRow(this.currentOffset(), leftWidth);
};
// eslint-disable-next-line @eslint-react/no-unused-class-component-members
openRight = () => {
const {
rowWidth = 0
} = this.state;
const {
rightOffset = rowWidth
} = this.state;
const rightWidth = rowWidth - rightOffset;
this.animateRow(this.currentOffset(), -rightWidth);
};
// eslint-disable-next-line @eslint-react/no-unused-class-component-members
reset = () => {
const {
dragX,
rowTranslation
} = this.state;
dragX.setValue(0);
rowTranslation.setValue(0);
this.setState({
rowState: 0
});
};
render() {
const {
rowState
} = this.state;
const {
children,
renderLeftActions,
renderRightActions,
dragOffsetFromLeftEdge = 10,
dragOffsetFromRightEdge = 10
} = this.props;
const left = renderLeftActions && /*#__PURE__*/_jsxs(Animated.View, {
style: [styles.leftActions,
// All those and below parameters can have ! since they are all
// asigned in constructor in `updateAnimatedEvent` but TS cannot spot
// it for some reason
{
transform: [{
translateX: this.leftActionTranslate
}]
}],
children: [renderLeftActions(this.showLeftAction, this.transX, this), /*#__PURE__*/_jsx(View, {
onLayout: ({
nativeEvent
}) => this.setState({
leftWidth: nativeEvent.layout.x
})
})]
});
const right = renderRightActions && /*#__PURE__*/_jsxs(Animated.View, {
style: [styles.rightActions, {
transform: [{
translateX: this.rightActionTranslate
}]
}],
children: [renderRightActions(this.showRightAction, this.transX, this), /*#__PURE__*/_jsx(View, {
onLayout: ({
nativeEvent
}) => this.setState({
rightOffset: nativeEvent.layout.x
})
})]
});
return /*#__PURE__*/_jsx(PanGestureHandler, {
activeOffsetX: [-dragOffsetFromRightEdge, dragOffsetFromLeftEdge],
touchAction: "pan-y",
...this.props,
onGestureEvent: this.onGestureEvent,
onHandlerStateChange: this.onHandlerStateChange,
children: /*#__PURE__*/_jsxs(Animated.View, {
onLayout: this.onRowLayout,
style: [styles.container, this.props.containerStyle],
children: [left, right, /*#__PURE__*/_jsx(TapGestureHandler, {
enabled: rowState !== 0,
touchAction: "pan-y",
onHandlerStateChange: this.onTapHandlerStateChange,
children: /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: rowState === 0 ? 'auto' : 'box-only',
style: [{
transform: [{
translateX: this.transX
}]
}, this.props.childrenContainerStyle],
children: children
})
})]
})
});
}
}
const styles = StyleSheet.create({
container: {
overflow: 'hidden'
},
leftActions: {
...StyleSheet.absoluteFillObject,
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'
},
rightActions: {
...StyleSheet.absoluteFillObject,
flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse'
}
});
//# sourceMappingURL=Swipeable.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,55 @@
"use strict";
import React, { forwardRef, useEffect, useRef } from 'react';
import { Platform, Text as RNText } from 'react-native';
import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
import { GestureDetector } from '../handlers/gestures/GestureDetector';
import { jsx as _jsx } from "react/jsx-runtime";
export const Text = /*#__PURE__*/forwardRef((props, ref) => {
const {
onPress,
onLongPress,
...rest
} = props;
const textRef = useRef(null);
const native = Gesture.Native().runOnJS(true);
const refHandler = node => {
textRef.current = node;
if (ref === null) {
return;
}
if (typeof ref === 'function') {
ref(node);
} else {
ref.current = node;
}
};
// This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
// `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
// We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
refHandler.rngh = true;
useEffect(() => {
if (Platform.OS !== 'web') {
return;
}
const textElement = ref ? ref.current : textRef.current;
// At this point we are sure that textElement is div in HTML tree
textElement?.setAttribute('rnghtext', 'true');
}, []);
return onPress || onLongPress ? /*#__PURE__*/_jsx(GestureDetector, {
gesture: native,
children: /*#__PURE__*/_jsx(RNText, {
onPress: onPress,
onLongPress: onLongPress,
ref: refHandler,
...rest
})
}) : /*#__PURE__*/_jsx(RNText, {
ref: ref,
...rest
});
});
// eslint-disable-next-line @typescript-eslint/no-redeclare
//# sourceMappingURL=Text.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","forwardRef","useEffect","useRef","Platform","Text","RNText","GestureObjects","Gesture","GestureDetector","jsx","_jsx","props","ref","onPress","onLongPress","rest","textRef","native","Native","runOnJS","refHandler","node","current","rngh","OS","textElement","setAttribute","gesture","children"],"sourceRoot":"../../../src","sources":["components/Text.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAEVC,UAAU,EAEVC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SACEC,QAAQ,EACRC,IAAI,IAAIC,MAAM,QAET,cAAc;AAErB,SAASC,cAAc,IAAIC,OAAO,QAAQ,qCAAqC;AAC/E,SAASC,eAAe,QAAQ,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEvE,OAAO,MAAMN,IAAI,gBAAGJ,UAAU,CAC5B,CACEW,KAAkB,EAClBC,GAAoD,KACjD;EACH,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAE/C,MAAMK,OAAO,GAAGd,MAAM,CAAgB,IAAI,CAAC;EAC3C,MAAMe,MAAM,GAAGV,OAAO,CAACW,MAAM,CAAC,CAAC,CAACC,OAAO,CAAC,IAAI,CAAC;EAE7C,MAAMC,UAAU,GAAIC,IAAS,IAAK;IAChCL,OAAO,CAACM,OAAO,GAAGD,IAAI;IAEtB,IAAIT,GAAG,KAAK,IAAI,EAAE;MAChB;IACF;IAEA,IAAI,OAAOA,GAAG,KAAK,UAAU,EAAE;MAC7BA,GAAG,CAACS,IAAI,CAAC;IACX,CAAC,MAAM;MACLT,GAAG,CAACU,OAAO,GAAGD,IAAI;IACpB;EACF,CAAC;;EAED;EACA;EACA;EACAD,UAAU,CAACG,IAAI,GAAG,IAAI;EAEtBtB,SAAS,CAAC,MAAM;IACd,IAAIE,QAAQ,CAACqB,EAAE,KAAK,KAAK,EAAE;MACzB;IACF;IAEA,MAAMC,WAAW,GAAGb,GAAG,GAClBA,GAAG,CAAkDU,OAAO,GAC7DN,OAAO,CAACM,OAAO;;IAEnB;IACCG,WAAW,EAAgCC,YAAY,CACtD,UAAU,EACV,MACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOb,OAAO,IAAIC,WAAW,gBAC3BJ,IAAA,CAACF,eAAe;IAACmB,OAAO,EAAEV,MAAO;IAAAW,QAAA,eAC/BlB,IAAA,CAACL,MAAM;MACLQ,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBF,GAAG,EAAEQ,UAAW;MAAA,GACZL;IAAI,CACT;EAAC,CACa,CAAC,gBAElBL,IAAA,CAACL,MAAM;IAACO,GAAG,EAAEA,GAAI;IAAA,GAAKG;EAAI,CAAG,CAC9B;AACH,CACF,CAAC;AACD","ignoreList":[]}
@@ -0,0 +1,33 @@
"use strict";
import * as React from 'react';
import { StyleSheet } from 'react-native';
import hoistNonReactStatics from 'hoist-non-react-statics';
import GestureHandlerRootView from './GestureHandlerRootView';
/**
* @deprecated `gestureHandlerRootHOC` is deprecated and will be removed in the future version of Gesture Handler.
* Use `GestureHandlerRootView` directly instead.
*/
import { jsx as _jsx } from "react/jsx-runtime";
export default function gestureHandlerRootHOC(Component, containerStyles) {
function Wrapper(props) {
return /*#__PURE__*/_jsx(GestureHandlerRootView, {
style: [styles.container, containerStyles],
children: /*#__PURE__*/_jsx(Component, {
...props
})
});
}
Wrapper.displayName = `gestureHandlerRootHOC(${Component.displayName || Component.name})`;
// @ts-ignore - hoistNonReactStatics uses old version of @types/react
hoistNonReactStatics(Wrapper, Component);
return Wrapper;
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
//# sourceMappingURL=gestureHandlerRootHOC.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","hoistNonReactStatics","GestureHandlerRootView","jsx","_jsx","gestureHandlerRootHOC","Component","containerStyles","Wrapper","props","style","styles","container","children","displayName","name","create","flex"],"sourceRoot":"../../../src","sources":["components/gestureHandlerRootHOC.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAA8B,cAAc;AAC/D,OAAOC,oBAAoB,MAAM,yBAAyB;AAC1D,OAAOC,sBAAsB,MAAM,0BAA0B;;AAE7D;AACA;AACA;AACA;AAHA,SAAAC,GAAA,IAAAC,IAAA;AAIA,eAAe,SAASC,qBAAqBA,CAC3CC,SAAiC,EACjCC,eAAsC,EACd;EACxB,SAASC,OAAOA,CAACC,KAAQ,EAAE;IACzB,oBACEL,IAAA,CAACF,sBAAsB;MAACQ,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEL,eAAe,CAAE;MAAAM,QAAA,eACjET,IAAA,CAACE,SAAS;QAAA,GAAKG;MAAK,CAAG;IAAC,CACF,CAAC;EAE7B;EAEAD,OAAO,CAACM,WAAW,GAAG,yBACpBR,SAAS,CAACQ,WAAW,IAAIR,SAAS,CAACS,IAAI,GACtC;;EAEH;EACAd,oBAAoB,CAACO,OAAO,EAAEF,SAAS,CAAC;EAExC,OAAOE,OAAO;AAChB;AAEA,MAAMG,MAAM,GAAGX,UAAU,CAACgB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IAAEK,IAAI,EAAE;EAAE;AACvB,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,2 @@
"use strict";
//# sourceMappingURL=ExtraButtonProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/touchables/ExtraButtonProps.ts"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,239 @@
"use strict";
import * as React from 'react';
import { Component } from 'react';
import { Animated, Platform } from 'react-native';
import { State } from '../../State';
import { BaseButton } from '../GestureButtons';
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Each touchable is a states' machine which preforms transitions.
* On very beginning (and on the very end or recognition) touchable is
* UNDETERMINED. Then it moves to BEGAN. If touchable recognizes that finger
* travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition
* finishes in UNDETERMINED state.
*/
export const TOUCHABLE_STATE = {
UNDETERMINED: 0,
BEGAN: 1,
MOVED_OUTSIDE: 2
};
// TODO: maybe can be better
// TODO: all clearTimeout have ! added, maybe they shouldn't ?
/**
* GenericTouchable is not intented to be used as it is.
* Should be treated as a source for the rest of touchables
*/
export default class GenericTouchable extends Component {
static defaultProps = {
delayLongPress: 600,
extraButtonProps: {
rippleColor: 'transparent',
exclusive: true
}
};
// Timeout handlers
// This flag is required since recognition of longPress implies not-invoking onPress
longPressDetected = false;
pointerInside = true;
// State of touchable
STATE = TOUCHABLE_STATE.UNDETERMINED;
// handlePressIn in called on first touch on traveling inside component.
// Handles state transition with delay.
handlePressIn() {
if (this.props.delayPressIn) {
this.pressInTimeout = setTimeout(() => {
this.moveToState(TOUCHABLE_STATE.BEGAN);
this.pressInTimeout = null;
}, this.props.delayPressIn);
} else {
this.moveToState(TOUCHABLE_STATE.BEGAN);
}
if (this.props.onLongPress) {
const time = (this.props.delayPressIn || 0) + (this.props.delayLongPress || 0);
this.longPressTimeout = setTimeout(this.onLongPressDetected, time);
}
}
// handleMoveOutside in called on traveling outside component.
// Handles state transition with delay.
handleMoveOutside() {
if (this.props.delayPressOut) {
this.pressOutTimeout = this.pressOutTimeout || setTimeout(() => {
this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
this.pressOutTimeout = null;
}, this.props.delayPressOut);
} else {
this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
}
}
// handleGoToUndetermined transits to UNDETERMINED state with proper delay
handleGoToUndetermined() {
clearTimeout(this.pressOutTimeout); // TODO: maybe it can be undefined
if (this.props.delayPressOut) {
this.pressOutTimeout = setTimeout(() => {
if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
this.moveToState(TOUCHABLE_STATE.BEGAN);
}
this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
this.pressOutTimeout = null;
}, this.props.delayPressOut);
} else {
if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
this.moveToState(TOUCHABLE_STATE.BEGAN);
}
this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
}
}
componentDidMount() {
this.reset();
}
// Reset timeout to prevent memory leaks.
reset() {
this.longPressDetected = false;
this.pointerInside = true;
clearTimeout(this.pressInTimeout);
clearTimeout(this.pressOutTimeout);
clearTimeout(this.longPressTimeout);
this.pressOutTimeout = null;
this.longPressTimeout = null;
this.pressInTimeout = null;
}
// All states' transitions are defined here.
moveToState(newState) {
if (newState === this.STATE) {
// Ignore dummy transitions
return;
}
if (newState === TOUCHABLE_STATE.BEGAN) {
// First touch and moving inside
this.props.onPressIn?.();
} else if (newState === TOUCHABLE_STATE.MOVED_OUTSIDE) {
// Moving outside
this.props.onPressOut?.();
} else if (newState === TOUCHABLE_STATE.UNDETERMINED) {
// Need to reset each time on transition to UNDETERMINED
this.reset();
if (this.STATE === TOUCHABLE_STATE.BEGAN) {
// ... and if it happens inside button.
this.props.onPressOut?.();
}
}
// Finally call lister (used by subclasses)
this.props.onStateChange?.(this.STATE, newState);
// ... and make transition.
this.STATE = newState;
}
onGestureEvent = ({
nativeEvent: {
pointerInside
}
}) => {
if (this.pointerInside !== pointerInside) {
if (pointerInside) {
this.onMoveIn();
} else {
this.onMoveOut();
}
}
this.pointerInside = pointerInside;
};
onHandlerStateChange = ({
nativeEvent
}) => {
const {
state
} = nativeEvent;
if (state === State.CANCELLED || state === State.FAILED) {
// Need to handle case with external cancellation (e.g. by ScrollView)
this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
} else if (
// This platform check is an implication of slightly different behavior of handlers on different platform.
// And Android "Active" state is achieving on first move of a finger, not on press in.
// On iOS event on "Began" is not delivered.
state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) && this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
// Moving inside requires
this.handlePressIn();
} else if (state === State.END) {
const shouldCallOnPress = !this.longPressDetected && this.STATE !== TOUCHABLE_STATE.MOVED_OUTSIDE && this.pressOutTimeout === null;
this.handleGoToUndetermined();
if (shouldCallOnPress) {
// Calls only inside component whether no long press was called previously
this.props.onPress?.();
}
}
};
onLongPressDetected = () => {
this.longPressDetected = true;
// Checked for in the caller of `onLongPressDetected`, but better to check twice
this.props.onLongPress?.();
};
componentWillUnmount() {
// To prevent memory leaks
this.reset();
}
onMoveIn() {
if (this.STATE === TOUCHABLE_STATE.MOVED_OUTSIDE) {
// This call is not throttled with delays (like in RN's implementation).
this.moveToState(TOUCHABLE_STATE.BEGAN);
}
}
onMoveOut() {
// Long press should no longer be detected
clearTimeout(this.longPressTimeout);
this.longPressTimeout = null;
if (this.STATE === TOUCHABLE_STATE.BEGAN) {
this.handleMoveOutside();
}
}
render() {
const hitSlop = (typeof this.props.hitSlop === 'number' ? {
top: this.props.hitSlop,
left: this.props.hitSlop,
bottom: this.props.hitSlop,
right: this.props.hitSlop
} : this.props.hitSlop) ?? undefined;
const coreProps = {
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
accessibilityHint: this.props.accessibilityHint,
accessibilityRole: this.props.accessibilityRole,
// TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
// would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
accessibilityState: this.props.accessibilityState,
accessibilityActions: this.props.accessibilityActions,
onAccessibilityAction: this.props.onAccessibilityAction,
nativeID: this.props.nativeID,
onLayout: this.props.onLayout
};
return /*#__PURE__*/_jsx(BaseButton, {
style: this.props.containerStyle,
onHandlerStateChange:
// TODO: not sure if it can be undefined instead of null
this.props.disabled ? undefined : this.onHandlerStateChange,
onGestureEvent: this.onGestureEvent,
hitSlop: hitSlop,
userSelect: this.props.userSelect,
shouldActivateOnStart: this.props.shouldActivateOnStart,
disallowInterruption: this.props.disallowInterruption,
testID: this.props.testID,
touchSoundDisabled: this.props.touchSoundDisabled ?? false,
enabled: !this.props.disabled,
...this.props.extraButtonProps,
children: /*#__PURE__*/_jsx(Animated.View, {
...coreProps,
style: this.props.style,
children: this.props.children
})
});
}
}
//# sourceMappingURL=GenericTouchable.js.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
"use strict";
export {};
//# sourceMappingURL=GenericTouchableProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/touchables/GenericTouchableProps.ts"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,87 @@
"use strict";
import * as React from 'react';
import { Component } from 'react';
import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
import { StyleSheet, View } from 'react-native';
/**
* @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
*/
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
*
* TouchableHighlight follows RN's implementation
*/
export default class TouchableHighlight extends Component {
static defaultProps = {
...GenericTouchable.defaultProps,
activeOpacity: 0.85,
delayPressOut: 100,
underlayColor: 'black'
};
constructor(props) {
super(props);
this.state = {
extraChildStyle: null,
extraUnderlayStyle: null
};
}
// Copied from RN
showUnderlay = () => {
if (!this.hasPressHandler()) {
return;
}
this.setState({
extraChildStyle: {
opacity: this.props.activeOpacity
},
extraUnderlayStyle: {
backgroundColor: this.props.underlayColor
}
});
this.props.onShowUnderlay?.();
};
hasPressHandler = () => this.props.onPress || this.props.onPressIn || this.props.onPressOut || this.props.onLongPress;
hideUnderlay = () => {
this.setState({
extraChildStyle: null,
extraUnderlayStyle: null
});
this.props.onHideUnderlay?.();
};
renderChildren() {
if (!this.props.children) {
return /*#__PURE__*/_jsx(View, {});
}
const child = React.Children.only(this.props.children); // TODO: not sure if OK but fixes error
return /*#__PURE__*/React.cloneElement(child, {
style: StyleSheet.compose(child.props.style, this.state.extraChildStyle)
});
}
onStateChange = (_from, to) => {
if (to === TOUCHABLE_STATE.BEGAN) {
this.showUnderlay();
} else if (to === TOUCHABLE_STATE.UNDETERMINED || to === TOUCHABLE_STATE.MOVED_OUTSIDE) {
this.hideUnderlay();
}
};
render() {
const {
style = {},
...rest
} = this.props;
const {
extraUnderlayStyle
} = this.state;
return /*#__PURE__*/_jsx(GenericTouchable, {
...rest,
style: [style, extraUnderlayStyle],
onStateChange: this.onStateChange,
children: this.renderChildren()
});
}
}
//# sourceMappingURL=TouchableHighlight.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","Component","GenericTouchable","TOUCHABLE_STATE","StyleSheet","View","jsx","_jsx","TouchableHighlight","defaultProps","activeOpacity","delayPressOut","underlayColor","constructor","props","state","extraChildStyle","extraUnderlayStyle","showUnderlay","hasPressHandler","setState","opacity","backgroundColor","onShowUnderlay","onPress","onPressIn","onPressOut","onLongPress","hideUnderlay","onHideUnderlay","renderChildren","children","child","Children","only","cloneElement","style","compose","onStateChange","_from","to","BEGAN","UNDETERMINED","MOVED_OUTSIDE","render","rest"],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableHighlight.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,77 @@
"use strict";
import { Platform } from 'react-native';
import * as React from 'react';
import { Component } from 'react';
import GenericTouchable from './GenericTouchable';
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
*
* TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
* There's small difference with handling long press ripple since RN's implementation calls
* ripple animation via bridge. This solution leaves all animations' handling for native components so
* it follows native behaviours.
*/
export default class TouchableNativeFeedback extends Component {
static defaultProps = {
...GenericTouchable.defaultProps,
useForeground: true,
extraButtonProps: {
// Disable hiding ripple on Android
rippleColor: null
}
};
// Could be taken as RNTouchableNativeFeedback.SelectableBackground etc. but the API may change
static SelectableBackground = rippleRadius => ({
type: 'ThemeAttrAndroid',
// I added `attribute` prop to clone the implementation of RN and be able to use only 2 types
attribute: 'selectableItemBackground',
rippleRadius
});
static SelectableBackgroundBorderless = rippleRadius => ({
type: 'ThemeAttrAndroid',
attribute: 'selectableItemBackgroundBorderless',
rippleRadius
});
static Ripple = (color, borderless, rippleRadius) => ({
type: 'RippleAndroid',
color,
borderless,
rippleRadius
});
static canUseNativeForeground = () => Platform.OS === 'android' && Platform.Version >= 23;
getExtraButtonProps() {
const extraProps = {};
const {
background
} = this.props;
if (background) {
// I changed type values to match those used in RN
// TODO(TS): check if it works the same as previous implementation - looks like it works the same as RN component, so it should be ok
if (background.type === 'RippleAndroid') {
extraProps['borderless'] = background.borderless;
extraProps['rippleColor'] = background.color;
} else if (background.type === 'ThemeAttrAndroid') {
extraProps['borderless'] = background.attribute === 'selectableItemBackgroundBorderless';
}
// I moved it from above since it should be available in all options
extraProps['rippleRadius'] = background.rippleRadius;
}
extraProps['foreground'] = this.props.useForeground;
return extraProps;
}
render() {
const {
style = {},
...rest
} = this.props;
return /*#__PURE__*/_jsx(GenericTouchable, {
...rest,
style: style,
extraButtonProps: this.getExtraButtonProps()
});
}
}
//# sourceMappingURL=TouchableNativeFeedback.android.js.map
@@ -0,0 +1 @@
{"version":3,"names":["Platform","React","Component","GenericTouchable","jsx","_jsx","TouchableNativeFeedback","defaultProps","useForeground","extraButtonProps","rippleColor","SelectableBackground","rippleRadius","type","attribute","SelectableBackgroundBorderless","Ripple","color","borderless","canUseNativeForeground","OS","Version","getExtraButtonProps","extraProps","background","props","render","style","rest"],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableNativeFeedback.android.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAoB,cAAc;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,OAAO;AACjC,OAAOC,gBAAgB,MAAM,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,MAAMC,uBAAuB,SAASJ,SAAS,CAA+B;EAC3F,OAAOK,YAAY,GAAG;IACpB,GAAGJ,gBAAgB,CAACI,YAAY;IAChCC,aAAa,EAAE,IAAI;IACnBC,gBAAgB,EAAE;MAChB;MACAC,WAAW,EAAE;IACf;EACF,CAAC;;EAED;EACA,OAAOC,oBAAoB,GAAIC,YAAqB,KAAM;IACxDC,IAAI,EAAE,kBAAkB;IACxB;IACAC,SAAS,EAAE,0BAA0B;IACrCF;EACF,CAAC,CAAC;EACF,OAAOG,8BAA8B,GAAIH,YAAqB,KAAM;IAClEC,IAAI,EAAE,kBAAkB;IACxBC,SAAS,EAAE,oCAAoC;IAC/CF;EACF,CAAC,CAAC;EACF,OAAOI,MAAM,GAAGA,CACdC,KAAiB,EACjBC,UAAmB,EACnBN,YAAqB,MACjB;IACJC,IAAI,EAAE,eAAe;IACrBI,KAAK;IACLC,UAAU;IACVN;EACF,CAAC,CAAC;EAEF,OAAOO,sBAAsB,GAAGA,CAAA,KAC9BnB,QAAQ,CAACoB,EAAE,KAAK,SAAS,IAAIpB,QAAQ,CAACqB,OAAO,IAAI,EAAE;EAErDC,mBAAmBA,CAAA,EAAG;IACpB,MAAMC,UAA6C,GAAG,CAAC,CAAC;IACxD,MAAM;MAAEC;IAAW,CAAC,GAAG,IAAI,CAACC,KAAK;IACjC,IAAID,UAAU,EAAE;MACd;MACA;MACA,IAAIA,UAAU,CAACX,IAAI,KAAK,eAAe,EAAE;QACvCU,UAAU,CAAC,YAAY,CAAC,GAAGC,UAAU,CAACN,UAAU;QAChDK,UAAU,CAAC,aAAa,CAAC,GAAGC,UAAU,CAACP,KAAK;MAC9C,CAAC,MAAM,IAAIO,UAAU,CAACX,IAAI,KAAK,kBAAkB,EAAE;QACjDU,UAAU,CAAC,YAAY,CAAC,GACtBC,UAAU,CAACV,SAAS,KAAK,oCAAoC;MACjE;MACA;MACAS,UAAU,CAAC,cAAc,CAAC,GAAGC,UAAU,CAACZ,YAAY;IACtD;IACAW,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAACE,KAAK,CAACjB,aAAa;IACnD,OAAOe,UAAU;EACnB;EACAG,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK,GAAG,CAAC,CAAC;MAAE,GAAGC;IAAK,CAAC,GAAG,IAAI,CAACH,KAAK;IAC1C,oBACEpB,IAAA,CAACF,gBAAgB;MAAA,GACXyB,IAAI;MACRD,KAAK,EAAEA,KAAM;MACblB,gBAAgB,EAAE,IAAI,CAACa,mBAAmB,CAAC;IAAE,CAC9C,CAAC;EAEN;AACF","ignoreList":[]}
@@ -0,0 +1,10 @@
"use strict";
import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
/**
* @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
*/
const TouchableNativeFeedback = RNTouchableNativeFeedback;
export default TouchableNativeFeedback;
//# sourceMappingURL=TouchableNativeFeedback.js.map
@@ -0,0 +1 @@
{"version":3,"names":["TouchableNativeFeedback","RNTouchableNativeFeedback"],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableNativeFeedback.tsx"],"mappings":";;AAAA,SAASA,uBAAuB,IAAIC,yBAAyB,QAAQ,cAAc;;AAEnF;AACA;AACA;AACA,MAAMD,uBAAuB,GAAGC,yBAAyB;AAEzD,eAAeD,uBAAuB","ignoreList":[]}
@@ -0,0 +1,4 @@
"use strict";
export {};
//# sourceMappingURL=TouchableNativeFeedbackProps.js.map
@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableNativeFeedbackProps.tsx"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,59 @@
"use strict";
import { Animated, Easing, StyleSheet, View } from 'react-native';
import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
import * as React from 'react';
import { Component } from 'react';
/**
* @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
*/
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
*
* TouchableOpacity bases on timing animation which has been used in RN's core
*/
export default class TouchableOpacity extends Component {
static defaultProps = {
...GenericTouchable.defaultProps,
activeOpacity: 0.2
};
// Opacity is 1 one by default but could be overwritten
getChildStyleOpacityWithDefault = () => {
const childStyle = StyleSheet.flatten(this.props.style) || {};
return childStyle.opacity == null ? 1 : childStyle.opacity.valueOf();
};
opacity = new Animated.Value(this.getChildStyleOpacityWithDefault());
setOpacityTo = (value, duration) => {
Animated.timing(this.opacity, {
toValue: value,
duration: duration,
easing: Easing.inOut(Easing.quad),
useNativeDriver: this.props.useNativeAnimations ?? true
}).start();
};
onStateChange = (_from, to) => {
if (to === TOUCHABLE_STATE.BEGAN) {
this.setOpacityTo(this.props.activeOpacity, 0);
} else if (to === TOUCHABLE_STATE.UNDETERMINED || to === TOUCHABLE_STATE.MOVED_OUTSIDE) {
this.setOpacityTo(this.getChildStyleOpacityWithDefault(), 150);
}
};
render() {
const {
style = {},
...rest
} = this.props;
return /*#__PURE__*/_jsx(GenericTouchable, {
...rest,
style: [style, {
opacity: this.opacity // TODO: fix this
}],
onStateChange: this.onStateChange,
children: this.props.children ? this.props.children : /*#__PURE__*/_jsx(View, {})
});
}
}
//# sourceMappingURL=TouchableOpacity.js.map
@@ -0,0 +1 @@
{"version":3,"names":["Animated","Easing","StyleSheet","View","GenericTouchable","TOUCHABLE_STATE","React","Component","jsx","_jsx","TouchableOpacity","defaultProps","activeOpacity","getChildStyleOpacityWithDefault","childStyle","flatten","props","style","opacity","valueOf","Value","setOpacityTo","value","duration","timing","toValue","easing","inOut","quad","useNativeDriver","useNativeAnimations","start","onStateChange","_from","to","BEGAN","UNDETERMINED","MOVED_OUTSIDE","render","rest","children"],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableOpacity.tsx"],"mappings":";;AAAA,SACEA,QAAQ,EACRC,MAAM,EACNC,UAAU,EACVC,IAAI,QAEC,cAAc;AACrB,OAAOC,gBAAgB,IAAIC,eAAe,QAAQ,oBAAoB;AAEtE,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,OAAO;;AAEjC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAQA;AACA;AACA;AACA;AACA;AACA,eAAe,MAAMC,gBAAgB,SAASH,SAAS,CAAwB;EAC7E,OAAOI,YAAY,GAAG;IACpB,GAAGP,gBAAgB,CAACO,YAAY;IAChCC,aAAa,EAAE;EACjB,CAAC;;EAED;EACAC,+BAA+B,GAAGA,CAAA,KAAM;IACtC,MAAMC,UAAU,GAAGZ,UAAU,CAACa,OAAO,CAAC,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC7D,OAAOH,UAAU,CAACI,OAAO,IAAI,IAAI,GAC7B,CAAC,GACAJ,UAAU,CAACI,OAAO,CAACC,OAAO,CAAC,CAAY;EAC9C,CAAC;EAEDD,OAAO,GAAG,IAAIlB,QAAQ,CAACoB,KAAK,CAAC,IAAI,CAACP,+BAA+B,CAAC,CAAC,CAAC;EAEpEQ,YAAY,GAAGA,CAACC,KAAa,EAAEC,QAAgB,KAAK;IAClDvB,QAAQ,CAACwB,MAAM,CAAC,IAAI,CAACN,OAAO,EAAE;MAC5BO,OAAO,EAAEH,KAAK;MACdC,QAAQ,EAAEA,QAAQ;MAClBG,MAAM,EAAEzB,MAAM,CAAC0B,KAAK,CAAC1B,MAAM,CAAC2B,IAAI,CAAC;MACjCC,eAAe,EAAE,IAAI,CAACb,KAAK,CAACc,mBAAmB,IAAI;IACrD,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC;EAEDC,aAAa,GAAGA,CAACC,KAAa,EAAEC,EAAU,KAAK;IAC7C,IAAIA,EAAE,KAAK7B,eAAe,CAAC8B,KAAK,EAAE;MAChC,IAAI,CAACd,YAAY,CAAC,IAAI,CAACL,KAAK,CAACJ,aAAa,EAAG,CAAC,CAAC;IACjD,CAAC,MAAM,IACLsB,EAAE,KAAK7B,eAAe,CAAC+B,YAAY,IACnCF,EAAE,KAAK7B,eAAe,CAACgC,aAAa,EACpC;MACA,IAAI,CAAChB,YAAY,CAAC,IAAI,CAACR,+BAA+B,CAAC,CAAC,EAAE,GAAG,CAAC;IAChE;EACF,CAAC;EAEDyB,MAAMA,CAAA,EAAG;IACP,MAAM;MAAErB,KAAK,GAAG,CAAC,CAAC;MAAE,GAAGsB;IAAK,CAAC,GAAG,IAAI,CAACvB,KAAK;IAC1C,oBACEP,IAAA,CAACL,gBAAgB;MAAA,GACXmC,IAAI;MACRtB,KAAK,EAAE,CACLA,KAAK,EACL;QACEC,OAAO,EAAE,IAAI,CAACA,OAA4B,CAAE;MAC9C,CAAC,CACD;MACFc,aAAa,EAAE,IAAI,CAACA,aAAc;MAAAQ,QAAA,EACjC,IAAI,CAACxB,KAAK,CAACwB,QAAQ,GAAG,IAAI,CAACxB,KAAK,CAACwB,QAAQ,gBAAG/B,IAAA,CAACN,IAAI,IAAE;IAAC,CACrC,CAAC;EAEvB;AACF","ignoreList":[]}
@@ -0,0 +1,27 @@
"use strict";
import * as React from 'react';
import GenericTouchable from './GenericTouchable';
/**
* @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
*/
import { jsx as _jsx } from "react/jsx-runtime";
/**
* @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
*/
const TouchableWithoutFeedback = /*#__PURE__*/React.forwardRef(({
delayLongPress = 600,
extraButtonProps = {
rippleColor: 'transparent',
exclusive: true
},
...rest
}, ref) => /*#__PURE__*/_jsx(GenericTouchable, {
ref: ref,
delayLongPress: delayLongPress,
extraButtonProps: extraButtonProps,
...rest
}));
export default TouchableWithoutFeedback;
//# sourceMappingURL=TouchableWithoutFeedback.js.map
@@ -0,0 +1 @@
{"version":3,"names":["React","GenericTouchable","jsx","_jsx","TouchableWithoutFeedback","forwardRef","delayLongPress","extraButtonProps","rippleColor","exclusive","rest","ref"],"sourceRoot":"../../../../src","sources":["components/touchables/TouchableWithoutFeedback.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAOC,gBAAgB,MAAM,oBAAoB;;AAGjD;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA;AACA;AACA;AACA,MAAMC,wBAAwB,gBAAGJ,KAAK,CAACK,UAAU,CAI/C,CACE;EACEC,cAAc,GAAG,GAAG;EACpBC,gBAAgB,GAAG;IACjBC,WAAW,EAAE,aAAa;IAC1BC,SAAS,EAAE;EACb,CAAC;EACD,GAAGC;AACL,CAAC,EAEDC,GAAG,kBAEHR,IAAA,CAACF,gBAAgB;EACfU,GAAG,EAAEA,GAAI;EACTL,cAAc,EAAEA,cAAe;EAC/BC,gBAAgB,EAAEA,gBAAiB;EAAA,GAC/BG;AAAI,CACT,CAEL,CAAC;AAED,eAAeN,wBAAwB","ignoreList":[]}
@@ -0,0 +1,7 @@
"use strict";
export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
export { default as TouchableOpacity } from './TouchableOpacity';
export { default as TouchableHighlight } from './TouchableHighlight';
//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
{"version":3,"names":["default","TouchableNativeFeedback","TouchableWithoutFeedback","TouchableOpacity","TouchableHighlight"],"sourceRoot":"../../../../src","sources":["components/touchables/index.ts"],"mappings":";;AAGA,SAASA,OAAO,IAAIC,uBAAuB,QAAQ,2BAA2B;AAC9E,SAASD,OAAO,IAAIE,wBAAwB,QAAQ,4BAA4B;AAChF,SAASF,OAAO,IAAIG,gBAAgB,QAAQ,oBAAoB;AAChE,SAASH,OAAO,IAAII,kBAAkB,QAAQ,sBAAsB","ignoreList":[]}
@@ -0,0 +1,13 @@
"use strict";
export function applyRelationProp(gesture, relationPropName, relationProp) {
if (!relationProp) {
return;
}
if (Array.isArray(relationProp)) {
gesture[relationPropName](...relationProp);
} else {
gesture[relationPropName](relationProp);
}
}
//# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
{"version":3,"names":["applyRelationProp","gesture","relationPropName","relationProp","Array","isArray"],"sourceRoot":"../../../src","sources":["components/utils.ts"],"mappings":";;AAWA,OAAO,SAASA,iBAAiBA,CAC/BC,OAAyB,EACzBC,gBAAkC,EAClCC,YAA8B,EAC9B;EACA,IAAI,CAACA,YAAY,EAAE;IACjB;EACF;EAEA,IAAIC,KAAK,CAACC,OAAO,CAACF,YAAY,CAAC,EAAE;IAC/BF,OAAO,CAACC,gBAAgB,CAAC,CAAC,GAAGC,YAAY,CAAC;EAC5C,CAAC,MAAM;IACLF,OAAO,CAACC,gBAAgB,CAAC,CAACC,YAAY,CAAC;EACzC;AACF","ignoreList":[]}
@@ -0,0 +1,5 @@
"use strict";
import { findNodeHandle } from 'react-native';
export default findNodeHandle;
//# sourceMappingURL=findNodeHandle.js.map
@@ -0,0 +1 @@
{"version":3,"names":["findNodeHandle"],"sourceRoot":"../../src","sources":["findNodeHandle.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,cAAc;AAE7C,eAAeA,cAAc","ignoreList":[]}
@@ -0,0 +1,35 @@
"use strict";
import { FlatList } from 'react-native';
import { isRNSVGElement } from './web/utils';
export default function findNodeHandle(viewRef) {
// TODO: Remove this once we remove old API.
if (viewRef instanceof FlatList) {
// @ts-ignore This is the only way to get the scroll ref from FlatList.
return viewRef._listRef._scrollRef.firstChild;
}
// Old API assumes that child handler is HTMLElement.
// However, if we nest handlers, we will get ref to another handler.
// In that case, we want to recursively call findNodeHandle with new handler viewTag (which can also be ref to another handler).
if (viewRef?.viewTag !== undefined) {
return findNodeHandle(viewRef.viewTag);
}
if (viewRef instanceof Element) {
if (viewRef.style.display === 'contents') {
return findNodeHandle(viewRef.firstChild);
}
return viewRef;
}
if (isRNSVGElement(viewRef)) {
return viewRef.elementRef.current;
}
// In new API, we receive ref object which `current` field points to wrapper `div` with `display: contents;`.
// We want to return the first descendant (in DFS order) that doesn't have this property.
let element = viewRef?.current;
while (element && element.style.display === 'contents') {
element = element.firstChild;
}
return element;
}
//# sourceMappingURL=findNodeHandle.web.js.map
@@ -0,0 +1 @@
{"version":3,"names":["FlatList","isRNSVGElement","findNodeHandle","viewRef","_listRef","_scrollRef","firstChild","viewTag","undefined","Element","style","display","elementRef","current","element"],"sourceRoot":"../../src","sources":["findNodeHandle.web.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,SAASC,cAAc,QAAQ,aAAa;AAE5C,eAAe,SAASC,cAAcA,CACpCC,OAA8D,EAC3B;EACnC;EACA,IAAIA,OAAO,YAAYH,QAAQ,EAAE;IAC/B;IACA,OAAOG,OAAO,CAACC,QAAQ,CAACC,UAAU,CAACC,UAAU;EAC/C;EACA;EACA;EACA;EACA,IAAKH,OAAO,EAAwBI,OAAO,KAAKC,SAAS,EAAE;IACzD,OAAON,cAAc,CAAEC,OAAO,CAAuBI,OAAO,CAAC;EAC/D;EAEA,IAAIJ,OAAO,YAAYM,OAAO,EAAE;IAC9B,IAAIN,OAAO,CAACO,KAAK,CAACC,OAAO,KAAK,UAAU,EAAE;MACxC,OAAOT,cAAc,CAACC,OAAO,CAACG,UAAyB,CAAC;IAC1D;IAEA,OAAOH,OAAO;EAChB;EAEA,IAAIF,cAAc,CAACE,OAAO,CAAC,EAAE;IAC3B,OAAQA,OAAO,CAAYS,UAAU,CAACC,OAAO;EAC/C;;EAEA;EACA;EACA,IAAIC,OAAO,GAAIX,OAAO,EAAwBU,OAAO;EAErD,OAAOC,OAAO,IAAIA,OAAO,CAACJ,KAAK,CAACC,OAAO,KAAK,UAAU,EAAE;IACtDG,OAAO,GAAGA,OAAO,CAACR,UAAyB;EAC7C;EAEA,OAAOQ,OAAO;AAChB","ignoreList":[]}

Some files were not shown because too many files have changed in this diff Show More