• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1 /*
2  * Copyright (c) 2021 Huawei Device Co., Ltd.
3  * Licensed under the Apache License, Version 2.0 (the "License");
4  * you may not use this file except in compliance with the License.
5  * You may obtain a copy of the License at
6  *
7  *     http://www.apache.org/licenses/LICENSE-2.0
8  *
9  * Unless required by applicable law or agreed to in writing, software
10  * distributed under the License is distributed on an "AS IS" BASIS,
11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12  * See the License for the specific language governing permissions and
13  * limitations under the License.
14  */
15 
16 #ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_TEXT_FIELD_TEXTFIELD_THEME_H
17 #define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_TEXT_FIELD_TEXTFIELD_THEME_H
18 
19 #include "base/geometry/dimension.h"
20 #include "core/components/common/properties/border.h"
21 #include "core/components/common/properties/color.h"
22 #include "core/components/common/properties/edge.h"
23 #include "core/components/common/properties/radius.h"
24 #include "core/components/theme/theme.h"
25 #include "core/components/theme/theme_constants.h"
26 #include "core/components/theme/theme_constants_defines.h"
27 
28 namespace OHOS::Ace {
29 
30 /**
31  * TextFieldTheme defines color and styles of SliderComponent. TextFieldTheme should be built
32  * using TextFieldTheme::Builder.
33  */
34 class TextFieldTheme : public virtual Theme {
35     DECLARE_ACE_TYPE(TextFieldTheme, Theme);
36 
37 public:
38     class Builder {
39     public:
40         Builder() = default;
41         ~Builder() = default;
42 
Build(const RefPtr<ThemeConstants> & themeConstants)43         RefPtr<TextFieldTheme> Build(const RefPtr<ThemeConstants>& themeConstants) const
44         {
45             RefPtr<TextFieldTheme> theme = AceType::Claim(new TextFieldTheme());
46             if (!themeConstants) {
47                 return theme;
48             }
49             ParsePattern(themeConstants->GetThemeStyle(), theme);
50             return theme;
51         }
52 
53     private:
ParsePattern(const RefPtr<ThemeStyle> & themeStyle,const RefPtr<TextFieldTheme> & theme)54         void ParsePattern(const RefPtr<ThemeStyle>& themeStyle, const RefPtr<TextFieldTheme>& theme) const
55         {
56             if (!themeStyle || !theme) {
57                 return;
58             }
59             auto pattern = themeStyle->GetAttr<RefPtr<ThemeStyle>>("textfield_pattern", nullptr);
60             if (!pattern) {
61                 LOGW("find pattern of textfield fail");
62                 return;
63             }
64             const double defaultErrorAlpha = 0.6;
65             const double defaultUnderlineAlpha = 0.6;
66             const double defaultDisableUnderlineAlpha = 0.4;
67             const Color defaultUnderlineColor = Color(0x33182431);
68             const Color defaultUnderlineTextColor = Color(0x99182431);
69             const Color defaultCounterColor = Color(0x66182431);
70             const Color overCounterColor = Color(0x99FA2A2D);
71             theme->padding_ = Edge(pattern->GetAttr<Dimension>("textfield_padding_horizontal", 0.0_vp),
72                 pattern->GetAttr<Dimension>("textfield_padding_vertical", 0.0_vp),
73                 pattern->GetAttr<Dimension>("textfield_padding_horizontal", 0.0_vp),
74                 pattern->GetAttr<Dimension>("textfield_padding_vertical", 0.0_vp));
75             theme->fontWeight_ =
76                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_font_weight", 0.0)));
77             theme->borderRadius_ = Radius(pattern->GetAttr<Dimension>("textfield_border_radius", 0.0_vp));
78             theme->disableOpacityRatio_ = pattern->GetAttr<double>("textfield_disable_opacity_ratio", 0.0);
79             theme->overHideLength_ = pattern->GetAttr<Dimension>("textfield_over_hide_length", 0.0_vp);
80             theme->cursorRadius_ = pattern->GetAttr<Dimension>("textfield_cursor_radius", 0.0_vp);
81             theme->needFade_ = static_cast<bool>(pattern->GetAttr<double>("textfield_need_fade", 0.0));
82             theme->iconSize_ = pattern->GetAttr<Dimension>("textfield_icon_size", 0.0_vp);
83             theme->iconHotZoneSize_ = pattern->GetAttr<Dimension>("textfield_icon_hot_zone_size", 0.0_vp);
84             theme->showEllipsis_ = static_cast<bool>(pattern->GetAttr<double>("textfield_show_ellipsis", 0.0));
85             theme->errorSpacing_ = pattern->GetAttr<Dimension>("textfield_error_spacing", 0.0_vp);
86             theme->errorIsInner_ = static_cast<bool>(pattern->GetAttr<double>("textfield_error_is_inner", 0.0));
87             theme->errorBorderWidth_ = pattern->GetAttr<Dimension>("textfield_error_border_width", 0.0_vp);
88             theme->errorTextStyle_.SetFontWeight(
89                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_error_font_weight", 0.0))));
90             theme->countTextStyle_.SetFontWeight(
91                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_count_font_weight", 0.0))));
92             theme->overCountStyle_.SetFontWeight(
93                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_over_count_font_weight", 0.0))));
94             theme->countTextStyleOuter_.SetFontWeight(
95                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_count_font_weight", 0.0))));
96             theme->overCountStyleOuter_.SetFontWeight(
97                 FontWeight(static_cast<int32_t>(pattern->GetAttr<double>("textfield_over_count_font_weight", 0.0))));
98             theme->fontSize_ = pattern->GetAttr<Dimension>(PATTERN_TEXT_SIZE, 0.0_fp);
99             theme->textColor_ = pattern->GetAttr<Color>(PATTERN_TEXT_COLOR, Color());
100             theme->focusTextColor_ = pattern->GetAttr<Color>(PATTERN_TEXT_COLOR_FOCUSED, Color());
101             theme->placeholderColor_ = pattern->GetAttr<Color>("tips_text_color", Color());
102             theme->focusPlaceholderColor_ = pattern->GetAttr<Color>("tips_text_color_focused", Color());
103             theme->bgColor_ = pattern->GetAttr<Color>(PATTERN_BG_COLOR, Color());
104             theme->focusBgColor_ = pattern->GetAttr<Color>(PATTERN_BG_COLOR_FOCUSED, Color());
105             // color of error border blend 60% opacity
106             theme->errorBorderColor_ =
107                 pattern->GetAttr<Color>("error_text_border_color", Color())
108                     .BlendOpacity(pattern->GetAttr<double>("error_text_border_color_alpha", defaultErrorAlpha));
109             theme->errorUnderlineColor_ = pattern->GetAttr<Color>(ERROR_UNDERLINE_COLOR, Color());
110             theme->underlineColor_ = pattern->GetAttr<Color>(UNDERLINE_COLOR, defaultUnderlineColor);
111             theme->disableUnderlineColor_ =
112                 pattern->GetAttr<Color>(UNDERLINE_COLOR, defaultUnderlineColor)
113                     .BlendOpacity(pattern->GetAttr<double>(DISABLE_UNDERLINE_ALPHA, defaultDisableUnderlineAlpha));
114             theme->underlineTextColor_ = pattern->GetAttr<Color>(UNDERLINE_TEXT_COLOR, defaultUnderlineTextColor);
115             theme->defaultCounterColor_ = pattern->GetAttr<Color>(DEFAULT_COUNTER_COLOR, defaultCounterColor);
116             theme->overCounterColor_ = pattern->GetAttr<Color>(OVER_COUNTER_COLOR, overCounterColor);
117             theme->underlineFontSize_ = pattern->GetAttr<Dimension>(UNDERLINE_FONT_SIZE, 0.0_fp);
118             theme->errorTextStyle_.SetTextColor(pattern->GetAttr<Color>(ERROR_UNDERLINE_TEXT_COLOR, Color()));
119             theme->errorTextStyle_.SetFontSize(pattern->GetAttr<Dimension>(ERROR_UNDERLINE_TEXT_SIZE, 0.0_fp));
120 
121             theme->countTextStyle_.SetTextColor(pattern->GetAttr<Color>("count_text_color", Color()));
122             theme->countTextStyle_.SetFontSize(pattern->GetAttr<Dimension>("count_text_font_size", 0.0_fp));
123             theme->overCountStyle_.SetTextColor(pattern->GetAttr<Color>("over_text_color", Color()));
124             theme->overCountStyle_.SetFontSize(pattern->GetAttr<Dimension>("over_text_font_size", 0.0_fp));
125 
126             theme->countTextStyleOuter_.SetTextColor(pattern->GetAttr<Color>("count_outer_text_color", Color()));
127             theme->countTextStyleOuter_.SetFontSize(pattern->GetAttr<Dimension>("count_outer_text_font_size", 0.0_fp));
128             theme->overCountStyleOuter_.SetTextColor(pattern->GetAttr<Color>("over_outer_text_color", Color()));
129             theme->overCountStyleOuter_.SetFontSize(pattern->GetAttr<Dimension>("over_outer_text_font_size", 0.0_fp));
130             theme->overCountTextStyle_.SetTextColor(pattern->GetAttr<Color>(OVER_COUNT_TEXT_COLOR, Color()));
131             theme->overCountTextStyle_.SetFontSize(pattern->GetAttr<Dimension>(OVER_COUNT_TEXT_FONT_SIZE, 0.0_fp));
132             theme->selectedColor_ = pattern->GetAttr<Color>(PATTERN_BG_COLOR_SELECTED, Color());
133             theme->disableTextColor_ = pattern->GetAttr<Color>(PATTERN_TEXT_COLOR_DISABLED, Color());
134             theme->underlineActivedColor_ =
135                 pattern->GetAttr<Color>(PATTERN_UNDERLINE_ACTIVED_COLOR, Color())
136                     .BlendOpacity(pattern->GetAttr<double>(UNDERLINE_COLOR_ALPHA, defaultUnderlineAlpha));
137             theme->underlineTypingColor_ =
138                 pattern->GetAttr<Color>(PATTERN_UNDERLINE_TYPING_COLOR, Color())
139                     .BlendOpacity(pattern->GetAttr<double>(UNDERLINE_COLOR_ALPHA, defaultUnderlineAlpha));
140             theme->textColorDisable_ = pattern->GetAttr<Color>(PATTERN_DISABLED_TEXT_COLOR, Color());
141             theme->cursorColor_ = pattern->GetAttr<Color>("cursor_color", Color());
142             theme->cursorWidth_ = pattern->GetAttr<Dimension>("cursor_width", 1.5_vp);
143             theme->hoverColor_ = pattern->GetAttr<Color>(PATTERN_BG_COLOR_HOVERED, Color());
144             theme->pressColor_ = pattern->GetAttr<Color>(PATTERN_BG_COLOR_PRESSED, Color());
145             theme->borderRadiusSize_ = Radius(pattern->GetAttr<Dimension>(BORDER_RADIUS_SIZE, 20.0_vp));
146             theme->disabledIconFillColor_ = theme->bgColor_.BlendOpacity(theme->disableOpacityRatio_);
147             theme->passwordErrorTextColor_ = pattern->GetAttr<Color>(PATTERN_TEXT_COLOR, Color());
148             theme->passwordErrorInputColor_ = pattern->GetAttr<Color>(ERROR_PASSWORD_INPUT_COLOR, Color());
149             theme->passwordErrorBorderColor_ =
150                 pattern->GetAttr<Color>(ERROR_PASSWORD_BORDER_COLOR, Color())
151                     .BlendOpacity(pattern->GetAttr<double>(ERROR_PASSWORD_BORDER_ALPHA, defaultErrorAlpha));
152             theme->passwordErrorLableColor_ = pattern->GetAttr<Color>(ERROR_PASSWORD_TEXT_COLOR, Color());
153             theme->overCountBorderColor_ =
154                 pattern->GetAttr<Color>(OVER_COUNT_BORDER_COLOR, Color())
155                     .BlendOpacity(pattern->GetAttr<double>(OVER_COUNT_BORDER_COLOR_ALPHA, defaultErrorAlpha));
156             theme->inlineTextColor_ = pattern->GetAttr<Color>(INLINE_TEXT_COLOR, Color());
157             theme->inlineRadiusSize_ = Radius(pattern->GetAttr<Dimension>(INLINE_RADIUS_SIZE, 4.0_vp));
158             theme->inlineBgColor_ = pattern->GetAttr<Color>(INLINE_BG_COLOR, Color());
159             theme->inlineBorderColor_ = pattern->GetAttr<Color>(INLINE_BORDER_COLOR, Color());
160             auto draggable = pattern->GetAttr<std::string>("draggable", "0");
161             theme->draggable_ = StringUtils::StringToInt(draggable);
162             // The default height is 48VP, of which 12VP is 12VP each for the upper and lower padding
163             theme->height_ = pattern->GetAttr<Dimension>("textinput_default_height", 24.0_vp);
164         }
165     };
166 
167     ~TextFieldTheme() override = default;
168 
GetPadding()169     const Edge& GetPadding() const
170     {
171         return padding_;
172     }
173 
GetHeight()174     const Dimension& GetHeight() const
175     {
176         return height_;
177     }
178 
GetFontSize()179     const Dimension& GetFontSize() const
180     {
181         return fontSize_;
182     }
183 
GetUnderlineFontSize()184     const Dimension& GetUnderlineFontSize() const
185     {
186         return underlineFontSize_;
187     }
188 
GetFontWeight()189     const FontWeight& GetFontWeight() const
190     {
191         return fontWeight_;
192     }
193 
GetBorderRadius()194     const Radius& GetBorderRadius() const
195     {
196         return borderRadius_;
197     }
198 
GetBgColor()199     const Color& GetBgColor() const
200     {
201         return bgColor_;
202     }
203 
GetPlaceholderColor()204     const Color& GetPlaceholderColor() const
205     {
206         return placeholderColor_;
207     }
208 
GetFocusBgColor()209     const Color& GetFocusBgColor() const
210     {
211         return focusBgColor_;
212     }
213 
GetFocusPlaceholderColor()214     const Color& GetFocusPlaceholderColor() const
215     {
216         return focusPlaceholderColor_;
217     }
218 
GetFocusTextColor()219     const Color& GetFocusTextColor() const
220     {
221         return focusTextColor_;
222     }
223 
GetTextColor()224     const Color& GetTextColor() const
225     {
226         return textColor_;
227     }
228 
GetDisableTextColor()229     const Color& GetDisableTextColor() const
230     {
231         return disableTextColor_;
232     }
233 
GetTextColorDisable()234     const Color& GetTextColorDisable() const
235     {
236         return textColorDisable_;
237     }
238 
GetUnderlineActivedColor()239     const Color& GetUnderlineActivedColor() const
240     {
241         return underlineActivedColor_;
242     }
243 
GetUnderlineTypingColor()244     const Color& GetUnderlineTypingColor() const
245     {
246         return underlineTypingColor_;
247     }
248 
GetSelectedColor()249     const Color& GetSelectedColor() const
250     {
251         return selectedColor_;
252     }
253 
GetHoverColor()254     const Color& GetHoverColor() const
255     {
256         return hoverColor_;
257     }
258 
GetPressColor()259     const Color& GetPressColor() const
260     {
261         return pressColor_;
262     }
263 
GetBorderRadiusSize()264     const Radius& GetBorderRadiusSize() const
265     {
266         return borderRadiusSize_;
267     }
268 
GetDisableOpacityRatio()269     double GetDisableOpacityRatio() const
270     {
271         return disableOpacityRatio_;
272     }
273 
GetDisabledIconFillColor()274     const Color& GetDisabledIconFillColor() const
275     {
276         return disabledIconFillColor_;
277     }
278 
GetOverHideLength()279     const Dimension& GetOverHideLength() const
280     {
281         return overHideLength_;
282     }
283 
GetCursorColor()284     const Color& GetCursorColor() const
285     {
286         return cursorColor_;
287     }
288 
GetCursorRadius()289     const Dimension& GetCursorRadius() const
290     {
291         return cursorRadius_;
292     }
293 
GetCursorWidth()294     const Dimension& GetCursorWidth() const
295     {
296         return cursorWidth_;
297     }
298 
NeedFade()299     bool NeedFade() const
300     {
301         return needFade_;
302     }
303 
GetIconSize()304     const Dimension& GetIconSize() const
305     {
306         return iconSize_;
307     }
308 
GetIconHotZoneSize()309     const Dimension& GetIconHotZoneSize() const
310     {
311         return iconHotZoneSize_;
312     }
313 
ShowEllipsis()314     bool ShowEllipsis() const
315     {
316         return showEllipsis_;
317     }
318 
GetErrorSpacing()319     const Dimension& GetErrorSpacing() const
320     {
321         return errorSpacing_;
322     }
323 
GetErrorIsInner()324     bool GetErrorIsInner() const
325     {
326         return errorIsInner_;
327     }
328 
GetErrorBorderWidth()329     const Dimension& GetErrorBorderWidth() const
330     {
331         return errorBorderWidth_;
332     }
333 
GetErrorBorderColor()334     const Color& GetErrorBorderColor() const
335     {
336         return errorBorderColor_;
337     }
338 
GetErrorUnderlineColor()339     const Color& GetErrorUnderlineColor() const
340     {
341         return errorUnderlineColor_;
342     }
343 
GetUnderlineColor()344     const Color& GetUnderlineColor() const
345     {
346         return underlineColor_;
347     }
348 
GetDisableUnderlineColor()349     const Color& GetDisableUnderlineColor() const
350     {
351         return disableUnderlineColor_;
352     }
353 
GetUnderlineTextColor()354     const Color& GetUnderlineTextColor() const
355     {
356         return underlineTextColor_;
357     }
358 
GetOverCountBorderColor()359     const Color& GetOverCountBorderColor() const
360     {
361         return overCountBorderColor_;
362     }
363 
GetErrorTextStyle()364     const TextStyle& GetErrorTextStyle() const
365     {
366         return errorTextStyle_;
367     }
368 
GetCountTextStyle()369     const TextStyle& GetCountTextStyle() const
370     {
371         return countTextStyle_;
372     }
373 
GetOverCountStyle()374     const TextStyle& GetOverCountStyle() const
375     {
376         return overCountStyle_;
377     }
378 
GetCountTextStyleOuter()379     const TextStyle& GetCountTextStyleOuter() const
380     {
381         return countTextStyleOuter_;
382     }
383 
GetOverCountStyleOuter()384     const TextStyle& GetOverCountStyleOuter() const
385     {
386         return overCountStyleOuter_;
387     }
388 
GetPasswordErrorTextColor()389     const Color& GetPasswordErrorTextColor() const
390     {
391         return passwordErrorTextColor_;
392     }
393 
GetPasswordErrorInputColor()394     const Color& GetPasswordErrorInputColor() const
395     {
396         return passwordErrorInputColor_;
397     }
398 
GetPasswordErrorBorderColor()399     const Color& GetPasswordErrorBorderColor() const
400     {
401         return passwordErrorBorderColor_;
402     }
403 
GetPasswordErrorLableColor()404     const Color& GetPasswordErrorLableColor() const
405     {
406         return passwordErrorLableColor_;
407     }
408 
GetOverCountTextStyle()409     const TextStyle& GetOverCountTextStyle() const
410     {
411         return overCountTextStyle_;
412     }
413 
GetInlineTextColor()414     const Color& GetInlineTextColor() const
415     {
416         return inlineTextColor_;
417     }
418 
GetInlineRadiusSize()419     const Radius& GetInlineRadiusSize() const
420     {
421         return inlineRadiusSize_;
422     }
423 
GetInlineBgColor()424     const Color& GetInlineBgColor() const
425     {
426         return inlineBgColor_;
427     }
428 
GetInlineBorderColor()429     const Color& GetInlineBorderColor() const
430     {
431         return inlineBorderColor_;
432     }
433 
GetInlineBorderWidth()434     const Dimension& GetInlineBorderWidth() const
435     {
436         return inlineBorderWidth_;
437     }
438 
GetDraggable()439     bool GetDraggable() const
440     {
441         return draggable_;
442     }
443 
GetDefaultCounterColor()444     const Color& GetDefaultCounterColor() const
445     {
446         return defaultCounterColor_;
447     }
448 
GetOverCounterColor()449     const Color& GetOverCounterColor() const
450     {
451         return overCounterColor_;
452     }
453 
GetInsertCursorOffset()454     const Dimension& GetInsertCursorOffset() const
455     {
456         return insertCursorOffset_;
457     }
458 
GetPasswordTypeHeight()459     const Dimension& GetPasswordTypeHeight() const
460     {
461         return passwordTypeHeight_;
462     }
463 
464 protected:
465     TextFieldTheme() = default;
466 
467 private:
468     Edge padding_;
469     Dimension height_;
470     Dimension fontSize_;
471     Dimension underlineFontSize_;
472     FontWeight fontWeight_ = FontWeight::NORMAL;
473     Radius borderRadius_;
474 
475     Color bgColor_;
476     Radius borderRadiusSize_;
477     Color placeholderColor_;
478     Color focusBgColor_;
479     Color focusPlaceholderColor_;
480     Color focusTextColor_;
481     Color textColor_;
482     Color disableTextColor_;
483     Color underlineActivedColor_;
484     Color underlineTypingColor_;
485     Color textColorDisable_;
486     Color selectedColor_;
487     Color hoverColor_;
488     Color pressColor_;
489     Color disabledIconFillColor_;
490     Dimension errorSpacing_;
491     bool errorIsInner_ = false;
492     Dimension errorBorderWidth_;
493     Color errorBorderColor_;
494     Color overCountBorderColor_;
495     Color errorUnderlineColor_;
496     Color underlineColor_;
497     Color disableUnderlineColor_;
498     Color underlineTextColor_;
499     Color passwordErrorTextColor_;
500     Color passwordErrorInputColor_;
501     Color passwordErrorBorderColor_;
502     Color passwordErrorLableColor_;
503     TextStyle errorTextStyle_;
504     TextStyle countTextStyle_;
505     TextStyle overCountStyle_;
506     TextStyle countTextStyleOuter_;
507     TextStyle overCountStyleOuter_;
508     TextStyle overCountTextStyle_;
509     Color inlineTextColor_;
510     Radius inlineRadiusSize_;
511     Color inlineBgColor_;
512     Color inlineBorderColor_;
513     Color defaultCounterColor_;
514     Color overCounterColor_;
515 
516     // UX::disable state: opacity is set to 38% of the default
517     double disableOpacityRatio_ = 1.0;
518 
519     // UX::over length state
520     Dimension overHideLength_;
521 
522     // UX::cursor state cursor-color=#000000, cursor blur-radius=0.9, cursor-width=2, cursor-height=24, cursor-radius=1
523     Color cursorColor_;
524     Dimension cursorRadius_;
525     Dimension cursorWidth_;
526     bool needFade_ = false;
527 
528     // UX::icon size = 24, hotZoneSize = 36
529     Dimension iconSize_;
530     Dimension iconHotZoneSize_;
531     Dimension inlineBorderWidth_ = 2.0_vp;
532 
533     // UX::insert cursor offset up by 8vp
534     Dimension insertCursorOffset_ = 8.0_vp;
535 
536     bool showEllipsis_ = true;
537     bool draggable_ = false;
538     Dimension passwordTypeHeight_ = 40.0_vp;;
539 };
540 
541 } // namespace OHOS::Ace
542 
543 #endif // FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_TEXT_FIELD_TEXTFIELD_THEME_H
544