@wordpress/components
Version:
UI components for WordPress.
91 lines (90 loc) • 3.06 kB
JavaScript
import { FlatList, View } from "react-native";
import Animated from "react-native-reanimated";
import { useCallback, useEffect, forwardRef, useImperativeHandle } from "@wordpress/element";
import { useThrottle } from "@wordpress/compose";
import useScroll from "./use-scroll";
import useTextInputOffset from "./use-text-input-offset";
import useTextInputCaretPosition from "./use-text-input-caret-position";
import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from "./shared";
import styles from "./styles.scss";
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_FONT_SIZE = 16;
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const EMPTY_OBJECT = {};
const KeyboardAwareFlatList = ({
extraScrollHeight,
onScroll,
scrollEnabled,
shouldPreventAutomaticScroll,
...props
}, ref) => {
const {
scrollViewRef,
scrollHandler,
keyboardOffset,
scrollToSection,
scrollToElement,
onContentSizeChange,
lastScrollTo
} = useScroll({
scrollEnabled,
shouldPreventAutomaticScroll,
extraScrollHeight,
onScroll,
onSizeChange
});
const [getTextInputOffset] = useTextInputOffset(scrollEnabled, scrollViewRef);
const onScrollToTextInput = useThrottle(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] = useTextInputCaretPosition(scrollEnabled);
const onSizeChange = useCallback(() => onScrollToTextInput(currentCaretData), [currentCaretData, onScrollToTextInput]);
useEffect(() => {
onScrollToTextInput(currentCaretData);
}, [currentCaretData, onScrollToTextInput]);
const contentInset = {
bottom: keyboardOffset
};
const getFlatListRef = useCallback((flatListRef) => {
scrollViewRef.current = flatListRef?.getNativeScrollRef();
}, [scrollViewRef]);
useImperativeHandle(ref, () => {
return {
scrollViewRef: scrollViewRef.current,
scrollToSection,
scrollToElement,
lastScrollTo
};
});
const optimizationProps = props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD ? OPTIMIZATION_PROPS : EMPTY_OBJECT;
return /* @__PURE__ */ _jsx(View, {
style: styles.list__container,
children: /* @__PURE__ */ _jsx(AnimatedFlatList, {
ref: getFlatListRef,
automaticallyAdjustContentInsets: false,
contentInset,
keyboardShouldPersistTaps: "handled",
onContentSizeChange,
onScroll: scrollHandler,
scrollEventThrottle: 16,
style: styles.list__content,
...optimizationProps,
...props
})
});
};
var index_ios_default = forwardRef(KeyboardAwareFlatList);
export {
KeyboardAwareFlatList,
index_ios_default as default
};
//# sourceMappingURL=index.ios.js.map