@alveole/components 0.29.0 → 0.29.2
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/core/Page/Page.d.ts +6 -0
- package/dist/core/Page/Page.d.ts.map +1 -1
- package/dist/core/Page/PageContent.d.ts.map +1 -1
- package/dist/core/Page/PageContent.js +33 -3
- package/dist/core/Page/PageContentScrollable.d.ts +1 -0
- package/dist/core/Page/PageContentScrollable.d.ts.map +1 -1
- package/dist/ui/Badge/Badge.stories.d.ts +2 -2
- package/dist/ui/Badge/Badge.styles.d.ts +2 -2
- package/package.json +1 -1
package/dist/core/Page/Page.d.ts
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { StatusBarStyle } from 'react-native';
|
|
2
3
|
import { BoxProps } from '../../core';
|
|
3
4
|
import { SidebarController } from '../../ui/Sidebar';
|
|
5
|
+
export type PageStatusBarProps = {
|
|
6
|
+
barStyle?: StatusBarStyle;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
};
|
|
4
9
|
export type PageProps = BoxProps & {
|
|
5
10
|
title: string;
|
|
6
11
|
description?: string;
|
|
@@ -13,6 +18,7 @@ export type PageProps = BoxProps & {
|
|
|
13
18
|
sidebar?: React.ReactNode;
|
|
14
19
|
beforeContent?: React.ReactNode;
|
|
15
20
|
sideBarController?: SidebarController;
|
|
21
|
+
statusBar?: PageStatusBarProps;
|
|
16
22
|
renderToolbar?: (options?: {
|
|
17
23
|
isScrolled: boolean;
|
|
18
24
|
}) => React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/core/Page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,cAAc,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAE/B,aAAa,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAOpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContent.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAsB,MAAM,QAAQ,CAAC;AAMvD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAazC,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAwFlD,CAAC"}
|
|
@@ -1,26 +1,56 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useTheme } from '@alveole/theme';
|
|
3
|
+
import { useFocusEffect } from 'expo-router';
|
|
4
|
+
import * as SystemUI from 'expo-system-ui';
|
|
3
5
|
import React from 'react';
|
|
4
|
-
import { Platform } from 'react-native';
|
|
6
|
+
import { AppState, Platform, StatusBar } from 'react-native';
|
|
5
7
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
8
|
import { Box } from '../../core/Box';
|
|
7
9
|
import { useStyles } from './Page.styles';
|
|
8
10
|
import { PageBackground } from './PageBackground';
|
|
9
11
|
import { PageContentDefault } from './PageContentDefault';
|
|
10
12
|
import { PageContentScrollable } from './PageContentScrollable';
|
|
13
|
+
const DEFAULT_STATUS_BAR = {
|
|
14
|
+
barStyle: 'dark-content',
|
|
15
|
+
backgroundColor: 'white',
|
|
16
|
+
};
|
|
17
|
+
const applyStatusBar = (statusBar) => {
|
|
18
|
+
StatusBar.setBarStyle(statusBar.barStyle);
|
|
19
|
+
if (Platform.OS === 'android')
|
|
20
|
+
StatusBar.setBackgroundColor(statusBar.backgroundColor);
|
|
21
|
+
void SystemUI.setBackgroundColorAsync(statusBar.backgroundColor);
|
|
22
|
+
};
|
|
11
23
|
export const PageContent = (props) => {
|
|
12
|
-
const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange } = props;
|
|
24
|
+
const { scrollable = false, renderToolbar, sidebar, sideBarController, onScrollChange, statusBar } = props;
|
|
13
25
|
const { isVariant } = useTheme();
|
|
14
26
|
const styles = useStyles();
|
|
15
27
|
const { top } = useSafeAreaInsets();
|
|
16
28
|
const mobileOrTablet = isVariant('mobile') || isVariant('tablet');
|
|
29
|
+
const resolvedStatusBar = React.useMemo(() => ({
|
|
30
|
+
barStyle: statusBar?.barStyle ?? DEFAULT_STATUS_BAR.barStyle,
|
|
31
|
+
backgroundColor: statusBar?.backgroundColor ?? DEFAULT_STATUS_BAR.backgroundColor,
|
|
32
|
+
}), [statusBar?.backgroundColor, statusBar?.barStyle]);
|
|
17
33
|
const [isScrolled, setIsScrolled] = React.useState(false);
|
|
34
|
+
useFocusEffect(React.useCallback(() => {
|
|
35
|
+
applyStatusBar(resolvedStatusBar);
|
|
36
|
+
return () => applyStatusBar(DEFAULT_STATUS_BAR);
|
|
37
|
+
}, [resolvedStatusBar]));
|
|
38
|
+
React.useEffect(() => {
|
|
39
|
+
const subscription = AppState.addEventListener('change', nextAppState => {
|
|
40
|
+
if (nextAppState !== 'active')
|
|
41
|
+
return;
|
|
42
|
+
applyStatusBar(resolvedStatusBar);
|
|
43
|
+
});
|
|
44
|
+
return () => {
|
|
45
|
+
subscription.remove();
|
|
46
|
+
};
|
|
47
|
+
}, [resolvedStatusBar]);
|
|
18
48
|
const handleInternalScrollChange = React.useCallback((scrollY) => {
|
|
19
49
|
const scrolled = scrollY > 0;
|
|
20
50
|
setIsScrolled(scrolled);
|
|
21
51
|
onScrollChange?.(scrollY);
|
|
22
52
|
}, [onScrollChange]);
|
|
23
|
-
const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", children: _jsx(Box, { pt: Platform.OS === 'android' ? top : 0, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
|
|
53
|
+
const renderPageWithSidebar = (children) => (_jsxs(Box, { style: styles.sidebarContainer, overflow: mobileOrTablet && sideBarController?.open ? 'hidden' : undefined, children: [sidebar, _jsxs(Box, { flex: 1, children: [mobileOrTablet && (_jsx(Box, { tag: "mobile-menu", style: statusBar?.backgroundColor ? { backgroundColor: statusBar.backgroundColor } : undefined, children: _jsx(Box, { pt: Platform.OS === 'android' ? top : 0, children: renderToolbar?.({ isScrolled }) }) })), _jsx(Box, { flex: 1, children: children })] })] }));
|
|
24
54
|
const isScrollable = React.useMemo(() => scrollable === true ||
|
|
25
55
|
(scrollable === 'desktop-only' && isVariant('desktop')) ||
|
|
26
56
|
(scrollable === 'mobile-only' && mobileOrTablet), [isVariant, mobileOrTablet, scrollable]);
|
|
@@ -24,6 +24,7 @@ export declare const PageContentScrollable: React.ForwardRefExoticComponent<Pick
|
|
|
24
24
|
sidebar?: React.ReactNode;
|
|
25
25
|
beforeContent?: React.ReactNode;
|
|
26
26
|
sideBarController?: import("../..").SidebarController;
|
|
27
|
+
statusBar?: import("./Page").PageStatusBarProps;
|
|
27
28
|
renderToolbar?: (options?: {
|
|
28
29
|
isScrolled: boolean;
|
|
29
30
|
}) => React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"PageContentScrollable.d.ts","sourceRoot":"","sources":["../../../src/core/Page/PageContentScrollable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG;IACnD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;aAAzB,CAAC;mBAAqB,CAAC;;;;;;;4BAQf,CAAC;;;;;;;uBAbG,MAAM,IAAI;4BACL,MAAM;qBACb,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;qDAsD3C,CAAC"}
|