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
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.11.13](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.12...v0.11.13) (2026-09-18)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* **ui:** [header] avoid iPad window controls ([#26](https://github.com/earthlin9/react-native-terra-ui/issues/26)) ([f11697a](https://github.com/earthlin9/react-native-terra-ui/commit/f11697a4d12b89ee20c71436bc82100216dbe624))
|
|
8
|
+
|
|
9
|
+
## [0.11.12](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.11...v0.11.12) (2026-09-17)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **ui:** [surface] add default content padding ([966c38a](https://github.com/earthlin9/react-native-terra-ui/commit/966c38adb42d3b596e577f6c4116896680d27d6e))
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* **ui:** [header] unify layout and preserve accessory gradients and padding ([637e3e1](https://github.com/earthlin9/react-native-terra-ui/commit/637e3e19fab4b4e30b6f80873d72acd7167a3a69))
|
|
18
|
+
|
|
3
19
|
## [0.11.11](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.10...v0.11.11) (2026-09-17)
|
|
4
20
|
|
|
5
21
|
### Features
|
package/TerraUI.podspec
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
require "json"
|
|
2
|
+
|
|
3
|
+
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
|
|
4
|
+
|
|
5
|
+
Pod::Spec.new do |s|
|
|
6
|
+
s.name = "TerraUI"
|
|
7
|
+
s.version = package["version"]
|
|
8
|
+
s.summary = package["description"]
|
|
9
|
+
s.homepage = package["homepage"]
|
|
10
|
+
s.license = package["license"]
|
|
11
|
+
s.author = package["author"]
|
|
12
|
+
s.source = { :git => "https://github.com/earthling-std/react-native-terra-ui.git", :tag => "v#{s.version}" }
|
|
13
|
+
s.platforms = { :ios => "15.1" }
|
|
14
|
+
s.source_files = "ios/**/*.{h,mm}"
|
|
15
|
+
install_modules_dependencies(s)
|
|
16
|
+
end
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
#import "TerraHeaderInsetsComponentView.h"
|
|
2
|
+
|
|
3
|
+
#import <react/renderer/components/TerraUISpec/ComponentDescriptors.h>
|
|
4
|
+
#import <react/renderer/components/TerraUISpec/EventEmitters.h>
|
|
5
|
+
#import <react/renderer/components/TerraUISpec/Props.h>
|
|
6
|
+
|
|
7
|
+
using namespace facebook::react;
|
|
8
|
+
|
|
9
|
+
@implementation TerraHeaderInsetsComponentView {
|
|
10
|
+
UIEdgeInsets _lastInsets;
|
|
11
|
+
BOOL _sentInsets;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
+ (ComponentDescriptorProvider)componentDescriptorProvider
|
|
15
|
+
{
|
|
16
|
+
return concreteComponentDescriptorProvider<TerraHeaderInsetsComponentDescriptor>();
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
- (instancetype)initWithFrame:(CGRect)frame
|
|
20
|
+
{
|
|
21
|
+
if (self = [super initWithFrame:frame]) {
|
|
22
|
+
_props = std::make_shared<const TerraHeaderInsetsProps>();
|
|
23
|
+
}
|
|
24
|
+
return self;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
- (void)layoutSubviews
|
|
28
|
+
{
|
|
29
|
+
[super layoutSubviews];
|
|
30
|
+
[self reportInsets];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
- (void)safeAreaInsetsDidChange
|
|
34
|
+
{
|
|
35
|
+
[super safeAreaInsetsDidChange];
|
|
36
|
+
[self setNeedsLayout];
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
- (void)didMoveToWindow
|
|
40
|
+
{
|
|
41
|
+
[super didMoveToWindow];
|
|
42
|
+
[self setNeedsLayout];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
- (void)layoutMarginsDidChange
|
|
46
|
+
{
|
|
47
|
+
[super layoutMarginsDidChange];
|
|
48
|
+
[self setNeedsLayout];
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
- (void)updateEventEmitter:(EventEmitter::Shared const &)eventEmitter
|
|
52
|
+
{
|
|
53
|
+
[super updateEventEmitter:eventEmitter];
|
|
54
|
+
[self setNeedsLayout];
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
- (void)prepareForRecycle
|
|
58
|
+
{
|
|
59
|
+
[super prepareForRecycle];
|
|
60
|
+
_sentInsets = NO;
|
|
61
|
+
_lastInsets = UIEdgeInsetsZero;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
- (void)reportInsets
|
|
65
|
+
{
|
|
66
|
+
if (!self.window || !_eventEmitter || CGRectIsEmpty(self.bounds)) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
UIEdgeInsets insets = UIEdgeInsetsZero;
|
|
71
|
+
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 260000
|
|
72
|
+
if (@available(iOS 26.0, *)) {
|
|
73
|
+
if (self.traitCollection.userInterfaceIdiom == UIUserInterfaceIdiomPad) {
|
|
74
|
+
// Measure at the bar's actual position, including inside sheets. Using
|
|
75
|
+
// safeArea rather than margins leaves Terra's spacing tokens in charge.
|
|
76
|
+
UIViewLayoutRegion *region = [UIViewLayoutRegion
|
|
77
|
+
safeAreaLayoutRegionWithCornerAdaptation:UIViewLayoutRegionAdaptivityAxisHorizontal];
|
|
78
|
+
insets = [self edgeInsetsForLayoutRegion:region];
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
#endif
|
|
82
|
+
insets.top = 0;
|
|
83
|
+
insets.bottom = 0;
|
|
84
|
+
if (_sentInsets && UIEdgeInsetsEqualToEdgeInsets(insets, _lastInsets)) {
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
_sentInsets = YES;
|
|
88
|
+
_lastInsets = insets;
|
|
89
|
+
const auto emitter = std::static_pointer_cast<const TerraHeaderInsetsEventEmitter>(_eventEmitter);
|
|
90
|
+
emitter->onInsetsChange({.left = insets.left, .right = insets.right});
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@end
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useContext } from "react";
|
|
4
|
+
import { useUnistyles } from "react-native-unistyles";
|
|
5
|
+
import { resolveThemeColor } from "../../../utils/resolve-theme-color.js";
|
|
6
|
+
import { ScreenContext } from "../../screen/ScreenContext.js";
|
|
7
|
+
|
|
8
|
+
/** Explicit header color wins, then Screen, then the theme canvas. */
|
|
9
|
+
export function useHeaderColor(token) {
|
|
10
|
+
const {
|
|
11
|
+
theme
|
|
12
|
+
} = useUnistyles();
|
|
13
|
+
const screen = useContext(ScreenContext);
|
|
14
|
+
return (token ? resolveThemeColor(token, theme) : screen?.background) ?? theme.color["surface.canvas"];
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=use-header-color.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useContext","useUnistyles","resolveThemeColor","ScreenContext","useHeaderColor","token","theme","screen","background","color"],"sourceRoot":"../../../../../src","sources":["components/header/hooks/use-header-color.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,YAAY,QAAQ,wBAAwB;AAGrD,SAASC,iBAAiB;AAC1B,SAASC,aAAa;;AAEtB;AACA,OAAO,SAASC,cAAcA,CAACC,KAAkB,EAAE;EACjD,MAAM;IAAEC;EAAM,CAAC,GAAGL,YAAY,CAAC,CAAC;EAChC,MAAMM,MAAM,GAAGP,UAAU,CAACG,aAAa,CAAC;EACxC,OAAO,CAACE,KAAK,GAAGH,iBAAiB,CAACG,KAAK,EAAEC,KAAK,CAAC,GAAGC,MAAM,EAAEC,UAAU,KAAKF,KAAK,CAACG,KAAK,CAAC,gBAAgB,CAAC;AACxG","ignoreList":[]}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useLayoutEffect, useState } from "react";
|
|
4
|
+
import { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
|
|
5
|
+
import { useUnistyles } from "react-native-unistyles";
|
|
6
|
+
import { useScreen } from "../../screen/ScreenContext.js";
|
|
7
|
+
/** Coordinates measured layout and UI-thread animation without animating accessory padding. */
|
|
8
|
+
export function useLargeTitleHeader({
|
|
9
|
+
hasAccessory,
|
|
10
|
+
accessoryBehavior,
|
|
11
|
+
isLargeTitleHidden
|
|
12
|
+
}) {
|
|
13
|
+
const {
|
|
14
|
+
theme
|
|
15
|
+
} = useUnistyles();
|
|
16
|
+
const {
|
|
17
|
+
scrollY,
|
|
18
|
+
contentTopPadding,
|
|
19
|
+
setHeaderAccessoryHeight
|
|
20
|
+
} = useScreen();
|
|
21
|
+
const [accessoryHeight, setAccessoryHeight] = useState(0);
|
|
22
|
+
const [largeTitleHeight, setLargeTitleHeight] = useState(0);
|
|
23
|
+
const hidden = useSharedValue(isLargeTitleHidden);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
hidden.value = isLargeTitleHidden;
|
|
26
|
+
}, [hidden, isLargeTitleHidden]);
|
|
27
|
+
const barHeight = theme.layout.header.height;
|
|
28
|
+
const isSticky = hasAccessory && accessoryBehavior === "sticky" && !isLargeTitleHidden;
|
|
29
|
+
// The measured overlay always includes bottom padding. Expanded scroll content
|
|
30
|
+
// excludes it; compact-only screens reserve the entire accessory.
|
|
31
|
+
const reservedAccessoryHeight = hasAccessory ? Math.max(0, Math.round(accessoryHeight - (isLargeTitleHidden ? 0 : theme.spacing["2"]))) : 0;
|
|
32
|
+
const accessoryOffset = isSticky ? Math.max(0, contentTopPadding + largeTitleHeight - barHeight) : 0;
|
|
33
|
+
useLayoutEffect(() => {
|
|
34
|
+
setHeaderAccessoryHeight(isSticky ? 0 : reservedAccessoryHeight);
|
|
35
|
+
return () => setHeaderAccessoryHeight(0);
|
|
36
|
+
}, [isSticky, reservedAccessoryHeight, setHeaderAccessoryHeight]);
|
|
37
|
+
const accessoryStyle = useAnimatedStyle(() => ({
|
|
38
|
+
transform: [{
|
|
39
|
+
translateY: isSticky && !hidden.value ? Math.max(0, accessoryOffset - scrollY.value) : 0
|
|
40
|
+
}]
|
|
41
|
+
}));
|
|
42
|
+
const surfaceStyle = useAnimatedStyle(() => {
|
|
43
|
+
if (hidden.value) return {
|
|
44
|
+
opacity: 1
|
|
45
|
+
};
|
|
46
|
+
const distance = isSticky ? accessoryOffset : barHeight;
|
|
47
|
+
return {
|
|
48
|
+
opacity: distance > 0 ? interpolate(scrollY.value, [0, distance], [0, 1], "clamp") : isSticky ? 1 : 0
|
|
49
|
+
};
|
|
50
|
+
});
|
|
51
|
+
const compactTitleStyle = useAnimatedStyle(() => {
|
|
52
|
+
const progress = hidden.value ? 1 : barHeight > 0 ? interpolate(scrollY.value, [0, barHeight], [0, 1], "clamp") : 0;
|
|
53
|
+
return {
|
|
54
|
+
opacity: progress,
|
|
55
|
+
transform: [{
|
|
56
|
+
translateY: (1 - progress) * 8
|
|
57
|
+
}]
|
|
58
|
+
};
|
|
59
|
+
});
|
|
60
|
+
const largeTitleStyle = useAnimatedStyle(() => {
|
|
61
|
+
const progress = barHeight > 0 ? interpolate(scrollY.value, [0, barHeight], [0, 1], "clamp") : 0;
|
|
62
|
+
return {
|
|
63
|
+
opacity: 1 - progress,
|
|
64
|
+
transform: [{
|
|
65
|
+
translateY: -progress * 6
|
|
66
|
+
}]
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
return {
|
|
70
|
+
isSticky,
|
|
71
|
+
accessoryOffset,
|
|
72
|
+
reservedAccessoryHeight,
|
|
73
|
+
setAccessoryHeight,
|
|
74
|
+
setLargeTitleHeight,
|
|
75
|
+
accessoryStyle,
|
|
76
|
+
surfaceStyle,
|
|
77
|
+
compactTitleStyle,
|
|
78
|
+
largeTitleStyle
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=use-large-title-header.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useLayoutEffect","useState","interpolate","useAnimatedStyle","useSharedValue","useUnistyles","useScreen","useLargeTitleHeader","hasAccessory","accessoryBehavior","isLargeTitleHidden","theme","scrollY","contentTopPadding","setHeaderAccessoryHeight","accessoryHeight","setAccessoryHeight","largeTitleHeight","setLargeTitleHeight","hidden","value","barHeight","layout","header","height","isSticky","reservedAccessoryHeight","Math","max","round","spacing","accessoryOffset","accessoryStyle","transform","translateY","surfaceStyle","opacity","distance","compactTitleStyle","progress","largeTitleStyle"],"sourceRoot":"../../../../../src","sources":["components/header/hooks/use-large-title-header.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,32 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
-
import { useCallback,
|
|
4
|
+
import { useCallback, useLayoutEffect, useRef } from "react";
|
|
5
5
|
import Animated from "react-native-reanimated";
|
|
6
6
|
import { StyleSheet } from "react-native-unistyles";
|
|
7
|
-
import {
|
|
7
|
+
import { HeaderSurface } from "./HeaderSurface.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
9
|
/** Measures accessory content so the header can reserve space in the scroll container. */
|
|
9
10
|
export function HeaderAccessory({
|
|
10
11
|
children,
|
|
11
12
|
padding,
|
|
13
|
+
color,
|
|
14
|
+
surfaceStyle,
|
|
12
15
|
onHeightChange,
|
|
13
16
|
style
|
|
14
17
|
}) {
|
|
18
|
+
const measuredHeight = useRef(0);
|
|
15
19
|
const handleLayout = useCallback(event => {
|
|
16
|
-
|
|
20
|
+
measuredHeight.current = event.nativeEvent.layout.height;
|
|
21
|
+
onHeightChange?.(measuredHeight.current);
|
|
17
22
|
}, [onHeightChange]);
|
|
18
23
|
|
|
19
24
|
// Release the previous owner’s space when the callback changes or the accessory unmounts.
|
|
20
|
-
|
|
25
|
+
useLayoutEffect(() => {
|
|
26
|
+
onHeightChange?.(measuredHeight.current);
|
|
27
|
+
return () => onHeightChange?.(0);
|
|
28
|
+
}, [onHeightChange]);
|
|
21
29
|
const _styles = styles;
|
|
22
30
|
{
|
|
23
31
|
const styles = _styles.useVariants({
|
|
24
32
|
padding
|
|
25
33
|
});
|
|
26
|
-
return /*#__PURE__*/
|
|
34
|
+
return /*#__PURE__*/_jsxs(Animated.View, {
|
|
27
35
|
style: [styles.accessory, style],
|
|
28
36
|
onLayout: handleLayout,
|
|
29
|
-
children:
|
|
37
|
+
children: [/*#__PURE__*/_jsx(HeaderSurface, {
|
|
38
|
+
color: color,
|
|
39
|
+
animatedStyle: surfaceStyle,
|
|
40
|
+
accessory: true
|
|
41
|
+
}), children]
|
|
30
42
|
});
|
|
31
43
|
}
|
|
32
44
|
}
|
|
@@ -41,6 +53,9 @@ export function HeaderAccessorySpacer({
|
|
|
41
53
|
}
|
|
42
54
|
const styles = StyleSheet.create(theme => ({
|
|
43
55
|
accessory: {
|
|
56
|
+
// Static layout padding is intentional: the background must measure the full
|
|
57
|
+
// padded height even when a horizontal ScrollView is the accessory content.
|
|
58
|
+
paddingBottom: theme.spacing["2"],
|
|
44
59
|
variants: {
|
|
45
60
|
padding: {
|
|
46
61
|
x: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","
|
|
1
|
+
{"version":3,"names":["useCallback","useLayoutEffect","useRef","Animated","StyleSheet","HeaderSurface","jsx","_jsx","jsxs","_jsxs","HeaderAccessory","children","padding","color","surfaceStyle","onHeightChange","style","measuredHeight","handleLayout","event","current","nativeEvent","layout","height","_styles","styles","useVariants","View","accessory","onLayout","animatedStyle","HeaderAccessorySpacer","spacer","create","theme","paddingBottom","spacing","variants","x","paddingHorizontal","screen","none","uni__dependencies"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderAccessory.tsx"],"mappings":";;;AAAA,SAA8CA,WAAW,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAGjG,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,aAAa;AAAmD,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAczE;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,YAAY;EACZC,cAAc;EACdC;AACoB,CAAC,EAAE;EACvB,MAAMC,cAAc,GAAGf,MAAM,CAAC,CAAC,CAAC;EAChC,MAAMgB,YAAY,GAAGlB,WAAW,CAC7BmB,KAAwB,IAAK;IAC5BF,cAAc,CAACG,OAAO,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM,CAACC,MAAM;IACxDR,cAAc,GAAGE,cAAc,CAACG,OAAO,CAAC;EAC1C,CAAC,EACD,CAACL,cAAc,CACjB,CAAC;;EAED;EACAd,eAAe,CAAC,MAAM;IACpBc,cAAc,GAAGE,cAAc,CAACG,OAAO,CAAC;IACxC,OAAO,MAAML,cAAc,GAAG,CAAC,CAAC;EAClC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAAC,MAAAS,OAAA,GAAAC,MAAA;EAAA;IAAA,MAAAA,MAAA,GAAAD,OAAA,CAAAE,WAAA,CAEF;MAAEd;IAAQ,CAAC;IAE9B,oBACEH,KAAA,CAACN,QAAQ,CAACwB,IAAI;MAACX,KAAK,EAAE,CAACS,MAAM,CAACG,SAAS,EAAEZ,KAAK,CAAE;MAACa,QAAQ,EAAEX,YAAa;MAAAP,QAAA,gBACtEJ,IAAA,CAACF,aAAa;QAACQ,KAAK,EAAEA,KAAM;QAACiB,aAAa,EAAEhB,YAAa;QAACc,SAAS;MAAA,CAAE,CAAC,EACrEjB,QAAQ;IAAA,CACI,CAAC;EAChB;AACJ;;AAEA;AACA,OAAO,SAASoB,qBAAqBA,CAAC;EAAER;AAA2B,CAAC,EAAE;EACpE,oBAAOhB,IAAA,CAACoB,IAAI;IAACX,KAAK,EAAES,MAAM,CAACO,MAAM,CAACT,MAAM;EAAE,CAAE,CAAC;AAC/C;AAEA,MAAME,MAAM,GAAGrB,UAAU,CAAC6B,MAAM,CAAEC,KAAK,KAAM;EAC3CN,SAAS,EAAE;IACT;IACA;IACAO,aAAa,EAAED,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC;IACjCC,QAAQ,EAAE;MACRzB,OAAO,EAAE;QACP0B,CAAC,EAAE;UAAEC,iBAAiB,EAAEL,KAAK,CAACZ,MAAM,CAACkB,MAAM,CAAC5B,OAAO,CAAC0B;QAAE,CAAC;QACvDG,IAAI,EAAE,CAAC;MACT;IACF,CAAC;IAAAC,iBAAA;EACH,CAAC;EACDV,MAAM,EAAGT,MAAc,KAAM;IAAEA;EAAO,CAAC;AACzC,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from "react-native-unistyles/components/native/View";
|
|
4
|
+
import { Text } from "react-native-unistyles/components/native/Text";
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
import Animated from "react-native-reanimated";
|
|
7
|
+
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
8
|
+
import { FONT_WEIGHT_VALUE } from "../../../utils/typography.js";
|
|
9
|
+
import { resolveScreenPadding } from "../../../theme/screen-padding.js";
|
|
10
|
+
import { Toolbar } from "../../toolbar/index.js";
|
|
11
|
+
import { HeaderDismissButton } from "../header-buttons.js";
|
|
12
|
+
import { isCustomTitle, isTextTitle } from "../utils.js";
|
|
13
|
+
import { HeaderSurface } from "./HeaderSurface.js";
|
|
14
|
+
import { HeaderWindowInsets } from "./HeaderWindowInsets";
|
|
15
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
/** Shared compact bar. Only the title and background animate; actions stay interactive. */
|
|
17
|
+
export function HeaderBar({
|
|
18
|
+
title,
|
|
19
|
+
leading,
|
|
20
|
+
trailing,
|
|
21
|
+
titleAlignment,
|
|
22
|
+
color,
|
|
23
|
+
surfaceStyle,
|
|
24
|
+
titleStyle,
|
|
25
|
+
dismissAction = "none",
|
|
26
|
+
navigation,
|
|
27
|
+
onDismiss
|
|
28
|
+
}) {
|
|
29
|
+
const {
|
|
30
|
+
theme
|
|
31
|
+
} = useUnistyles();
|
|
32
|
+
const [windowInsets, setWindowInsets] = useState({
|
|
33
|
+
left: 0,
|
|
34
|
+
right: 0
|
|
35
|
+
});
|
|
36
|
+
const _styles = styles;
|
|
37
|
+
{
|
|
38
|
+
const styles = _styles.useVariants({
|
|
39
|
+
titleAlignment
|
|
40
|
+
});
|
|
41
|
+
const dismiss = /*#__PURE__*/_jsx(HeaderDismissButton, {
|
|
42
|
+
dismissAction: dismissAction,
|
|
43
|
+
navigation: navigation,
|
|
44
|
+
onDismiss: onDismiss
|
|
45
|
+
});
|
|
46
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
47
|
+
style: [styles.bar, styles.windowInsets(windowInsets.left, windowInsets.right)],
|
|
48
|
+
children: [/*#__PURE__*/_jsx(HeaderSurface, {
|
|
49
|
+
color: color,
|
|
50
|
+
animatedStyle: surfaceStyle
|
|
51
|
+
}), /*#__PURE__*/_jsx(HeaderWindowInsets, {
|
|
52
|
+
onInsetsChange: setWindowInsets
|
|
53
|
+
}), (leading != null || dismissAction === "back") && /*#__PURE__*/_jsxs(Toolbar, {
|
|
54
|
+
children: [dismissAction === "back" && dismiss, leading]
|
|
55
|
+
}), /*#__PURE__*/_jsx(Animated.View, {
|
|
56
|
+
style: [styles.titleContainer, styles.titleInsets(windowInsets.left, windowInsets.right, titleAlignment), titleStyle],
|
|
57
|
+
pointerEvents: isCustomTitle(title) ? "box-none" : "none",
|
|
58
|
+
children: isTextTitle(title) ? String(title).trim().length > 0 && /*#__PURE__*/_jsx(Text, {
|
|
59
|
+
style: styles.title,
|
|
60
|
+
maxFontSizeMultiplier: theme.typography.variants["title-md"].maxFontSizeMultiplier,
|
|
61
|
+
children: title
|
|
62
|
+
}) : title
|
|
63
|
+
}), (trailing != null || dismissAction === "close") && /*#__PURE__*/_jsxs(Toolbar, {
|
|
64
|
+
style: styles.trailing,
|
|
65
|
+
children: [dismissAction === "close" && dismiss, trailing]
|
|
66
|
+
})]
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
const styles = StyleSheet.create((theme, runtime) => ({
|
|
71
|
+
windowInsets: (left, right) => ({
|
|
72
|
+
paddingLeft: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, left),
|
|
73
|
+
paddingRight: Math.max(resolveScreenPadding(theme, runtime.breakpoint).x, right),
|
|
74
|
+
uni__dependencies: [0, 3]
|
|
75
|
+
}),
|
|
76
|
+
titleInsets: (left, right, alignment) => alignment === "center" ? {
|
|
77
|
+
left,
|
|
78
|
+
right
|
|
79
|
+
} : {},
|
|
80
|
+
bar: {
|
|
81
|
+
height: theme.layout.header.height,
|
|
82
|
+
flexDirection: "row",
|
|
83
|
+
alignItems: "center",
|
|
84
|
+
paddingHorizontal: theme.layout.screen.padding.x,
|
|
85
|
+
gap: theme.spacing["3"],
|
|
86
|
+
justifyContent: "space-between",
|
|
87
|
+
uni__dependencies: [0]
|
|
88
|
+
},
|
|
89
|
+
// A centered title is absolutely positioned, so it leaves the flex row. With
|
|
90
|
+
// no leading slot the trailing toolbar would be the only in-flow child and
|
|
91
|
+
// `space-between` would park it on the left — the auto margin pins it right.
|
|
92
|
+
trailing: {
|
|
93
|
+
justifyContent: "flex-end",
|
|
94
|
+
variants: {
|
|
95
|
+
titleAlignment: {
|
|
96
|
+
center: {
|
|
97
|
+
marginLeft: "auto"
|
|
98
|
+
},
|
|
99
|
+
left: {}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
uni__dependencies: [4]
|
|
103
|
+
},
|
|
104
|
+
titleContainer: {
|
|
105
|
+
variants: {
|
|
106
|
+
titleAlignment: {
|
|
107
|
+
center: {
|
|
108
|
+
position: "absolute",
|
|
109
|
+
left: 0,
|
|
110
|
+
right: 0,
|
|
111
|
+
alignItems: "center"
|
|
112
|
+
},
|
|
113
|
+
left: {
|
|
114
|
+
flex: 1,
|
|
115
|
+
alignItems: "flex-start"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
uni__dependencies: [4]
|
|
120
|
+
},
|
|
121
|
+
title: {
|
|
122
|
+
fontSize: theme.typography.variants["title-md"].fontSize,
|
|
123
|
+
lineHeight: theme.typography.variants["title-md"].lineHeight,
|
|
124
|
+
letterSpacing: theme.typography.variants["title-md"].letterSpacing,
|
|
125
|
+
fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
|
|
126
|
+
color: theme.color["text.primary"] ?? "",
|
|
127
|
+
variants: {
|
|
128
|
+
titleAlignment: {
|
|
129
|
+
center: {
|
|
130
|
+
textAlign: "center"
|
|
131
|
+
},
|
|
132
|
+
left: {
|
|
133
|
+
textAlign: "left"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
uni__dependencies: [0, 4]
|
|
138
|
+
}
|
|
139
|
+
}));
|
|
140
|
+
//# sourceMappingURL=HeaderBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","Animated","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","resolveScreenPadding","Toolbar","HeaderDismissButton","isCustomTitle","isTextTitle","HeaderSurface","HeaderWindowInsets","jsx","_jsx","jsxs","_jsxs","HeaderBar","title","leading","trailing","titleAlignment","color","surfaceStyle","titleStyle","dismissAction","navigation","onDismiss","theme","windowInsets","setWindowInsets","left","right","_styles","styles","useVariants","dismiss","View","style","bar","children","animatedStyle","onInsetsChange","titleContainer","titleInsets","pointerEvents","String","trim","length","Text","maxFontSizeMultiplier","typography","variants","create","runtime","paddingLeft","Math","max","breakpoint","x","paddingRight","uni__dependencies","alignment","height","layout","header","flexDirection","alignItems","paddingHorizontal","screen","padding","gap","spacing","justifyContent","center","marginLeft","position","flex","fontSize","lineHeight","letterSpacing","fontWeight","textAlign"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,7 +18,9 @@ export const HEADER_FADE_END_OPACITY = 0.85;
|
|
|
18
18
|
* the ramp simply spans whatever they gave it.
|
|
19
19
|
*/
|
|
20
20
|
export function HeaderGradientOverlay({
|
|
21
|
-
color
|
|
21
|
+
color,
|
|
22
|
+
startOpacity = 1,
|
|
23
|
+
endOpacity = HEADER_FADE_END_OPACITY
|
|
22
24
|
}) {
|
|
23
25
|
const gradientId = useId();
|
|
24
26
|
return /*#__PURE__*/_jsxs(Svg, {
|
|
@@ -34,11 +36,11 @@ export function HeaderGradientOverlay({
|
|
|
34
36
|
children: [/*#__PURE__*/_jsx(Stop, {
|
|
35
37
|
offset: 0,
|
|
36
38
|
stopColor: color,
|
|
37
|
-
stopOpacity:
|
|
39
|
+
stopOpacity: startOpacity
|
|
38
40
|
}), /*#__PURE__*/_jsx(Stop, {
|
|
39
41
|
offset: 1,
|
|
40
42
|
stopColor: color,
|
|
41
|
-
stopOpacity:
|
|
43
|
+
stopOpacity: endOpacity
|
|
42
44
|
})]
|
|
43
45
|
})
|
|
44
46
|
}), /*#__PURE__*/_jsx(Rect, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_END_OPACITY","HeaderGradientOverlay","color","gradientId","height","width","children","id","x1","y1","x2","y2","offset","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKA,OAAO,MAAMC,uBAAuB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"names":["useId","Svg","Defs","Rect","Stop","LinearGradient","SvgLinearGradient","jsx","_jsx","jsxs","_jsxs","HEADER_FADE_END_OPACITY","HeaderGradientOverlay","color","startOpacity","endOpacity","gradientId","height","width","children","id","x1","y1","x2","y2","offset","stopColor","stopOpacity","fill"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderGradientOverlay.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,OAAO;AAE7B,OAAOC,GAAG,IAAIC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,cAAc,IAAIC,iBAAiB,QAAQ,kBAAkB;;AAE7F;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAKA,OAAO,MAAMC,uBAAuB,GAAG,IAAI;AAS3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAC;EACpCC,KAAK;EACLC,YAAY,GAAG,CAAC;EAChBC,UAAU,GAAGJ;AACa,CAAC,EAAE;EAC7B,MAAMK,UAAU,GAAGhB,KAAK,CAAC,CAAC;EAE1B,oBACEU,KAAA,CAACT,GAAG;IAACgB,MAAM,EAAC,MAAM;IAACC,KAAK,EAAC,MAAM;IAAAC,QAAA,gBAC7BX,IAAA,CAACN,IAAI;MAAAiB,QAAA,eACHT,KAAA,CAACJ,iBAAiB;QAACc,EAAE,EAAEJ,UAAW;QAACK,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAAAL,QAAA,gBAC5DX,IAAA,CAACJ,IAAI;UAACqB,MAAM,EAAE,CAAE;UAACC,SAAS,EAAEb,KAAM;UAACc,WAAW,EAAEb;QAAa,CAAE,CAAC,eAChEN,IAAA,CAACJ,IAAI;UAACqB,MAAM,EAAE,CAAE;UAACC,SAAS,EAAEb,KAAM;UAACc,WAAW,EAAEZ;QAAW,CAAE,CAAC;MAAA,CAC7C;IAAC,CAChB,CAAC,eACPP,IAAA,CAACL,IAAI;MAACe,KAAK,EAAC,MAAM;MAACD,MAAM,EAAC,MAAM;MAACW,IAAI,EAAE,QAAQZ,UAAU;IAAI,CAAE,CAAC;EAAA,CAC7D,CAAC;AAEV","ignoreList":[]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { View } from "react-native-unistyles/components/native/View";
|
|
4
3
|
import Animated from "react-native-reanimated";
|
|
5
4
|
import { StyleSheet } from "react-native-unistyles";
|
|
6
|
-
import { HeaderGradientOverlay } from "./HeaderGradientOverlay.js";
|
|
5
|
+
import { HEADER_FADE_END_OPACITY, HeaderGradientOverlay } from "./HeaderGradientOverlay.js";
|
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
7
|
/**
|
|
9
|
-
* Header background
|
|
10
|
-
* content scrolling under the header meets a single boundary rather than two.
|
|
8
|
+
* Header background with matching gradient boundaries for the bar and accessory.
|
|
11
9
|
*
|
|
12
10
|
* The ramp spans the surface itself: it is sized by the caller and stays inside
|
|
13
11
|
* those bounds, so a taller surface stretches the fade rather than adding to it.
|
|
@@ -15,15 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
15
13
|
export function HeaderSurface({
|
|
16
14
|
color,
|
|
17
15
|
animatedStyle,
|
|
18
|
-
|
|
16
|
+
accessory
|
|
19
17
|
}) {
|
|
20
18
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
21
19
|
style: [styles.surface, animatedStyle],
|
|
22
20
|
pointerEvents: "none",
|
|
23
|
-
children:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
children: /*#__PURE__*/_jsx(HeaderGradientOverlay, {
|
|
22
|
+
color: color,
|
|
23
|
+
startOpacity: accessory ? HEADER_FADE_END_OPACITY : 1,
|
|
24
|
+
endOpacity: accessory ? 0.8 : HEADER_FADE_END_OPACITY
|
|
27
25
|
})
|
|
28
26
|
});
|
|
29
27
|
}
|
|
@@ -34,10 +32,6 @@ const styles = StyleSheet.create(() => ({
|
|
|
34
32
|
left: 0,
|
|
35
33
|
right: 0,
|
|
36
34
|
bottom: 0
|
|
37
|
-
}
|
|
38
|
-
fill: color => ({
|
|
39
|
-
flex: 1,
|
|
40
|
-
backgroundColor: color
|
|
41
|
-
})
|
|
35
|
+
}
|
|
42
36
|
}));
|
|
43
37
|
//# sourceMappingURL=HeaderSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Animated","StyleSheet","HeaderGradientOverlay","jsx","_jsx","HeaderSurface","color","animatedStyle","
|
|
1
|
+
{"version":3,"names":["Animated","StyleSheet","HEADER_FADE_END_OPACITY","HeaderGradientOverlay","jsx","_jsx","HeaderSurface","color","animatedStyle","accessory","View","style","styles","surface","pointerEvents","children","startOpacity","endOpacity","create","position","top","left","right","bottom"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderSurface.tsx"],"mappings":";;AAAA,OAAOA,QAAQ,MAAiC,yBAAyB;AACzE,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,uBAAuB,EAAEC,qBAAqB;AAAkC,SAAAC,GAAA,IAAAC,IAAA;AAazF;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAAC;EAAEC,KAAK;EAAEC,aAAa;EAAEC;AAA8B,CAAC,EAAE;EACrF,oBACEJ,IAAA,CAACL,QAAQ,CAACU,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,OAAO,EAAEL,aAAa,CAAE;IAACM,aAAa,EAAC,MAAM;IAAAC,QAAA,eACzEV,IAAA,CAACF,qBAAqB;MACpBI,KAAK,EAAEA,KAAM;MACbS,YAAY,EAAEP,SAAS,GAAGP,uBAAuB,GAAG,CAAE;MACtDe,UAAU,EAAER,SAAS,GAAG,GAAG,GAAGP;IAAwB,CACvD;EAAC,CACW,CAAC;AAEpB;AAEA,MAAMU,MAAM,GAAGX,UAAU,CAACiB,MAAM,CAAC,OAAO;EACtCL,OAAO,EAAE;IACPM,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV;AACF,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Platform } from "react-native";
|
|
4
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
5
|
+
import TerraHeaderInsets from "../../../specs/TerraHeaderInsetsNativeComponent";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function HeaderWindowInsets({
|
|
8
|
+
onInsetsChange
|
|
9
|
+
}) {
|
|
10
|
+
if (Platform.OS !== "ios" || !Platform.isPad || Number.parseInt(String(Platform.Version), 10) < 26) return null;
|
|
11
|
+
return /*#__PURE__*/_jsx(TerraHeaderInsets, {
|
|
12
|
+
style: styles.probe,
|
|
13
|
+
pointerEvents: "none",
|
|
14
|
+
accessible: false,
|
|
15
|
+
onInsetsChange: ({
|
|
16
|
+
nativeEvent
|
|
17
|
+
}) => onInsetsChange(nativeEvent)
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
const styles = StyleSheet.create(() => ({
|
|
21
|
+
probe: {
|
|
22
|
+
position: "absolute",
|
|
23
|
+
top: 0,
|
|
24
|
+
left: 0,
|
|
25
|
+
right: 0,
|
|
26
|
+
bottom: 0
|
|
27
|
+
}
|
|
28
|
+
}));
|
|
29
|
+
//# sourceMappingURL=HeaderWindowInsets.ios.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","StyleSheet","TerraHeaderInsets","jsx","_jsx","HeaderWindowInsets","onInsetsChange","OS","isPad","Number","parseInt","String","Version","style","styles","probe","pointerEvents","accessible","nativeEvent","create","position","top","left","right","bottom"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderWindowInsets.ios.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,OAAOC,iBAAiB;AAAwD,SAAAC,GAAA,IAAAC,IAAA;AAGhF,OAAO,SAASC,kBAAkBA,CAAC;EAAEC;AAAwC,CAAC,EAAE;EAC9E,IAAIN,QAAQ,CAACO,EAAE,KAAK,KAAK,IAAI,CAACP,QAAQ,CAACQ,KAAK,IAAIC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAACX,QAAQ,CAACY,OAAO,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,EAChG,OAAO,IAAI;EAEb,oBACER,IAAA,CAACF,iBAAiB;IAChBW,KAAK,EAAEC,MAAM,CAACC,KAAM;IACpBC,aAAa,EAAC,MAAM;IACpBC,UAAU,EAAE,KAAM;IAClBX,cAAc,EAAEA,CAAC;MAAEY;IAAY,CAAC,KAAKZ,cAAc,CAACY,WAAW;EAAE,CAClE,CAAC;AAEN;AAEA,MAAMJ,MAAM,GAAGb,UAAU,CAACkB,MAAM,CAAC,OAAO;EACtCJ,KAAK,EAAE;IAAEK,QAAQ,EAAE,UAAU;IAAEC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE;AACtE,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["HeaderWindowInsets","_"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderWindowInsets.tsx"],"mappings":";;AAIA;AACA,OAAO,SAASA,kBAAkBA,CAACC,CAA0B,EAAE;EAC7D,OAAO,IAAI;AACb","ignoreList":[]}
|