@wordpress/components
Version:
UI components for WordPress.
65 lines (61 loc) • 2.22 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _rippleNative = _interopRequireDefault(require("./ripple.native.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ANDROID_VERSION_LOLLIPOP = 21;
const ANDROID_VERSION_PIE = 28;
const TouchableRipple = ({
style,
onPress,
disabled: disabledProp,
children,
activeOpacity,
getStylesFromColorScheme,
borderless = false,
...touchableProps
}) => {
const isTouchableNativeSupported = _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= ANDROID_VERSION_LOLLIPOP;
const disabled = disabledProp || !onPress;
const rippleColor = getStylesFromColorScheme(_rippleNative.default.ripple, _rippleNative.default.rippleDark).backgroundColor;
if (isTouchableNativeSupported) {
// A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
// https://github.com/facebook/react-native/issues/6480
const useForeground = _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= ANDROID_VERSION_PIE && borderless;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableNativeFeedback, {
...touchableProps,
onPress: onPress,
disabled: disabled,
useForeground: useForeground,
background: _reactNative.TouchableNativeFeedback.Ripple(rippleColor, borderless),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [borderless && _rippleNative.default.overflow, style],
children: children
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
...touchableProps,
onPress: onPress,
disabled: disabled,
activeOpacity: activeOpacity,
style: style,
children: children
});
};
var _default = exports.default = (0, _compose.withPreferredColorScheme)(TouchableRipple);
//# sourceMappingURL=ripple.native.js.map