@wordpress/components
Version:
UI components for WordPress.
73 lines (71 loc) • 2.02 kB
JavaScript
/**
* External dependencies
*/
import { FlatList } from 'react-native';
import Animated from 'react-native-reanimated';
/**
* WordPress dependencies
*/
import { forwardRef, useCallback, useImperativeHandle } from '@wordpress/element';
/**
* Internal dependencies
*/
import useScroll from './use-scroll';
import KeyboardAvoidingView from '../keyboard-avoiding-view';
import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
import { jsx as _jsx } from "react/jsx-runtime";
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
const EMPTY_OBJECT = {};
export const KeyboardAwareFlatList = ({
onScroll,
...props
}, ref) => {
const {
extraScrollHeight,
scrollEnabled,
shouldPreventAutomaticScroll
} = props;
const {
scrollViewRef,
scrollHandler,
scrollToSection,
scrollToElement,
onContentSizeChange,
lastScrollTo
} = useScroll({
scrollEnabled,
shouldPreventAutomaticScroll,
extraScrollHeight,
onScroll
});
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(KeyboardAvoidingView, {
style: {
flex: 1
},
children: /*#__PURE__*/_jsx(AnimatedFlatList, {
ref: getFlatListRef,
onScroll: scrollHandler,
onContentSizeChange: onContentSizeChange
// Disable clipping to fix focus losing.
// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
,
removeClippedSubviews: false,
...optimizationProps,
...props
})
});
};
export default forwardRef(KeyboardAwareFlatList);
//# sourceMappingURL=index.android.js.map