@ovotech/element-native 3.4.0-canary-5698a51-145 → 3.4.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/List/List.d.ts +5 -3
- package/dist/components/List/List.js +1 -1
- package/dist/components/NavHeader/NavHeader.js +32 -8
- package/dist/components/NavHeader/NavHeader.styles.d.ts +229 -1
- package/dist/components/NavHeader/NavHeader.styles.js +15 -11
- package/dist/components/Tabs/Tabs.js +1 -1
- package/dist/esm/components/List/List.js +1 -1
- package/dist/esm/components/NavHeader/NavHeader.js +34 -10
- package/dist/esm/components/NavHeader/NavHeader.styles.js +14 -10
- package/dist/esm/components/Tabs/Tabs.js +1 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import { ViewProps } from 'react-native';
|
|
3
3
|
declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
[x: number]: any;
|
|
@@ -237,7 +237,9 @@ declare const ListWrapper: import("react").ForwardRefExoticComponent<Pick<Omit<{
|
|
|
237
237
|
as?: string | import("react").ComponentType<any> | undefined;
|
|
238
238
|
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
239
239
|
}, import("../../hooks").BreakpointNames>, string | number | symbol> & import("react").RefAttributes<import("react-native/types").View>>;
|
|
240
|
-
declare const Li: ({ children, ...rest }:
|
|
240
|
+
declare const Li: ({ children, ...rest }: {
|
|
241
|
+
children: ReactNode | ReactNode[];
|
|
242
|
+
}) => JSX.Element;
|
|
241
243
|
declare const Ul: ({ children, showBullets, ...rest }: PropsWithChildren<ViewProps & {
|
|
242
244
|
showBullets?: boolean | undefined;
|
|
243
245
|
}>) => JSX.Element;
|
|
@@ -25,9 +25,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
25
25
|
exports.ListWrapper = exports.Li = exports.Ol = exports.Ul = void 0;
|
|
26
26
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
27
|
var react_1 = require("react");
|
|
28
|
-
var utils_1 = require("../../utils");
|
|
29
28
|
var Stack_1 = require("../Stack");
|
|
30
29
|
var styled_1 = require("./styled");
|
|
30
|
+
var utils_1 = require("../../utils");
|
|
31
31
|
var Bullet = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledBullet);
|
|
32
32
|
var ListWrapper = (0, utils_1.styledComponentWithBreakpoints)(styled_1.StyledList);
|
|
33
33
|
exports.ListWrapper = ListWrapper;
|
|
@@ -37,21 +37,45 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
37
37
|
exports.NavHeader = void 0;
|
|
38
38
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
39
|
var element_core_1 = require("@ovotech/element-core");
|
|
40
|
+
var react_1 = require("react");
|
|
40
41
|
var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
|
|
42
|
+
var use_layout_1 = require("../../hooks/use-layout");
|
|
41
43
|
var ActionList_1 = require("../ActionList");
|
|
42
44
|
var IconButton_1 = require("./IconButton");
|
|
43
45
|
var NavHeader_styles_1 = require("./NavHeader.styles");
|
|
46
|
+
// calculated based on layout with maximum possible height
|
|
47
|
+
var INITIAL_HEADER_HEIGHT = 115;
|
|
44
48
|
var FADE_ANIMATION_DURATION = 250; // ms
|
|
45
49
|
var NavHeader = function (_a) {
|
|
46
50
|
var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
var _b = (0, use_layout_1.useLayout)(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
|
|
52
|
+
var navHeight = (0, react_native_reanimated_1.useSharedValue)(layout.height); // initial value
|
|
53
|
+
var animatedNavHeight = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
|
|
54
|
+
return {
|
|
55
|
+
height: navHeight.value,
|
|
56
|
+
};
|
|
57
|
+
});
|
|
58
|
+
// take children calculated height and change NavContainer height accordingly but with animation
|
|
59
|
+
(0, react_1.useEffect)(function () {
|
|
60
|
+
(0, react_native_reanimated_1.runOnUI)(function () {
|
|
61
|
+
'worklet';
|
|
62
|
+
navHeight.value = (0, react_native_reanimated_1.withTiming)(Math.floor(layout.height), {
|
|
63
|
+
duration: FADE_ANIMATION_DURATION,
|
|
64
|
+
});
|
|
65
|
+
})();
|
|
66
|
+
}, [layout.height]);
|
|
67
|
+
// NavContainer is animated view, height transition will be smooth
|
|
68
|
+
// in order to tell NavContainer which height it children have we need another NavWrapper
|
|
69
|
+
// back-button, title and right-action has wrappers with 33.3% and they are always rendered
|
|
70
|
+
// we need it for correct placing of the title when either back-button or right-action missing
|
|
71
|
+
return ((0, jsx_runtime_1.jsx)(NavHeader_styles_1.NavContainer, __assign({ style: animatedNavHeight }, { children: (0, jsx_runtime_1.jsxs)(NavHeader_styles_1.NavWrapper, __assign({ onLayout: onLayout }, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, __assign({ style: {
|
|
72
|
+
width: scrolled ? '33.3%' : '100%',
|
|
73
|
+
// when back button is off we have small margin top for title, to write less code we can just set height
|
|
74
|
+
height: !canGoBack ? parseInt(element_core_1.theme.core.space[10]) : undefined,
|
|
75
|
+
}, layout: react_native_reanimated_1.Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && ((0, jsx_runtime_1.jsx)(ActionList_1.Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitleWrapper, { children: (0, jsx_runtime_1.jsx)(NavHeader_styles_1.CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: react_native_reanimated_1.FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavHeader_styles_1.ExpandedTitle
|
|
54
76
|
// if we don't have right action leave more space for the title text in expanded state
|
|
55
|
-
|
|
77
|
+
, __assign({
|
|
78
|
+
// if we don't have right action leave more space for the title text in expanded state
|
|
79
|
+
fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: react_native_reanimated_1.FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), (0, jsx_runtime_1.jsx)(NavHeader_styles_1.IconButtonWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: react_native_reanimated_1.FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
|
|
56
80
|
};
|
|
57
81
|
exports.NavHeader = NavHeader;
|
|
@@ -1,6 +1,234 @@
|
|
|
1
1
|
import { View } from 'react-native';
|
|
2
2
|
import Animated from 'react-native-reanimated';
|
|
3
|
-
export declare const NavContainer: import("styled-components").StyledComponent<typeof View, {
|
|
3
|
+
export declare const NavContainer: import("styled-components").StyledComponent<typeof Animated.View, {
|
|
4
|
+
core: {
|
|
5
|
+
radius: Record<"small" | "medium" | "large" | "max", string>;
|
|
6
|
+
borderWidth: Record<"small" | "medium" | "large", string>;
|
|
7
|
+
breakpoint: Record<"small" | "medium" | "large", string | number>;
|
|
8
|
+
mediaQuery: Record<"small" | "medium" | "large", string>;
|
|
9
|
+
space: Record<0 | 2 | 1 | 3 | 4 | 5 | 10 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15, string>;
|
|
10
|
+
transition: Record<"medium" | "slow" | "fast", string>;
|
|
11
|
+
opacity: Record<"solid" | "transparent" | "translucent", string | number>;
|
|
12
|
+
color: Record<"neutral" | "red" | "orange" | "yellow" | "green" | "blue", {
|
|
13
|
+
lightest: string;
|
|
14
|
+
lighter: string;
|
|
15
|
+
light: string;
|
|
16
|
+
base: string;
|
|
17
|
+
dark: string;
|
|
18
|
+
darker: string;
|
|
19
|
+
darkest: string;
|
|
20
|
+
}> & {
|
|
21
|
+
brand: Record<string, string>;
|
|
22
|
+
};
|
|
23
|
+
fontFamily: Record<"body" | "mono" | "heading" | "bodyBold", {
|
|
24
|
+
native: string;
|
|
25
|
+
web: string;
|
|
26
|
+
}>;
|
|
27
|
+
fontWeight: Record<"bold" | "book" | "black", string | number>;
|
|
28
|
+
fontSize: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
|
|
29
|
+
small: string | number;
|
|
30
|
+
large: string | number;
|
|
31
|
+
}>;
|
|
32
|
+
lineHeight: Record<"small" | "body" | "label" | "heading1" | "heading2" | "heading3" | "heading4" | "lead", {
|
|
33
|
+
small: string | number;
|
|
34
|
+
large: string | number;
|
|
35
|
+
}>;
|
|
36
|
+
letterSpacing: Record<"base" | "compressed" | "extraCompressed", number>;
|
|
37
|
+
};
|
|
38
|
+
semantic: {
|
|
39
|
+
surface: Record<"base" | "cutout" | "elevated", string>;
|
|
40
|
+
message: Record<"base" | "link" | "secondary" | "error" | "branded", string>;
|
|
41
|
+
border: Record<"graphic" | "differentiated" | "functional", string>;
|
|
42
|
+
focus: Record<"surface" | "outline" | "hover", string>;
|
|
43
|
+
inverted: Record<"surface" | "border", string> & {
|
|
44
|
+
message: Record<"base" | "link" | "secondary" | "branded", string>;
|
|
45
|
+
};
|
|
46
|
+
success: {
|
|
47
|
+
border: string;
|
|
48
|
+
surface: string;
|
|
49
|
+
surfaceEmphasis: string;
|
|
50
|
+
message: string;
|
|
51
|
+
messageOnEmphasis: string;
|
|
52
|
+
};
|
|
53
|
+
warning: {
|
|
54
|
+
border: string;
|
|
55
|
+
surface: string;
|
|
56
|
+
surfaceEmphasis: string;
|
|
57
|
+
message: string;
|
|
58
|
+
messageOnEmphasis: string;
|
|
59
|
+
};
|
|
60
|
+
error: {
|
|
61
|
+
border: string;
|
|
62
|
+
surface: string;
|
|
63
|
+
surfaceEmphasis: string;
|
|
64
|
+
message: string;
|
|
65
|
+
messageOnEmphasis: string;
|
|
66
|
+
};
|
|
67
|
+
info: {
|
|
68
|
+
border: string;
|
|
69
|
+
surface: string;
|
|
70
|
+
surfaceEmphasis: string;
|
|
71
|
+
message: string;
|
|
72
|
+
messageOnEmphasis: string;
|
|
73
|
+
};
|
|
74
|
+
data: Record<"branded" | "gas" | "electric", Record<2 | 1 | 3 | 4, string>>;
|
|
75
|
+
};
|
|
76
|
+
component: {
|
|
77
|
+
heading1: {
|
|
78
|
+
fontFamily: string;
|
|
79
|
+
fontWeight: string | number;
|
|
80
|
+
fontSize: {
|
|
81
|
+
small: string | number;
|
|
82
|
+
large: string | number;
|
|
83
|
+
};
|
|
84
|
+
lineHeight: {
|
|
85
|
+
small: string | number;
|
|
86
|
+
large: string | number;
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
heading2: {
|
|
90
|
+
fontFamily: string;
|
|
91
|
+
fontWeight: string | number;
|
|
92
|
+
fontSize: {
|
|
93
|
+
small: string | number;
|
|
94
|
+
large: string | number;
|
|
95
|
+
};
|
|
96
|
+
lineHeight: {
|
|
97
|
+
small: string | number;
|
|
98
|
+
large: string | number;
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
heading3: {
|
|
102
|
+
fontFamily: string;
|
|
103
|
+
fontWeight: string | number;
|
|
104
|
+
fontSize: {
|
|
105
|
+
small: string | number;
|
|
106
|
+
large: string | number;
|
|
107
|
+
};
|
|
108
|
+
lineHeight: {
|
|
109
|
+
small: string | number;
|
|
110
|
+
large: string | number;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
heading4: {
|
|
114
|
+
fontFamily: string;
|
|
115
|
+
fontWeight: string | number;
|
|
116
|
+
fontSize: {
|
|
117
|
+
small: string | number;
|
|
118
|
+
large: string | number;
|
|
119
|
+
};
|
|
120
|
+
lineHeight: {
|
|
121
|
+
small: string | number;
|
|
122
|
+
large: string | number;
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
lead: {
|
|
126
|
+
fontFamily: string;
|
|
127
|
+
fontWeight: string | number;
|
|
128
|
+
fontSize: {
|
|
129
|
+
small: string | number;
|
|
130
|
+
large: string | number;
|
|
131
|
+
};
|
|
132
|
+
lineHeight: {
|
|
133
|
+
small: string | number;
|
|
134
|
+
large: string | number;
|
|
135
|
+
};
|
|
136
|
+
};
|
|
137
|
+
body: {
|
|
138
|
+
fontFamily: string;
|
|
139
|
+
fontWeight: string | number;
|
|
140
|
+
fontSize: {
|
|
141
|
+
small: string | number;
|
|
142
|
+
large: string | number;
|
|
143
|
+
};
|
|
144
|
+
lineHeight: {
|
|
145
|
+
small: string | number;
|
|
146
|
+
large: string | number;
|
|
147
|
+
};
|
|
148
|
+
};
|
|
149
|
+
small: {
|
|
150
|
+
fontFamily: string;
|
|
151
|
+
fontWeight: string | number;
|
|
152
|
+
fontSize: {
|
|
153
|
+
small: string | number;
|
|
154
|
+
large: string | number;
|
|
155
|
+
};
|
|
156
|
+
lineHeight: {
|
|
157
|
+
small: string | number;
|
|
158
|
+
large: string | number;
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
label: {
|
|
162
|
+
fontFamily: string;
|
|
163
|
+
fontWeight: string | number;
|
|
164
|
+
fontSize: {
|
|
165
|
+
small: string | number;
|
|
166
|
+
large: string | number;
|
|
167
|
+
};
|
|
168
|
+
lineHeight: {
|
|
169
|
+
small: string | number;
|
|
170
|
+
large: string | number;
|
|
171
|
+
};
|
|
172
|
+
};
|
|
173
|
+
cta: {
|
|
174
|
+
primary: {
|
|
175
|
+
message: string;
|
|
176
|
+
surface: string;
|
|
177
|
+
messageHover: string;
|
|
178
|
+
surfaceHover: string;
|
|
179
|
+
messageFocused: string;
|
|
180
|
+
surfaceFocused: string;
|
|
181
|
+
outlineFocused: string;
|
|
182
|
+
backgroundFocused: string;
|
|
183
|
+
};
|
|
184
|
+
secondary: {
|
|
185
|
+
message: string;
|
|
186
|
+
surface: string;
|
|
187
|
+
messageHover: string;
|
|
188
|
+
surfaceHover: string;
|
|
189
|
+
messageFocused: string;
|
|
190
|
+
surfaceFocused: string;
|
|
191
|
+
outlineFocused: string;
|
|
192
|
+
backgroundFocused: string;
|
|
193
|
+
};
|
|
194
|
+
destructive: {
|
|
195
|
+
message: string;
|
|
196
|
+
surface: string;
|
|
197
|
+
messageHover: string;
|
|
198
|
+
surfaceHover: string;
|
|
199
|
+
messageFocused: string;
|
|
200
|
+
surfaceFocused: string;
|
|
201
|
+
outlineFocused: string;
|
|
202
|
+
backgroundFocused: string;
|
|
203
|
+
};
|
|
204
|
+
};
|
|
205
|
+
badge: {
|
|
206
|
+
variants: {
|
|
207
|
+
red: {
|
|
208
|
+
foreground: string;
|
|
209
|
+
background: string;
|
|
210
|
+
};
|
|
211
|
+
orange: {
|
|
212
|
+
foreground: string;
|
|
213
|
+
background: string;
|
|
214
|
+
};
|
|
215
|
+
yellow: {
|
|
216
|
+
foreground: string;
|
|
217
|
+
background: string;
|
|
218
|
+
};
|
|
219
|
+
green: {
|
|
220
|
+
foreground: string;
|
|
221
|
+
background: string;
|
|
222
|
+
};
|
|
223
|
+
blue: {
|
|
224
|
+
foreground: string;
|
|
225
|
+
background: string;
|
|
226
|
+
};
|
|
227
|
+
};
|
|
228
|
+
};
|
|
229
|
+
};
|
|
230
|
+
}, {}, never>;
|
|
231
|
+
export declare const NavWrapper: import("styled-components").StyledComponent<typeof View, {
|
|
4
232
|
core: {
|
|
5
233
|
radius: Record<"small" | "medium" | "large" | "max", string>;
|
|
6
234
|
borderWidth: Record<"small" | "medium" | "large", string>;
|
|
@@ -30,39 +30,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
30
30
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
31
31
|
};
|
|
32
32
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
-
exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavContainer = void 0;
|
|
33
|
+
exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavWrapper = exports.NavContainer = void 0;
|
|
34
34
|
var react_native_1 = require("react-native");
|
|
35
35
|
var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
|
|
36
36
|
var styled_native_1 = __importStar(require("../../styled.native"));
|
|
37
|
-
exports.NavContainer = (0, styled_native_1.default)(
|
|
38
|
-
var
|
|
39
|
-
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n
|
|
37
|
+
exports.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
|
|
38
|
+
var semantic = _a.theme.semantic;
|
|
39
|
+
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n "], ["\n width: 100%;\n background-color: ", ";\n "])), semantic.surface.base);
|
|
40
|
+
});
|
|
41
|
+
exports.NavWrapper = (0, styled_native_1.default)(react_native_1.View)(function (_a) {
|
|
42
|
+
var core = _a.theme.core;
|
|
43
|
+
return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "], ["\n width: 100%;\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "])), core.space[2]);
|
|
40
44
|
});
|
|
41
45
|
exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
|
|
42
46
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
|
|
43
|
-
return (0, styled_native_1.css)(
|
|
47
|
+
return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "], ["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
|
|
44
48
|
? core.lineHeight.heading1.small
|
|
45
49
|
: core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
|
|
46
50
|
});
|
|
47
|
-
exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(
|
|
51
|
+
exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"], ["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"])), function (_a) {
|
|
48
52
|
var core = _a.theme.core;
|
|
49
53
|
return core.lineHeight.heading4.small;
|
|
50
54
|
});
|
|
51
55
|
exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
|
|
52
56
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic;
|
|
53
|
-
return (0, styled_native_1.css)(
|
|
57
|
+
return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __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.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
|
|
54
58
|
});
|
|
55
|
-
exports.IconButtonWrapper = styled_native_1.default.View(
|
|
59
|
+
exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"])));
|
|
56
60
|
var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
|
|
57
61
|
var semantic = _a.theme.semantic;
|
|
58
62
|
return "\n border-radius: 100px;\n background-color: ".concat(semantic.inverted.surface, ";\n align-items: center;\n justify-content: center;\n");
|
|
59
63
|
});
|
|
60
|
-
exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(
|
|
64
|
+
exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"], ["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
|
|
61
65
|
var $pressed = _a.$pressed;
|
|
62
66
|
return ($pressed ? 0.8 : 1);
|
|
63
67
|
}, iconButtonSharedStyles);
|
|
64
|
-
exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(
|
|
68
|
+
exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"], ["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
|
|
65
69
|
var $pressed = _a.$pressed;
|
|
66
70
|
return ($pressed ? 0.8 : 1);
|
|
67
71
|
}, iconButtonSharedStyles);
|
|
68
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
72
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -59,7 +59,7 @@ var TabList_1 = require("./TabList");
|
|
|
59
59
|
var TabPanel_1 = require("./TabPanel");
|
|
60
60
|
var TabsCard = (0, styled_native_1.default)(Card_1.Card)(function (_a) {
|
|
61
61
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
|
|
62
|
-
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
62
|
+
return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0;\n border: ", " solid\n ", ";\n "], ["\n padding: 0;\n border: ", " solid\n ", ";\n "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
|
|
63
63
|
});
|
|
64
64
|
var Tabs = function (_a) {
|
|
65
65
|
var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
|
|
@@ -22,9 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import { Children } from 'react';
|
|
25
|
-
import { styledComponentWithBreakpoints } from '../../utils';
|
|
26
25
|
import { Stack } from '../Stack';
|
|
27
26
|
import { StyledBullet, StyledLi, StyledList, StyledOlItem, StyledUlItem, UlBullet, } from './styled';
|
|
27
|
+
import { styledComponentWithBreakpoints } from '../../utils';
|
|
28
28
|
var Bullet = styledComponentWithBreakpoints(StyledBullet);
|
|
29
29
|
var ListWrapper = styledComponentWithBreakpoints(StyledList);
|
|
30
30
|
var ListBulletItem = function (_a) {
|
|
@@ -11,20 +11,44 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { theme } from '@ovotech/element-core';
|
|
14
|
-
import
|
|
14
|
+
import { useEffect } from 'react';
|
|
15
|
+
import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, Layout, runOnUI, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
16
|
+
import { useLayout } from '../../hooks/use-layout';
|
|
15
17
|
import { Action } from '../ActionList';
|
|
16
18
|
import { IconButton } from './IconButton';
|
|
17
|
-
import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, } from './NavHeader.styles';
|
|
19
|
+
import { CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, NavContainer, NavWrapper, } from './NavHeader.styles';
|
|
20
|
+
// calculated based on layout with maximum possible height
|
|
21
|
+
var INITIAL_HEADER_HEIGHT = 115;
|
|
18
22
|
var FADE_ANIMATION_DURATION = 250; // ms
|
|
19
23
|
export var NavHeader = function (_a) {
|
|
20
24
|
var title = _a.title, scrolled = _a.scrolled, rightActionConfig = _a.rightActionConfig, canGoBack = _a.canGoBack, goBack = _a.goBack;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
var _b = useLayout(INITIAL_HEADER_HEIGHT), layout = _b[0], onLayout = _b[1];
|
|
26
|
+
var navHeight = useSharedValue(layout.height); // initial value
|
|
27
|
+
var animatedNavHeight = useAnimatedStyle(function () {
|
|
28
|
+
return {
|
|
29
|
+
height: navHeight.value,
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
// take children calculated height and change NavContainer height accordingly but with animation
|
|
33
|
+
useEffect(function () {
|
|
34
|
+
runOnUI(function () {
|
|
35
|
+
'worklet';
|
|
36
|
+
navHeight.value = withTiming(Math.floor(layout.height), {
|
|
37
|
+
duration: FADE_ANIMATION_DURATION,
|
|
38
|
+
});
|
|
39
|
+
})();
|
|
40
|
+
}, [layout.height]);
|
|
41
|
+
// NavContainer is animated view, height transition will be smooth
|
|
42
|
+
// in order to tell NavContainer which height it children have we need another NavWrapper
|
|
43
|
+
// back-button, title and right-action has wrappers with 33.3% and they are always rendered
|
|
44
|
+
// we need it for correct placing of the title when either back-button or right-action missing
|
|
45
|
+
return (_jsx(NavContainer, __assign({ style: animatedNavHeight }, { children: _jsxs(NavWrapper, __assign({ onLayout: onLayout }, { children: [_jsx(Animated.View, __assign({ style: {
|
|
46
|
+
width: scrolled ? '33.3%' : '100%',
|
|
47
|
+
// when back button is off we have small margin top for title, to write less code we can just set height
|
|
48
|
+
height: !canGoBack ? parseInt(theme.core.space[10]) : undefined,
|
|
49
|
+
}, layout: Layout.delay(FADE_ANIMATION_DURATION) }, { children: canGoBack && (_jsx(Action, __assign({ actionType: "back", onPress: goBack }, { children: "Back" }))) })), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { children: _jsx(CollapsedTitle, __assign({ numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION) }, { children: title })) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
|
|
28
50
|
// if we don't have right action leave more space for the title text in expanded state
|
|
29
|
-
|
|
51
|
+
, __assign({
|
|
52
|
+
// if we don't have right action leave more space for the title text in expanded state
|
|
53
|
+
fullWidth: !scrolled && !rightActionConfig, numberOfLines: 1, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION) }, { children: title })), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] })) })));
|
|
30
54
|
};
|
|
@@ -5,35 +5,39 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import { View } from 'react-native';
|
|
6
6
|
import Animated from 'react-native-reanimated';
|
|
7
7
|
import styled, { css } from '../../styled.native';
|
|
8
|
-
export var NavContainer = styled(View)(function (_a) {
|
|
9
|
-
var
|
|
10
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n
|
|
8
|
+
export var NavContainer = styled(Animated.View)(function (_a) {
|
|
9
|
+
var semantic = _a.theme.semantic;
|
|
10
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n "], ["\n width: 100%;\n background-color: ", ";\n "])), semantic.surface.base);
|
|
11
|
+
});
|
|
12
|
+
export var NavWrapper = styled(View)(function (_a) {
|
|
13
|
+
var core = _a.theme.core;
|
|
14
|
+
return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 100%;\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "], ["\n width: 100%;\n padding: ", ";\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n "])), core.space[2]);
|
|
11
15
|
});
|
|
12
16
|
export var ExpandedTitle = styled(Animated.Text)(function (_a) {
|
|
13
17
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
|
|
14
|
-
return css(
|
|
18
|
+
return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "], ["\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n height: ", ";\n color: ", ";\n "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
|
|
15
19
|
? core.lineHeight.heading1.small
|
|
16
20
|
: core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
|
|
17
21
|
});
|
|
18
|
-
export var CollapsedTitleWrapper = styled(Animated.View)(
|
|
22
|
+
export var CollapsedTitleWrapper = styled(Animated.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"], ["\n align-items: center;\n justify-content: center;\n width: 33.3%;\n height: ", ";\n"])), function (_a) {
|
|
19
23
|
var core = _a.theme.core;
|
|
20
24
|
return core.lineHeight.heading4.small;
|
|
21
25
|
});
|
|
22
26
|
export var CollapsedTitle = styled(Animated.Text)(function (_a) {
|
|
23
27
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic;
|
|
24
|
-
return css(
|
|
28
|
+
return css(templateObject_5 || (templateObject_5 = __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.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
|
|
25
29
|
});
|
|
26
|
-
export var IconButtonWrapper = styled.View(
|
|
30
|
+
export var IconButtonWrapper = styled.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"], ["\n width: 33.3%;\n flex-direction: row;\n justify-content: flex-end;\n"])));
|
|
27
31
|
var iconButtonSharedStyles = css(function (_a) {
|
|
28
32
|
var semantic = _a.theme.semantic;
|
|
29
33
|
return "\n border-radius: 100px;\n background-color: ".concat(semantic.inverted.surface, ";\n align-items: center;\n justify-content: center;\n");
|
|
30
34
|
});
|
|
31
|
-
export var StyledIconButtonS = styled(Animated.View)(
|
|
35
|
+
export var StyledIconButtonS = styled(Animated.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"], ["\n width: 28px;\n height: 28px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
|
|
32
36
|
var $pressed = _a.$pressed;
|
|
33
37
|
return ($pressed ? 0.8 : 1);
|
|
34
38
|
}, iconButtonSharedStyles);
|
|
35
|
-
export var StyledIconButtonL = styled(Animated.View)(
|
|
39
|
+
export var StyledIconButtonL = styled(Animated.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"], ["\n width: 36px;\n height: 36px;\n opacity: ", ";\n ", ";\n"])), function (_a) {
|
|
36
40
|
var $pressed = _a.$pressed;
|
|
37
41
|
return ($pressed ? 0.8 : 1);
|
|
38
42
|
}, iconButtonSharedStyles);
|
|
39
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
43
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -33,7 +33,7 @@ import { TabList } from './TabList';
|
|
|
33
33
|
import { TabPanel } from './TabPanel';
|
|
34
34
|
var TabsCard = styled(Card)(function (_a) {
|
|
35
35
|
var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline;
|
|
36
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
36
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0;\n border: ", " solid\n ", ";\n "], ["\n padding: 0;\n border: ", " solid\n ", ";\n "])), core.borderWidth.small, inline ? semantic.border.differentiated : 'transparent');
|
|
37
37
|
});
|
|
38
38
|
export var Tabs = function (_a) {
|
|
39
39
|
var children = _a.children, _b = _a.defaultSelected, defaultSelected = _b === void 0 ? 0 : _b, onSelected = _a.onSelected, fullWidth = _a.fullWidth, inline = _a.inline, rest = __rest(_a, ["children", "defaultSelected", "onSelected", "fullWidth", "inline"]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ovotech/element-native",
|
|
3
|
-
"version": "3.4.0
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"url": "@ovotech/element"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@ovotech/element-core": "^2.1.0
|
|
16
|
+
"@ovotech/element-core": "^2.1.0",
|
|
17
17
|
"deepmerge": "^4.2.2",
|
|
18
18
|
"lodash.groupby": "^4.6.0"
|
|
19
19
|
},
|