react-native-terra-ui 0.11.11 → 0.11.13
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 +16 -0
- package/TerraUI.podspec +16 -0
- package/ios/TerraHeaderInsetsComponentView.h +4 -0
- package/ios/TerraHeaderInsetsComponentView.mm +93 -0
- package/lib/module/components/header/hooks/use-header-color.js +16 -0
- package/lib/module/components/header/hooks/use-header-color.js.map +1 -0
- package/lib/module/components/header/hooks/use-large-title-header.js +81 -0
- package/lib/module/components/header/hooks/use-large-title-header.js.map +1 -0
- package/lib/module/components/header/parts/HeaderAccessory.js +21 -6
- package/lib/module/components/header/parts/HeaderAccessory.js.map +1 -1
- package/lib/module/components/header/parts/HeaderBar.js +140 -0
- package/lib/module/components/header/parts/HeaderBar.js.map +1 -0
- package/lib/module/components/header/parts/HeaderGradientOverlay.js +5 -3
- package/lib/module/components/header/parts/HeaderGradientOverlay.js.map +1 -1
- package/lib/module/components/header/parts/HeaderSurface.js +8 -14
- package/lib/module/components/header/parts/HeaderSurface.js.map +1 -1
- package/lib/module/components/header/parts/HeaderWindowInsets.ios.js +29 -0
- package/lib/module/components/header/parts/HeaderWindowInsets.ios.js.map +1 -0
- package/lib/module/components/header/parts/HeaderWindowInsets.js +7 -0
- package/lib/module/components/header/parts/HeaderWindowInsets.js.map +1 -0
- package/lib/module/components/header/variants/LargeTitleHeader/index.js +51 -386
- package/lib/module/components/header/variants/LargeTitleHeader/index.js.map +1 -1
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js +72 -0
- package/lib/module/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.js.map +1 -0
- package/lib/module/components/header/variants/TitleHeader/index.js +32 -160
- package/lib/module/components/header/variants/TitleHeader/index.js.map +1 -1
- package/lib/module/components/surface/Surface.js +2 -0
- package/lib/module/components/surface/Surface.js.map +1 -1
- package/lib/module/specs/TerraHeaderInsetsNativeComponent.ts +12 -0
- package/lib/typescript/src/components/header/hooks/use-header-color.d.ts +4 -0
- package/lib/typescript/src/components/header/hooks/use-header-color.d.ts.map +1 -0
- package/lib/typescript/src/components/header/hooks/use-large-title-header.d.ts +36 -0
- package/lib/typescript/src/components/header/hooks/use-large-title-header.d.ts.map +1 -0
- package/lib/typescript/src/components/header/parts/HeaderAccessory.d.ts +8 -5
- package/lib/typescript/src/components/header/parts/HeaderAccessory.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderBar.d.ts +17 -0
- package/lib/typescript/src/components/header/parts/HeaderBar.d.ts.map +1 -0
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts +3 -1
- package/lib/typescript/src/components/header/parts/HeaderGradientOverlay.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderSurface.d.ts +5 -9
- package/lib/typescript/src/components/header/parts/HeaderSurface.d.ts.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderWindowInsets.d.ts +9 -0
- package/lib/typescript/src/components/header/parts/HeaderWindowInsets.d.ts.map +1 -0
- package/lib/typescript/src/components/header/parts/HeaderWindowInsets.ios.d.ts +3 -0
- package/lib/typescript/src/components/header/parts/HeaderWindowInsets.ios.d.ts.map +1 -0
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/index.d.ts +3 -23
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.d.ts +11 -0
- package/lib/typescript/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.d.ts.map +1 -0
- package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts +3 -19
- package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts.map +1 -1
- package/lib/typescript/src/components/surface/Surface.d.ts.map +1 -1
- package/lib/typescript/src/specs/TerraHeaderInsetsNativeComponent.d.ts +10 -0
- package/lib/typescript/src/specs/TerraHeaderInsetsNativeComponent.d.ts.map +1 -0
- package/package.json +14 -1
- package/react-native.config.js +7 -0
- package/src/components/header/hooks/use-header-color.ts +14 -0
- package/src/components/header/hooks/use-large-title-header.ts +78 -0
- package/src/components/header/parts/HeaderAccessory.tsx +26 -7
- package/src/components/header/parts/HeaderBar.tsx +139 -0
- package/src/components/header/parts/HeaderGradientOverlay.tsx +9 -3
- package/src/components/header/parts/HeaderSurface.tsx +11 -17
- package/src/components/header/parts/HeaderWindowInsets.ios.tsx +24 -0
- package/src/components/header/parts/HeaderWindowInsets.tsx +8 -0
- package/src/components/header/variants/LargeTitleHeader/index.tsx +44 -369
- package/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx +88 -0
- package/src/components/header/variants/TitleHeader/index.tsx +32 -146
- package/src/components/surface/Surface.tsx +2 -1
- package/src/specs/TerraHeaderInsetsNativeComponent.ts +12 -0
|
@@ -1,36 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
7
|
-
import { resolveThemeColor } from "../../../../utils/resolve-theme-color.js";
|
|
8
|
-
import { FONT_WEIGHT_VALUE } from "../../../../utils/typography.js";
|
|
4
|
+
import { useContext } from "react";
|
|
5
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
9
6
|
import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearance.js";
|
|
10
7
|
import { ScreenContext } from "../../../screen/ScreenContext.js";
|
|
11
|
-
import {
|
|
12
|
-
import { HeaderDismissButton } from "../../header-buttons.js";
|
|
8
|
+
import { useHeaderColor } from "../../hooks/use-header-color.js";
|
|
13
9
|
import { HeaderAccessory } from "../../parts/HeaderAccessory.js";
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Compact title bar (leading slot · title · trailing slot) with a top safe-area
|
|
19
|
-
* inset outside Screen. Within Screen, the root owns safe-area clearance. The inline counterpart to `Header.LargeTitle`; use it for screens that
|
|
20
|
-
* don't need a collapsing large title.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```tsx
|
|
24
|
-
* <Screen.Header>
|
|
25
|
-
* <Header.Title
|
|
26
|
-
* title="Stats"
|
|
27
|
-
* trailingActions={
|
|
28
|
-
* <Toolbar.Button icon="add" accessibilityLabel="Add" onPress={add} />
|
|
29
|
-
* }
|
|
30
|
-
* />
|
|
31
|
-
* </Screen.Header>
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
10
|
+
import { HeaderBar } from "../../parts/HeaderBar.js";
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
/** Compact header. Screen owns the safe area when present; standalone headers reserve it here. */
|
|
34
13
|
export function TitleHeader({
|
|
35
14
|
title,
|
|
36
15
|
leadingActions,
|
|
@@ -39,78 +18,34 @@ export function TitleHeader({
|
|
|
39
18
|
RightToolbar,
|
|
40
19
|
accessory,
|
|
41
20
|
accessoryPadding = "x",
|
|
42
|
-
dismissAction = "none",
|
|
43
|
-
navigation,
|
|
44
|
-
onDismiss,
|
|
45
21
|
titleAlignment = "center",
|
|
46
22
|
background,
|
|
47
|
-
bg
|
|
23
|
+
bg,
|
|
24
|
+
...dismissProps
|
|
48
25
|
}) {
|
|
49
|
-
const {
|
|
50
|
-
theme
|
|
51
|
-
} = useUnistyles();
|
|
52
26
|
const screen = useContext(ScreenContext);
|
|
53
|
-
const
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
})
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}) : leadingContent;
|
|
74
|
-
const trailing = dismissAction === "close" ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
75
|
-
children: [trailingContent, /*#__PURE__*/_jsx(HeaderDismissButton, {
|
|
76
|
-
dismissAction: dismissAction,
|
|
77
|
-
navigation: navigation,
|
|
78
|
-
onDismiss: onDismiss
|
|
79
|
-
})]
|
|
80
|
-
}) : trailingContent;
|
|
81
|
-
return /*#__PURE__*/_jsxs(View, {
|
|
82
|
-
style: styles.container,
|
|
83
|
-
children: [/*#__PURE__*/_jsx(View, {
|
|
84
|
-
style: styles.safeArea(isTransparent, bgColor, screen !== null)
|
|
85
|
-
}), /*#__PURE__*/_jsxs(View, {
|
|
86
|
-
style: styles.barGroup,
|
|
87
|
-
children: [/*#__PURE__*/_jsx(HeaderSurface, {
|
|
88
|
-
color: bgColor
|
|
89
|
-
}), /*#__PURE__*/_jsxs(View, {
|
|
90
|
-
style: styles.bar,
|
|
91
|
-
children: [leading != null && /*#__PURE__*/_jsx(Toolbar, {
|
|
92
|
-
children: leading
|
|
93
|
-
}), /*#__PURE__*/_jsx(View, {
|
|
94
|
-
style: styles.titleContainer,
|
|
95
|
-
pointerEvents: isCustomTitle(title) ? "box-none" : "none",
|
|
96
|
-
children: isTextTitle(title) ? String(title).trim().length > 0 && /*#__PURE__*/_jsx(Text, {
|
|
97
|
-
style: styles.title,
|
|
98
|
-
children: title
|
|
99
|
-
}) : title
|
|
100
|
-
}), trailing != null && /*#__PURE__*/_jsx(Toolbar, {
|
|
101
|
-
style: styles.trailing,
|
|
102
|
-
children: trailing
|
|
103
|
-
})]
|
|
104
|
-
}), accessory != null && /*#__PURE__*/_jsx(HeaderAccessory, {
|
|
105
|
-
padding: accessoryPadding,
|
|
106
|
-
onHeightChange: handleAccessoryHeightChange,
|
|
107
|
-
children: accessory
|
|
108
|
-
})]
|
|
109
|
-
})]
|
|
110
|
-
});
|
|
111
|
-
}
|
|
27
|
+
const color = useHeaderColor(background ?? bg);
|
|
28
|
+
useHeaderBackground(color);
|
|
29
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
30
|
+
style: styles.container,
|
|
31
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
32
|
+
style: styles.safeArea(color, screen !== null)
|
|
33
|
+
}), /*#__PURE__*/_jsx(HeaderBar, {
|
|
34
|
+
...dismissProps,
|
|
35
|
+
title: title,
|
|
36
|
+
titleAlignment: titleAlignment,
|
|
37
|
+
color: color,
|
|
38
|
+
leading: leadingActions !== undefined ? leadingActions : LeftToolbar,
|
|
39
|
+
trailing: trailingActions !== undefined ? trailingActions : RightToolbar
|
|
40
|
+
}), accessory != null && /*#__PURE__*/_jsx(HeaderAccessory, {
|
|
41
|
+
padding: accessoryPadding,
|
|
42
|
+
color: color,
|
|
43
|
+
onHeightChange: screen?.setHeaderAccessoryHeight,
|
|
44
|
+
children: accessory
|
|
45
|
+
})]
|
|
46
|
+
});
|
|
112
47
|
}
|
|
113
|
-
const styles = StyleSheet.create((
|
|
48
|
+
const styles = StyleSheet.create((_, runtime) => ({
|
|
114
49
|
container: {
|
|
115
50
|
position: "absolute",
|
|
116
51
|
top: 0,
|
|
@@ -118,73 +53,10 @@ const styles = StyleSheet.create((theme, runtime) => ({
|
|
|
118
53
|
right: 0,
|
|
119
54
|
zIndex: 1000
|
|
120
55
|
},
|
|
121
|
-
safeArea: (
|
|
56
|
+
safeArea: (color, withinScreen) => ({
|
|
122
57
|
height: withinScreen ? 0 : runtime.insets.top,
|
|
123
|
-
backgroundColor:
|
|
58
|
+
backgroundColor: color,
|
|
124
59
|
uni__dependencies: [9]
|
|
125
|
-
})
|
|
126
|
-
// Anchors the absolutely positioned surface over the bar and the accessory both.
|
|
127
|
-
barGroup: {
|
|
128
|
-
position: "relative"
|
|
129
|
-
},
|
|
130
|
-
bar: {
|
|
131
|
-
height: theme.layout.header.height,
|
|
132
|
-
flexDirection: "row",
|
|
133
|
-
alignItems: "center",
|
|
134
|
-
paddingHorizontal: theme.layout.screen.padding.x,
|
|
135
|
-
gap: theme.spacing["3"],
|
|
136
|
-
justifyContent: "space-between",
|
|
137
|
-
uni__dependencies: [0]
|
|
138
|
-
},
|
|
139
|
-
// A centered title is absolutely positioned, so it leaves the flex row. With
|
|
140
|
-
// no leading slot the trailing toolbar would be the only in-flow child and
|
|
141
|
-
// `space-between` would park it on the left — the auto margin pins it right.
|
|
142
|
-
trailing: {
|
|
143
|
-
justifyContent: "flex-end",
|
|
144
|
-
variants: {
|
|
145
|
-
titleAlignment: {
|
|
146
|
-
center: {
|
|
147
|
-
marginLeft: "auto"
|
|
148
|
-
},
|
|
149
|
-
left: {}
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
uni__dependencies: [4]
|
|
153
|
-
},
|
|
154
|
-
titleContainer: {
|
|
155
|
-
variants: {
|
|
156
|
-
titleAlignment: {
|
|
157
|
-
center: {
|
|
158
|
-
position: "absolute",
|
|
159
|
-
left: 0,
|
|
160
|
-
right: 0,
|
|
161
|
-
alignItems: "center"
|
|
162
|
-
},
|
|
163
|
-
left: {
|
|
164
|
-
flex: 1,
|
|
165
|
-
alignItems: "flex-start"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
uni__dependencies: [4]
|
|
170
|
-
},
|
|
171
|
-
title: {
|
|
172
|
-
fontSize: theme.typography.variants["title-md"].fontSize,
|
|
173
|
-
lineHeight: theme.typography.variants["title-md"].lineHeight,
|
|
174
|
-
letterSpacing: theme.typography.variants["title-md"].letterSpacing,
|
|
175
|
-
fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
|
|
176
|
-
color: theme.color["text.primary"] ?? "",
|
|
177
|
-
variants: {
|
|
178
|
-
titleAlignment: {
|
|
179
|
-
center: {
|
|
180
|
-
textAlign: "center"
|
|
181
|
-
},
|
|
182
|
-
left: {
|
|
183
|
-
textAlign: "left"
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
},
|
|
187
|
-
uni__dependencies: [0, 4]
|
|
188
|
-
}
|
|
60
|
+
})
|
|
189
61
|
}));
|
|
190
62
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useContext","StyleSheet","useHeaderBackground","ScreenContext","useHeaderColor","HeaderAccessory","HeaderBar","jsx","_jsx","jsxs","_jsxs","TitleHeader","title","leadingActions","trailingActions","LeftToolbar","RightToolbar","accessory","accessoryPadding","titleAlignment","background","bg","dismissProps","screen","color","View","style","styles","container","children","safeArea","leading","undefined","trailing","padding","onHeightChange","setHeaderAccessoryHeight","create","_","runtime","position","top","left","right","zIndex","withinScreen","height","insets","backgroundColor","uni__dependencies"],"sourceRoot":"../../../../../../src","sources":["components/header/variants/TitleHeader/index.tsx"],"mappings":";;;AAAA,SAAyBA,UAAU,QAAQ,OAAO;AAGlD,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,mBAAmB;AAC5B,SAASC,aAAa;AAEtB,SAASC,cAAc;AACvB,SAASC,eAAe;AACxB,SAASC,SAAS;AAAgC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA4ClD;AACA,OAAO,SAASC,WAAWA,CAAC;EAC1BC,KAAK;EACLC,cAAc;EACdC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC,SAAS;EACTC,gBAAgB,GAAG,GAAG;EACtBC,cAAc,GAAG,QAAQ;EACzBC,UAAU;EACVC,EAAE;EACF,GAAGC;AACa,CAAC,EAAE;EACnB,MAAMC,MAAM,GAAGvB,UAAU,CAACG,aAAa,CAAC;EACxC,MAAMqB,KAAK,GAAGpB,cAAc,CAACgB,UAAU,IAAIC,EAAE,CAAC;EAC9CnB,mBAAmB,CAACsB,KAAK,CAAC;EAC1B,oBACEd,KAAA,CAACe,IAAI;IAACC,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BrB,IAAA,CAACiB,IAAI;MAACC,KAAK,EAAEC,MAAM,CAACG,QAAQ,CAACN,KAAK,EAAED,MAAM,KAAK,IAAI;IAAE,CAAE,CAAC,eACxDf,IAAA,CAACF,SAAS;MAAA,GACJgB,YAAY;MAChBV,KAAK,EAAEA,KAAM;MACbO,cAAc,EAAEA,cAAe;MAC/BK,KAAK,EAAEA,KAAM;MACbO,OAAO,EAAElB,cAAc,KAAKmB,SAAS,GAAGnB,cAAc,GAAGE,WAAY;MACrEkB,QAAQ,EAAEnB,eAAe,KAAKkB,SAAS,GAAGlB,eAAe,GAAGE;IAAa,CAC1E,CAAC,EACDC,SAAS,IAAI,IAAI,iBAChBT,IAAA,CAACH,eAAe;MACd6B,OAAO,EAAEhB,gBAAiB;MAC1BM,KAAK,EAAEA,KAAM;MACbW,cAAc,EAAEZ,MAAM,EAAEa,wBAAyB;MAAAP,QAAA,EAEhDZ;IAAS,CACK,CAClB;EAAA,CACG,CAAC;AAEX;AAEA,MAAMU,MAAM,GAAG1B,UAAU,CAACoC,MAAM,CAAC,CAACC,CAAC,EAAEC,OAAO,MAAM;EAChDX,SAAS,EAAE;IAAEY,QAAQ,EAAE,UAAU;IAAEC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAK,CAAC;EAC5Ed,QAAQ,EAAEA,CAACN,KAAa,EAAEqB,YAAqB,MAAM;IACnDC,MAAM,EAAED,YAAY,GAAG,CAAC,GAAGN,OAAO,CAACQ,MAAM,CAACN,GAAG;IAC7CO,eAAe,EAAExB,KAAK;IAAAyB,iBAAA;EACxB,CAAC;AACH,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -61,6 +61,7 @@ const resolveElevation = (variant, elevation) => {
|
|
|
61
61
|
*/
|
|
62
62
|
export const Surface = /*#__PURE__*/forwardRef(function Surface({
|
|
63
63
|
variant = "base",
|
|
64
|
+
p = "3",
|
|
64
65
|
elevation,
|
|
65
66
|
radius,
|
|
66
67
|
borderWidth,
|
|
@@ -71,6 +72,7 @@ export const Surface = /*#__PURE__*/forwardRef(function Surface({
|
|
|
71
72
|
return /*#__PURE__*/_jsx(Box, {
|
|
72
73
|
ref: ref,
|
|
73
74
|
background: VARIANT_BG[variant],
|
|
75
|
+
p: p,
|
|
74
76
|
radius: radius ?? getDefaultRadius("surface"),
|
|
75
77
|
borderWidth: borderWidth ?? variantBorder.borderWidth,
|
|
76
78
|
borderColor: borderColor ?? variantBorder.borderColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","getDefaultRadius","getSurfaceElevation","Box","jsx","_jsx","VARIANT_BG","base","raised","sunken","transparent","VARIANT_BORDER","borderWidth","borderColor","resolveElevation","variant","elevation","undefined","Surface","radius","rest","ref","variantBorder","background"],"sourceRoot":"../../../../src","sources":["components/surface/Surface.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AAGrD,SAASC,gBAAgB,EAAEC,mBAAmB;AAE9C,SAAgCC,GAAG;;AAEnC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgBA,MAAMC,UAA8C,GAAG;EACrDC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE,gBAAgB;EACxBC,MAAM,EAAE,gBAAgB;EACxBC,WAAW,EAAE;AACf,CAAC;;AAED;AACA,MAAMC,cAAoG,GAAG;EAC3GJ,IAAI,EAAE,CAAC,CAAC;EACRC,MAAM,EAAE;IAAEI,WAAW,EAAE,UAAU;IAAEC,WAAW,EAAE;EAAgB,CAAC;EACjEJ,MAAM,EAAE;IAAEG,WAAW,EAAE,UAAU;IAAEC,WAAW,EAAE;EAAiB,CAAC;EAClEH,WAAW,EAAE,CAAC;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMI,gBAAgB,GAAGA,CAACC,OAAuB,EAAEC,SAAwB,KAAmB;EAC5F,IAAID,OAAO,KAAK,aAAa,EAAE,OAAO,MAAM;EAC5C,IAAIC,SAAS,KAAKC,SAAS,EAAE,OAAOD,SAAS;EAC7C,IAAID,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI;EACrC,OAAOb,mBAAmB,CAAC,CAAC;AAC9B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMgB,OAAO,gBAAGlB,UAAU,CAA0C,SAASkB,OAAOA,CACzF;EAAEH,OAAO,GAAG,MAAM;
|
|
1
|
+
{"version":3,"names":["forwardRef","getDefaultRadius","getSurfaceElevation","Box","jsx","_jsx","VARIANT_BG","base","raised","sunken","transparent","VARIANT_BORDER","borderWidth","borderColor","resolveElevation","variant","elevation","undefined","Surface","p","radius","rest","ref","variantBorder","background"],"sourceRoot":"../../../../src","sources":["components/surface/Surface.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AAGrD,SAASC,gBAAgB,EAAEC,mBAAmB;AAE9C,SAAgCC,GAAG;;AAEnC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgBA,MAAMC,UAA8C,GAAG;EACrDC,IAAI,EAAE,iBAAiB;EACvBC,MAAM,EAAE,gBAAgB;EACxBC,MAAM,EAAE,gBAAgB;EACxBC,WAAW,EAAE;AACf,CAAC;;AAED;AACA,MAAMC,cAAoG,GAAG;EAC3GJ,IAAI,EAAE,CAAC,CAAC;EACRC,MAAM,EAAE;IAAEI,WAAW,EAAE,UAAU;IAAEC,WAAW,EAAE;EAAgB,CAAC;EACjEJ,MAAM,EAAE;IAAEG,WAAW,EAAE,UAAU;IAAEC,WAAW,EAAE;EAAiB,CAAC;EAClEH,WAAW,EAAE,CAAC;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMI,gBAAgB,GAAGA,CAACC,OAAuB,EAAEC,SAAwB,KAAmB;EAC5F,IAAID,OAAO,KAAK,aAAa,EAAE,OAAO,MAAM;EAC5C,IAAIC,SAAS,KAAKC,SAAS,EAAE,OAAOD,SAAS;EAC7C,IAAID,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI;EACrC,OAAOb,mBAAmB,CAAC,CAAC;AAC9B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMgB,OAAO,gBAAGlB,UAAU,CAA0C,SAASkB,OAAOA,CACzF;EAAEH,OAAO,GAAG,MAAM;EAAEI,CAAC,GAAG,GAAG;EAAEH,SAAS;EAAEI,MAAM;EAAER,WAAW;EAAEC,WAAW;EAAE,GAAGQ;AAAK,CAAC,EACnFC,GAAG,EACH;EACA,MAAMC,aAAa,GAAGZ,cAAc,CAACI,OAAO,CAAC;EAE7C,oBACEV,IAAA,CAACF,GAAG;IACFmB,GAAG,EAAEA,GAAI;IACTE,UAAU,EAAElB,UAAU,CAACS,OAAO,CAAE;IAChCI,CAAC,EAAEA,CAAE;IACLC,MAAM,EAAEA,MAAM,IAAInB,gBAAgB,CAAC,SAAS,CAAE;IAC9CW,WAAW,EAAEA,WAAW,IAAIW,aAAa,CAACX,WAAY;IACtDC,WAAW,EAAEA,WAAW,IAAIU,aAAa,CAACV,WAAY;IACtDG,SAAS,EAAEF,gBAAgB,CAACC,OAAO,EAAEC,SAAS,CAAE;IAAA,GAC5CK;EAAI,CACT,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { CodegenTypes, ViewProps } from "react-native";
|
|
2
|
+
import { codegenNativeComponent } from "react-native";
|
|
3
|
+
|
|
4
|
+
export interface NativeProps extends ViewProps {
|
|
5
|
+
onInsetsChange?: CodegenTypes.DirectEventHandler<
|
|
6
|
+
Readonly<{ left: CodegenTypes.Double; right: CodegenTypes.Double }>
|
|
7
|
+
>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default codegenNativeComponent<NativeProps>("TerraHeaderInsets", {
|
|
11
|
+
excludedPlatforms: ["android"],
|
|
12
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-header-color.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/hooks/use-header-color.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,UAIhD"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { HeaderAccessoryBehavior } from "../types.js";
|
|
2
|
+
interface LargeTitleLayoutOptions {
|
|
3
|
+
hasAccessory: boolean;
|
|
4
|
+
accessoryBehavior: HeaderAccessoryBehavior;
|
|
5
|
+
isLargeTitleHidden: boolean;
|
|
6
|
+
}
|
|
7
|
+
/** Coordinates measured layout and UI-thread animation without animating accessory padding. */
|
|
8
|
+
export declare function useLargeTitleHeader({ hasAccessory, accessoryBehavior, isLargeTitleHidden, }: LargeTitleLayoutOptions): {
|
|
9
|
+
isSticky: boolean;
|
|
10
|
+
accessoryOffset: number;
|
|
11
|
+
reservedAccessoryHeight: number;
|
|
12
|
+
setAccessoryHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
13
|
+
setLargeTitleHeight: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
14
|
+
accessoryStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
|
|
15
|
+
transform: {
|
|
16
|
+
translateY: number;
|
|
17
|
+
}[];
|
|
18
|
+
}>;
|
|
19
|
+
surfaceStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
|
|
20
|
+
opacity: number;
|
|
21
|
+
}>;
|
|
22
|
+
compactTitleStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
|
|
23
|
+
opacity: number;
|
|
24
|
+
transform: {
|
|
25
|
+
translateY: number;
|
|
26
|
+
}[];
|
|
27
|
+
}>;
|
|
28
|
+
largeTitleStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
|
|
29
|
+
opacity: number;
|
|
30
|
+
transform: {
|
|
31
|
+
translateY: number;
|
|
32
|
+
}[];
|
|
33
|
+
}>;
|
|
34
|
+
};
|
|
35
|
+
export {};
|
|
36
|
+
//# sourceMappingURL=use-large-title-header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-large-title-header.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/hooks/use-large-title-header.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAU,CAAC;AAExD,UAAU,uBAAuB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,uBAAuB,CAAC;IAC3C,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,+FAA+F;AAC/F,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DzB"}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
2
|
-
import
|
|
1
|
+
import { type ComponentProps, type ReactNode } from "react";
|
|
2
|
+
import Animated from "react-native-reanimated";
|
|
3
3
|
import type { HeaderAccessoryPadding } from "../types.js";
|
|
4
|
+
import { type HeaderSurfaceProps } from "./HeaderSurface.js";
|
|
4
5
|
export interface HeaderAccessoryProps {
|
|
5
6
|
children: ReactNode;
|
|
6
7
|
/** Horizontal padding around the accessory. */
|
|
7
8
|
padding: HeaderAccessoryPadding;
|
|
9
|
+
color: string;
|
|
10
|
+
surfaceStyle?: HeaderSurfaceProps["animatedStyle"];
|
|
8
11
|
/** Reports layout height in dp; reports zero on cleanup to release reserved space. */
|
|
9
|
-
onHeightChange
|
|
12
|
+
onHeightChange?: (height: number) => void;
|
|
10
13
|
/** Additional styles for the accessory container. */
|
|
11
|
-
style?:
|
|
14
|
+
style?: ComponentProps<typeof Animated.View>["style"];
|
|
12
15
|
}
|
|
13
16
|
/** Measures accessory content so the header can reserve space in the scroll container. */
|
|
14
|
-
export declare function HeaderAccessory({ children, padding, onHeightChange, style }: HeaderAccessoryProps): import("react").JSX.Element;
|
|
17
|
+
export declare function HeaderAccessory({ children, padding, color, surfaceStyle, onHeightChange, style, }: HeaderAccessoryProps): import("react").JSX.Element;
|
|
15
18
|
/** Reserves scroll-content space for the sticky accessory rendered in the header overlay. */
|
|
16
19
|
export declare function HeaderAccessorySpacer({ height }: {
|
|
17
20
|
height: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderAccessory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderAccessory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"HeaderAccessory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderAccessory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAGlG,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAG/C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAU,CAAC;AACvD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,OAAO,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,sFAAsF;IACtF,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qDAAqD;IACrD,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CACvD;AAED,0FAA0F;AAC1F,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,cAAc,EACd,KAAK,GACN,EAAE,oBAAoB,+BAwBtB;AAED,6FAA6F;AAC7F,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,+BAEnE"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type ComponentProps, type ReactNode } from "react";
|
|
2
|
+
import Animated from "react-native-reanimated";
|
|
3
|
+
import { type HeaderDismissProps } from "../header-buttons.js";
|
|
4
|
+
import { type HeaderSurfaceProps } from "./HeaderSurface.js";
|
|
5
|
+
interface HeaderBarProps extends HeaderDismissProps {
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
leading?: ReactNode;
|
|
8
|
+
trailing?: ReactNode;
|
|
9
|
+
titleAlignment: "center" | "left";
|
|
10
|
+
color: string;
|
|
11
|
+
surfaceStyle?: HeaderSurfaceProps["animatedStyle"];
|
|
12
|
+
titleStyle?: ComponentProps<typeof Animated.View>["style"];
|
|
13
|
+
}
|
|
14
|
+
/** Shared compact bar. Only the title and background animate; actions stay interactive. */
|
|
15
|
+
export declare function HeaderBar({ title, leading, trailing, titleAlignment, color, surfaceStyle, titleStyle, dismissAction, navigation, onDismiss, }: HeaderBarProps): import("react").JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=HeaderBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAM/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,sBAAmB,CAAC;AAEjF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAGzE,UAAU,cAAe,SAAQ,kBAAkB;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAsB,EACtB,UAAU,EACV,SAAS,GACV,EAAE,cAAc,+BA4ChB"}
|
|
@@ -7,6 +7,8 @@ export declare const HEADER_FADE_END_OPACITY = 0.85;
|
|
|
7
7
|
export interface HeaderGradientOverlayProps {
|
|
8
8
|
/** Fill color, ramped from opaque to {@link HEADER_FADE_END_OPACITY}. */
|
|
9
9
|
color: string;
|
|
10
|
+
startOpacity?: number;
|
|
11
|
+
endOpacity?: number;
|
|
10
12
|
}
|
|
11
13
|
/**
|
|
12
14
|
* Vertical fade behind header content, shared by header variants.
|
|
@@ -15,5 +17,5 @@ export interface HeaderGradientOverlayProps {
|
|
|
15
17
|
* the surface nor reserves a band inside it, so callers size the surface and
|
|
16
18
|
* the ramp simply spans whatever they gave it.
|
|
17
19
|
*/
|
|
18
|
-
export declare function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps): import("react").JSX.Element;
|
|
20
|
+
export declare function HeaderGradientOverlay({ color, startOpacity, endOpacity, }: HeaderGradientOverlayProps): import("react").JSX.Element;
|
|
19
21
|
//# sourceMappingURL=HeaderGradientOverlay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,MAAM,WAAW,0BAA0B;IACzC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"HeaderGradientOverlay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderGradientOverlay.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,OAAO,CAAC;AAE5C,MAAM,WAAW,0BAA0B;IACzC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,YAAgB,EAChB,UAAoC,GACrC,EAAE,0BAA0B,+BAc5B"}
|
|
@@ -3,23 +3,19 @@ type HeaderOpacityStyle = ReturnType<typeof useAnimatedStyle<{
|
|
|
3
3
|
opacity: number;
|
|
4
4
|
}>>;
|
|
5
5
|
export interface HeaderSurfaceProps {
|
|
6
|
-
/** Fill color, ramped toward the surface's bottom edge
|
|
6
|
+
/** Fill color, ramped toward the surface's bottom edge. */
|
|
7
7
|
color: string;
|
|
8
8
|
/** Opacity style for variants that fade the whole surface in as they collapse. */
|
|
9
9
|
animatedStyle?: HeaderOpacityStyle;
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
* outright, such as a sticky accessory resting over the scroll content.
|
|
13
|
-
*/
|
|
14
|
-
solid?: boolean;
|
|
10
|
+
/** Continue the bar's gradient from 0.85 to 0.80 beneath an accessory. */
|
|
11
|
+
accessory?: boolean;
|
|
15
12
|
}
|
|
16
13
|
/**
|
|
17
|
-
* Header background
|
|
18
|
-
* content scrolling under the header meets a single boundary rather than two.
|
|
14
|
+
* Header background with matching gradient boundaries for the bar and accessory.
|
|
19
15
|
*
|
|
20
16
|
* The ramp spans the surface itself: it is sized by the caller and stays inside
|
|
21
17
|
* those bounds, so a taller surface stretches the fade rather than adding to it.
|
|
22
18
|
*/
|
|
23
|
-
export declare function HeaderSurface({ color, animatedStyle,
|
|
19
|
+
export declare function HeaderSurface({ color, animatedStyle, accessory }: HeaderSurfaceProps): import("react").JSX.Element;
|
|
24
20
|
export {};
|
|
25
21
|
//# sourceMappingURL=HeaderSurface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderSurface.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderSurface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderSurface.tsx"],"names":[],"mappings":"AAAA,OAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK1E,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAAC;AAEnF,MAAM,WAAW,kBAAkB;IACjC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,kBAAkB,+BAUpF"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface HeaderWindowInsetsProps {
|
|
2
|
+
onInsetsChange: (insets: {
|
|
3
|
+
left: number;
|
|
4
|
+
right: number;
|
|
5
|
+
}) => void;
|
|
6
|
+
}
|
|
7
|
+
/** Only iPadOS needs the native window-control measurement. */
|
|
8
|
+
export declare function HeaderWindowInsets(_: HeaderWindowInsetsProps): null;
|
|
9
|
+
//# sourceMappingURL=HeaderWindowInsets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderWindowInsets.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderWindowInsets.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnE;AAED,+DAA+D;AAC/D,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,uBAAuB,QAE5D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderWindowInsets.ios.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderWindowInsets.ios.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,EAAE,cAAc,EAAE,EAAE,uBAAuB,sCAY7E"}
|
|
@@ -10,7 +10,7 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* How `accessory` moves while scrolling. `'sticky'` starts below the large title
|
|
12
12
|
* and pins below the compact bar when scrolled up. A hidden large title always pins.
|
|
13
|
-
* @defaultValue '
|
|
13
|
+
* @defaultValue 'sticky'
|
|
14
14
|
*/
|
|
15
15
|
accessoryBehavior?: HeaderAccessoryBehavior;
|
|
16
16
|
/**
|
|
@@ -19,26 +19,6 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
|
|
|
19
19
|
*/
|
|
20
20
|
titleAlignment?: "center" | "left";
|
|
21
21
|
}
|
|
22
|
-
/**
|
|
23
|
-
|
|
24
|
-
* `Screen`'s portal) into the top of the scroll content, so it scrolls away
|
|
25
|
-
* naturally; the compact title cross-fades over the theme header height.
|
|
26
|
-
* The top safe area and bar overlay fade from transparent when expanded to
|
|
27
|
-
* the header background when collapsed. The large-title content stays transparent.
|
|
28
|
-
* Snapping is opt-in through the scroll container's snapToOffsets.
|
|
29
|
-
*
|
|
30
|
-
* Must be used inside a `Screen` with a `Screen.ScrollView` or `Screen.List`.
|
|
31
|
-
*
|
|
32
|
-
* @example
|
|
33
|
-
* ```tsx
|
|
34
|
-
* <Screen.Header>
|
|
35
|
-
* <Header.LargeTitle
|
|
36
|
-
* overline="Today"
|
|
37
|
-
* title="Meditate"
|
|
38
|
-
* subtitle="Good morning"
|
|
39
|
-
* />
|
|
40
|
-
* </Screen.Header>
|
|
41
|
-
* ```
|
|
42
|
-
*/
|
|
43
|
-
export declare function LargeTitleHeader({ title, overline, subtitle, leadingActions, trailingActions, LeftToolbar, RightToolbar, accessory, accessoryPadding, accessoryBehavior, dismissAction, navigation, onDismiss, titleAlignment, isLargeTitleHidden, background, bg, }: LargeTitleHeaderProps): import("react").JSX.Element;
|
|
22
|
+
/** Collapsing header. The expanded title lives in scroll content; the bar and accessory overlay it. */
|
|
23
|
+
export declare function LargeTitleHeader({ title, overline, subtitle, leadingActions, trailingActions, LeftToolbar, RightToolbar, accessory, accessoryPadding, accessoryBehavior, titleAlignment, isLargeTitleHidden, background, bg, ...dismissProps }: LargeTitleHeaderProps): import("react").JSX.Element;
|
|
44
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/LargeTitleHeader/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/LargeTitleHeader/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAgB,CAAC;AAGvD,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CACpC;AAED,uGAAuG;AACvG,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,eAAe,EACf,WAAW,EACX,YAAY,EACZ,SAAS,EACT,gBAAsB,EACtB,iBAA4B,EAC5B,cAAyB,EACzB,kBAA0B,EAC1B,UAAU,EACV,EAAE,EACF,GAAG,YAAY,EAChB,EAAE,qBAAqB,+BA8CvB"}
|
package/lib/typescript/src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
import Animated from "react-native-reanimated";
|
|
3
|
+
import type { LargeTitleHeaderProps } from "../index.js";
|
|
4
|
+
export declare function LargeTitleContent({ title, overline, subtitle, hasAccessoryBelow, onHeightChange, animatedStyle, }: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
|
|
5
|
+
/** Reserve a gap before a sticky accessory below this block. */
|
|
6
|
+
hasAccessoryBelow: boolean;
|
|
7
|
+
/** Reports the large-title block's layout height in dp. */
|
|
8
|
+
onHeightChange?: (height: number) => void;
|
|
9
|
+
animatedStyle: ComponentProps<typeof Animated.View>["style"];
|
|
10
|
+
}): import("react").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=LargeTitleContent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LargeTitleContent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/components/header/variants/LargeTitleHeader/parts/LargeTitleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAK/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAI,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,aAAa,GACd,EAAE,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IAClE,gEAAgE;IAChE,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC9D,+BAmCA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
2
|
import type { ColorToken } from "../../../../theme/types";
|
|
3
|
-
import {
|
|
3
|
+
import type { HeaderDismissProps } from "../../header-buttons.js";
|
|
4
4
|
import type { HeaderAccessoryPadding } from "../../types.js";
|
|
5
5
|
export interface TitleHeaderProps extends HeaderDismissProps {
|
|
6
6
|
/**
|
|
@@ -42,22 +42,6 @@ export interface TitleHeaderProps extends HeaderDismissProps {
|
|
|
42
42
|
/** @deprecated Use background. */
|
|
43
43
|
bg?: ColorToken;
|
|
44
44
|
}
|
|
45
|
-
/**
|
|
46
|
-
|
|
47
|
-
* inset outside Screen. Within Screen, the root owns safe-area clearance. The inline counterpart to `Header.LargeTitle`; use it for screens that
|
|
48
|
-
* don't need a collapsing large title.
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* ```tsx
|
|
52
|
-
* <Screen.Header>
|
|
53
|
-
* <Header.Title
|
|
54
|
-
* title="Stats"
|
|
55
|
-
* trailingActions={
|
|
56
|
-
* <Toolbar.Button icon="add" accessibilityLabel="Add" onPress={add} />
|
|
57
|
-
* }
|
|
58
|
-
* />
|
|
59
|
-
* </Screen.Header>
|
|
60
|
-
* ```
|
|
61
|
-
*/
|
|
62
|
-
export declare function TitleHeader({ title, leadingActions, trailingActions, LeftToolbar, RightToolbar, accessory, accessoryPadding, dismissAction, navigation, onDismiss, titleAlignment, background, bg, }: TitleHeaderProps): import("react").JSX.Element;
|
|
45
|
+
/** Compact header. Screen owns the safe area when present; standalone headers reserve it here. */
|
|
46
|
+
export declare function TitleHeader({ title, leadingActions, trailingActions, LeftToolbar, RightToolbar, accessory, accessoryPadding, titleAlignment, background, bg, ...dismissProps }: TitleHeaderProps): import("react").JSX.Element;
|
|
63
47
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAI/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAa,CAAC;AAE1D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,8DAA8D;IAC9D,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACnC,mGAAmG;IACnG,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kCAAkC;IAClC,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,cAAc,EACd,eAAe,EACf,WAAW,EACX,YAAY,EACZ,SAAS,EACT,gBAAsB,EACtB,cAAyB,EACzB,UAAU,EACV,EAAE,EACF,GAAG,YAAY,EAChB,EAAE,gBAAgB,+BA0BlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../../../src/components/surface/Surface.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAA8B,KAAK,QAAQ,EAAE,MAAM,iBAAQ,CAAC;AAEnE,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChE,sDAAsD;IACtD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B;AA6BD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../../../src/components/surface/Surface.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAA8B,KAAK,QAAQ,EAAE,MAAM,iBAAQ,CAAC;AAEnE,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChE,sDAAsD;IACtD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B;AA6BD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,uMAkBlB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { CodegenTypes, ViewProps } from "react-native";
|
|
2
|
+
export interface NativeProps extends ViewProps {
|
|
3
|
+
onInsetsChange?: CodegenTypes.DirectEventHandler<Readonly<{
|
|
4
|
+
left: CodegenTypes.Double;
|
|
5
|
+
right: CodegenTypes.Double;
|
|
6
|
+
}>>;
|
|
7
|
+
}
|
|
8
|
+
declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
|
|
9
|
+
export default _default;
|
|
10
|
+
//# sourceMappingURL=TerraHeaderInsetsNativeComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TerraHeaderInsetsNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/specs/TerraHeaderInsetsNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG5D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,cAAc,CAAC,EAAE,YAAY,CAAC,kBAAkB,CAC9C,QAAQ,CAAC;QAAE,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC;QAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAA;KAAE,CAAC,CACpE,CAAC;CACH;;AAED,wBAEG"}
|