@abihealth/goapp-react-native 1.30.1 → 1.31.0
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 +7 -0
- package/dist/common/components/DateInput.js +1 -1
- package/dist/common/components/FormControl.js +1 -1
- package/dist/common/components/Input.js +8 -2
- package/dist/common/components/PhoneInput.js +1 -1
- package/dist/common/components/Text.d.ts +1 -8
- package/dist/common/components/Text.js +15 -38
- package/dist/common/types/theme.d.ts +9 -9
- package/dist/common/types/theme.js +45 -9
- package/dist/form-prescriptions/components/SearchableDropdown.js +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.31.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.30.1...goapp-react-native-v1.31.0) (2025-05-23)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add custom text component and improve formatting ([#201](https://github.com/abiglobalhealth/react-native-sdk/issues/201)) ([46d4016](https://github.com/abiglobalhealth/react-native-sdk/commit/46d4016e6c766f5d40b396dcacc0361bff76564f))
|
|
9
|
+
|
|
3
10
|
## [1.30.1](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.30.0...goapp-react-native-v1.30.1) (2025-05-20)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -68,7 +68,7 @@ var getStyles = function (_a) {
|
|
|
68
68
|
return react_native_1.StyleSheet.create({
|
|
69
69
|
input: {
|
|
70
70
|
color: palette.black,
|
|
71
|
-
fontSize: base.
|
|
71
|
+
fontSize: base.fontSize,
|
|
72
72
|
padding: spacing.sm,
|
|
73
73
|
borderWidth: 1,
|
|
74
74
|
borderColor: palette.grey.base,
|
|
@@ -82,6 +82,12 @@ var getStyles = function (_a) {
|
|
|
82
82
|
error: {
|
|
83
83
|
borderColor: palette.error
|
|
84
84
|
},
|
|
85
|
-
hintContainer: {
|
|
85
|
+
hintContainer: {
|
|
86
|
+
position: 'absolute',
|
|
87
|
+
bottom: 4,
|
|
88
|
+
width: '100%',
|
|
89
|
+
alignItems: 'center',
|
|
90
|
+
justifyContent: 'center'
|
|
91
|
+
}
|
|
86
92
|
});
|
|
87
93
|
};
|
|
@@ -1,13 +1,6 @@
|
|
|
1
|
+
import { TEXT_VARIANT } from '../types/theme';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { ColorValue, Text as RNText, TextProps as RNTextProps } from 'react-native';
|
|
3
|
-
export declare enum TEXT_VARIANT {
|
|
4
|
-
h1 = "h1",
|
|
5
|
-
h2 = "h2",
|
|
6
|
-
h3 = "h3",
|
|
7
|
-
h4 = "h4",
|
|
8
|
-
base = "base",
|
|
9
|
-
sm = "sm"
|
|
10
|
-
}
|
|
11
4
|
type TEXT_VARIANT_KEYS = keyof typeof TEXT_VARIANT;
|
|
12
5
|
export declare const Text: React.ForwardRefExoticComponent<RNTextProps & {
|
|
13
6
|
variant?: TEXT_VARIANT_KEYS;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -44,24 +55,15 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
44
55
|
return t;
|
|
45
56
|
};
|
|
46
57
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
-
exports.Text =
|
|
58
|
+
exports.Text = void 0;
|
|
48
59
|
var useTheme_1 = require("../hooks/useTheme");
|
|
49
60
|
var react_1 = __importStar(require("react"));
|
|
50
61
|
var react_native_1 = require("react-native");
|
|
51
|
-
var TEXT_VARIANT;
|
|
52
|
-
(function (TEXT_VARIANT) {
|
|
53
|
-
TEXT_VARIANT["h1"] = "h1";
|
|
54
|
-
TEXT_VARIANT["h2"] = "h2";
|
|
55
|
-
TEXT_VARIANT["h3"] = "h3";
|
|
56
|
-
TEXT_VARIANT["h4"] = "h4";
|
|
57
|
-
TEXT_VARIANT["base"] = "base";
|
|
58
|
-
TEXT_VARIANT["sm"] = "sm";
|
|
59
|
-
})(TEXT_VARIANT || (exports.TEXT_VARIANT = TEXT_VARIANT = {}));
|
|
60
62
|
var getDefaultFontWeight = function (variant, font, bold) {
|
|
61
63
|
var _a;
|
|
62
64
|
if (bold)
|
|
63
65
|
return 'bold';
|
|
64
|
-
var customWeight = (_a = font[variant]) === null || _a === void 0 ? void 0 : _a.
|
|
66
|
+
var customWeight = (_a = font[variant]) === null || _a === void 0 ? void 0 : _a.fontWeight;
|
|
65
67
|
if (customWeight)
|
|
66
68
|
return customWeight;
|
|
67
69
|
switch (variant) {
|
|
@@ -76,36 +78,11 @@ var getDefaultFontWeight = function (variant, font, bold) {
|
|
|
76
78
|
return 'normal';
|
|
77
79
|
}
|
|
78
80
|
};
|
|
79
|
-
var getDefaultFontSize = function (variant, font) {
|
|
80
|
-
var _a;
|
|
81
|
-
return ((_a = font[variant]) === null || _a === void 0 ? void 0 : _a.size) || font.base.size;
|
|
82
|
-
};
|
|
83
|
-
var getDefaultLineHeight = function (variant, font) {
|
|
84
|
-
var _a;
|
|
85
|
-
return ((_a = font[variant]) === null || _a === void 0 ? void 0 : _a.lineHeight) || font.base.lineHeight;
|
|
86
|
-
};
|
|
87
|
-
var getDefaultAlignment = function (variant, font, center) {
|
|
88
|
-
var _a;
|
|
89
|
-
var customAlignment = (_a = font[variant]) === null || _a === void 0 ? void 0 : _a.alignment;
|
|
90
|
-
if (customAlignment)
|
|
91
|
-
return customAlignment;
|
|
92
|
-
return center ? 'center' : font.base.alignment;
|
|
93
|
-
};
|
|
94
|
-
var getDefaultColor = function (variant, font) {
|
|
95
|
-
var _a;
|
|
96
|
-
return ((_a = font[variant]) === null || _a === void 0 ? void 0 : _a.color) || font.base.color;
|
|
97
|
-
};
|
|
98
81
|
exports.Text = (0, react_1.forwardRef)(function (props, ref) {
|
|
99
82
|
var theme = (0, useTheme_1.useTheme)();
|
|
100
83
|
var children = props.children, _a = props.variant, variant = _a === void 0 ? 'base' : _a, style = props.style, bold = props.bold, color = props.color, center = props.center, shrink = props.shrink, rest = __rest(props, ["children", "variant", "style", "bold", "color", "center", "shrink"]);
|
|
101
|
-
var
|
|
102
|
-
|
|
103
|
-
fontWeight: getDefaultFontWeight(variant, theme.font, bold),
|
|
104
|
-
lineHeight: getDefaultLineHeight(variant, theme.font),
|
|
105
|
-
color: color || getDefaultColor(variant, theme.font),
|
|
106
|
-
textAlign: getDefaultAlignment(variant, theme.font, center),
|
|
107
|
-
flexShrink: shrink ? 1 : 0
|
|
108
|
-
}); }, [variant, bold, color, center, shrink, theme]);
|
|
84
|
+
var variantStyle = theme.font[variant];
|
|
85
|
+
var defaultStyle = (0, react_1.useMemo)(function () { return (__assign(__assign({ fontWeight: getDefaultFontWeight(variant, theme.font, bold), textAlign: center ? 'center' : undefined }, variantStyle), { flexShrink: shrink ? 1 : 0 })); }, [variant, bold, color, center, shrink, theme]);
|
|
109
86
|
return (<react_native_1.Text ref={ref} style={[defaultStyle, style]} {...rest}>
|
|
110
87
|
{children}
|
|
111
88
|
</react_native_1.Text>);
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { TEXT_VARIANT } from '../components/Text';
|
|
2
1
|
import { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
2
|
export type RecursivePartial<T> = {
|
|
4
3
|
[P in keyof T]?: RecursivePartial<T[P]>;
|
|
@@ -98,14 +97,15 @@ export type Components = {
|
|
|
98
97
|
placeholderTextColor: ColorValue;
|
|
99
98
|
};
|
|
100
99
|
};
|
|
101
|
-
export
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
export declare enum TEXT_VARIANT {
|
|
101
|
+
h1 = "h1",
|
|
102
|
+
h2 = "h2",
|
|
103
|
+
h3 = "h3",
|
|
104
|
+
h4 = "h4",
|
|
105
|
+
base = "base",
|
|
106
|
+
sm = "sm"
|
|
107
|
+
}
|
|
108
|
+
export type Font = Record<TEXT_VARIANT, TextStyle>;
|
|
109
109
|
export type Theme = {
|
|
110
110
|
palette: Palette;
|
|
111
111
|
font: Font;
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DEFAULT_THEME = void 0;
|
|
3
|
+
exports.DEFAULT_THEME = exports.TEXT_VARIANT = void 0;
|
|
4
|
+
var TEXT_VARIANT;
|
|
5
|
+
(function (TEXT_VARIANT) {
|
|
6
|
+
TEXT_VARIANT["h1"] = "h1";
|
|
7
|
+
TEXT_VARIANT["h2"] = "h2";
|
|
8
|
+
TEXT_VARIANT["h3"] = "h3";
|
|
9
|
+
TEXT_VARIANT["h4"] = "h4";
|
|
10
|
+
TEXT_VARIANT["base"] = "base";
|
|
11
|
+
TEXT_VARIANT["sm"] = "sm";
|
|
12
|
+
})(TEXT_VARIANT || (exports.TEXT_VARIANT = TEXT_VARIANT = {}));
|
|
4
13
|
exports.DEFAULT_THEME = {
|
|
5
14
|
palette: {
|
|
6
15
|
white: '#FFFFFF',
|
|
@@ -15,12 +24,27 @@ exports.DEFAULT_THEME = {
|
|
|
15
24
|
surface: '#FFF'
|
|
16
25
|
},
|
|
17
26
|
font: {
|
|
18
|
-
h1: {
|
|
19
|
-
h2: {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
27
|
+
h1: { fontSize: 28, color: '#161616', textAlign: 'center', lineHeight: 40 },
|
|
28
|
+
h2: {
|
|
29
|
+
fontSize: 24,
|
|
30
|
+
color: '#161616',
|
|
31
|
+
textAlign: 'center',
|
|
32
|
+
lineHeight: 36
|
|
33
|
+
},
|
|
34
|
+
h3: { fontSize: 20, color: '#161616', textAlign: 'center', lineHeight: 24 },
|
|
35
|
+
h4: {
|
|
36
|
+
fontSize: 18,
|
|
37
|
+
color: '#161616',
|
|
38
|
+
textAlign: 'center',
|
|
39
|
+
lineHeight: 24
|
|
40
|
+
},
|
|
41
|
+
base: {
|
|
42
|
+
fontSize: 16,
|
|
43
|
+
color: '#161616',
|
|
44
|
+
textAlign: 'center',
|
|
45
|
+
lineHeight: 24
|
|
46
|
+
},
|
|
47
|
+
sm: { fontSize: 14, color: '#161616', textAlign: 'center', lineHeight: 21 }
|
|
24
48
|
},
|
|
25
49
|
borderRadius: {
|
|
26
50
|
sm: 4,
|
|
@@ -38,7 +62,19 @@ exports.DEFAULT_THEME = {
|
|
|
38
62
|
xxl: 40
|
|
39
63
|
},
|
|
40
64
|
shadows: {
|
|
41
|
-
soft: {
|
|
42
|
-
|
|
65
|
+
soft: {
|
|
66
|
+
shadowColor: '#757575',
|
|
67
|
+
shadowOffset: { width: 0, height: 1 },
|
|
68
|
+
shadowOpacity: 0.16,
|
|
69
|
+
shadowRadius: 1.51,
|
|
70
|
+
elevation: 2
|
|
71
|
+
},
|
|
72
|
+
strong: {
|
|
73
|
+
shadowColor: '#757575',
|
|
74
|
+
shadowOffset: { width: 0, height: 3 },
|
|
75
|
+
shadowOpacity: 0.17,
|
|
76
|
+
shadowRadius: 3.05,
|
|
77
|
+
elevation: 4
|
|
78
|
+
}
|
|
43
79
|
}
|
|
44
80
|
};
|
|
@@ -166,12 +166,12 @@ var getStyles = function (_a) {
|
|
|
166
166
|
},
|
|
167
167
|
itemText: {
|
|
168
168
|
color: palette.black,
|
|
169
|
-
fontSize: font.base.
|
|
169
|
+
fontSize: font.base.fontSize,
|
|
170
170
|
fontWeight: 'bold'
|
|
171
171
|
},
|
|
172
172
|
itemCategory: {
|
|
173
173
|
color: palette.grey.dark,
|
|
174
|
-
fontSize: font.sm.
|
|
174
|
+
fontSize: font.sm.fontSize,
|
|
175
175
|
paddingLeft: spacing.sm
|
|
176
176
|
},
|
|
177
177
|
modal: {
|
|
@@ -199,7 +199,7 @@ var getStyles = function (_a) {
|
|
|
199
199
|
maxHeight: 54,
|
|
200
200
|
justifyContent: 'space-between'
|
|
201
201
|
},
|
|
202
|
-
input: __assign({ flex: 1, borderWidth: 0, paddingHorizontal: spacing.sm, fontSize: font.base.
|
|
202
|
+
input: __assign({ flex: 1, borderWidth: 0, paddingHorizontal: spacing.sm, fontSize: font.base.fontSize, color: palette.black }, react_native_1.Platform.select({
|
|
203
203
|
web: {
|
|
204
204
|
outlineWidth: 0
|
|
205
205
|
}
|