jsbox-cview 1.2.2 → 1.2.3

package/components/custom-navigation-bar.ts

@@ -52,7 +52,7 @@
  */
 
 import { Base } from "./base";
-import { ContentView, Label, Button } from "./single-views";
+import { ContentView, Label, Button, Blur } from "./single-views";
 import { SymbolButton } from "./symbol-button";
 import { getTextWidth } from "../utils/uitools";
 
@@ -122,6 +122,8 @@ interface NavigationBarCViews {
   titleViewWrapper?: ContentView | Label;
   contentView?: ContentView;
   toolViewWrapper?: ContentView;
+  bgview?: ContentView | Blur;
+  separator?: ContentView;
 }
 
 export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTypes.BlurOptions> {
@@ -318,19 +320,41 @@ export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewO
         },
         views: this._props.toolView && [this._props.toolView.definition]
       });
-
+      if (this._props.bgcolor) {
+        this.cviews.bgview = new ContentView({
+          props: {
+            bgcolor: this._props.bgcolor
+          },
+          layout: $layout.fill
+        });
+      } else {
+        this.cviews.bgview = new Blur({
+          props: {
+            style: 10
+          },
+          layout: $layout.fill
+        });
+      }
+      this.cviews.separator = new ContentView({
+        props: {
+          bgcolor: $color("separatorColor")
+        },
+        layout: (make, view) => {
+          make.bottom.left.right.inset(0);
+          make.height.equalTo(0.5);
+        }
+      });
       return {
-        type: this._props.bgcolor ? "view" : "blur",
+        type: "view",
         props: {
           id: this.id,
-          style: this._props.bgcolor ? undefined : 10,
-          bgcolor: this._props.bgcolor
         },
         layout: navBarLayouts[this._props.style],
         events: {
           ready: () => (this.style = this.style)
         },
         views: [
+          this.cviews.bgview.definition,
           {
             type: "view",
             props: {},
@@ -340,16 +364,7 @@ export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewO
               this.cviews.toolViewWrapper.definition
             ]
           },
-          {
-            type: "view",
-            props: {
-              bgcolor: $color("separatorColor")
-            },
-            layout: (make, view) => {
-              make.bottom.left.right.inset(0);
-              make.height.equalTo(0.5);
-            }
-          }
+          this.cviews.separator.definition
         ]
       };
     }

package/dist/components/custom-navigation-bar.js

@@ -256,18 +256,42 @@ class CustomNavigationBar extends base_1.Base {
                 },
                 views: this._props.toolView && [this._props.toolView.definition]
             });
+            if (this._props.bgcolor) {
+                this.cviews.bgview = new single_views_1.ContentView({
+                    props: {
+                        bgcolor: this._props.bgcolor
+                    },
+                    layout: $layout.fill
+                });
+            }
+            else {
+                this.cviews.bgview = new single_views_1.Blur({
+                    props: {
+                        style: 10
+                    },
+                    layout: $layout.fill
+                });
+            }
+            this.cviews.separator = new single_views_1.ContentView({
+                props: {
+                    bgcolor: $color("separatorColor")
+                },
+                layout: (make, view) => {
+                    make.bottom.left.right.inset(0);
+                    make.height.equalTo(0.5);
+                }
+            });
             return {
-                type: this._props.bgcolor ? "view" : "blur",
+                type: "view",
                 props: {
                     id: this.id,
-                    style: this._props.bgcolor ? undefined : 10,
-                    bgcolor: this._props.bgcolor
                 },
                 layout: navBarLayouts[this._props.style],
                 events: {
                     ready: () => (this.style = this.style)
                 },
                 views: [
+                    this.cviews.bgview.definition,
                     {
                         type: "view",
                         props: {},
@@ -277,16 +301,7 @@ class CustomNavigationBar extends base_1.Base {
                             this.cviews.toolViewWrapper.definition
                         ]
                     },
-                    {
-                        type: "view",
-                        props: {
-                            bgcolor: $color("separatorColor")
-                        },
-                        layout: (make, view) => {
-                            make.bottom.left.right.inset(0);
-                            make.height.equalTo(0.5);
-                        }
-                    }
+                    this.cviews.separator.definition
                 ]
             };
         };

package/dist/test/custom-navigation-bar.js

@@ -6,6 +6,11 @@ const navbar = new custom_navigation_bar_1.CustomNavigationBar({
         title: "Custom Navigation Bar",
         popButtonEnabled: true,
         popButtonTitle: "Back",
+        rightBarButtonItems: [
+            {
+                symbol: "gear",
+            }
+        ]
     }
 });
 $ui.render({
@@ -18,6 +23,14 @@ $ui.render({
                     $ui.push({
                         views: [navbar.definition]
                     });
+                    $delay(1, () => {
+                        navbar.cviews.bgview.view.alpha = 0.5;
+                        navbar.cviews.separator.view.alpha = 0.5;
+                    });
+                    $delay(2, () => {
+                        navbar.cviews.bgview.view.alpha = 0;
+                        navbar.cviews.separator.view.alpha = 0;
+                    });
                 }
             }
         }]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/custom-navigation-bar.ts

@@ -5,6 +5,11 @@ const navbar = new CustomNavigationBar({
     title: "Custom Navigation Bar",
     popButtonEnabled: true,
     popButtonTitle: "Back",
+    rightBarButtonItems: [
+      {
+        symbol: "gear",
+      }
+    ]
   }
 })
 
@@ -20,6 +25,14 @@ $ui.render({
         $ui.push({
           views: [navbar.definition]
         })
+        $delay(1, () => {
+          navbar.cviews.bgview.view.alpha = 0.5
+          navbar.cviews.separator.view.alpha = 0.5
+        })
+        $delay(2, () => {
+          navbar.cviews.bgview.view.alpha = 0
+          navbar.cviews.separator.view.alpha = 0
+        })
       }
     }
   }]