1 | import { booleanConverter } from '../core/view-base';
|
2 |
|
3 | import { FormattedString } from './formatted-string';
|
4 | import { View } from '../core/view';
|
5 | import { Property, CssProperty, InheritedCssProperty, makeValidator, makeParser } from '../core/properties';
|
6 | import { Style } from '../styling/style';
|
7 | import { Observable } from '../../data/observable';
|
8 | import { parseCSSShadow } from '../styling/css-shadow';
|
9 | import { parseCSSStroke } from '../styling/css-stroke';
|
10 | const CHILD_SPAN = 'Span';
|
11 | const CHILD_FORMATTED_TEXT = 'formattedText';
|
12 | const CHILD_FORMATTED_STRING = 'FormattedString';
|
13 | export class TextBaseCommon extends View {
|
14 | |
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | get nativeTextViewProtected() {
|
35 | return this.nativeViewProtected;
|
36 | }
|
37 | get fontFamily() {
|
38 | return this.style.fontFamily;
|
39 | }
|
40 | set fontFamily(value) {
|
41 | this.style.fontFamily = value;
|
42 | }
|
43 | get fontSize() {
|
44 | return this.style.fontSize;
|
45 | }
|
46 | set fontSize(value) {
|
47 | this.style.fontSize = value;
|
48 | }
|
49 | get fontStyle() {
|
50 | return this.style.fontStyle;
|
51 | }
|
52 | set fontStyle(value) {
|
53 | this.style.fontStyle = value;
|
54 | }
|
55 | get fontWeight() {
|
56 | return this.style.fontWeight;
|
57 | }
|
58 | set fontWeight(value) {
|
59 | this.style.fontWeight = value;
|
60 | }
|
61 | get letterSpacing() {
|
62 | return this.style.letterSpacing;
|
63 | }
|
64 | set letterSpacing(value) {
|
65 | this.style.letterSpacing = value;
|
66 | }
|
67 | get lineHeight() {
|
68 | return this.style.lineHeight;
|
69 | }
|
70 | set lineHeight(value) {
|
71 | this.style.lineHeight = value;
|
72 | }
|
73 | get maxLines() {
|
74 | return this.style.maxLines;
|
75 | }
|
76 | set maxLines(value) {
|
77 | this.style.maxLines = value;
|
78 | }
|
79 | get textAlignment() {
|
80 | return this.style.textAlignment;
|
81 | }
|
82 | set textAlignment(value) {
|
83 | this.style.textAlignment = value;
|
84 | }
|
85 | get textDecoration() {
|
86 | return this.style.textDecoration;
|
87 | }
|
88 | set textDecoration(value) {
|
89 | this.style.textDecoration = value;
|
90 | }
|
91 | get textTransform() {
|
92 | return this.style.textTransform;
|
93 | }
|
94 | set textTransform(value) {
|
95 | this.style.textTransform = value;
|
96 | }
|
97 | get textShadow() {
|
98 | return this.style.textShadow;
|
99 | }
|
100 | set textShadow(value) {
|
101 | this.style.textShadow = value;
|
102 | }
|
103 | get whiteSpace() {
|
104 | return this.style.whiteSpace;
|
105 | }
|
106 | set whiteSpace(value) {
|
107 | this.style.whiteSpace = value;
|
108 | }
|
109 | get textOverflow() {
|
110 | return this.style.textOverflow;
|
111 | }
|
112 | set textOverflow(value) {
|
113 | this.style.textOverflow = value;
|
114 | }
|
115 | get padding() {
|
116 | return this.style.padding;
|
117 | }
|
118 | set padding(value) {
|
119 | this.style.padding = value;
|
120 | }
|
121 | get paddingTop() {
|
122 | return this.style.paddingTop;
|
123 | }
|
124 | set paddingTop(value) {
|
125 | this.style.paddingTop = value;
|
126 | }
|
127 | get paddingRight() {
|
128 | return this.style.paddingRight;
|
129 | }
|
130 | set paddingRight(value) {
|
131 | this.style.paddingRight = value;
|
132 | }
|
133 | get paddingBottom() {
|
134 | return this.style.paddingBottom;
|
135 | }
|
136 | set paddingBottom(value) {
|
137 | this.style.paddingBottom = value;
|
138 | }
|
139 | get paddingLeft() {
|
140 | return this.style.paddingLeft;
|
141 | }
|
142 | set paddingLeft(value) {
|
143 | this.style.paddingLeft = value;
|
144 | }
|
145 | _onFormattedTextContentsChanged(data) {
|
146 | if (this.nativeViewProtected) {
|
147 |
|
148 | this[formattedTextProperty.setNative](data.value);
|
149 | }
|
150 | }
|
151 | _addChildFromBuilder(name, value) {
|
152 | if (name === CHILD_SPAN) {
|
153 | if (!this.formattedText) {
|
154 | const formattedText = new FormattedString();
|
155 | formattedText.spans.push(value);
|
156 | this.formattedText = formattedText;
|
157 | }
|
158 | else {
|
159 | this.formattedText.spans.push(value);
|
160 | }
|
161 | }
|
162 | else if (name === CHILD_FORMATTED_TEXT || name === CHILD_FORMATTED_STRING) {
|
163 | this.formattedText = value;
|
164 | }
|
165 | }
|
166 | _requestLayoutOnTextChanged() {
|
167 | this.requestLayout();
|
168 | }
|
169 | eachChild(callback) {
|
170 | const text = this.formattedText;
|
171 | if (text) {
|
172 | callback(text);
|
173 | }
|
174 | }
|
175 | _setNativeText(reset = false) {
|
176 |
|
177 | }
|
178 | }
|
179 | TextBaseCommon.iosTextAnimationFallback = true;
|
180 | TextBaseCommon.prototype._isSingleLine = false;
|
181 | export function isBold(fontWeight) {
|
182 | return fontWeight === 'bold' || fontWeight === '700' || fontWeight === '800' || fontWeight === '900';
|
183 | }
|
184 | export const textProperty = new Property({
|
185 | name: 'text',
|
186 | defaultValue: '',
|
187 | affectsLayout: __ANDROID__,
|
188 | });
|
189 | textProperty.register(TextBaseCommon);
|
190 | export const formattedTextProperty = new Property({
|
191 | name: 'formattedText',
|
192 | affectsLayout: true,
|
193 | valueChanged: onFormattedTextPropertyChanged,
|
194 | });
|
195 | formattedTextProperty.register(TextBaseCommon);
|
196 | export const iosTextAnimationProperty = new Property({
|
197 | name: 'iosTextAnimation',
|
198 | defaultValue: 'inherit',
|
199 | affectsLayout: false,
|
200 | valueConverter(value) {
|
201 | try {
|
202 | return booleanConverter(value);
|
203 | }
|
204 | catch (e) {
|
205 | return 'inherit';
|
206 | }
|
207 | },
|
208 | });
|
209 | iosTextAnimationProperty.register(TextBaseCommon);
|
210 | function onFormattedTextPropertyChanged(textBase, oldValue, newValue) {
|
211 | if (oldValue) {
|
212 | oldValue.off(Observable.propertyChangeEvent, textBase._onFormattedTextContentsChanged, textBase);
|
213 | textBase._removeView(oldValue);
|
214 | }
|
215 | if (newValue) {
|
216 | const oldParent = newValue.parent;
|
217 |
|
218 | if (oldParent) {
|
219 | oldParent._removeView(newValue);
|
220 | }
|
221 | textBase._addView(newValue);
|
222 | newValue.on(Observable.propertyChangeEvent, textBase._onFormattedTextContentsChanged, textBase);
|
223 | }
|
224 | }
|
225 | export function getClosestPropertyValue(property, span) {
|
226 | if (property.isSet(span.style)) {
|
227 | return span.style[property.name];
|
228 | }
|
229 | else if (property.isSet(span.parent.style)) {
|
230 |
|
231 | return span.parent.style[property.name];
|
232 | }
|
233 | else if (property.isSet(span.parent.parent.style)) {
|
234 |
|
235 | return span.parent.parent.style[property.name];
|
236 | }
|
237 | }
|
238 | const textAlignmentConverter = makeParser(makeValidator('initial', 'left', 'center', 'right', 'justify'));
|
239 | export const textAlignmentProperty = new InheritedCssProperty({
|
240 | name: 'textAlignment',
|
241 | cssName: 'text-align',
|
242 | defaultValue: 'initial',
|
243 | valueConverter: textAlignmentConverter,
|
244 | });
|
245 | textAlignmentProperty.register(Style);
|
246 | const textTransformConverter = makeParser(makeValidator('initial', 'none', 'capitalize', 'uppercase', 'lowercase'));
|
247 | export const textTransformProperty = new CssProperty({
|
248 | name: 'textTransform',
|
249 | cssName: 'text-transform',
|
250 | defaultValue: 'initial',
|
251 | valueConverter: textTransformConverter,
|
252 | });
|
253 | textTransformProperty.register(Style);
|
254 | export const textShadowProperty = new CssProperty({
|
255 | name: 'textShadow',
|
256 | cssName: 'text-shadow',
|
257 | affectsLayout: __APPLE__,
|
258 | valueConverter: (value) => {
|
259 | return parseCSSShadow(value);
|
260 | },
|
261 | });
|
262 | textShadowProperty.register(Style);
|
263 | export const textStrokeProperty = new CssProperty({
|
264 | name: 'textStroke',
|
265 | cssName: 'text-stroke',
|
266 | affectsLayout: __APPLE__,
|
267 | valueConverter: (value) => {
|
268 | return parseCSSStroke(value);
|
269 | },
|
270 | });
|
271 | textStrokeProperty.register(Style);
|
272 | const whiteSpaceConverter = makeParser(makeValidator('initial', 'normal', 'nowrap'));
|
273 | export const whiteSpaceProperty = new CssProperty({
|
274 | name: 'whiteSpace',
|
275 | cssName: 'white-space',
|
276 | defaultValue: 'initial',
|
277 | affectsLayout: __APPLE__,
|
278 | valueConverter: whiteSpaceConverter,
|
279 | });
|
280 | whiteSpaceProperty.register(Style);
|
281 | const textOverflowConverter = makeParser(makeValidator('clip', 'ellipsis', 'initial', 'unset'));
|
282 | export const textOverflowProperty = new CssProperty({
|
283 | name: 'textOverflow',
|
284 | cssName: 'text-overflow',
|
285 | defaultValue: 'initial',
|
286 | affectsLayout: __APPLE__,
|
287 | valueConverter: textOverflowConverter,
|
288 | });
|
289 | textOverflowProperty.register(Style);
|
290 | const textDecorationConverter = makeParser(makeValidator('none', 'underline', 'line-through', 'underline line-through'));
|
291 | export const textDecorationProperty = new CssProperty({
|
292 | name: 'textDecoration',
|
293 | cssName: 'text-decoration',
|
294 | defaultValue: 'none',
|
295 | valueConverter: textDecorationConverter,
|
296 | });
|
297 | textDecorationProperty.register(Style);
|
298 | export const letterSpacingProperty = new InheritedCssProperty({
|
299 | name: 'letterSpacing',
|
300 | cssName: 'letter-spacing',
|
301 | defaultValue: 0,
|
302 | affectsLayout: __APPLE__,
|
303 | valueConverter: (v) => parseFloat(v),
|
304 | });
|
305 | letterSpacingProperty.register(Style);
|
306 | export const lineHeightProperty = new InheritedCssProperty({
|
307 | name: 'lineHeight',
|
308 | cssName: 'line-height',
|
309 | affectsLayout: __APPLE__,
|
310 | valueConverter: (v) => parseFloat(v),
|
311 | });
|
312 | lineHeightProperty.register(Style);
|
313 | export const maxLinesProperty = new CssProperty({
|
314 | name: 'maxLines',
|
315 | cssName: 'max-lines',
|
316 | valueConverter: (v) => (v === 'none' ? 0 : parseInt(v, 10)),
|
317 | });
|
318 | maxLinesProperty.register(Style);
|
319 | export const resetSymbol = Symbol('textPropertyDefault');
|
320 |
|
\ | No newline at end of file |