tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat:input align the affect to android

Browse Source
This commit is contained in:
pengfei.zhou 2020-05-06 15:11:57 +08:00 committed by osborn
parent 931c06393e
commit 112952d379
3 changed files with 125 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
doric-demo/src/InputDemo.ts
View File

@ -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 => {
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
it.width = 300
it.maxLength=10;
it.multiline = false
it.hintText = "HintText"
it.textAlignment = Gravity.Left
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
}),
(new Input).also(it => {
it.layoutConfig = layoutConfig().fit()
it.hintText = "HintText"
it.hintTextColor = colors[2]
it.textAlignment = Gravity.Left
it.textColor = colors[3]
it.onTextChange = (s) => {
log(`onTextChange:${s}`)
}
it.onFocusChange = (f) => {
log(`onFocusChange:${f}`)
}
it.backgroundColor = colors[1].alpha(0.3)
// ...getInput({
// layoutConfig: {
// widthSpec: LayoutSpec.JUST,
// heightSpec: LayoutSpec.FIT,
// },
// width: 300,
// hintText: "Please input something",
// border: {
// width: 1,
// color: Color.GRAY,
// },
// textSize: 40,
// maxLength: 20,
// }),
...getInput({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
hintText: "Please input something in one line",
border: {
width: 1,
color: Color.GRAY,
},
multiline: false,
textSize: 20,
maxLength: 20,
padding: { top: 10, bottom: 11 }
}),
],
{

5
doric-iOS/Pod/Classes/Shader/DoricInputNode.h
View File

@ -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

101
doric-iOS/Pod/Classes/Shader/DoricInputNode.m
View File

@ -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 {
UITextView *v = [[UITextView alloc] init];
- (DoricInputView *)build {
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];
}
#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);
[textView setNeedsLayout];
}
@end