@smartface/contx - npm Package Compare versions

Comparing version 1.0.13 to 1.1.0

lib/smartface/componentContextPatch.js

@@ -37,3 +37,3 @@ (function (global, factory) {
     function onShow(superOnShow, params) {
-      superOnShow(params);
+      superOnShow && superOnShow(params);
     }
@@ -40,0 +40,0 @@ }

lib/smartface/pageContext.js

@@ -221,2 +221,8 @@ (function (global, factory) {
 				return newState;
+			case "updatePageSafeArea":
+				context.find(target, { setSafeArea: function setSafeArea() {
+						throw new TypeError("Target " + target + " component cannot be found.");
+					} }).setSafeArea(Object.assign({}, action.safeArea));
+
+				return newState;
 			case "invalidate":
@@ -253,3 +259,3 @@ context.map(function (actor) {
 			case 'pushClassNames':
-				var actor = context.find(target).pushClassNames(action.classNames);
+				context.find(target).pushClassNames(action.classNames);
 
@@ -256,0 +262,0 @@ return newState;

lib/smartface/pageContextPatch.js

@@ -33,57 +33,78 @@ (function (global, factory) {
 
-  // monkey patching wrapper for any page.
-  function pageContextPatch(page, name) {
-    page.onLoad = (0, _patchMethod2.default)(page, "onLoad", onLoad);
-    page.onShow = (0, _patchMethod2.default)(page, "onShow", onShow);
-    page.onHide = (0, _patchMethod2.default)(page, "onHide", onHide);
+  function onSafeAreaPaddingChange(onSafeAreaPaddingChange, paddings) {
+    var style = {};
+    paddings.left != undefined && (style.paddingLeft = paddings.left);
+    paddings.right != undefined && (style.paddingRight = paddings.right);
+    paddings.top != undefined && (style.paddingTop = paddings.top);
+    paddings.bottom != undefined && (style.paddingBottom = paddings.bottom);
 
-    page.componentDidEnter = (0, _patchMethod2.default)(page, "componentDidEnter", componentDidEnter);
-    page.onOrientationChange = (0, _patchMethod2.default)(page, "onOrientationChange", onOrientationChange);
+    onSafeAreaPaddingChange && onSafeAreaPaddingChange.call(this, paddings);
 
-    function onLoad(superOnLoad) {
-      superOnLoad && superOnLoad();
-      this.themeContext = Application.theme((0, _pageContext2.default)(page, name, null, null), name);
-    }
+    this.dispatch({
+      type: "updatePageSafeArea",
+      safeArea: style
+    });
 
-    function onHide(superOnHide) {
-      superOnHide && superOnHide();
-    }
+    this.layout.applyLayout();
+  }
 
-    function onShow(superOnShow, data) {
-      superOnShow && superOnShow(data);
+  function onHide(superOnHide) {
+    superOnHide && superOnHide();
+  }
 
-      this.dispatch && this.dispatch({
-        type: "invalidate"
-      });
-      this.dispatch && this.dispatch({
-        type: "forceComponentUpdate",
-        name: "statusbar"
-      });
+  function onShow(superOnShow, data) {
+    superOnShow && superOnShow(data);
 
-      this.layout.applyLayout();
-    }
+    this.dispatch && this.dispatch({
+      type: "invalidate"
+    });
+    this.dispatch && this.dispatch({
+      type: "forceComponentUpdate",
+      name: "statusbar"
+    });
 
-    function onOrientationChange(superOnOrientationChange) {
-      var _this = this;
+    this.layout.applyLayout();
+  }
 
-      superOnOrientationChange && superOnOrientationChange();
+  function onOrientationChange(superOnOrientationChange) {
+    var _this = this;
 
-      this.dispatch({
-        type: "orientationStarted"
+    superOnOrientationChange && superOnOrientationChange();
+
+    this.dispatch({
+      type: "orientationStarted"
+    });
+
+    this.layout.applyLayout();
+
+    // superOnOrientationChange && setTimeout(superOnOrientationChange.bind(this),1);
+    setTimeout(function () {
+      _this.dispatch({
+        type: "orientationEnded"
       });
 
-      this.layout.applyLayout();
+      _this.layout.applyLayout();
+    }, 1);
+  }
 
-      // superOnOrientationChange && setTimeout(superOnOrientationChange.bind(this),1);
-      setTimeout(function () {
-        _this.dispatch({
-          type: "orientationEnded"
-        });
+  function componentDidEnter(componentDidEnter, dispatcher) {
+    componentDidEnter && componentDidEnter(dispatcher) || (this.dispatch = dispatcher);
+  }
 
-        _this.layout.applyLayout();
-      }, 1);
+  // monkey patching wrapper for any page.
+  function pageContextPatch(page, name) {
+    page.onLoad = (0, _patchMethod2.default)(page, "onLoad", onLoad);
+    page.onShow = (0, _patchMethod2.default)(page, "onShow", onShow);
+    page.onHide = (0, _patchMethod2.default)(page, "onHide", onHide);
+
+    page.componentDidEnter = (0, _patchMethod2.default)(page, "componentDidEnter", componentDidEnter);
+    page.onOrientationChange = (0, _patchMethod2.default)(page, "onOrientationChange", onOrientationChange);
+
+    if (page.ios) {
+      page.ios.onSafeAreaPaddingChange = onSafeAreaPaddingChange.bind(page, page.ios.onSafeAreaPaddingChange);
     }
 
-    function componentDidEnter(componentDidEnter, dispatcher) {
-      componentDidEnter && componentDidEnter(dispatcher) || (this.dispatch = dispatcher);
+    function onLoad(superOnLoad) {
+      superOnLoad && superOnLoad();
+      this.themeContext = Application.theme((0, _pageContext2.default)(page, name, null, null), name);
     }
@@ -90,0 +111,0 @@

lib/styling/Stylable.js

@@ -119,2 +119,3 @@ (function (global, factory) {
     userStyle = (0, _merge2.default)(userStyle);
+    var waitedStyle = {};
 
@@ -137,5 +138,22 @@ /**
 
+        _this.setSafeArea = function (area) {
+          _this.safeArea = area;
+          _this.isDirty = true;
+
+          return _this;
+        };
+
+        _this.makeDirty = function () {
+          _this.isDirty = true;
+        };
+
+        _this.clearDirty = function () {
+          _this.isDirty = false;
+        };
+
         _this.updateUserStyle = function (props) {
           userStyle = (0, _merge2.default)(userStyle, props);
           _this.isDirty = true;
+
+          return _this;
         };
@@ -145,2 +163,4 @@
           _this.setStyles(_this.getStyles(), true);
+
+          return _this;
         };
@@ -156,25 +176,48 @@
           _this.isDirty = true;
+
+          return _this;
         };
 
-        _this.setStyles = function (style) {
+        _this.computeAndAssignStyle = function (style) {
           var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-          var reduceDiffStyleHook = _this.hook("reduceDiffStyleHook");
+          var hooks = _this.hook || function (_) {
+            return null;
+          };
+
+          var reduceDiffStyleHook = hooks("reduceDiffStyleHook") || null;
           style = (0, _merge2.default)(style, userStyle);
-          var diffReducer = reduceDiffStyleHook ? reduceDiffStyleHook(_this.styles || {}, style) : function (acc, key) {
-            if (_this.styles[key] !== undefined) {
-              if (_this.styles[key] !== style[key]) {
-                acc[key] = style[key];
-              } else {
-                acc[key] = style[key];
-              }
-            }
 
-            return acc;
-          };
+          var safeAreaProps = {};
 
-          var rawDiff = !force ? Object.keys(style).reduce(diffReducer, {}) : (0, _merge2.default)(style);
+          if (_this.safeArea) {
+            var getNotEmpty = function getNotEmpty(v, y) {
+              return v !== undefined ? v : y !== undefined && y || null;
+            };
 
-          var beforeHook = _this.hook("beforeStyleDiffAssign");
-          var diff = beforeHook && beforeHook(rawDiff) || null;
+            var addValstoSafeAreaIfExists = function addValstoSafeAreaIfExists(val, willAdd) {
+              return willAdd >= 0 && val >= 0 ? val + willAdd : willAdd;
+            };
+            var assigntoSafeAreaIfNotEmpty = function assigntoSafeAreaIfNotEmpty(prop) {
+              return _this.safeArea[prop] !== undefined && (safeAreaProps[prop] = addValstoSafeAreaIfExists(getNotEmpty(style[prop], _this.styles[prop]), _this.safeArea[prop]));
+            };
+
+            assigntoSafeAreaIfNotEmpty("paddingTop");
+            assigntoSafeAreaIfNotEmpty("paddingBottom");
+            assigntoSafeAreaIfNotEmpty("paddingRight");
+            assigntoSafeAreaIfNotEmpty("paddingLeft");
+          }
+
+          var diffReducer = !force && reduceDiffStyleHook ? reduceDiffStyleHook(_this.styles || {}, Object.assign({}, style)) : null;
+
+          var rawDiff = typeof diffReducer === 'function' ? Object.keys(style).reduce(diffReducer, {}) : (0, _merge2.default)(_this.styles, style);
+
+          if (rawDiff) {
+            Object.assign(rawDiff, safeAreaProps);
+            Object.assign(style, safeAreaProps);
+          }
+
+          var beforeHook = hooks("beforeStyleDiffAssign");
+          var diff = beforeHook && beforeHook(rawDiff) || rawDiff;
+
           var comp = name.indexOf("_") === -1 && _this._actorInternal_.component.layout ? _this._actorInternal_.component.layout : _this._actorInternal_.component;
@@ -235,8 +278,27 @@ var hasDiff = diff !== null && Object.keys(diff).length > 0;
 
-          var afterHook = _this.hook("afterStyleDiffAssign");
+          var afterHook = hooks("afterStyleDiffAssign");
           afterHook && (style = afterHook(style));
 
           _this.styles = style;
+
+          return _this;
         };
 
+        _this.applyStyles = function () {
+          var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+          _this.computeAndAssignStyle(waitedStyle, force = false);
+          _this.clearDirty();
+
+          return _this;
+        };
+
+        _this.setStyles = function (style) {
+          var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+          waitedStyle = (0, _merge2.default)(waitedStyle, style);
+          _this.makeDirty();
+          return _this;
+        };
+
         _this.getStyles = function () {
@@ -277,2 +339,4 @@ return _this.styles ? Object.assign({}, _this.styles) : {};
           _this.isDirty = true;
+
+          return _this;
         };
@@ -311,2 +375,3 @@
           _this.styles = null;
+          component.onSafeAreaPaddingChange = null;
           component.dispatch = null;
@@ -313,0 +378,0 @@ component.onDispose && component.onDispose();

lib/styling/StyleContext.js

@@ -99,2 +99,4 @@ (function (global, factory) {
               }
+
+              actor.applyStyles();
             } catch (e) {
@@ -105,4 +107,2 @@ e.message = "While actor's style [" + name + "] is set. " + e.message;
             }
-
-            actor.isDirty = false;
           }
@@ -109,0 +109,0 @@ });

package.json

 {
   "name": "@smartface/contx",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Context Manager",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95860

increased by3.14%

Lines of code

2192

increased by3.06%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes