Skip to content

Commit

Permalink
feat: movable、scroll-view支持calc
Browse files Browse the repository at this point in the history
  • Loading branch information
lareinayanyu committed Oct 18, 2024
1 parent 1075ffb commit d2eee88
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 116 deletions.
31 changes: 0 additions & 31 deletions packages/webpack-plugin/lib/runtime/components/react/common.tsx
View file

This file was deleted.

40 changes: 15 additions & 25 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@
* ✔ bindreset
*/

import { View, LayoutChangeEvent } from 'react-native'
import { View } from 'react-native'
import { JSX, useRef, forwardRef, ReactNode } from 'react'
import useNodesRef, { HandlerRef } from './useNodesRef'
import useInnerProps, { getCustomEvent } from './getInnerListeners'
import { FormContext } from './context'
import { useTransformStyle, splitProps, splitStyle, useLayoutHook } from './utils'

import { wrapChildren } from './common'

import { useTransformStyle, splitProps, splitStyle, useLayout, wrapChildren } from './utils'
interface FormProps {
style?: Record<string, any>;
children: ReactNode;
'enable-offset'?: boolean;
'enable-var'?: boolean
'external-var-context'?: Record<string, any>
'external-var-context'?: Record<string, any>;
'parent-font-size'?: number;
'parent-width'?: number;
'parent-height'?: number;
bindsubmit?: (evt: {
detail: {
value: any;
Expand All @@ -30,13 +30,14 @@ interface FormProps {

const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
const { textProps, innerProps: props = {} } = splitProps(fromProps)
const layoutRef = useRef({})
const formValuesMap = useRef(new Map()).current
const {
style,
'enable-offset': enableOffset,
'enable-var': enableVar,
'external-var-context': externalVarContext
'external-var-context': externalVarContext,
'parent-font-size': parentFontSize,
'parent-width': parentWidth,
'parent-height': parentHeight
} = props

const {
Expand All @@ -46,18 +47,13 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
varContextRef,
setWidth,
setHeight
} = useTransformStyle(style, { enableVar, externalVarContext })
} = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })

const { textStyle, innerStyle } = splitStyle(normalStyle)

const { nodeRef: formRef } = useNodesRef(props, ref)

const hasLayout = useRef(false)

const onLayout = useLayoutHook({ hasSelfPercent, enableOffset, setWidth, setHeight, layoutRef, nodeRef: formRef }, () => {
hasLayout.current = true
props.onLayout && props.onLayout()
})
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef })

const submit = () => {
const { bindsubmit } = props
Expand All @@ -80,21 +76,17 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
))
}

const needLayout = enableOffset || hasPercent

const reset = () => {
const { bindreset } = props
bindreset && bindreset()
formValuesMap.forEach(item => item.resetValue())
}

const innerProps = useInnerProps(props, {
style: innerStyle,
style: { ...innerStyle, ...layoutStyle },
ref: formRef,
...needLayout ? { onLayout } : null
...layoutProps
}, [
'children',
'style',
'bindsubmit',
'bindreset'
], { layoutRef })
Expand All @@ -109,9 +101,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
props,
{
hasVarDec,
varContext: varContextRef.current
},
{
varContext: varContextRef.current,
textStyle,
textProps
}
Expand Down
48 changes: 17 additions & 31 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
*/

import { View, LayoutChangeEvent } from 'react-native'
import { JSX, useState, useEffect, useRef, forwardRef, ReactNode } from 'react'
import { JSX, useState, useEffect, forwardRef, ReactNode } from 'react'
import useNodesRef, { HandlerRef } from './useNodesRef'
import useInnerProps from './getInnerListeners'
import { MovableAreaContext } from './context'
import { useTransformStyle } from './utils'
import { wrapChildren } from './common'
import { useTransformStyle, wrapChildren, useLayout } from './utils'

interface MovableAreaProps {
style?: Record<string, any>;
Expand All @@ -17,64 +16,51 @@ interface MovableAreaProps {
height?: number;
'enable-offset'?: boolean;
'enable-var'?: boolean
'external-var-context'?: Record<string, any>
'external-var-context'?: Record<string, any>;
'parent-font-size'?: number;
'parent-width'?: number;
'parent-height'?: number;
}

const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-offset': enableOffset } = props
const { style = {}, width = 10, height = 10, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
const [areaWidth, setAreaWidth] = useState(0)
const [areaHeight, setAreaHeight] = useState(0)

const layoutRef = useRef<any>({})

useEffect(() => {
setAreaWidth(width)
setAreaHeight(height)
}, [width, height])

const {
hasPercent,
hasSelfPercent,
normalStyle,
hasVarDec,
varContextRef,
setContainerWidth,
setContainerHeight
} = useTransformStyle(style, { enableVar, externalVarContext, enableLineHeight: false })
setWidth,
setHeight
} = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })

const { nodeRef: movableViewRef } = useNodesRef(props, ref)

const onLayout = (e: LayoutChangeEvent) => {
const { width = 10, height = 10 } = e.nativeEvent.layout
setAreaWidth(width)
setAreaHeight(height)
if (hasPercent) {
setContainerWidth(width)
setContainerHeight(height)
}
if (enableOffset) {
movableViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
})
}
}

const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef, onLayout })

const innerProps = useInnerProps(props, {
style: { height: areaHeight, width: areaWidth, overflow: 'hidden', ...normalStyle, ...layoutStyle },
ref: movableViewRef,
onLayout
}, [
'children',
'style'
], { layoutRef })
...layoutProps
}, [], { layoutRef })

return (
<MovableAreaContext.Provider value={{ height: areaHeight, width: areaWidth }}>
<View
{...innerProps}
style={{
height: areaHeight,
width: areaWidth,
overflow: 'hidden',
...normalStyle
}}
>
{
wrapChildren(
Expand Down
50 changes: 21 additions & 29 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@ import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef } fr
import { warn } from '@mpxjs/utils'
import useInnerProps, { getCustomEvent } from './getInnerListeners'
import useNodesRef, { HandlerRef } from './useNodesRef'
import { splitProps, splitStyle, useTransformStyle } from './utils'
import { wrapChildren } from './common'
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils'

interface ScrollViewProps {
children?: ReactNode;
Expand All @@ -60,8 +59,11 @@ interface ScrollViewProps {
'scroll-top'?: number;
'scroll-left'?: number;
'enable-offset'?: boolean;
'enable-var'?: boolean
'external-var-context'?: Record<string, any>
'enable-var'?: boolean;
'external-var-context'?: Record<string, any>;
'parent-font-size'?: number;
'parent-width'?: number;
'parent-height'?: number;
bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
Expand Down Expand Up @@ -111,18 +113,19 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
'refresher-enabled': refresherEnabled,
'refresher-default-style': refresherDefaultStyle,
'refresher-background': refresherBackground,
'enable-offset': enableOffset,
'show-scrollbar': showScrollbar = true,
'enable-var': enableVar,
'external-var-context': externalVarContext
'external-var-context': externalVarContext,
'parent-font-size': parentFontSize,
'parent-width': parentWidth,
'parent-height': parentHeight
} = props

const [refreshing, setRefreshing] = useState(true)

const snapScrollTop = useRef(0)
const snapScrollLeft = useRef(0)

const layoutRef = useRef({})
const scrollOptions = useRef({
contentLength: 0,
offset: 0,
Expand All @@ -140,10 +143,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
normalStyle,
hasVarDec,
varContextRef,
hasPercent,
setContainerWidth,
setContainerHeight
} = useTransformStyle(style, { enableVar, externalVarContext })
hasSelfPercent,
setWidth,
setHeight
} = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })

const { textStyle, innerStyle } = splitStyle(normalStyle)

Expand All @@ -159,6 +162,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
scrollTo: scrollToOffset
}
})

const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })

if (scrollX && scrollY) {
warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
}
Expand Down Expand Up @@ -242,16 +248,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
function onLayout (e: LayoutChangeEvent) {
const layout = e.nativeEvent.layout || {}
scrollOptions.current.visibleLength = selectLength(layout)
if (hasPercent) {
const { width, height } = layout
setContainerWidth(width || 0)
setContainerHeight(height || 0)
}
if (enableOffset) {
scrollViewRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {
layoutRef.current = { x, y, width, height, offsetLeft, offsetTop }
})
}
}

function updateScrollOptions (e: NativeSyntheticEvent<NativeScrollEvent>, position: Record<string, any>) {
Expand Down Expand Up @@ -381,6 +377,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
}

let scrollAdditionalProps: ScrollAdditionalProps = {
style: { ...innerStyle, ...layoutStyle },
pinchGestureEnabled: false,
horizontal: scrollX && !scrollY,
scrollEventThrottle: scrollEventThrottle,
Expand All @@ -393,9 +390,9 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
onContentSizeChange: onContentSizeChange,
bindtouchstart: onScrollTouchStart,
bindtouchmove: onScrollTouchMove,
onLayout,
onScrollEndDrag,
onMomentumScrollEnd: onScrollEnd
onMomentumScrollEnd: onScrollEnd,
...layoutProps
}
if (enhanced) {
scrollAdditionalProps = {
Expand All @@ -405,8 +402,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
}
}
const innerProps = useInnerProps(props, scrollAdditionalProps, [
'style',
'enable-offset',
'scroll-x',
'scroll-y',
'enable-back-to-top',
Expand Down Expand Up @@ -440,7 +435,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
return (
<ScrollView
{...innerProps}
style={innerStyle}
refreshControl={refresherEnabled
? (
<RefreshControl
Expand All @@ -457,9 +451,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
props,
{
hasVarDec,
varContext: varContextRef.current
},
{
varContext: varContextRef.current,
textStyle,
textProps
}
Expand Down

0 comments on commit d2eee88

Please sign in to comment.