iOS: add BlurEffect

doric-iOS/Pod/Classes/DoricRegistry.m

@@ -61,6 +61,7 @@
 #import "DoricLocalResourceLoader.h"
 #import "DoricRemoteResourceLoader.h"
 #import "DoricCommonBundleResourceLoader.h"
+#import "DoricBlurEffectViewNode.h"
 
 @interface DoricRegistry ()
 
@@ -133,6 +134,7 @@ - (void)innerRegister {
     [self registerViewNode:DoricSwitchNode.class withName:@"Switch"];
     [self registerViewNode:DoricFlexNode.class withName:@"FlexLayout"];
     [self registerViewNode:DoricGestureContainerNode.class withName:@"GestureContainer"];
+    [self registerViewNode:DoricBlurEffectViewNode .class withName:@"BlurEffect"];
 
     [self.loaderManager registerLoader:[[DoricBundleResourceLoader alloc]
             initWithResourceType:@"mainBundle"

doric-iOS/Pod/Classes/Shader/DoricBlurEffectViewNode.h

@@ -0,0 +1,24 @@
+/*
+ * Copyright [2021] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2021/11/24.
+//
+
+#import <Foundation/Foundation.h>
+#import "DoricStackNode.h"
+
+@interface DoricBlurEffectViewNode : DoricStackNode
+@end

doric-iOS/Pod/Classes/Shader/DoricBlurEffectViewNode.m

@@ -0,0 +1,59 @@
+/*
+ * Copyright [2021] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+// Created by pengfei.zhou on 2021/11/24.
+//
+
+#import <DoricExtensions.h>
+#import "DoricBlurEffectViewNode.h"
+
+@interface DoricBlurEffectViewNode ()
+@property(nonatomic, strong) UIVisualEffectView *visualEffectView;
+@end
+
+@implementation DoricBlurEffectViewNode
+
+- (UIView *)build {
+    UIView *ret = [super build];
+    UIVisualEffect *endEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
+
+    self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:endEffect];
+
+    [ret addSubview:self.visualEffectView];
+    self.visualEffectView.doricLayout.widthSpec = DoricLayoutMost;
+    self.visualEffectView.doricLayout.heightSpec = DoricLayoutMost;
+    return ret;
+}
+
+- (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
+    if ([name isEqualToString:@"radius"]) {
+
+    } else if ([name isEqualToString:@"effectiveRect"]) {
+        NSUInteger x = ((NSNumber *) prop[@"x"]).unsignedIntegerValue;
+        NSUInteger y = ((NSNumber *) prop[@"y"]).unsignedIntegerValue;
+        NSUInteger width = ((NSNumber *) prop[@"width"]).unsignedIntegerValue;
+        NSUInteger height = ((NSNumber *) prop[@"height"]).unsignedIntegerValue;
+        self.visualEffectView.doricLayout.widthSpec = DoricLayoutJust;
+        self.visualEffectView.doricLayout.heightSpec = DoricLayoutJust;
+        self.visualEffectView.doricLayout.width = width;
+        self.visualEffectView.doricLayout.height = height;
+        self.visualEffectView.doricLayout.marginLeft = x;
+        self.visualEffectView.doricLayout.marginTop = y;
+    } else {
+        [super blendView:view forPropName:name propValue:prop];
+    }
+}
+@end

doric-js/index.d.ts

@@ -1105,7 +1105,8 @@ declare module 'doric/lib/src/widget/effect' {
             };
             /**
                 * Specify the radius of blur effect.
-                * If not set, the default is 15.
+                * If not set, the default value is 15.
+                * Suggested value is from 1 to 25.
                 */
             radius?: number;
     }

doric-js/lib/src/widget/effect.d.ts

@@ -13,7 +13,8 @@ export declare class BlurEffect extends Stack {
     };
     /**
      * Specify the radius of blur effect.
-     * If not set, the default is 15.
+     * If not set, the default value is 15.
+     * Suggested value is from 1 to 25.
      */
     radius?: number;
 }

doric-web/dist/index.js

@@ -4313,6 +4313,10 @@ __decorate([
     Property,
     __metadata("design:type", Object)
 ], BlurEffect.prototype, "effectiveRect", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], BlurEffect.prototype, "radius", void 0);
 function blurEffect(views, config) {
     const ret = new BlurEffect;
     ret.layoutConfig = layoutConfig().fit();