@wordpress/components
Version:
UI components for WordPress.
124 lines (118 loc) • 4.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.KeyboardAwareFlatList = void 0;
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _useScroll = _interopRequireDefault(require("./use-scroll"));
var _useTextInputOffset = _interopRequireDefault(require("./use-text-input-offset"));
var _useTextInputCaretPosition = _interopRequireDefault(require("./use-text-input-caret-position"));
var _shared = require("./shared");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_FONT_SIZE = 16;
const AnimatedFlatList = _reactNativeReanimated.default.createAnimatedComponent(_reactNative.FlatList);
const EMPTY_OBJECT = {};
/** @typedef {import('@wordpress/element').RefObject} RefObject */
/**
* React component that provides a FlatList that is aware of the keyboard state and can scroll
* to the currently focused TextInput.
*
* @param {Object} props Component props.
* @param {number} props.extraScrollHeight Extra scroll height for the content.
* @param {Function} props.onScroll Function to be called when the list is scrolled.
* @param {boolean} props.scrollEnabled Whether the list can be scrolled.
* @param {boolean} props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
* @param {Object} props... Other props to pass to the FlatList component.
* @param {RefObject} ref
* @return {Component} KeyboardAwareFlatList component.
*/
const KeyboardAwareFlatList = ({
extraScrollHeight,
onScroll,
scrollEnabled,
shouldPreventAutomaticScroll,
...props
}, ref) => {
const {
scrollViewRef,
scrollHandler,
keyboardOffset,
scrollToSection,
scrollToElement,
onContentSizeChange,
lastScrollTo
} = (0, _useScroll.default)({
scrollEnabled,
shouldPreventAutomaticScroll,
extraScrollHeight,
onScroll,
onSizeChange
});
const [getTextInputOffset] = (0, _useTextInputOffset.default)(scrollEnabled, scrollViewRef);
const onScrollToTextInput = (0, _compose.useThrottle)((0, _element.useCallback)(async caret => {
const {
caretHeight = DEFAULT_FONT_SIZE
} = caret !== null && caret !== void 0 ? caret : {};
const textInputOffset = await getTextInputOffset(caret);
const hasTextInputOffset = textInputOffset !== null;
if (hasTextInputOffset) {
scrollToSection(textInputOffset, caretHeight);
}
}, [getTextInputOffset, scrollToSection]), 200, {
leading: false
});
const [currentCaretData] = (0, _useTextInputCaretPosition.default)(scrollEnabled);
const onSizeChange = (0, _element.useCallback)(() => onScrollToTextInput(currentCaretData), [currentCaretData, onScrollToTextInput]);
(0, _element.useEffect)(() => {
onScrollToTextInput(currentCaretData);
}, [currentCaretData, onScrollToTextInput]);
// Adds content insets when the keyboard is opened to have
// extra padding at the bottom.
const contentInset = {
bottom: keyboardOffset
};
const getFlatListRef = (0, _element.useCallback)(flatListRef => {
scrollViewRef.current = flatListRef?.getNativeScrollRef();
}, [scrollViewRef]);
(0, _element.useImperativeHandle)(ref, () => {
return {
scrollViewRef: scrollViewRef.current,
scrollToSection,
scrollToElement,
lastScrollTo
};
});
const optimizationProps = props.data?.length > _shared.OPTIMIZATION_ITEMS_THRESHOLD ? _shared.OPTIMIZATION_PROPS : EMPTY_OBJECT;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: _styles.default.list__container,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedFlatList, {
ref: getFlatListRef,
automaticallyAdjustContentInsets: false,
contentInset: contentInset,
keyboardShouldPersistTaps: "handled",
onContentSizeChange: onContentSizeChange,
onScroll: scrollHandler,
scrollEventThrottle: 16,
style: _styles.default.list__content,
...optimizationProps,
...props
})
});
};
exports.KeyboardAwareFlatList = KeyboardAwareFlatList;
var _default = exports.default = (0, _element.forwardRef)(KeyboardAwareFlatList);
//# sourceMappingURL=index.ios.js.map