react-native-a11y
Version:
Improvements of a11y for ReactNative, this library improve work with reader and keyboard focus and reader in general.
148 lines (147 loc) • 6.41 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { useMemo, useState, useRef, useImperativeHandle } from 'react';
import { Platform } from 'react-native';
// @ts-ignore: import from origin pressable
import { normalizeRect } from 'react-native/Libraries/StyleSheet/Rect';
// @ts-ignore: import from origin pressable
import usePressability from 'react-native/Libraries/Pressability/usePressability';
// @ts-ignore: import from origin pressable
import useAndroidRippleForView from 'react-native/Libraries/Components/Pressable/useAndroidRippleForView';
import { KeyboardFocusView } from '../KeyboardFocusView';
const SPACE_KEY_CODE = Platform.select({
ios: 44,
android: 62,
default: 0
});
export const Pressable = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((props, forwardedRef) => {
var _props$accessibilityV, _props$accessibilityV2, _props$accessibilityV3, _props$accessibilityV4;
const {
accessibilityState,
'aria-live': ariaLive,
android_disableSound,
android_ripple,
'aria-busy': ariaBusy,
'aria-checked': ariaChecked,
'aria-disabled': ariaDisabled,
'aria-expanded': ariaExpanded,
'aria-label': ariaLabel,
'aria-selected': ariaSelected,
cancelable,
children,
delayHoverIn,
delayHoverOut,
delayLongPress,
disabled,
focusable,
onHoverIn,
onHoverOut,
onLongPress,
onPress,
onPressIn,
onPressOut,
pressRetentionOffset,
style,
testOnly_pressed,
unstable_pressDelay,
canBeFocused,
onFocusChange,
...restProps
} = props;
const viewRef = useRef(null);
useImperativeHandle(forwardedRef, () => viewRef.current);
const hitSlop = normalizeRect(restProps === null || restProps === void 0 ? void 0 : restProps.hitSlop);
const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
const [pressed, setPressed] = usePressState(testOnly_pressed === true);
let _accessibilityState = {
busy: ariaBusy ?? (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy),
checked: ariaChecked ?? (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.checked),
disabled: ariaDisabled ?? (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled),
expanded: ariaExpanded ?? (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.expanded),
selected: ariaSelected ?? (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.selected)
};
_accessibilityState = disabled != null ? {
..._accessibilityState,
disabled
} : _accessibilityState;
const accessibilityValue = {
max: props['aria-valuemax'] ?? ((_props$accessibilityV = props.accessibilityValue) === null || _props$accessibilityV === void 0 ? void 0 : _props$accessibilityV.max),
min: props['aria-valuemin'] ?? ((_props$accessibilityV2 = props.accessibilityValue) === null || _props$accessibilityV2 === void 0 ? void 0 : _props$accessibilityV2.min),
now: props['aria-valuenow'] ?? ((_props$accessibilityV3 = props.accessibilityValue) === null || _props$accessibilityV3 === void 0 ? void 0 : _props$accessibilityV3.now),
text: props['aria-valuetext'] ?? ((_props$accessibilityV4 = props.accessibilityValue) === null || _props$accessibilityV4 === void 0 ? void 0 : _props$accessibilityV4.text)
};
const accessibilityLiveRegion = ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion;
const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
const restPropsWithDefaults = {
...restProps,
...(android_rippleConfig === null || android_rippleConfig === void 0 ? void 0 : android_rippleConfig.viewProps),
accessibilityState: _accessibilityState,
accessibilityValue,
accessibilityViewIsModal: restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
accessibilityLiveRegion,
accessibilityLabel,
focusable: focusable !== false,
hitSlop
};
const config = useMemo(() => ({
cancelable,
disabled,
hitSlop,
pressRectOffset: pressRetentionOffset,
android_disableSound,
delayHoverIn,
delayHoverOut,
delayLongPress,
delayPressIn: unstable_pressDelay,
onHoverIn,
onHoverOut,
onLongPress,
onPress,
onPressIn(event) {
if (android_rippleConfig != null) {
android_rippleConfig.onPressIn(event);
}
setPressed(true);
if (onPressIn != null) {
onPressIn(event);
}
},
onPressMove: android_rippleConfig === null || android_rippleConfig === void 0 ? void 0 : android_rippleConfig.onPressMove,
onPressOut(event) {
if (android_rippleConfig != null) {
android_rippleConfig.onPressOut(event);
}
setPressed(false);
if (onPressOut != null) {
onPressOut(event);
}
}
}), [android_disableSound, android_rippleConfig, cancelable, delayHoverIn, delayHoverOut, delayLongPress, disabled, hitSlop, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, pressRetentionOffset, setPressed, unstable_pressDelay]);
const eventHandlers = usePressability(config);
const onKeyUpPress = React.useCallback(e => {
if (e.nativeEvent.keyCode === SPACE_KEY_CODE) {
if (e.nativeEvent.isLongPress) {
onLongPress === null || onLongPress === void 0 || onLongPress(e);
} else {
onPress === null || onPress === void 0 || onPress(e);
}
}
}, [onLongPress, onPress]);
return /*#__PURE__*/React.createElement(KeyboardFocusView, _extends({}, restPropsWithDefaults, eventHandlers, {
canBeFocused: canBeFocused,
onFocusChange: onFocusChange,
onKeyUpPress: onKeyUpPress,
ref: viewRef,
style: typeof style === 'function' ? style({
pressed
}) : style,
collapsable: false
}), typeof children === 'function' ? children({
pressed
}) : children);
}));
function usePressState(forcePressed) {
const [pressed, setPressed] = useState(false);
return [pressed || forcePressed, setPressed];
}
//# sourceMappingURL=Pressable.js.map