Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitac2e6a0

Browse files
authored
feat(TextField): support css white-space and text-overflow (#10737)
1 parent8979ad8 commitac2e6a0

File tree

6 files changed

+52
-12
lines changed

6 files changed

+52
-12
lines changed

‎apps/toolbox/src/app.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,4 +260,10 @@ Button {
260260

261261
.no-shadow {
262262
box-shadow: none;
263+
}
264+
265+
.truncate {
266+
overflow: hidden;
267+
text-overflow: ellipsis;
268+
white-space: nowrap;
263269
}

‎apps/toolbox/src/pages/forms.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<TextViewhint="Type text..." style.placeholderColor="silver"textChange="{{textChangeArea}}"color="black"width="80%"borderColor="silver"borderWidth="1"height="200"borderRadius="4"fontSize="14">
2525
</TextView>
2626

27+
<Labeltext="TextField white-space + text-overflow"fontWeight="bold"marginTop="12" />
28+
<TextFieldtext="https://a.very.long.url.that.needs.to.be.truncated.com/"class="truncate"marginTop="6"backgroundColor="#efefef"padding="8"fontSize="18"height="60">
29+
</TextField>
30+
2731
</StackLayout>
2832
</ScrollView>
2933
</Page>

‎packages/core/core-types/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export namespace CoreTypes {
9191
exportconstlowercase='lowercase';
9292
}
9393

94-
exporttypeWhiteSpaceType='normal'|'nowrap'|CSSWideKeywords;
94+
exporttypeWhiteSpaceType='normal'|'nowrap'|'wrap'|CSSWideKeywords;
9595
exportnamespaceWhiteSpace{
9696
exportconstnormal='normal';
9797
exportconstnowrap='nowrap';

‎packages/core/ui/text-base/text-base-common.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,7 @@ export const textStrokeProperty = new InheritedCssProperty<Style, string | Strok
318318
});
319319
textStrokeProperty.register(Style);
320320

321-
constwhiteSpaceConverter=makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal','nowrap'));
321+
constwhiteSpaceConverter=makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal','nowrap','wrap'));
322322
exportconstwhiteSpaceProperty=newInheritedCssProperty<Style,CoreTypes.WhiteSpaceType>({
323323
name:'whiteSpace',
324324
cssName:'white-space',

‎packages/core/ui/text-field/index.android.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import{TextFieldBase,secureProperty}from'./text-field-common';
2-
import{whiteSpaceProperty}from'../text-base';
32
import{keyboardTypeProperty}from'../editable-text-base';
4-
import{CoreTypes}from'../../core-types';
53

64
export*from'./text-field-common';
75

@@ -96,13 +94,6 @@ export class TextField extends TextFieldBase {
9694

9795
this._setInputType(inputType);
9896
}
99-
100-
[whiteSpaceProperty.getDefault]():CoreTypes.WhiteSpaceType{
101-
return'nowrap';
102-
}
103-
[whiteSpaceProperty.setNative](value:CoreTypes.WhiteSpaceType){
104-
// Don't change it otherwise TextField will go to multiline mode.
105-
}
10697
}
10798

10899
TextField.prototype._isSingleLine=true;

‎packages/core/ui/text-field/index.ios.ts‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{TextFieldBase,secureProperty}from'./text-field-common';
2-
import{textProperty}from'../text-base';
2+
import{textOverflowProperty,textProperty,whiteSpaceProperty}from'../text-base';
33
import{hintProperty,placeholderColorProperty,_updateCharactersInRangeReplacementString}from'../editable-text-base';
44
import{CoreTypes}from'../../core-types';
55
import{Color}from'../../color';
@@ -317,4 +317,43 @@ export class TextField extends TextFieldBase {
317317
[paddingLeftProperty.setNative](value:CoreTypes.LengthType){
318318
// Padding is realized via UITextFieldImpl.textRectForBounds method
319319
}
320+
321+
[whiteSpaceProperty.setNative](value:CoreTypes.WhiteSpaceType){
322+
this.adjustLineBreak();
323+
}
324+
325+
[textOverflowProperty.setNative](value:CoreTypes.TextOverflowType){
326+
this.adjustLineBreak();
327+
}
328+
329+
privateadjustLineBreak(){
330+
letparagraphStyle:NSMutableParagraphStyle;
331+
332+
switch(this.whiteSpace){
333+
case'nowrap':
334+
switch(this.textOverflow){
335+
case'clip':
336+
paragraphStyle=NSMutableParagraphStyle.new();
337+
paragraphStyle.lineBreakMode=NSLineBreakMode.ByClipping;
338+
break;
339+
default:
340+
// ellipsis
341+
paragraphStyle=NSMutableParagraphStyle.new();
342+
paragraphStyle.lineBreakMode=NSLineBreakMode.ByTruncatingTail;
343+
break;
344+
}
345+
break;
346+
case'wrap':
347+
paragraphStyle=NSMutableParagraphStyle.new();
348+
paragraphStyle.lineBreakMode=NSLineBreakMode.ByWordWrapping;
349+
break;
350+
}
351+
352+
if(paragraphStyle){
353+
letattributedString=NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text||'');
354+
attributedString.addAttributeValueRange(NSParagraphStyleAttributeName,paragraphStyle,NSRangeFromString(`{0,${attributedString.length}}`));
355+
356+
this.nativeViewProtected.attributedText=attributedString;
357+
}
358+
}
320359
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp