react-jsbox - npm Package Compare versions

Comparing version 1.1.5-beta to 1.1.6-beta

package.json

 {
   "name": "react-jsbox",
-  "version": "1.1.5-beta",
+  "version": "1.1.6-beta",
   "description": "A custom React renderer for writing JSBox apps in React.",
@@ -5,0 +5,0 @@ "keywords": [

src/components/view.js

 import {hasOwnProperty} from '../helper'
-import {HIGHLIGHT_UPDATES_COLORS} from '../constants'
 export default class View {
   constructor(type, props) {
-    const {layout, events, animate, borderWidth = 0, borderColor = null} = props
+    const {layout, events, animate} = props
     this._element = $ui.create({
@@ -13,4 +12,2 @@ type,
     this._animate = animate
-    this._borderWidth = borderWidth
-    this._borderColor = borderColor
   }
@@ -22,6 +19,2 @@
 
-  _borderWidth = null
-
-  _borderColor = null
-
   get element() {
@@ -32,3 +25,3 @@ return this._element
   appendChild(child) {
-    this.element.ocValue().$addSubview(child.element)
+    this.element.add(child.element)
   }
@@ -41,3 +34,3 @@
   insertBefore(child, beforeChild) {
-    this.element.ocValue().$insertSubview_belowSubview(child.element, beforeChild.element)
+    this.element.insertBelow(child.element, beforeChild.element)
   }
@@ -47,18 +40,3 @@
     const element = this.element
-    const __REACT_JSBOX_HIGHLIGHT_UPDATES__ = global.__REACT_JSBOX_HIGHLIGHT_UPDATES__
-    if (__REACT_JSBOX_HIGHLIGHT_UPDATES__) {
-      if (hasOwnProperty.call(updatePayload, 'borderWidth')) {
-        this._borderWidth = updatePayload.borderWidth
-      }
-      if (hasOwnProperty.call(updatePayload, 'borderColor')) {
-        this._borderColor = updatePayload._borderColor
-      }
-      const color = HIGHLIGHT_UPDATES_COLORS[0]
-      element.borderWidth = Math.max(this._borderWidth, 1)
-      element.borderColor = $color(color)
-      setTimeout(() => {
-        element.borderWidth = this._borderWidth
-        element.borderColor = this._borderColor
-      }, 300)
-    }
+
     if (hasOwnProperty.call(updatePayload, 'animate')) {
@@ -68,2 +46,3 @@ this._animate = updatePayload.animate
     }
+
     if (this._animate) {
@@ -77,2 +56,3 @@ const {duration = 0.4, damping = 0, velocity = 0, options = 0, completion = () => {}} = this._animate
           })
+          this.showOverlay()
         },
@@ -88,3 +68,28 @@ damping,
     })
+    this.showOverlay()
   }
+
+  showOverlay() {
+    if (!global.__REACT_JSBOX_HIGHLIGHT_UPDATES__) {
+      return
+    }
+    const {cornerRadius, smoothCorners, size} = this.element
+    const overlayView = $ui.create({
+      type: 'view',
+      props: {
+        frame: $rect(0, 0, size.width, size.height),
+        alpha: 0.8,
+        cornerRadius,
+        smoothCorners,
+        bgcolor: $color('clear'),
+        borderColor: $color('#37afa9'),
+        borderWidth: 2,
+        userInteractionEnabled: false
+      }
+    })
+    this.element.add(overlayView)
+    setTimeout(() => {
+      overlayView.remove()
+    }, 300)
+  }
 }

src/hostconfig.js

@@ -81,3 +81,3 @@ import view from './components/view'
     const parent = parentInstance.element || parentInstance
-    parent.ocValue().$addSubview(child.element)
+    parent.add(child.element)
   },
@@ -101,3 +101,3 @@
     const parent = parentInstance.element || parentInstance
-    parent.ocValue().$insertSubview_belowSubview(child.element, beforeChild.element)
+    parent.insertBelow(child.element, beforeChild.element)
   },
@@ -104,0 +104,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

112128

decreased by-0.64%

Number of package files

24

decreased by-4%

Lines of code

786

decreased by-1.13%

No dependency changes