@widergy/mobile-ui 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/lib/components/Button/index.js +26 -21
- package/lib/components/UTHeader/index.js +43 -23
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.3.3](https://github.com/widergy/mobile-ui/compare/v1.3.2...v1.3.3) (2024-03-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* custom components in utheader ([#269](https://github.com/widergy/mobile-ui/issues/269)) ([4400fce](https://github.com/widergy/mobile-ui/commit/4400fce3977d35080ebd766a253dba6d0da0c753))
|
|
7
|
+
|
|
8
|
+
## [1.3.2](https://github.com/widergy/mobile-ui/compare/v1.3.1...v1.3.2) (2024-03-14)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* added iconContainer ([#266](https://github.com/widergy/mobile-ui/issues/266)) ([bfe9d47](https://github.com/widergy/mobile-ui/commit/bfe9d4733f51d876c45ff002d2dd64cbaac183b1))
|
|
14
|
+
|
|
1
15
|
## [1.3.1](https://github.com/widergy/mobile-ui/compare/v1.3.0...v1.3.1) (2024-03-13)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -19,17 +19,18 @@ const Button = ({
|
|
|
19
19
|
effectColor,
|
|
20
20
|
elevation,
|
|
21
21
|
icon,
|
|
22
|
-
|
|
22
|
+
iconContainerStyle,
|
|
23
23
|
iconPlacement,
|
|
24
|
+
iconStyle,
|
|
24
25
|
labelColor,
|
|
25
|
-
testID,
|
|
26
26
|
labelProps,
|
|
27
27
|
lowerCase,
|
|
28
28
|
mode,
|
|
29
29
|
onPress,
|
|
30
|
+
outerContainerStyles,
|
|
30
31
|
secondary,
|
|
32
|
+
testID,
|
|
31
33
|
theme,
|
|
32
|
-
outerContainerStyles,
|
|
33
34
|
title
|
|
34
35
|
}) => {
|
|
35
36
|
const themeStyles = getThemeStyles(theme);
|
|
@@ -61,15 +62,17 @@ const Button = ({
|
|
|
61
62
|
>
|
|
62
63
|
<View style={[styles.button, contentStyle]}>
|
|
63
64
|
{icon && iconPlacement !== ICON_PLACEMENTS.right && (
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
<View style={[title && styles.leftIcon, iconContainerStyle]}>
|
|
66
|
+
<Icon
|
|
67
|
+
color={textColor}
|
|
68
|
+
name={icon.name}
|
|
69
|
+
type={icon.type}
|
|
70
|
+
style={iconStyle}
|
|
71
|
+
size={icon.size || themeStyles.fontSize}
|
|
72
|
+
width={icon.width}
|
|
73
|
+
height={icon.height}
|
|
74
|
+
/>
|
|
75
|
+
</View>
|
|
73
76
|
)}
|
|
74
77
|
{title && (
|
|
75
78
|
<Label base color={textColor} {...labelProps}>
|
|
@@ -77,15 +80,17 @@ const Button = ({
|
|
|
77
80
|
</Label>
|
|
78
81
|
)}
|
|
79
82
|
{icon && iconPlacement === ICON_PLACEMENTS.right && (
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
83
|
+
<View style={[title && styles.rightIcon, iconContainerStyle]}>
|
|
84
|
+
<Icon
|
|
85
|
+
color={textColor}
|
|
86
|
+
name={icon.name}
|
|
87
|
+
type={icon.type}
|
|
88
|
+
style={iconStyle}
|
|
89
|
+
size={icon.size || themeStyles.fontSize}
|
|
90
|
+
width={icon.width}
|
|
91
|
+
height={icon.height}
|
|
92
|
+
/>
|
|
93
|
+
</View>
|
|
89
94
|
)}
|
|
90
95
|
</View>
|
|
91
96
|
</Touchable>
|
|
@@ -8,33 +8,53 @@ import UTBanner from '../UTBanner';
|
|
|
8
8
|
import ownStyles from './styles';
|
|
9
9
|
|
|
10
10
|
const UTHeader = ({ tagline, title, subtitle, requiredFieldInfo, helpText, useMarkdown, banner }) => {
|
|
11
|
+
const renderComponent = (prop, standardComponent) =>
|
|
12
|
+
React.isValidElement(prop) ? prop : standardComponent;
|
|
13
|
+
|
|
14
|
+
const Tagline = renderComponent(
|
|
15
|
+
tagline,
|
|
16
|
+
<Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
17
|
+
{tagline.toUpperCase()}
|
|
18
|
+
</Label>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
const Title = renderComponent(
|
|
22
|
+
title,
|
|
23
|
+
<Label big bold style={ownStyles.title} useMarkdown={useMarkdown}>
|
|
24
|
+
{title}
|
|
25
|
+
</Label>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const Subtitle = renderComponent(
|
|
29
|
+
subtitle,
|
|
30
|
+
<Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
31
|
+
{subtitle}
|
|
32
|
+
</Label>
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
const RequiredFieldInfo = renderComponent(
|
|
36
|
+
requiredFieldInfo,
|
|
37
|
+
<Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
38
|
+
{requiredFieldInfo}
|
|
39
|
+
</Label>
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
const HelpText = renderComponent(
|
|
43
|
+
helpText,
|
|
44
|
+
<Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
45
|
+
{helpText}
|
|
46
|
+
</Label>
|
|
47
|
+
);
|
|
48
|
+
|
|
11
49
|
return (
|
|
12
50
|
<View style={ownStyles.header}>
|
|
13
|
-
{tagline &&
|
|
14
|
-
<Label disabled bold useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
15
|
-
{tagline.toUpperCase()}
|
|
16
|
-
</Label>
|
|
17
|
-
)}
|
|
51
|
+
{!!tagline && Tagline}
|
|
18
52
|
<View>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</Label>
|
|
22
|
-
{subtitle && (
|
|
23
|
-
<Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
24
|
-
{subtitle}
|
|
25
|
-
</Label>
|
|
26
|
-
)}
|
|
53
|
+
{Title}
|
|
54
|
+
{!!subtitle && Subtitle}
|
|
27
55
|
</View>
|
|
28
|
-
{requiredFieldInfo &&
|
|
29
|
-
|
|
30
|
-
{requiredFieldInfo}
|
|
31
|
-
</Label>
|
|
32
|
-
)}
|
|
33
|
-
{helpText && (
|
|
34
|
-
<Label disabled useMarkdown={useMarkdown} style={ownStyles.child}>
|
|
35
|
-
{helpText}
|
|
36
|
-
</Label>
|
|
37
|
-
)}
|
|
56
|
+
{!!requiredFieldInfo && RequiredFieldInfo}
|
|
57
|
+
{!!helpText && HelpText}
|
|
38
58
|
{banner?.text && <UTBanner text={banner.text} icon={banner.icon} style={{ banner: ownStyles.child }} />}
|
|
39
59
|
</View>
|
|
40
60
|
);
|
package/package.json
CHANGED