@td-design/react-native
Version:
react-native UI组件库
76 lines • 3.94 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
* https://github.com/facebook/react-native/blob/16ea9ba8133a5340ed6751ec7d49bf03a0d4c5ea/Libraries/Pressability/Pressability.js#L347
* # State Machine
*
* ┌───────────────┐ ◀──── RESPONDER_RELEASE
* │ NOT_RESPONDER │
* └───┬───────────┘ ◀──── RESPONDER_TERMINATED
* │
* │ RESPONDER_GRANT (HitRect)
* │
* ▼
* ┌─────────────────────┐ ┌───────────────────┐ ┌───────────────────┐
* │ RESPONDER_INACTIVE_ │ DELAY │ RESPONDER_ACTIVE_ │ T + DELAY │ RESPONDER_ACTIVE_ │
* │ PRESS_IN ├────────▶ │ PRESS_IN ├────────────▶ │ LONG_PRESS_IN │
* └─┬───────────────────┘ └─┬─────────────────┘ └─┬─────────────────┘
* │ ▲ │ ▲ │ ▲
* │LEAVE_ │ │LEAVE_ │ │LEAVE_ │
* │PRESS_RECT │ENTER_ │PRESS_RECT │ENTER_ │PRESS_RECT │ENTER_
* │ │PRESS_RECT │ │PRESS_RECT │ │PRESS_RECT
* ▼ │ ▼ │ ▼ │
* ┌─────────────┴───────┐ ┌─────────────┴─────┐ ┌─────────────┴─────┐
* │ RESPONDER_INACTIVE_ │ DELAY │ RESPONDER_ACTIVE_ │ │ RESPONDER_ACTIVE_ │
* │ PRESS_OUT ├────────▶ │ PRESS_OUT │ │ LONG_PRESS_OUT │
* └─────────────────────┘ └───────────────────┘ └───────────────────┘
*
* T + DELAY => LONG_PRESS_DELAY + DELAY
*
* Not drawn are the side effects of each transition. The most important side
* effect is the invocation of `onPress` and `onLongPress` that occur when a
* responder is release while in the "press in" states.
*/
import React, { memo } from 'react';
import { Pressable as RNPressable } from 'react-native';
import helpers from '../helpers';
const {
px
} = helpers;
function Pressable(props) {
const {
children,
activeOpacity = 0.6,
pressOffset = px(20),
hitOffset,
delayLongPress = 1000,
style,
onPress,
...rest
} = props;
if (!children) return null;
return /*#__PURE__*/React.createElement(RNPressable, _extends({
android_disableSound: false,
android_ripple: null,
pressRetentionOffset: pressOffset,
hitSlop: hitOffset,
delayLongPress: delayLongPress,
style: _ref => {
let {
pressed
} = _ref;
return [{
opacity: pressed ? activeOpacity : 1
}, style];
},
onPress: e => {
if (onPress) {
setTimeout(() => {
onPress(e);
}, 100);
}
}
}, rest), children);
}
Pressable.displayName = 'Pressable';
export default /*#__PURE__*/memo(Pressable);
//# sourceMappingURL=index.js.map