@mpxjs/webpack-plugin
Version:
mpx compile core
46 lines (45 loc) • 2.25 kB
JSX
import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
import { View } from 'react-native';
import useNodesRef from './useNodesRef';
import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
import { StickyContext } from './context';
import useInnerProps from './getInnerListeners';
const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
const sectionRef = useRef(null);
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
const stickyHeaders = useRef(new Map());
const registerStickyHeader = useCallback((item) => {
stickyHeaders.current.set(item.id, item);
}, []);
const unregisterStickyHeader = useCallback((id) => {
stickyHeaders.current.delete(id);
}, []);
const contextValue = useMemo(() => ({
registerStickyHeader,
unregisterStickyHeader
}), []);
useNodesRef(props, ref, sectionRef, {
style: normalStyle
});
function onLayout() {
stickyHeaders.current.forEach(item => {
item.updatePosition();
});
}
const innerProps = useInnerProps(extendObject({}, props, {
style: extendObject(innerStyle, layoutStyle),
ref: sectionRef
}, layoutProps), [], { layoutRef });
return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
hasVarDec,
varContext: varContextRef.current,
textStyle,
textProps
}))));
});
_StickySection.displayName = 'MpxStickySection';
export default _StickySection;