Skip to content

Commit

Permalink
Merge branch 'fix-drn' of https://github.com/didi/mpx into fix-drn
Browse files Browse the repository at this point in the history
  • Loading branch information
wangcuijuan committed Dec 23, 2024
2 parents 0bddabe + de8ae66 commit e88babe
Show file tree
Hide file tree
Showing 12 changed files with 265 additions and 182 deletions.
4 changes: 2 additions & 2 deletions packages/core/src/platform/createApp.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default function createApp (option, config = {}) {
if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
global.__mpxPageStatusMap[navigation.pageId] = 'show'
}
} else if (currentState === 'inactive') {
} else if (currentState === 'inactive' || currentState === 'background') {
global.__mpxAppCbs.hide.forEach((cb) => {
cb()
})
Expand Down Expand Up @@ -191,7 +191,7 @@ export default function createApp (option, config = {}) {
// 7.x替换headerBackTitleVisible
// headerBackButtonDisplayMode: 'minimal',
headerBackTitleVisible: false,
headerMode: 'screen',
// 安卓上会出现初始化时闪现导航条的问题
headerShown: false
}
if (headerBackImageProps) {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/platform/patch/getDefaultOptions.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
const { Provider, useSafeAreaInsets, GestureHandlerRootView } = global.__navigationHelper
const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
const Page = ({ navigation, route }) => {
const [enabled, setEnabled] = useState(true)
const [enabled, setEnabled] = useState(false)
const currentPageId = useMemo(() => ++pageId, [])
const intersectionObservers = useRef({})
usePageStatus(navigation, currentPageId)
Expand Down
126 changes: 73 additions & 53 deletions packages/webpack-plugin/lib/platform/style/wx/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,32 @@ module.exports = function getSpec ({ warn, error }) {
}
return result
}
// 解析 translateY(10px) 这种结构
// 括号外作为key返回，括号内作为val返回
const parseValueFromParentheses = (values) => {
let i = -1
const len = values.length
let stack = 0
let start = 0
let key = ''
let val = ''
while (++i < len) {
const char = values[i]
if (char === '(') {
if (stack === 0) {
start = i
key = values.substring(0, start)
}
stack++
} else if (char === ')') {
stack--
if (stack === 0) {
val = values.substring(start, i + 1)
}
}
}
return { key, val }
}
// const getDefaultValueFromVar = (str) => {
// const totalVarExp = /^var\((.+)\)$/
// if (!totalVarExp.test(str)) return str
Expand Down Expand Up @@ -378,61 +404,55 @@ module.exports = function getSpec ({ warn, error }) {
const values = parseValues(value)
const transform = []
values.forEach(item => {
const match = item.match(/([/\w]+)\(([^)]+)\)/)
if (match && match.length >= 3) {
let key = match[1]
const val = match[2]
switch (key) {
case 'translateX':
case 'translateY':
case 'scaleX':
case 'scaleY':
case 'rotateX':
case 'rotateY':
case 'rotateZ':
case 'rotate':
case 'skewX':
case 'skewY':
case 'perspective':
// 单个值处理
transform.push({ [key]: val })
break
case 'matrix':
case 'matrix3d':
transform.push({ [key]: parseValues(val, ',').map(val => +val) })
break
case 'translate':
case 'scale':
case 'skew':
case 'rotate3d': // x y z angle
case 'translate3d': // x y 支持 z不支持
case 'scale3d': // x y 支持 z不支持
{
// 2 个以上的值处理
key = key.replace('3d', '')
const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
// scale(.5) === scaleX(.5) scaleY(.5)
if (vals.length === 1 && key === 'scale') {
vals.push(vals[0])
}
const xyz = ['X', 'Y', 'Z']
transform.push(...vals.map((v, index) => {
if (key !== 'rotate' && index > 1) {
unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
}
return { [`${key}${xyz[index] || ''}`]: v.trim() }
}))
break
let { key, val } = parseValueFromParentheses(item)
switch (key) {
case 'translateX':
case 'translateY':
case 'scaleX':
case 'scaleY':
case 'rotateX':
case 'rotateY':
case 'rotateZ':
case 'rotate':
case 'skewX':
case 'skewY':
case 'perspective':
// 单个值处理
transform.push({ [key]: val })
break
case 'matrix':
case 'matrix3d':
transform.push({ [key]: parseValues(val, ',').map(val => +val) })
break
case 'translate':
case 'scale':
case 'skew':
case 'rotate3d': // x y z angle
case 'translate3d': // x y 支持 z不支持
case 'scale3d': // x y 支持 z不支持
{
// 2 个以上的值处理
key = key.replace('3d', '')
const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
// scale(.5) === scaleX(.5) scaleY(.5)
if (vals.length === 1 && key === 'scale') {
vals.push(vals[0])
}
const xyz = ['X', 'Y', 'Z']
transform.push(...vals.map((v, index) => {
if (key !== 'rotate' && index > 1) {
unsupportedPropError({ prop: `${key}Z`, value, selector }, { mode })
}
case 'translateZ':
case 'scaleZ':
default:
// 不支持的属性处理
unsupportedPropError({ prop, value, selector }, { mode })
break
return { [`${key}${xyz[index] || ''}`]: v.trim() }
}))
break
}
} else {
error(`Property [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
case 'translateZ':
case 'scaleZ':
default:
// 不支持的属性处理
unsupportedPropError({ prop, value, selector }, { mode })
break
}
})
return {
Expand Down
9 changes: 8 additions & 1 deletion packages/webpack-plugin/lib/platform/template/wx/component-config/movable-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ const TAG_NAME = 'movable-view'

module.exports = function ({ print }) {
const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
Expand All @@ -27,7 +29,7 @@ module.exports = function ({ print }) {
android: androidPropLog
},
{
test: /^(inertia|damping|animation)$/,
test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
ios: iosPropLog,
android: androidPropLog
}
Expand All @@ -36,6 +38,11 @@ module.exports = function ({ print }) {
{
test: /^(htouchmove|vtouchmove)$/,
ali: aliEventLog
},
{
test: /^(bindscale)$/,
ios: iosEventLog,
android: androidEventLog
}
]
}
Expand Down
6 changes: 6 additions & 0 deletions packages/webpack-plugin/lib/runtime/components/react/context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export interface IntersectionObserver {
}
}

export interface ScrollViewContextValue {
gestureRef: React.RefObject<any> | null
}

export const MovableAreaContext = createContext({ width: 0, height: 0 })

export const FormContext = createContext<FormContextValue | null>(null)
Expand All @@ -52,3 +56,5 @@ export const IntersectionObserverContext = createContext<IntersectionObserver |
export const RouteContext = createContext<number | null>(null)

export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)

export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
2 changes: 1 addition & 1 deletion packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
'parent-font-size': parentFontSize,
'parent-width': parentWidth,
'parent-height': parentHeight,
'adjust-position': adjustPosition = true,
'adjust-position': adjustPosition = false,
bindinput,
bindfocus,
bindblur,
Expand Down
2 changes: 1 addition & 1 deletion packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* ✘ scale-min
* ✘ scale-max
* ✘ scale-value
* ✘ animation
* ✔ animation
* ✔ bindchange
* ✘ bindscale
* ✔ htouchmove
Expand Down
30 changes: 12 additions & 18 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-rich-text/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
* ✔ nodes
*/
import { View, ViewProps, ViewStyle } from 'react-native'
import { useRef, forwardRef, JSX, useState } from 'react'
import { useRef, forwardRef, JSX, useState, createElement } from 'react'
import useInnerProps from '../getInnerListeners'
import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
import { useTransformStyle, useLayout } from '../utils'
import { useTransformStyle, useLayout, extendObject } from '../utils'
import { WebView, WebViewMessageEvent } from 'react-native-webview'
import { generateHTML } from './html'

Expand Down Expand Up @@ -91,28 +91,22 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
layoutRef
})

const innerProps = useInnerProps(props, {
const innerProps = useInnerProps(props, extendObject({
ref: nodeRef,
style: { ...normalStyle, ...layoutStyle },
...layoutProps
}, [], {
style: extendObject(normalStyle, layoutStyle)
}, layoutProps), [], {
layoutRef
})

const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)

return (
<View
{...innerProps}
>
<WebView
source={{ html: generateHTML(html) }}
onMessage={(event: WebViewMessageEvent) => {
setWebViewHeight(+event.nativeEvent.data)
}}
>
</WebView>
</View>
return createElement(View, innerProps,
createElement(WebView, {
source: { html: generateHTML(html) },
onMessage: (event: WebViewMessageEvent) => {
setWebViewHeight(+event.nativeEvent.data)
}
})
)
})

Expand Down
29 changes: 19 additions & 10 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 @@ -33,13 +33,13 @@
*/
import { ScrollView } from 'react-native-gesture-handler'
import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react'
import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
import { useAnimatedRef } from 'react-native-reanimated'
import { warn } from '@mpxjs/utils'
import useInnerProps, { getCustomEvent } from './getInnerListeners'
import useNodesRef, { HandlerRef } from './useNodesRef'
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
import { IntersectionObserverContext } from './context'
import { IntersectionObserverContext, ScrollViewContext } from './context'

interface ScrollViewProps {
children?: ReactNode;
Expand Down Expand Up @@ -194,6 +194,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
gestureRef: scrollViewRef
})

const contextValue = useMemo(() => {
return {
gestureRef: scrollViewRef
}
}, [])

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

if (scrollX && scrollY) {
Expand Down Expand Up @@ -507,14 +513,17 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
}, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
: undefined
}),
wrapChildren(
props,
{
hasVarDec,
varContext: varContextRef.current,
textStyle,
textProps
}
createElement(ScrollViewContext.Provider,
{ value: contextValue },
wrapChildren(
props,
{
hasVarDec,
varContext: varContextRef.current,
textStyle,
textProps
}
)
)
)
})
Expand Down
Loading

0 comments on commit e88babe

Please sign in to comment.