@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.1

package/lib/runtime/components/react/dist/mpx-text.jsx

@@ -4,12 +4,12 @@
  * ✘ decode
  */
 import { Text } from 'react-native';
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils';
 const _Text = forwardRef((props, ref) => {
-    const { style = {}, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const layoutRef = useRef({});
     const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
@@ -19,22 +19,23 @@ const _Text = forwardRef((props, ref) => {
         parentHeight
     });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: normalStyle,
-        selectable: !!selectable || !!userSelect
+        selectable: !!selectable || !!userSelect,
+        allowFontScaling
     }, [
         'user-select'
     ], {
         layoutRef
     });
-    return (<Text {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-    </Text>);
+    return createElement(Text, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    }));
 });
 _Text.displayName = 'MpxText';
 export default _Text;

package/lib/runtime/components/react/dist/mpx-textarea.jsx

@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
-import { omit } from './utils';
+import { omit, extendObject } from './utils';
 const Textarea = forwardRef((props, ref) => {
     const restProps = omit(props, [
         'ref',
@@ -21,7 +21,12 @@ const Textarea = forwardRef((props, ref) => {
         'multiline',
         'confirm-hold'
     ]);
-    return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
+    return createElement(Input, extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+    }, restProps));
 });
 Textarea.displayName = 'MpxTextarea';
 export default Textarea;

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -5,13 +5,15 @@
  * ✔ hover-stay-time
  */
 import { View, StyleSheet, Image } from 'react-native';
-import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle, extendObject, useHoverStyle } from './utils';
+import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
+import { GestureDetector } from 'react-native-gesture-handler';
 const linearMap = new Map([
     ['top', 0],
     ['bottom', 180],
@@ -148,10 +150,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
             style[key] = val;
         }
     }
-    imageProps.style = {
-        ...imageProps.style,
-        ...style
-    };
+    extendObject(imageProps.style, style);
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
@@ -209,10 +208,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
     }
     // 样式合并
-    imageProps.style = {
-        ...imageProps.style,
-        ...dimensions
-    };
+    extendObject(imageProps.style, dimensions);
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
@@ -385,10 +381,9 @@ function parseLinearGradient(text) {
         !isNaN(numberVal) && locations.push(numberVal);
         return prev;
     }, { colors: [], locations: [] });
-    return {
-        ...linearInfo,
+    return extendObject({}, linearInfo, {
         direction: direction.trim()
-    };
+    });
 }
 function parseBgImage(text) {
     if (!text)
@@ -533,6 +528,11 @@ function wrapImage(imageStyle, innerStyle, enableFastImage) {
   </View>;
 }
 function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
+    enableBackground = enableBackground || !!backgroundStyle;
+    const enableBackgroundRef = useRef(enableBackground);
+    if (enableBackgroundRef.current !== enableBackground) {
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
+    }
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -546,23 +546,18 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
-    const [isHover, setIsHover] = useState(false);
+    const { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     // 默认样式
-    const defaultStyle = {
-        // flex 布局相关的默认样式
-        ...style.display === 'flex' && {
+    const defaultStyle = style.display === 'flex'
+        ? {
             flexDirection: 'row',
             flexBasis: 'auto',
             flexShrink: 1,
             flexWrap: 'nowrap'
         }
-    };
-    const styleObj = {
-        ...defaultStyle,
-        ...style,
-        ...(isHover ? hoverStyle : null)
-    };
+        : {};
+    const { isHover, enableHoverStyle, gesture } = useHoverStyle({ hoverStyle, hoverStartTime, hoverStayTime });
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
@@ -570,68 +565,22 @@ const _View = forwardRef((viewProps, ref) => {
         parentWidth,
         parentHeight
     });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
-    enableBackground = enableBackground || !!backgroundStyle;
-    const enableBackgroundRef = useRef(enableBackground);
-    if (enableBackgroundRef.current !== enableBackground) {
-        throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
-    }
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle
+        style: normalStyle
     });
-    const dataRef = useRef({});
-    useEffect(() => {
-        return () => {
-            dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-            dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        };
-    }, []);
-    const setStartTimer = () => {
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.startTimer = setTimeout(() => {
-            setIsHover(true);
-        }, +hoverStartTime);
-    };
-    const setStayTimer = () => {
-        dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer);
-        dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer);
-        dataRef.current.stayTimer = setTimeout(() => {
-            setIsHover(false);
-        }, +hoverStayTime);
-    };
-    function onTouchStart(e) {
-        const { bindtouchstart } = props;
-        bindtouchstart && bindtouchstart(e);
-        setStartTimer();
-    }
-    function onTouchEnd(e) {
-        const { bindtouchend } = props;
-        bindtouchend && bindtouchend(e);
-        setStayTimer();
-    }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
-    enableAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableAnimation);
-    if (enableAnimationRef.current !== enableAnimation) {
-        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    const finalStyle = enableAnimation
-        ? useAnimationHooks({
-            animation,
-            style: viewStyle
-        })
-        : viewStyle;
-    const innerProps = useInnerProps(props, {
+    const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    const { enableStyleAnimation, animationStyle } = useAnimationHooks({
+        enableAnimation,
+        animation,
+        style: viewStyle
+    });
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle,
-        ...layoutProps,
-        ...(hoverStyle && {
-            bindtouchstart: onTouchStart,
-            bindtouchend: onTouchEnd
-        })
-    }, [
+        style: enableStyleAnimation ? [viewStyle, animationStyle] : viewStyle
+    }, layoutProps), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -641,7 +590,7 @@ const _View = forwardRef((viewProps, ref) => {
     });
     const childNode = wrapWithChildren(props, {
         hasVarDec,
-        enableBackground: enableBackgroundRef.current,
+        enableBackground,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
@@ -649,13 +598,12 @@ const _View = forwardRef((viewProps, ref) => {
         innerStyle,
         enableFastImage
     });
-    return enableAnimation
-        ? (<Animated.View {...innerProps}>
-      {childNode}
-    </Animated.View>)
-        : (<View {...innerProps}>
-      {childNode}
-    </View>);
+    const BaseComponent = enableStyleAnimation
+        ? createElement(Animated.View, innerProps, childNode)
+        : createElement(View, innerProps, childNode);
+    return enableHoverStyle
+        ? createElement(GestureDetector, { gesture }, BaseComponent)
+        : BaseComponent;
 });
 _View.displayName = 'MpxView';
 export default _View;

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,19 +1,58 @@
-import { forwardRef, useEffect, useRef, useContext, useMemo } from 'react';
-import { noop, warn } from '@mpxjs/utils';
-import { Portal } from '@ant-design/react-native';
+import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react';
+import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils';
+import Portal from './mpx-portal';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
-import { getCurrentPage } from './utils';
+import { getCurrentPage, extendObject } from './utils';
 import { RouteContext } from './context';
+import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native';
+const styles = StyleSheet.create({
+    loadErrorContext: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    loadErrorText: {
+        fontSize: 12,
+        color: '#666666',
+        paddingTop: '40%',
+        paddingBottom: 20,
+        paddingLeft: '10%',
+        paddingRight: '10%',
+        textAlign: 'center'
+    },
+    loadErrorButton: {
+        color: '#666666',
+        textAlign: 'center',
+        padding: 10,
+        borderColor: '#666666',
+        borderStyle: 'solid',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 10
+    }
+});
 const _WebView = forwardRef((props, ref) => {
-    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src, bindmessage, bindload, binderror } = props;
+    const mpx = global.__mpx;
+    const errorText = {
+        'zh-CN': {
+            text: '网络不可用，请检查网络设置',
+            button: '重新加载'
+        },
+        'en-US': {
+            text: 'The network is not available. Please check the network settings',
+            button: 'Reload'
+        }
+    };
+    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
     const pageId = useContext(RouteContext);
+    const [pageLoadErr, setPageLoadErr] = useState(false);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
+    const webViewRef = useRef(null);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -21,31 +60,58 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const webViewRef = useRef(null);
-    useNodesRef(props, ref, webViewRef, {
-        defaultStyle: defaultWebViewStyle
-    });
-    const _messageList = useRef([]);
-    const handleUnload = () => {
-        // 这里是 WebView 销毁前执行的逻辑
-        bindmessage(getCustomEvent('messsage', {}, {
-            detail: {
-                data: _messageList.current
-            },
-            layoutRef: webViewRef
-        }));
-    };
-    useEffect(() => {
-        if (currentPage) {
-            currentPage.__webViewUrl = src;
+    const canGoBack = useRef(false);
+    const onAndroidBackPress = useCallback(() => {
+        if (canGoBack.current) {
+            webViewRef.current?.goBack();
+            return true;
+        }
+        return false;
+    }, [canGoBack]);
+    const beforeRemoveHandle = useCallback((e) => {
+        if (canGoBack.current) {
+            webViewRef.current?.goBack();
+            e.preventDefault();
+        }
+    }, [canGoBack]);
+    const navigation = getFocusedNavigation();
+    // ios 16以下版本 的hash会被转义，因此对于iOS环境下在页面load之后再注入hash部分的逻辑
+    let [baseUrl, hashParams = ''] = src.split('#');
+    if (hashParams)
+        hashParams = '#' + hashParams;
+    const source = useMemo(() => {
+        if (Platform.OS === 'ios') {
+            return { uri: baseUrl };
+        }
+        return { uri: baseUrl + hashParams };
+    }, [baseUrl, hashParams]);
+    const hashInjectedJavascript = useMemo(() => {
+        if (Platform.OS === 'ios' && hashParams) {
+            return `(function() {
+        try {
+          location.hash = '${hashParams}';
+        } catch(e) {
         }
-    }, [src, currentPage]);
+      })()`;
+        }
+        return '';
+    }, [hashParams]);
+    navigation?.addListener('beforeRemove', beforeRemoveHandle);
     useEffect(() => {
-        // 组件卸载时执行
-        return () => {
-            handleUnload();
-        };
+        if (__mpx_mode__ === 'android') {
+            BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
+            return () => {
+                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+                navigation?.removeListener('beforeRemove', beforeRemoveHandle);
+            };
+        }
     }, []);
+    useNodesRef(props, ref, webViewRef, {
+        style: defaultWebViewStyle
+    });
+    if (!src) {
+        return null;
+    }
     const _load = function (res) {
         const result = {
             type: 'load',
@@ -54,9 +120,10 @@ const _WebView = forwardRef((props, ref) => {
                 src: res.nativeEvent?.url
             }
         };
-        bindload(result);
+        bindload?.(result);
     };
     const _error = function (res) {
+        setPageLoadErr(true);
         const result = {
             type: 'error',
             timeStamp: res.timeStamp,
@@ -64,13 +131,55 @@ const _WebView = forwardRef((props, ref) => {
                 src: ''
             }
         };
-        binderror(result);
+        binderror && binderror(result);
+    };
+    const _reload = function () {
+        setPageLoadErr(false);
+    };
+    const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+      ${hashInjectedJavascript}
+    }
+    true;
+  `;
+    const sendMessage = function (params) {
+        return `
+      window.mpxWebviewMessageCallback(${params})
+      true;
+    `;
     };
     const _changeUrl = function (navState) {
-        if (currentPage) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            canGoBack.current = navState.canGoBack;
             currentPage.__webViewUrl = navState.url;
         }
     };
+    const _onLoadProgress = function (event) {
+        if (__mpx_mode__ === 'android') {
+            canGoBack.current = event.nativeEvent.canGoBack;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -81,47 +190,97 @@ const _WebView = forwardRef((props, ref) => {
                 data = JSON.parse(nativeEventData);
             }
         }
-        catch (e) {
-            data = {};
-        }
+        catch (e) { }
+        const args = data.args;
         const postData = data.payload || {};
-        switch (data.type) {
+        const params = Array.isArray(args) ? args : [postData];
+        const type = data.type;
+        switch (type) {
+            case 'setTitle':
+                { // case下不允许直接声明，包个块解决该问题
+                    const title = postData._documentTitle;
+                    if (title) {
+                        navigation && navigation.setOptions({ title });
+                    }
+                }
+                break;
             case 'postMessage':
-                _messageList.current.push(postData.data);
+                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                    detail: {
+                        data: params[0]?.data
+                    }
+                }));
                 asyncCallback = Promise.resolve({
                     errMsg: 'invokeWebappApi:ok'
                 });
                 break;
             case 'navigateTo':
-                asyncCallback = navObj.navigateTo(postData);
+                asyncCallback = navObj.navigateTo(...params);
                 break;
             case 'navigateBack':
-                asyncCallback = navObj.navigateBack(postData);
+                asyncCallback = navObj.navigateBack(...params);
                 break;
             case 'redirectTo':
-                asyncCallback = navObj.redirectTo(postData);
+                asyncCallback = navObj.redirectTo(...params);
                 break;
             case 'switchTab':
-                asyncCallback = navObj.switchTab(postData);
+                asyncCallback = navObj.switchTab(...params);
                 break;
             case 'reLaunch':
-                asyncCallback = navObj.reLaunch(postData);
+                asyncCallback = navObj.reLaunch(...params);
+                break;
+            default:
+                if (type) {
+                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    if (isFunction(implement)) {
+                        asyncCallback = Promise.resolve(implement(...params));
+                    }
+                    else {
+                        /* eslint-disable prefer-promise-reject-errors */
+                        asyncCallback = Promise.reject({
+                            errMsg: `未在apiImplementations中配置${type}方法`
+                        });
+                    }
+                }
                 break;
         }
         asyncCallback && asyncCallback.then((res) => {
             if (webViewRef.current?.postMessage) {
-                const test = JSON.stringify({
-                    type: data.type,
+                const result = JSON.stringify({
+                    type,
                     callbackId: data.callbackId,
                     result: res
                 });
-                webViewRef.current.postMessage(test);
+                webViewRef.current.injectJavaScript(sendMessage(result));
+            }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const result = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.injectJavaScript(sendMessage(result));
             }
         });
     };
-    return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} onNavigationStateChange={_changeUrl} javaScriptEnabled={true}></WebView>
-  </Portal>);
+    const events = {};
+    if (bindload) {
+        extendObject(events, {
+            onLoad: _load
+        });
+    }
+    extendObject(events, {
+        onError: _error
+    });
+    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+            ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>)
+            : (<WebView style={defaultWebViewStyle} source={source} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} allowsBackForwardNavigationGestures={true} {...events}></WebView>)}
+      </Portal>);
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;

package/lib/runtime/components/react/dist/pickerFaces.js

@@ -30,6 +30,9 @@ export const createFaces = (itemHeight, visibleCount) => {
             for (let i = 0; i < index; i++) {
                 offset += freeSpaces[i];
             }
+            if (index === 0) {
+                offset *= 0.6;
+            }
             return offset;
         });
         return [screenHeights, offsets];
@@ -37,15 +40,16 @@ export const createFaces = (itemHeight, visibleCount) => {
     const getOpacity = (index) => {
         const map = {
             0: 0,
-            1: 0.2,
-            2: 0.35,
-            3: 0.45,
-            4: 0.5
+            1: 0.8,
+            2: 0.9 // 0.35
+            // 3: 0.45, // 0.45
+            // 4: 0.5 // 0.5
         };
-        return map[index] ?? Math.min(1, map[4] + index * 0.5);
+        return map[index] ?? Math.min(1, map[2] + index * 0.05);
     };
     const degrees = getDegreesRelativeCenter();
     const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    const scales = [0.973, 0.9, 0.8];
     return [
         // top items
         ...degrees
@@ -55,12 +59,13 @@ export const createFaces = (itemHeight, visibleCount) => {
                 deg: degree,
                 opacity: getOpacity(degrees.length - 1 - index),
                 offsetY: -1 * offsets[index],
+                scale: scales[index],
                 screenHeight: screenHeight[index]
             };
         })
             .reverse(),
         // center item
-        { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1, screenHeight: itemHeight },
         // bottom items
         ...degrees.map((degree, index) => {
             return {
@@ -68,6 +73,7 @@ export const createFaces = (itemHeight, visibleCount) => {
                 deg: -1 * degree,
                 opacity: getOpacity(degrees.length - 1 - index),
                 offsetY: offsets[index],
+                scale: scales[index],
                 screenHeight: screenHeight[index]
             };
         })

package/lib/runtime/components/react/dist/pickerVIewContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const PickerViewColumnAnimationContext = createContext(undefined);
+export const usePickerViewColumnAnimationContext = () => {
+    const value = useContext(PickerViewColumnAnimationContext);
+    if (value === undefined) {
+        throw new Error('usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!');
+    }
+    return value;
+};