javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 01:43:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(TextField): support css white-space and text-overflow (#10737)

Browse Source
This commit is contained in:
Nathan Walker
2025-06-23 21:54:41 -05:00
committed by GitHub
parent 8979ad8f64
commit ac2e6a0928
6 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/toolbox/src/app.css
View File

@ -260,4 +260,10 @@ Button {
.no-shadow {
box-shadow: none;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

4
apps/toolbox/src/pages/forms.xml
View File

@ -24,6 +24,10 @@
<TextView hint="Type text..." style.placeholderColor="silver" textChange="{{textChangeArea}}" color="black" width="80%" borderColor="silver" borderWidth="1" height="200" borderRadius="4" fontSize="14">
</TextView>
<Label text="TextField white-space + text-overflow" fontWeight="bold" marginTop="12" />
<TextField text="https://a.very.long.url.that.needs.to.be.truncated.com/" class="truncate" marginTop="6" backgroundColor="#efefef" padding="8" fontSize="18" height="60">
</TextField>
</StackLayout>
</ScrollView>
</Page>

2
packages/core/core-types/index.ts
View File

@ -91,7 +91,7 @@ export namespace CoreTypes {
export const lowercase = 'lowercase';
}
export type WhiteSpaceType = 'normal' | 'nowrap' | CSSWideKeywords;
export type WhiteSpaceType = 'normal' | 'nowrap' | 'wrap' | CSSWideKeywords;
export namespace WhiteSpace {
export const normal = 'normal';
export const nowrap = 'nowrap';

2
packages/core/ui/text-base/text-base-common.ts
View File

@ -318,7 +318,7 @@ export const textStrokeProperty = new InheritedCssProperty<Style, string | Strok
});
textStrokeProperty.register(Style);
const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap'));
const whiteSpaceConverter = makeParser<CoreTypes.WhiteSpaceType>(makeValidator<CoreTypes.WhiteSpaceType>('normal', 'nowrap', 'wrap'));
export const whiteSpaceProperty = new InheritedCssProperty<Style, CoreTypes.WhiteSpaceType>({
name: 'whiteSpace',
cssName: 'white-space',

9
packages/core/ui/text-field/index.android.ts
View File

@ -1,7 +1,5 @@
import { TextFieldBase, secureProperty } from './text-field-common';
import { whiteSpaceProperty } from '../text-base';
import { keyboardTypeProperty } from '../editable-text-base';
import { CoreTypes } from '../../core-types';
export * from './text-field-common';
@ -96,13 +94,6 @@ export class TextField extends TextFieldBase {
this._setInputType(inputType);
}
[whiteSpaceProperty.getDefault](): CoreTypes.WhiteSpaceType {
return 'nowrap';
}
[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
// Don't change it otherwise TextField will go to multiline mode.
}
}
TextField.prototype._isSingleLine = true;

41
packages/core/ui/text-field/index.ios.ts
View File

@ -1,5 +1,5 @@
import { TextFieldBase, secureProperty } from './text-field-common';
import { textProperty } from '../text-base';
import { textOverflowProperty, textProperty, whiteSpaceProperty } from '../text-base';
import { hintProperty, placeholderColorProperty, _updateCharactersInRangeReplacementString } from '../editable-text-base';
import { CoreTypes } from '../../core-types';
import { Color } from '../../color';
@ -317,4 +317,43 @@ export class TextField extends TextFieldBase {
[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
// Padding is realized via UITextFieldImpl.textRectForBounds method
}
[whiteSpaceProperty.setNative](value: CoreTypes.WhiteSpaceType) {
this.adjustLineBreak();
}
[textOverflowProperty.setNative](value: CoreTypes.TextOverflowType) {
this.adjustLineBreak();
}
private adjustLineBreak() {
let paragraphStyle: NSMutableParagraphStyle;
switch (this.whiteSpace) {
case 'nowrap':
switch (this.textOverflow) {
case 'clip':
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByClipping;
break;
default:
// ellipsis
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByTruncatingTail;
break;
}
break;
case 'wrap':
paragraphStyle = NSMutableParagraphStyle.new();
paragraphStyle.lineBreakMode = NSLineBreakMode.ByWordWrapping;
break;
}
if (paragraphStyle) {
let attributedString = NSMutableAttributedString.alloc().initWithString(this.nativeViewProtected.text || '');
attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, NSRangeFromString(`{0,${attributedString.length}}`));
this.nativeViewProtected.attributedText = attributedString;
}
}
}