feat:input align the affect to android

doric-demo/src/InputDemo.ts

@@ -1,5 +1,33 @@
-import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log } from "doric";
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, Color, input, text } from "doric";
 import { title, colors } from "./utils";
+
+
+function getInput(c: Partial<Input>) {
+    const inputView = input(c)
+    const isFocused = text({
+        layoutConfig: {
+            widthSpec: LayoutSpec.MOST,
+            heightSpec: LayoutSpec.JUST,
+        },
+        height: 50,
+    })
+    const inputed = text({
+        layoutConfig: {
+            widthSpec: LayoutSpec.MOST,
+            heightSpec: LayoutSpec.JUST,
+        },
+        height: 50,
+    })
+    inputView.onFocusChange = (onFocusChange) => {
+        isFocused.text = onFocusChange ? `Focused` : `Unfocused`
+    }
+    inputView.onTextChange = (text) => {
+        inputed.text = `Inputed:${text}`
+    }
+    return [inputView, isFocused, inputed]
+}
+
+
 @Entry
 class InputDemo extends Panel {
     build(root: Group) {
@@ -8,33 +36,34 @@ class InputDemo extends Panel {
                 [
 
                     title("Demo"),
-                    (new Input).also(it => {
+                    // ...getInput({
-                        it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
+                    //     layoutConfig: {
-                        it.width = 300
+                    //         widthSpec: LayoutSpec.JUST,
-                        it.maxLength=10;
+                    //         heightSpec: LayoutSpec.FIT,
-                        it.multiline = false
+                    //     },
-                        it.hintText = "HintText"
+                    //     width: 300,
-                        it.textAlignment = Gravity.Left
+                    //     hintText: "Please input something",
-                        it.onTextChange = (s) => {
+                    //     border: {
-                            log(`onTextChange:${s}`)
+                    //         width: 1,
-                        }
+                    //         color: Color.GRAY,
-                        it.onFocusChange = (f) => {
+                    //     },
-                            log(`onFocusChange:${f}`)
+                    //     textSize: 40,
-                        }
+                    //     maxLength: 20,
-                    }),
+                    // }),
-                    (new Input).also(it => {
+                    ...getInput({
-                        it.layoutConfig = layoutConfig().fit()
+                        layoutConfig: {
-                        it.hintText = "HintText"
+                            widthSpec: LayoutSpec.FIT,
-                        it.hintTextColor = colors[2]
+                            heightSpec: LayoutSpec.FIT,
-                        it.textAlignment = Gravity.Left
+                        },
-                        it.textColor = colors[3]
+                        hintText: "Please input something in one line",
-                        it.onTextChange = (s) => {
+                        border: {
-                            log(`onTextChange:${s}`)
+                            width: 1,
-                        }
+                            color: Color.GRAY,
-                        it.onFocusChange = (f) => {
+                        },
-                            log(`onFocusChange:${f}`)
+                        multiline: false,
-                        }
+                        textSize: 20,
-                        it.backgroundColor = colors[1].alpha(0.3)
+                        maxLength: 20,
+                        padding: { top: 10, bottom: 11 }
                     }),
                 ],
                 {

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

@@ -23,8 +23,11 @@
 #import "DoricViewNode.h"
 
 NS_ASSUME_NONNULL_BEGIN
+@interface DoricInputView : UITextView
+@property(nonatomic, strong) UILabel *placeholderLabel;
+@end
 
-@interface DoricInputNode : DoricViewNode<UITextView *>
+@interface DoricInputNode : DoricViewNode<DoricInputView *>
 
 @end
 

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

@@ -27,21 +27,66 @@
 typedef void (^onTextChangeBlock)(NSString *text,DoricInputNode *node);
 typedef void (^onFocusChangeBlock)(BOOL focused,DoricInputNode *node);
 
+@implementation DoricInputView
+
+- (instancetype)init {
+    if (self = [super init]) {
+        self.font = [UIFont systemFontOfSize:12];
+        _placeholderLabel = [UILabel new];
+        _placeholderLabel.numberOfLines = 0;
+        _placeholderLabel.textColor = [UIColor grayColor];
+        _placeholderLabel.userInteractionEnabled = NO;
+        _placeholderLabel.font = self.font;
+        [self insertSubview:_placeholderLabel atIndex:0];
+    }
+    return self;
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    self.placeholderLabel.hidden = self.text.length > 0;
+    if (self.placeholderLabel.hidden) {
+        return;
+    }
+    CGFloat lineFragmentPadding = self.textContainer.lineFragmentPadding;
+    UIEdgeInsets textContainerInset = self.textContainerInset;
+    self.placeholderLabel.x = lineFragmentPadding + textContainerInset.left;
+    self.placeholderLabel.y = textContainerInset.top;
+    self.placeholderLabel.width = self.width - lineFragmentPadding * 2 - textContainerInset.left - textContainerInset.right;
+    [self.placeholderLabel sizeToFit];
+}
+
+- (CGSize)sizeThatFits:(CGSize)size {
+    if (self.text.length > 0) {
+        CGSize ret = [super sizeThatFits:size];
+        return CGSizeMake(ret.width - self.doricLayout.paddingLeft - self.doricLayout.paddingRight, ret.height - self.doricLayout.paddingTop - self.doricLayout.paddingBottom);
+    } else {
+        CGSize ret = [self.placeholderLabel sizeThatFits:size];
+        return CGSizeMake(ret.width, ret.height);
+    }
+}
+
+@end
+
 @interface DoricInputNode()<UITextViewDelegate>
 @property(nonatomic, copy) onTextChangeBlock onTextChange;
 @property(nonatomic, copy) onFocusChangeBlock onFocusShange;
-@property(nonatomic, strong) UILabel *placeholderLabel;
 @property(nonatomic, strong) NSNumber *maxLength;
 @end
 
 @implementation DoricInputNode
-- (UITextView *)build {
+- (DoricInputView *)build {
-    UITextView *v = [[UITextView alloc] init];
+    DoricInputView *v = [[DoricInputView alloc] init];
     v.delegate = self;
+    v.textContainer.lineFragmentPadding = 0;
+    v.doricLayout.paddingTop = v.textContainerInset.top;
+    v.doricLayout.paddingBottom = v.textContainerInset.bottom;
+    v.doricLayout.paddingLeft = v.textContainerInset.left;
+    v.doricLayout.paddingRight = v.textContainerInset.right;
     return v;
 }
 
-- (void)blendView:(UITextView *)view forPropName:(NSString *)name propValue:(id)prop {
+- (void)blendView:(DoricInputView *)view forPropName:(NSString *)name propValue:(id)prop {
     if ([name isEqualToString:@"text"]) {
         view.text = prop;
     } else if ([name isEqualToString:@"textSize"]) {
@@ -65,9 +110,9 @@ - (void)blendView:(UITextView *)view forPropName:(NSString *)name propValue:(id)
             view.textContainer.maximumNumberOfLines = 0;
         }
     } else if ([name isEqualToString:@"hintText"]) {
-        self.placeholderLabel.text = (NSString *)prop;
+        view.placeholderLabel.text = (NSString *)prop;
     } else if ([name isEqualToString:@"hintTextColor"]) {
-        self.placeholderLabel.textColor = DoricColor(prop);
+        view.placeholderLabel.textColor = DoricColor(prop);
     } else if ([name isEqualToString:@"onTextChange"]) {
         if ([prop isKindOfClass:[NSString class]]) {
             self.onTextChange = ^(NSString *text, DoricInputNode *node) {
@@ -95,10 +140,21 @@ - (void)blendView:(UITextView *)view forPropName:(NSString *)name propValue:(id)
 - (void)blend:(NSDictionary *)props {
     [super blend:props];
 }
+- (void)afterBlended:(NSDictionary *)props {
+    [super afterBlended:props];
+    if (self.view.doricLayout.paddingTop != self.view.textContainerInset.top
+        || self.view.doricLayout.paddingLeft != self.view.textContainerInset.left
+        || self.view.doricLayout.paddingBottom != self.view.textContainerInset.bottom
+        || self.view.doricLayout.paddingRight != self.view.textContainerInset.right) {
+        self.view.textContainerInset = UIEdgeInsetsMake(self.view.doricLayout.paddingTop, self.view.doricLayout.paddingLeft, self.view.doricLayout.paddingBottom, self.view.doricLayout.paddingRight);
+    }
+    self.view.placeholderLabel.font = self.view.font;
+    self.view.placeholderLabel.numberOfLines = self.view.textContainer.maximumNumberOfLines;
+}
 
 - (void)requestLayout {
     [super requestLayout];
-     [self updatePlaceholderLabel];
+    [self.view setNeedsLayout];
 }
 
 #pragma mark - Doric-JS api
@@ -149,35 +205,6 @@ - (void)textViewDidChange:(UITextView *)textView {
     if (self.onTextChange) {
         self.onTextChange(textView.text, self);
     }
-    [self updatePlaceholderLabel];
+    [textView setNeedsLayout];
-}
-
-#pragma mark - placeholderLabel
-- (UILabel *)placeholderLabel {
-    if (!_placeholderLabel) {
-        _placeholderLabel = [[UILabel alloc] init];
-        _placeholderLabel.numberOfLines = 0;
-        _placeholderLabel.userInteractionEnabled = NO;
-    }
-    return _placeholderLabel;
-}
-
-- (void)updatePlaceholderLabel {
-    if (self.view.text.length) {
-        [self.placeholderLabel removeFromSuperview];
-        return;
-    } else {
-        [self.view insertSubview:self.placeholderLabel atIndex:0];
-    }
-  
-    self.placeholderLabel.textAlignment = self.view.textAlignment;
-    CGFloat lineFragmentPadding = self.view.textContainer.lineFragmentPadding;
-    UIEdgeInsets textContainerInset = self.view.textContainerInset;
-
-    CGFloat x = lineFragmentPadding + textContainerInset.left;
-    CGFloat y = textContainerInset.top;
-    CGFloat width = CGRectGetWidth(self.view.bounds) - x - lineFragmentPadding - textContainerInset.right;
-    CGFloat height = [self.placeholderLabel sizeThatFits:CGSizeMake(width, 0)].height;
-    self.placeholderLabel.frame = CGRectMake(x, y, width, height);
 }
 @end