@mpxjs/webpack-plugin
Version:
mpx compile core
38 lines (37 loc) • 1.96 kB
JSX
/**
* ✘ scale-area
*/
import { View } from 'react-native';
import { forwardRef, useRef, useMemo, createElement } from 'react';
import useNodesRef from './useNodesRef';
import useInnerProps from './getInnerListeners';
import { MovableAreaContext } from './context';
import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
import Portal from './mpx-portal';
const _MovableArea = forwardRef((props, ref) => {
const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
const movableViewRef = useRef(null);
useNodesRef(props, ref, movableViewRef, {
style: normalStyle
});
const contextValue = useMemo(() => ({
height: normalStyle.height || 10,
width: normalStyle.width || 10
}), [normalStyle.width, normalStyle.height]);
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
ref: movableViewRef
}), [], { layoutRef });
let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
hasVarDec,
varContext: varContextRef.current
})));
if (hasPositionFixed) {
movableComponent = createElement(Portal, null, movableComponent);
}
return movableComponent;
});
_MovableArea.displayName = 'MpxMovableArea';
export default _MovableArea;