glpb-components-rn - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "glpb-components-rn",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React Native components interface for page builder",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

src/base-wrapper/base-wrapper.js

@@ -20,2 +20,28 @@ /**
 
+    setStyle : function( style ){
+        this.style = $.extend( this.style, style );
+
+        //遍历style属性,将 '20' 这类字符串形式的数值,转换成 float
+        const numberValueKeys = [
+            'width', 'height',
+            'maxWidth', 'maxHeight', 'minWidth', 'minHeight',
+            'marginTop', 'marginRight', 'marginBottom', 'marginLeft',
+            'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+            'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+            'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius',
+            'top', 'right', 'bottom', 'left',
+            'fontSize', 'lineHeight',
+            'opacity','zIndex'
+        ];
+        style = this.style;
+        for( let name in style ){
+            if( style.hasOwnProperty(name) && numberValueKeys.indexOf(name) >= 0 ){
+                style[name] = parseFloat( style[name] );
+            }
+        }
+
+        let cssStyle = this.translateStyle( this.style );
+        this.updateCSSStyle( cssStyle );
+    },
+
     translateStyle : function( rnStyle ){
@@ -22,0 +48,0 @@ return rnUtils.rnStyle2WebStyle( rnStyle );

src/components/glpb-rn-image/glpb-rn-image.js

@@ -22,3 +22,3 @@ /**
         componentName : 'pbrn_image',
-        componentNameZh : 'RN:单个图片',
+        componentNameZh : '单个图片',
         componentCategory : ComponentBase.CATEGORY.UI,
@@ -34,5 +34,8 @@ platform : ComponentBase.PLATFORM.REACT_NATIVE,
                 position : 'relative',
-                height : '100',
-                width : '100',
-                margin : '0 auto',
+                height : '375',
+                width : '200',
+                marginTop : '0',
+                marginRight : '0',
+                marginBottom : '0',
+                marginLeft : '0',
                 zIndex : 10
@@ -39,0 +42,0 @@ };

src/index.js

@@ -7,2 +7,3 @@ /**
 
+////////////////  react native 中的组件样式尺寸/字体大小, 都是用在  scale=1  时的大小 ///////////////
 
@@ -16,2 +17,5 @@ const glpbCommon = require('glpb-components-common');
 const Image = require('./components/glpb-rn-image/glpb-rn-image.js');
+const FundListItem = require('./components/fund-list-item/fund-list-item.js');
+const FOFListItem = require('./components/fof-list-item/fof-list-item.js');
+const Link = require('./components/link/link.js');
 
@@ -22,3 +26,6 @@
 
-    Image
+    Image,
+    FundListItem,
+    FOFListItem,
+    Link
 
@@ -25,0 +32,0 @@ };

src/utils/utils.js

@@ -14,14 +14,3 @@ /**
 
-
 /**
- * 根据PSD上 750px宽的屏幕里, 量出来的 px 数值, 计算当前手机屏幕上等比例的数值
- * @param pxOf750Screen {number} 750px宽度的PSD设计稿里,量出的距离数值
- * @returns {number} 当前屏幕下对应的距离
- */
-utils.px2dp = function( pxOf750Screen ){
-    pxOf750Screen = parseInt( pxOf750Screen, 10);
-    return pxOf750Screen / 2;
-};
-
-/**
  * 将 react native 中使用的 样式,转换成 web 中的版本
@@ -35,4 +24,23 @@ * react native 中的数值都不带单位, 默认是 DP 为单位,需要转换成 px 或 rem
 
-    
-    return out;
+    //rn style 中 **不能**  包含嵌套的对象, 只能是扁平的JSON
+    for( let name in rnStyle ){
+        if( rnStyle.hasOwnProperty(name) ){
+            let value = rnStyle[name];
+            if( typeof value === 'string' ){
+                //RN的组件样式, **禁止**  使用 px 作为单位
+                value = value.replace(/(\d+)px/g, function( a, num){
+                    console.warn('react native 的组件样式, **禁止** 使用 px 作为单位!!: ', name, value);
+                    return num;
+                });
+            }
+            if( /^\d+/.test(value) ){
+                //全部是数字, 直接加上  px
+                value = value + 'px';
+            }
+            out[name] = value;
+        }
+    }
+
+
+    return commonUtils.translateComponentStyle( out );
 };
@@ -39,0 +47,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16386

increased by195.94%

Number of package files

12

increased by100%

Lines of code

407

increased by192.81%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes