javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): text-shadow support (#8991)

Browse Source
This commit is contained in:
Tiago Alves
2021-01-29 19:46:58 +00:00
committed by Nathan Walker
parent 0750ce5399
commit cbba5ed19d
10 changed files with 133 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,8 +12,9 @@ import { Style } from '../styling/style';
import { Length } from '../styling/style-properties';
import { Observable } from '../../data/observable';
import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from './text-base-interfaces';
import { TextAlignment, TextDecoration, TextTransform, WhiteSpace, TextShadow } from './text-base-interfaces';
import { TextBase as TextBaseDefinition } from '.';
import { Color } from '../../color';
export * from './text-base-interfaces';
@@ -26,26 +27,6 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
public text: string;
public formattedText: FormattedString;
/***
* In the NativeScript Core; by default the nativeTextViewProtected points to the same value as nativeViewProtected.
* At this point no internal NS components need this indirection functionality.
* This indirection is used to allow support usage by third party components so they don't have to duplicate functionality.
*
* A third party component can just override the `nativeTextViewProtected` getter and return a different internal view and that view would be
* what all TextView/TextInput class features would be applied to.
*
* A example is the Android MaterialDesign TextInput class, it has a wrapper view of a TextInputLayout
* https://developer.android.com/reference/com/google/android/material/textfield/TextInputLayout
* which wraps the actual TextInput. This wrapper layout (TextInputLayout) must be assigned to the nativeViewProtected as the entire
* NS Core uses nativeViewProtected for everything related to layout, so that it can be measured, added to the parent view as a child, ect.
*
* However, its internal view would be the actual TextView/TextInput and to allow that sub-view to have the normal TextView/TextInput
* class features, which we expose and to allow them to work on it, the internal TextView/TextInput is what the needs to have the class values applied to it.
*
* So all code that works on what is expected to be a TextView/TextInput should use `nativeTextViewProtected` so that any third party
* components that need to have two separate components can work properly without them having to duplicate all the TextBase (and decendants) functionality
* by just overriding the nativeTextViewProtected getter.
**/
get nativeTextViewProtected() {
return this.nativeViewProtected;
}
@@ -113,6 +94,13 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
this.style.textTransform = value;
}
get textShadow(): TextShadow {
return this.style.textShadow;
}
set textShadow(value: TextShadow) {
this.style.textShadow = value;
}
get whiteSpace(): WhiteSpace {
return this.style.whiteSpace;
}
@@ -259,6 +247,22 @@ export const textTransformProperty = new CssProperty<Style, TextTransform>({
});
textTransformProperty.register(Style);
export const textShadowProperty = new CssProperty<Style, string | TextShadow>({
name: 'textShadow',
cssName: 'text-shadow',
affectsLayout: global.isIOS,
valueConverter: (value) => {
const params = value.split(' ');
return {
offsetX: Length.parse(params[0]),
offsetY: Length.parse(params[1]),
blurRadius: Length.parse(params[2]),
color: new Color(params.slice(3).join('')),
};
},
});
textShadowProperty.register(Style);
const whiteSpaceConverter = makeParser<WhiteSpace>(makeValidator<WhiteSpace>('initial', 'normal', 'nowrap'));
export const whiteSpaceProperty = new CssProperty<Style, WhiteSpace>({
name: 'whiteSpace',