react-native-a11y
Version:
Improvements of a11y for ReactNative, this library improve work with reader and keyboard focus and reader in general.
157 lines (156 loc) • 7.55 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Pressable = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactNative = require("react-native");
var _Rect = require("react-native/Libraries/StyleSheet/Rect");
var _usePressability = _interopRequireDefault(require("react-native/Libraries/Pressability/usePressability"));
var _useAndroidRippleForView = _interopRequireDefault(require("react-native/Libraries/Components/Pressable/useAndroidRippleForView"));
var _KeyboardFocusView = require("../KeyboardFocusView");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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); } /* eslint-disable complexity */ // @ts-ignore: import from origin pressable
// eslint-disable-next-line import/no-unresolved
// @ts-ignore: import from origin pressable
// eslint-disable-next-line import/no-unresolved
// @ts-ignore: import from origin pressable
// eslint-disable-next-line import/no-unresolved
const SPACE_KEY_CODE = _reactNative.Platform.select({
ios: 44,
android: 62,
default: 0
});
const Pressable = exports.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 = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(forwardedRef, () => viewRef.current);
const hitSlop = (0, _Rect.normalizeRect)(restProps === null || restProps === void 0 ? void 0 : restProps.hitSlop);
const android_rippleConfig = (0, _useAndroidRippleForView.default)(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 = (0, _react.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 = (0, _usePressability.default)(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.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] = (0, _react.useState)(false);
return [pressed || forcePressed, setPressed];
}
//# sourceMappingURL=Pressable.js.map