@ovotech/element-native 4.3.0-canary-cfd4e2d-302 → 4.3.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/dist/components/Badge/Badge.js +1 -1
- package/dist/components/ErrorText/ErrorText.js +1 -1
- package/dist/components/FilterSelect/FilterSelect.js +1 -1
- package/dist/components/HintText/HintText.js +1 -1
- package/dist/components/SegmentedControls/components/SegmentButton.js +3 -5
- package/dist/esm/components/Badge/Badge.js +1 -1
- package/dist/esm/components/ErrorText/ErrorText.js +1 -1
- package/dist/esm/components/FilterSelect/FilterSelect.js +1 -1
- package/dist/esm/components/HintText/HintText.js +1 -1
- package/dist/esm/components/SegmentedControls/components/SegmentButton.js +3 -5
- package/package.json +3 -3
|
@@ -69,7 +69,7 @@ var StyledBadge = styled_native_1.default.View(function (_a) {
|
|
|
69
69
|
surface = customVariant.backgroundColor;
|
|
70
70
|
message = customVariant.foregroundColor;
|
|
71
71
|
}
|
|
72
|
-
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding:
|
|
72
|
+
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 ", ";\n border-radius: 16px;\n border: ", " solid\n ", ";\n background-color: ", ";\n align-self: flex-start;\n "], ["\n padding: 0 ", ";\n border-radius: 16px;\n border: ", " solid\n ", ";\n background-color: ", ";\n align-self: flex-start;\n "])), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
|
|
73
73
|
});
|
|
74
74
|
var StyledBadgeText = styled_native_1.default.Text(function (_a) {
|
|
75
75
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
|
|
@@ -36,7 +36,7 @@ var StyledErrorText = styled_native_1.default.Text(function (_a) {
|
|
|
36
36
|
var fontSize = smallAndUp
|
|
37
37
|
? core.fontSize.body.large
|
|
38
38
|
: core.fontSize.body.small;
|
|
39
|
-
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
39
|
+
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), (0, element_core_1.numToPx)(fontSize), semantic.message.error);
|
|
40
40
|
});
|
|
41
41
|
var ErrorText = (0, utils_1.styledComponentWithBreakpoints)(StyledErrorText);
|
|
42
42
|
exports.ErrorText = ErrorText;
|
|
@@ -76,7 +76,7 @@ var FilterSelect = function (_a) {
|
|
|
76
76
|
right: react_native_1.Dimensions.get('window').width - (x + width),
|
|
77
77
|
});
|
|
78
78
|
});
|
|
79
|
-
}, accessibilityRole: "
|
|
79
|
+
}, accessibilityRole: "dropdown", children: [(0, jsx_runtime_1.jsx)(P_1.P, { children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: selected.value === 'default'
|
|
80
80
|
? ''
|
|
81
81
|
: (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? (0, jsx_runtime_1.jsxs)(P_1.P, { children: [" ", rightText] }) : null, (0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: (0, jsx_runtime_1.jsx)(DropdownWrapper, { children: (0, jsx_runtime_1.jsx)(DropdownContainer, { style: {
|
|
82
82
|
top: measure === null || measure === void 0 ? void 0 : measure.top,
|
|
@@ -36,7 +36,7 @@ var StyledHintText = styled_native_1.default.Text(function (_a) {
|
|
|
36
36
|
var fontSize = smallAndUp
|
|
37
37
|
? core.fontSize.body.large
|
|
38
38
|
: core.fontSize.body.small;
|
|
39
|
-
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
39
|
+
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(fontSize), (0, element_core_1.numToPx)(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
|
|
40
40
|
});
|
|
41
41
|
var HintText = (0, utils_1.styledComponentWithBreakpoints)(StyledHintText);
|
|
42
42
|
exports.HintText = HintText;
|
|
@@ -79,17 +79,15 @@ var SegmentButton = function (_a) {
|
|
|
79
79
|
}, style: {
|
|
80
80
|
flexGrow: inline || multipleRows ? undefined : 1,
|
|
81
81
|
width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
|
|
82
|
-
}, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size,
|
|
82
|
+
}, testID: testID, children: (0, jsx_runtime_1.jsxs)(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [(0, jsx_runtime_1.jsx)(SSegmentText, { style: {
|
|
83
83
|
opacity: 0,
|
|
84
84
|
fontWeight: '900',
|
|
85
85
|
}, "$isSelected": false, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), (0, jsx_runtime_1.jsx)(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
|
|
86
86
|
};
|
|
87
87
|
exports.SegmentButton = SegmentButton;
|
|
88
88
|
var SSegmentsWrapper = styled_native_1.default.View(function (_a) {
|
|
89
|
-
var theme = _a.theme, $size = _a.$size
|
|
90
|
-
return "\n ".concat(
|
|
91
|
-
? "padding: 4px ".concat(theme.core.space[$size === 'small' ? 4 : 6], "px;")
|
|
92
|
-
: "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;"), "\n align-items: center;\n justify-content: center;\n");
|
|
89
|
+
var theme = _a.theme, $size = _a.$size;
|
|
90
|
+
return "\n padding: ".concat($size === 'small' ? 0 : 6, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;\n align-items: center;\n justify-content: center;\n");
|
|
93
91
|
});
|
|
94
92
|
var SSegmentText = (0, styled_native_1.default)(AnimatedP)(function (_a) {
|
|
95
93
|
var $isSelected = _a.$isSelected, theme = _a.theme;
|
|
@@ -43,7 +43,7 @@ var StyledBadge = styled.View(function (_a) {
|
|
|
43
43
|
surface = customVariant.backgroundColor;
|
|
44
44
|
message = customVariant.foregroundColor;
|
|
45
45
|
}
|
|
46
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding:
|
|
46
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 ", ";\n border-radius: 16px;\n border: ", " solid\n ", ";\n background-color: ", ";\n align-self: flex-start;\n "], ["\n padding: 0 ", ";\n border-radius: 16px;\n border: ", " solid\n ", ";\n background-color: ", ";\n align-self: flex-start;\n "])), numToPx(core.space[2]), numToPx(core.borderWidth.medium), core.color.brand.white, inverted ? message : surface);
|
|
47
47
|
});
|
|
48
48
|
var StyledBadgeText = styled.Text(function (_a) {
|
|
49
49
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, component = _b.component, _c = _a.variant, variant = _c === void 0 ? 'info' : _c, _d = _a.inverted, inverted = _d === void 0 ? false : _d, customVariant = _a.customVariant;
|
|
@@ -10,7 +10,7 @@ var StyledErrorText = styled.Text(function (_a) {
|
|
|
10
10
|
var fontSize = smallAndUp
|
|
11
11
|
? core.fontSize.body.large
|
|
12
12
|
: core.fontSize.body.small;
|
|
13
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
13
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n line-height: ", ";\n font-size: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), numToPx(fontSize), semantic.message.error);
|
|
14
14
|
});
|
|
15
15
|
var ErrorText = styledComponentWithBreakpoints(StyledErrorText);
|
|
16
16
|
export { ErrorText };
|
|
@@ -50,7 +50,7 @@ export var FilterSelect = function (_a) {
|
|
|
50
50
|
right: Dimensions.get('window').width - (x + width),
|
|
51
51
|
});
|
|
52
52
|
});
|
|
53
|
-
}, accessibilityRole: "
|
|
53
|
+
}, accessibilityRole: "dropdown", children: [_jsx(P, { children: _jsx(Strong, { children: selected.value === 'default'
|
|
54
54
|
? ''
|
|
55
55
|
: (_b = selected.collapsedLabel) !== null && _b !== void 0 ? _b : selected.label }) }), _jsx(Icon, { name: "caret-arrow-down", size: 14, style: { marginLeft: 2 } })] }, String(isOpen)), rightText ? _jsxs(P, { children: [" ", rightText] }) : null, _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: function () { return setOpen(false); }, children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: {
|
|
56
56
|
top: measure === null || measure === void 0 ? void 0 : measure.top,
|
|
@@ -10,7 +10,7 @@ var StyledHintText = styled.Text(function (_a) {
|
|
|
10
10
|
var fontSize = smallAndUp
|
|
11
11
|
? core.fontSize.body.large
|
|
12
12
|
: core.fontSize.body.small;
|
|
13
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
13
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "], ["\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n "])), core.fontFamily.body.native, numToPx(fontSize), numToPx(smallAndUp ? core.lineHeight.body.large : core.lineHeight.body.small), semantic.border.functional);
|
|
14
14
|
});
|
|
15
15
|
var HintText = styledComponentWithBreakpoints(StyledHintText);
|
|
16
16
|
export { HintText };
|
|
@@ -50,16 +50,14 @@ export var SegmentButton = function (_a) {
|
|
|
50
50
|
}, style: {
|
|
51
51
|
flexGrow: inline || multipleRows ? undefined : 1,
|
|
52
52
|
width: inline || multipleRows ? 'auto' : "".concat(100 / segmentCount, "%"),
|
|
53
|
-
}, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size,
|
|
53
|
+
}, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, children: [_jsx(SSegmentText, { style: {
|
|
54
54
|
opacity: 0,
|
|
55
55
|
fontWeight: '900',
|
|
56
56
|
}, "$isSelected": false, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, numberOfLines: 1, adjustsFontSizeToFit: true, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, numberOfLines: 1, adjustsFontSizeToFit: true, children: label })] }) }));
|
|
57
57
|
};
|
|
58
58
|
var SSegmentsWrapper = styled.View(function (_a) {
|
|
59
|
-
var theme = _a.theme, $size = _a.$size
|
|
60
|
-
return "\n ".concat(
|
|
61
|
-
? "padding: 4px ".concat(theme.core.space[$size === 'small' ? 4 : 6], "px;")
|
|
62
|
-
: "padding: ".concat($size === 'small' ? 2 : 8, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;"), "\n align-items: center;\n justify-content: center;\n");
|
|
59
|
+
var theme = _a.theme, $size = _a.$size;
|
|
60
|
+
return "\n padding: ".concat($size === 'small' ? 0 : 6, "px ").concat(theme.core.space[$size === 'small' ? 3 : 4], "px;\n align-items: center;\n justify-content: center;\n");
|
|
63
61
|
});
|
|
64
62
|
var SSegmentText = styled(AnimatedP)(function (_a) {
|
|
65
63
|
var $isSelected = _a.$isSelected, theme = _a.theme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ovotech/element-native",
|
|
3
|
-
"version": "4.3.0
|
|
3
|
+
"version": "4.3.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@backpackapp-io/react-native-toast": "^0.10.0",
|
|
17
|
-
"@ovotech/element-core": "3.1.0-canary-cfd4e2d-302",
|
|
18
17
|
"deepmerge": "^4.2.2",
|
|
19
18
|
"lodash.groupby": "^4.6.0",
|
|
20
|
-
"react-native-reanimated-carousel": "^3.5.1"
|
|
19
|
+
"react-native-reanimated-carousel": "^3.5.1",
|
|
20
|
+
"@ovotech/element-core": "3.1.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@babel/core": "^7.11.5",
|