383 lines
14 KiB
JavaScript
383 lines
14 KiB
JavaScript
|
var _UIManager$getViewMan, _UIManager$getViewMan2, _UIManager$getConstan;
|
||
|
|
|
||
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||
|
|
|
||
|
|
import * as React from 'react';
|
||
|
|
import { findNodeHandle as findNodeHandleRN, NativeModules, Platform, Touchable } from 'react-native'; // @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
|
||
|
|
|
||
|
|
import deepEqual from 'fbjs/lib/areEqual';
|
||
|
|
import RNGestureHandlerModule from '../RNGestureHandlerModule';
|
||
|
|
import { State } from '../State';
|
||
|
|
|
||
|
|
function findNodeHandle(node) {
|
||
|
|
if (Platform.OS === 'web') return node;
|
||
|
|
return findNodeHandleRN(node);
|
||
|
|
}
|
||
|
|
|
||
|
|
const {
|
||
|
|
UIManager = {}
|
||
|
|
} = NativeModules;
|
||
|
|
const customGHEventsConfig = {
|
||
|
|
onGestureHandlerEvent: {
|
||
|
|
registrationName: 'onGestureHandlerEvent'
|
||
|
|
},
|
||
|
|
onGestureHandlerStateChange: {
|
||
|
|
registrationName: 'onGestureHandlerStateChange'
|
||
|
|
}
|
||
|
|
}; // Add gesture specific events to genericDirectEventTypes object exported from UIManager
|
||
|
|
// native module.
|
||
|
|
// Once new event types are registered with react it is possible to dispatch these
|
||
|
|
// events to all kind of native views.
|
||
|
|
|
||
|
|
UIManager.genericDirectEventTypes = { ...UIManager.genericDirectEventTypes,
|
||
|
|
...customGHEventsConfig
|
||
|
|
}; // In newer versions of RN the `genericDirectEventTypes` is located in the object
|
||
|
|
// returned by UIManager.getViewManagerConfig('getConstants') or in older RN UIManager.getConstants(), we need to add it there as well to make
|
||
|
|
// it compatible with RN 61+
|
||
|
|
|
||
|
|
const UIManagerConstants = (_UIManager$getViewMan = (_UIManager$getViewMan2 = UIManager.getViewManagerConfig) === null || _UIManager$getViewMan2 === void 0 ? void 0 : _UIManager$getViewMan2.call(UIManager, 'getConstants')) !== null && _UIManager$getViewMan !== void 0 ? _UIManager$getViewMan : (_UIManager$getConstan = UIManager.getConstants) === null || _UIManager$getConstan === void 0 ? void 0 : _UIManager$getConstan.call(UIManager);
|
||
|
|
|
||
|
|
if (UIManagerConstants) {
|
||
|
|
UIManagerConstants.genericDirectEventTypes = { ...UIManagerConstants.genericDirectEventTypes,
|
||
|
|
...customGHEventsConfig
|
||
|
|
};
|
||
|
|
} // Wrap JS responder calls and notify gesture handler manager
|
||
|
|
|
||
|
|
|
||
|
|
const {
|
||
|
|
setJSResponder: oldSetJSResponder = () => {//no operation
|
||
|
|
},
|
||
|
|
clearJSResponder: oldClearJSResponder = () => {//no operation
|
||
|
|
}
|
||
|
|
} = UIManager;
|
||
|
|
|
||
|
|
UIManager.setJSResponder = (tag, blockNativeResponder) => {
|
||
|
|
RNGestureHandlerModule.handleSetJSResponder(tag, blockNativeResponder);
|
||
|
|
oldSetJSResponder(tag, blockNativeResponder);
|
||
|
|
};
|
||
|
|
|
||
|
|
UIManager.clearJSResponder = () => {
|
||
|
|
RNGestureHandlerModule.handleClearJSResponder();
|
||
|
|
oldClearJSResponder();
|
||
|
|
};
|
||
|
|
|
||
|
|
let handlerTag = 1;
|
||
|
|
const handlerIDToTag = {};
|
||
|
|
|
||
|
|
function isConfigParam(param, name) {
|
||
|
|
// param !== Object(param) returns false if `param` is a function
|
||
|
|
// or an object and returns true if `param` is null
|
||
|
|
return param !== undefined && (param !== Object(param) || !('__isNative' in param)) && name !== 'onHandlerStateChange' && name !== 'onGestureEvent';
|
||
|
|
}
|
||
|
|
|
||
|
|
function filterConfig(props, validProps, defaults = {}) {
|
||
|
|
const res = { ...defaults
|
||
|
|
};
|
||
|
|
validProps.forEach(key => {
|
||
|
|
const value = props[key];
|
||
|
|
|
||
|
|
if (isConfigParam(value, key)) {
|
||
|
|
let value = props[key];
|
||
|
|
|
||
|
|
if (key === 'simultaneousHandlers' || key === 'waitFor') {
|
||
|
|
value = transformIntoHandlerTags(props[key]);
|
||
|
|
} else if (key === 'hitSlop') {
|
||
|
|
if (typeof value !== 'object') {
|
||
|
|
value = {
|
||
|
|
top: value,
|
||
|
|
left: value,
|
||
|
|
bottom: value,
|
||
|
|
right: value
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
res[key] = value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
|
||
|
|
function transformIntoHandlerTags(handlerIDs) {
|
||
|
|
if (!Array.isArray(handlerIDs)) {
|
||
|
|
handlerIDs = [handlerIDs];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (Platform.OS === 'web') {
|
||
|
|
return handlerIDs.map(({
|
||
|
|
current
|
||
|
|
}) => current).filter(handle => handle);
|
||
|
|
} // converts handler string IDs into their numeric tags
|
||
|
|
|
||
|
|
|
||
|
|
return handlerIDs.map(handlerID => {
|
||
|
|
var _handlerID$current;
|
||
|
|
|
||
|
|
return handlerIDToTag[handlerID] || ((_handlerID$current = handlerID.current) === null || _handlerID$current === void 0 ? void 0 : _handlerID$current.handlerTag) || -1;
|
||
|
|
}).filter(handlerTag => handlerTag > 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
function hasUnresolvedRefs(props) {
|
||
|
|
// TODO(TS) - add type for extract arg
|
||
|
|
const extract = refs => {
|
||
|
|
if (!Array.isArray(refs)) {
|
||
|
|
return refs && refs.current === null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return refs.some(r => r && r.current === null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return extract(props['simultaneousHandlers']) || extract(props['waitFor']);
|
||
|
|
}
|
||
|
|
|
||
|
|
const stateToPropMappings = {
|
||
|
|
[State.UNDETERMINED]: undefined,
|
||
|
|
[State.BEGAN]: 'onBegan',
|
||
|
|
[State.FAILED]: 'onFailed',
|
||
|
|
[State.CANCELLED]: 'onCancelled',
|
||
|
|
[State.ACTIVE]: 'onActivated',
|
||
|
|
[State.END]: 'onEnded'
|
||
|
|
};
|
||
|
|
// TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
|
||
|
|
export default function createHandler({
|
||
|
|
name,
|
||
|
|
allowedProps = [],
|
||
|
|
config = {},
|
||
|
|
transformProps,
|
||
|
|
customNativeProps = []
|
||
|
|
}) {
|
||
|
|
class Handler extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
_defineProperty(this, "handlerTag", void 0);
|
||
|
|
|
||
|
|
_defineProperty(this, "config", void 0);
|
||
|
|
|
||
|
|
_defineProperty(this, "propsRef", void 0);
|
||
|
|
|
||
|
|
_defineProperty(this, "viewNode", void 0);
|
||
|
|
|
||
|
|
_defineProperty(this, "viewTag", void 0);
|
||
|
|
|
||
|
|
_defineProperty(this, "updateEnqueued", null);
|
||
|
|
|
||
|
|
_defineProperty(this, "onGestureHandlerEvent", event => {
|
||
|
|
if (event.nativeEvent.handlerTag === this.handlerTag) {
|
||
|
|
var _this$props$onGesture, _this$props;
|
||
|
|
|
||
|
|
(_this$props$onGesture = (_this$props = this.props).onGestureEvent) === null || _this$props$onGesture === void 0 ? void 0 : _this$props$onGesture.call(_this$props, event);
|
||
|
|
} else {
|
||
|
|
var _this$props$onGesture2, _this$props2;
|
||
|
|
|
||
|
|
(_this$props$onGesture2 = (_this$props2 = this.props).onGestureHandlerEvent) === null || _this$props$onGesture2 === void 0 ? void 0 : _this$props$onGesture2.call(_this$props2, event);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
_defineProperty(this, "onGestureHandlerStateChange", event => {
|
||
|
|
if (event.nativeEvent.handlerTag === this.handlerTag) {
|
||
|
|
var _this$props$onHandler, _this$props3;
|
||
|
|
|
||
|
|
(_this$props$onHandler = (_this$props3 = this.props).onHandlerStateChange) === null || _this$props$onHandler === void 0 ? void 0 : _this$props$onHandler.call(_this$props3, event);
|
||
|
|
const state = event.nativeEvent.state;
|
||
|
|
const stateEventName = stateToPropMappings[state];
|
||
|
|
const eventHandler = stateEventName && this.props[stateEventName];
|
||
|
|
|
||
|
|
if (eventHandler && typeof eventHandler === 'function') {
|
||
|
|
eventHandler(event);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
var _this$props$onGesture3, _this$props4;
|
||
|
|
|
||
|
|
(_this$props$onGesture3 = (_this$props4 = this.props).onGestureHandlerStateChange) === null || _this$props$onGesture3 === void 0 ? void 0 : _this$props$onGesture3.call(_this$props4, event);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
_defineProperty(this, "refHandler", node => {
|
||
|
|
this.viewNode = node;
|
||
|
|
const child = React.Children.only(this.props.children); // TODO(TS) fix ref type
|
||
|
|
|
||
|
|
const {
|
||
|
|
ref
|
||
|
|
} = child;
|
||
|
|
|
||
|
|
if (ref !== null) {
|
||
|
|
if (typeof ref === 'function') {
|
||
|
|
ref(node);
|
||
|
|
} else {
|
||
|
|
ref.current = node;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
_defineProperty(this, "createGestureHandler", newConfig => {
|
||
|
|
this.config = newConfig;
|
||
|
|
RNGestureHandlerModule.createGestureHandler(name, this.handlerTag, newConfig);
|
||
|
|
});
|
||
|
|
|
||
|
|
_defineProperty(this, "attachGestureHandler", newViewTag => {
|
||
|
|
this.viewTag = newViewTag;
|
||
|
|
|
||
|
|
if (Platform.OS === 'web') {
|
||
|
|
// typecast due to dynamic resolution, attachGestureHandler should have web version signature in this branch
|
||
|
|
RNGestureHandlerModule.attachGestureHandler(this.handlerTag, newViewTag, this.propsRef);
|
||
|
|
} else {
|
||
|
|
RNGestureHandlerModule.attachGestureHandler(this.handlerTag, newViewTag);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
_defineProperty(this, "updateGestureHandler", newConfig => {
|
||
|
|
this.config = newConfig;
|
||
|
|
RNGestureHandlerModule.updateGestureHandler(this.handlerTag, newConfig);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.handlerTag = handlerTag++;
|
||
|
|
this.config = {};
|
||
|
|
this.propsRef = /*#__PURE__*/React.createRef();
|
||
|
|
|
||
|
|
if (props.id) {
|
||
|
|
if (handlerIDToTag[props.id] !== undefined) {
|
||
|
|
throw new Error("Handler with ID \"".concat(props.id, "\" already registered"));
|
||
|
|
}
|
||
|
|
|
||
|
|
handlerIDToTag[props.id] = this.handlerTag;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
const props = this.props;
|
||
|
|
|
||
|
|
if (hasUnresolvedRefs(props)) {
|
||
|
|
// If there are unresolved refs (e.g. ".current" has not yet been set)
|
||
|
|
// passed as `simultaneousHandlers` or `waitFor`, we enqueue a call to
|
||
|
|
// _update method that will try to update native handler props using
|
||
|
|
// setImmediate. This makes it so _update function gets called after all
|
||
|
|
// react components are mounted and we expect the missing ref object to
|
||
|
|
// be resolved by then.
|
||
|
|
this.updateEnqueued = setImmediate(() => {
|
||
|
|
this.updateEnqueued = null;
|
||
|
|
this.update();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
this.createGestureHandler(filterConfig(transformProps ? transformProps(this.props) : this.props, [...allowedProps, ...customNativeProps], config));
|
||
|
|
this.attachGestureHandler(findNodeHandle(this.viewNode)); // TODO(TS) - check if this can be null
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidUpdate() {
|
||
|
|
const viewTag = findNodeHandle(this.viewNode);
|
||
|
|
|
||
|
|
if (this.viewTag !== viewTag) {
|
||
|
|
this.attachGestureHandler(viewTag); // TODO(TS) - check interaction between _viewTag & findNodeHandle
|
||
|
|
}
|
||
|
|
|
||
|
|
this.update();
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
|
||
|
|
|
||
|
|
if (this.updateEnqueued) {
|
||
|
|
clearImmediate(this.updateEnqueued);
|
||
|
|
} // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
|
||
|
|
|
||
|
|
|
||
|
|
const handlerID = this.props.id;
|
||
|
|
|
||
|
|
if (handlerID) {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
|
||
|
|
delete handlerIDToTag[handlerID];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
update() {
|
||
|
|
const newConfig = filterConfig(transformProps ? transformProps(this.props) : this.props, [...allowedProps, ...customNativeProps], config);
|
||
|
|
|
||
|
|
if (!deepEqual(this.config, newConfig)) {
|
||
|
|
this.updateGestureHandler(newConfig);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setNativeProps(updates) {
|
||
|
|
const mergedProps = { ...this.props,
|
||
|
|
...updates
|
||
|
|
};
|
||
|
|
const newConfig = filterConfig(transformProps ? transformProps(mergedProps) : mergedProps, [...allowedProps, ...customNativeProps], config);
|
||
|
|
this.updateGestureHandler(newConfig);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
let gestureEventHandler = this.onGestureHandlerEvent; // Another instance of https://github.com/microsoft/TypeScript/issues/13995
|
||
|
|
|
||
|
|
const {
|
||
|
|
onGestureEvent,
|
||
|
|
onGestureHandlerEvent
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
if (onGestureEvent && typeof onGestureEvent !== 'function') {
|
||
|
|
// If it's not a method it should be an native Animated.event
|
||
|
|
// object. We set it directly as the handler for the view
|
||
|
|
// In this case nested handlers are not going to be supported
|
||
|
|
if (onGestureHandlerEvent) {
|
||
|
|
throw new Error('Nesting touch handlers with native animated driver is not supported yet');
|
||
|
|
}
|
||
|
|
|
||
|
|
gestureEventHandler = onGestureEvent;
|
||
|
|
} else {
|
||
|
|
if (onGestureHandlerEvent && typeof onGestureHandlerEvent !== 'function') {
|
||
|
|
throw new Error('Nesting touch handlers with native animated driver is not supported yet');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let gestureStateEventHandler = this.onGestureHandlerStateChange; // Another instance of https://github.com/microsoft/TypeScript/issues/13995
|
||
|
|
|
||
|
|
const {
|
||
|
|
onHandlerStateChange,
|
||
|
|
onGestureHandlerStateChange
|
||
|
|
} = this.props;
|
||
|
|
|
||
|
|
if (onHandlerStateChange && typeof onHandlerStateChange !== 'function') {
|
||
|
|
// If it's not a method it should be an native Animated.event
|
||
|
|
// object. We set it directly as the handler for the view
|
||
|
|
// In this case nested handlers are not going to be supported
|
||
|
|
if (onGestureHandlerStateChange) {
|
||
|
|
throw new Error('Nesting touch handlers with native animated driver is not supported yet');
|
||
|
|
}
|
||
|
|
|
||
|
|
gestureStateEventHandler = onHandlerStateChange;
|
||
|
|
} else {
|
||
|
|
if (onGestureHandlerStateChange && typeof onGestureHandlerStateChange !== 'function') {
|
||
|
|
throw new Error('Nesting touch handlers with native animated driver is not supported yet');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const events = {
|
||
|
|
onGestureHandlerEvent: gestureEventHandler,
|
||
|
|
onGestureHandlerStateChange: gestureStateEventHandler
|
||
|
|
};
|
||
|
|
this.propsRef.current = events;
|
||
|
|
const child = React.Children.only(this.props.children);
|
||
|
|
let grandChildren = child.props.children;
|
||
|
|
|
||
|
|
if (Touchable.TOUCH_TARGET_DEBUG && child.type && (child.type === 'RNGestureHandlerButton' || child.type.name === 'View' || child.type.displayName === 'View')) {
|
||
|
|
grandChildren = React.Children.toArray(grandChildren);
|
||
|
|
grandChildren.push(Touchable.renderDebugView({
|
||
|
|
color: 'mediumspringgreen',
|
||
|
|
hitSlop: child.props.hitSlop
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
return /*#__PURE__*/React.cloneElement(child, {
|
||
|
|
ref: this.refHandler,
|
||
|
|
collapsable: false,
|
||
|
|
...events
|
||
|
|
}, grandChildren);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
_defineProperty(Handler, "displayName", name);
|
||
|
|
|
||
|
|
return Handler;
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=createHandler.js.map
|