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

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,12 +5,13 @@
  * ✔ 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 } from './utils';
+import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 const linearMap = new Map([
     ['top', 0],
@@ -148,10 +149,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 +207,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 +380,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)
@@ -549,20 +543,15 @@ const _View = forwardRef((viewProps, ref) => {
     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 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 styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
@@ -570,15 +559,15 @@ const _View = forwardRef((viewProps, ref) => {
         parentWidth,
         parentHeight
     });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    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.');
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
     }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle
+        style: normalStyle
     });
     const dataRef = useRef({});
     useEffect(() => {
@@ -611,27 +600,27 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
+    const viewStyle = extendObject({}, 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.');
+        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
-        })
+    const finalStyle = enableAnimationRef.current
+        ? [viewStyle, useAnimationHooks({
+                animation,
+                style: viewStyle
+            })]
         : viewStyle;
-    const innerProps = useInnerProps(props, {
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: finalStyle,
-        ...layoutProps,
-        ...(hoverStyle && {
+        style: finalStyle
+    }, layoutProps, hoverStyle
+        ? {
             bindtouchstart: onTouchStart,
             bindtouchend: onTouchEnd
-        })
-    }, [
+        }
+        : {}), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -650,12 +639,8 @@ const _View = forwardRef((viewProps, ref) => {
         enableFastImage
     });
     return enableAnimation
-        ? (<Animated.View {...innerProps}>
-      {childNode}
-    </Animated.View>)
-        : (<View {...innerProps}>
-      {childNode}
-    </View>);
+        ? createElement(Animated.View, innerProps, childNode)
+        : createElement(View, innerProps, childNode);
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -1,19 +1,21 @@
-import { forwardRef, useEffect, useRef, useContext, useMemo } from 'react';
-import { noop, warn } from '@mpxjs/utils';
+import { forwardRef, useRef, useContext, useMemo, createElement } from 'react';
+import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils';
 import { Portal } from '@ant-design/react-native';
 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';
 const _WebView = forwardRef((props, ref) => {
-    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src, bindmessage, bindload, binderror } = props;
+    const mpx = global.__mpx;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
     const pageId = useContext(RouteContext);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
+    const webViewRef = useRef(null);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -21,31 +23,12 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const webViewRef = useRef(null);
     useNodesRef(props, ref, webViewRef, {
-        defaultStyle: defaultWebViewStyle
+        style: defaultWebViewStyle
     });
-    const _messageList = useRef([]);
-    const handleUnload = () => {
-        // 这里是 WebView 销毁前执行的逻辑
-        bindmessage(getCustomEvent('messsage', {}, {
-            detail: {
-                data: _messageList.current
-            },
-            layoutRef: webViewRef
-        }));
-    };
-    useEffect(() => {
-        if (currentPage) {
-            currentPage.__webViewUrl = src;
-        }
-    }, [src, currentPage]);
-    useEffect(() => {
-        // 组件卸载时执行
-        return () => {
-            handleUnload();
-        };
-    }, []);
+    if (!src) {
+        return null;
+    }
     const _load = function (res) {
         const result = {
             type: 'load',
@@ -66,8 +49,33 @@ const _WebView = forwardRef((props, ref) => {
         };
         binderror(result);
     };
+    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
+        }
+      });
+    }
+  `;
     const _changeUrl = function (navState) {
-        if (currentPage) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
             currentPage.__webViewUrl = navState.url;
         }
     };
@@ -81,47 +89,102 @@ 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) {
+                        const navigation = getFocusedNavigation();
+                        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,
+                    type,
                     callbackId: data.callbackId,
                     result: res
                 });
                 webViewRef.current.postMessage(test);
             }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const test = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.postMessage(test);
+            }
         });
     };
-    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
+        });
+    }
+    if (binderror) {
+        extendObject(events, {
+            onError: _error
+        });
+    }
+    extendObject(events, {
+        onMessage: _message
+    });
+    return createElement(Portal, null, createElement(WebView, extendObject({
+        style: defaultWebViewStyle,
+        source: { uri: src },
+        ref: webViewRef,
+        javaScriptEnabled: true,
+        onNavigationStateChange: _changeUrl
+    }, events)));
 });
 _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 = [1, 0.925, 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.031, 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;
+};

package/lib/runtime/components/react/dist/pickerViewMask.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+const _PickerViewMask = ({ itemHeight, maskContainerStyle }) => {
+    return (<View style={[styles.overlayContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }}/>
+      <View style={{ height: itemHeight }}/>
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    overlayContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 100
+    }
+});
+_PickerViewMask.displayName = 'MpxPickerViewMask';
+export default _PickerViewMask;

package/lib/runtime/components/react/dist/{pickerOverlay.jsx → pickerViewOverlay.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }) => {
+const _PickerViewOverlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }) => {
     return (<View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
       <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]}/>
     </View>);
@@ -9,7 +9,8 @@ const styles = StyleSheet.create({
     overlayContainer: {
         ...StyleSheet.absoluteFillObject,
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        zIndex: 200
     },
     selection: {
         borderTopWidth: 1,
@@ -18,4 +19,5 @@ const styles = StyleSheet.create({
         alignSelf: 'stretch'
     }
 });
-export default React.memo(Overlay);
+_PickerViewOverlay.displayName = 'MpxPickerViewOverlay';
+export default _PickerViewOverlay;

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

@@ -47,9 +47,32 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr) => {
-    const values = transformStr.trim().split(/\s+/);
+    const values = parseValues(transformStr);
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\(([^)]+)\)/);
@@ -73,7 +96,7 @@ const parseTransform = (transformStr) => {
                     break;
                 case 'matrix':
                 case 'matrix3d':
-                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
                     break;
                 case 'translate':
                 case 'scale':
@@ -84,8 +107,8 @@ const parseTransform = (transformStr) => {
                     {
                         // 2 个以上的值处理
                         key = key.replace('3d', '');
-                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        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]);
                         }
@@ -183,11 +206,14 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
-                let toVal = (rules.get(key) || transform.get(key));
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (toVal === undefined) {
-                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
-                }
+                const toVal = rules.get(key) !== undefined
+                    ? rules.get(key)
+                    : transform.get(key) !== undefined
+                        ? transform.get(key)
+                        : index > 0
+                            ? lastValueMap[key]
+                            : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -298,6 +324,6 @@ export default function useAnimationHooks(props) {
                 styles[key] = shareValMap[key].value;
             }
             return styles;
-        }, Object.assign({}, originalStyle));
+        }, {});
     });
 }