javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 03:01:51 +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

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;
}
}
}