@impulse-ui-native/modal 7.0.1 → 8.0.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/close.js +3 -9
- package/dist/components/close.js.map +1 -1
- package/dist/components/root.js +1 -4
- package/dist/components/root.js.map +1 -1
- package/dist/components/surface.js.map +1 -1
- package/dist/constants/modal-close.constants.d.mts +8 -0
- package/dist/constants/modal-close.constants.js +11 -0
- package/dist/constants/modal-close.constants.js.map +1 -0
- package/dist/types/modal-theme.types.d.mts +16 -0
- package/dist/types/modal-theme.types.js +1 -0
- package/dist/types/modal-theme.types.js.map +1 -0
- package/package.json +6 -6
package/dist/components/close.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useCallback } from "react";
|
|
3
|
-
import { StyleSheet } from "react-native";
|
|
4
3
|
import { useEventCallback } from "@impulse-ui-native/core";
|
|
5
4
|
import { Pressable } from "@impulse-ui-native/primitives";
|
|
5
|
+
import { ModalCloseStyles } from "../constants/modal-close.constants";
|
|
6
6
|
import { useModalContext } from "../hooks/use-modal-context.hook";
|
|
7
7
|
const ModalClose = memo(function ModalClose2({
|
|
8
8
|
disabled,
|
|
@@ -15,10 +15,10 @@ const ModalClose = memo(function ModalClose2({
|
|
|
15
15
|
const blocked = disabled === true || loading === true || !interactive;
|
|
16
16
|
const closeStyle = useCallback(
|
|
17
17
|
(state) => [
|
|
18
|
-
|
|
18
|
+
ModalCloseStyles.close,
|
|
19
19
|
typeof style === "function" ? style(state) : style
|
|
20
20
|
],
|
|
21
|
-
[
|
|
21
|
+
[style]
|
|
22
22
|
);
|
|
23
23
|
const handlePress = useEventCallback((event) => {
|
|
24
24
|
if (blocked) {
|
|
@@ -37,12 +37,6 @@ const ModalClose = memo(function ModalClose2({
|
|
|
37
37
|
}
|
|
38
38
|
);
|
|
39
39
|
});
|
|
40
|
-
const styles = StyleSheet.create({
|
|
41
|
-
close: {
|
|
42
|
-
alignItems: "center",
|
|
43
|
-
justifyContent: "center"
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
40
|
export {
|
|
47
41
|
ModalClose
|
|
48
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/close.tsx"],"sourcesContent":["import type {\n GestureResponderEvent,\n PressableStateCallbackType,\n} from \"react-native\";\nimport { memo, useCallback } from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/components/close.tsx"],"sourcesContent":["import type {\n GestureResponderEvent,\n PressableStateCallbackType,\n} from \"react-native\";\nimport { memo, useCallback } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable } from \"@impulse-ui-native/primitives\";\n\nimport type { ModalCloseProps } from \"../types\";\nimport { ModalCloseStyles } from \"../constants/modal-close.constants\";\nimport { useModalContext } from \"../hooks/use-modal-context.hook\";\n\nexport const ModalClose = memo(function ModalClose({\n disabled,\n loading,\n style,\n onPress,\n ...props\n}: ModalCloseProps) {\n const { close, interactive } = useModalContext();\n const blocked = disabled === true || loading === true || !interactive;\n\n const closeStyle = useCallback(\n (state: PressableStateCallbackType) => [\n ModalCloseStyles.close,\n typeof style === \"function\" ? style(state) : style,\n ],\n [style],\n );\n\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\n if (blocked) {\n return;\n }\n\n close();\n onPress?.(event);\n });\n\n return (\n <Pressable\n {...props}\n disabled={blocked}\n style={closeStyle}\n onPress={handlePress}\n />\n );\n});\n"],"mappings":"AAyCI;AArCJ,SAAS,MAAM,mBAAmB;AAElC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAG1B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEzB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,EAAE,OAAO,YAAY,IAAI,gBAAgB;AAC/C,QAAM,UAAU,aAAa,QAAQ,YAAY,QAAQ,CAAC;AAE1D,QAAM,aAAa;AAAA,IACjB,CAAC,UAAsC;AAAA,MACrC,iBAAiB;AAAA,MACjB,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,UAAM;AACN,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["ModalClose"]}
|
package/dist/components/root.js
CHANGED
|
@@ -63,10 +63,7 @@ const ModalRoot = memo(function ModalRoot2({
|
|
|
63
63
|
)
|
|
64
64
|
] }) : null;
|
|
65
65
|
});
|
|
66
|
-
function themedStyles(theme, {
|
|
67
|
-
insets,
|
|
68
|
-
layer
|
|
69
|
-
}) {
|
|
66
|
+
function themedStyles(theme, { insets, layer }) {
|
|
70
67
|
const tokens = theme.components.modal;
|
|
71
68
|
return StyleSheet.create({
|
|
72
69
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useEffect, useMemo } from \"react\";\nimport { BackHandler, Pressable, StyleSheet } from \"react-native\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalRootProps } from \"../types\";\nimport { useModalContext } from \"../hooks/use-modal-context.hook\";\nimport { ModalSurface } from \"./surface\";\n\nexport const ModalRoot = memo(function ModalRoot({\n children,\n ...props\n}: ModalRootProps) {\n const { mounted, interactive, progress, close, layer } = useModalContext();\n const insets = useSafeAreaInsets();\n const tokens = useComponentsTokens().modal;\n const styles = useThemedStyles(themedStyles, { insets, layer }, [\n insets,\n layer,\n ]);\n\n const overlayStyle = useAnimatedStyle(() => ({ opacity: progress.value }));\n const surfaceStyle = useAnimatedStyle(() => ({\n transform: [\n { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value },\n ],\n }));\n\n const containerStyle = useMemo(\n () => [styles.container, overlayStyle],\n [styles.container, overlayStyle],\n );\n const surfaceContainerStyle = useMemo(\n () => [styles.surfaceContainer, surfaceStyle],\n [styles.surfaceContainer, surfaceStyle],\n );\n\n useEffect(() => {\n if (!mounted) {\n return;\n }\n\n const subscription = BackHandler.addEventListener(\n \"hardwareBackPress\",\n () => {\n close();\n\n return true;\n },\n );\n\n return () => subscription.remove();\n }, [mounted, close]);\n\n return mounted ? (\n <Animated.View style={containerStyle}>\n <Pressable\n style={styles.backdrop}\n onPress={close}\n disabled={!interactive}\n />\n <Animated.View\n style={surfaceContainerStyle}\n pointerEvents={interactive ? \"box-none\" : \"none\"}\n >\n <ModalSurface {...props}>{children}</ModalSurface>\n </Animated.View>\n </Animated.View>\n ) : null;\n});\n\nfunction themedStyles(
|
|
1
|
+
{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useEffect, useMemo } from \"react\";\nimport { BackHandler, Pressable, StyleSheet } from \"react-native\";\nimport Animated, { useAnimatedStyle } from \"react-native-reanimated\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalRootProps } from \"../types\";\nimport type { ModalRootThemeProps } from \"../types/modal-theme.types\";\nimport { useModalContext } from \"../hooks/use-modal-context.hook\";\nimport { ModalSurface } from \"./surface\";\n\nexport const ModalRoot = memo(function ModalRoot({\n children,\n ...props\n}: ModalRootProps) {\n const { mounted, interactive, progress, close, layer } = useModalContext();\n const insets = useSafeAreaInsets();\n const tokens = useComponentsTokens().modal;\n const styles = useThemedStyles(themedStyles, { insets, layer }, [\n insets,\n layer,\n ]);\n\n const overlayStyle = useAnimatedStyle(() => ({ opacity: progress.value }));\n const surfaceStyle = useAnimatedStyle(() => ({\n transform: [\n { scale: tokens.closedScale + (1 - tokens.closedScale) * progress.value },\n ],\n }));\n\n const containerStyle = useMemo(\n () => [styles.container, overlayStyle],\n [styles.container, overlayStyle],\n );\n const surfaceContainerStyle = useMemo(\n () => [styles.surfaceContainer, surfaceStyle],\n [styles.surfaceContainer, surfaceStyle],\n );\n\n useEffect(() => {\n if (!mounted) {\n return;\n }\n\n const subscription = BackHandler.addEventListener(\n \"hardwareBackPress\",\n () => {\n close();\n\n return true;\n },\n );\n\n return () => subscription.remove();\n }, [mounted, close]);\n\n return mounted ? (\n <Animated.View style={containerStyle}>\n <Pressable\n style={styles.backdrop}\n onPress={close}\n disabled={!interactive}\n />\n <Animated.View\n style={surfaceContainerStyle}\n pointerEvents={interactive ? \"box-none\" : \"none\"}\n >\n <ModalSurface {...props}>{children}</ModalSurface>\n </Animated.View>\n </Animated.View>\n ) : null;\n});\n\nfunction themedStyles(theme: AppTheme, { insets, layer }: ModalRootThemeProps) {\n const tokens = theme.components.modal;\n\n return StyleSheet.create({\n container: {\n ...StyleSheet.absoluteFill,\n zIndex: tokens.zIndexBase + layer,\n alignItems: \"center\",\n justifyContent: \"center\",\n paddingTop: insets.top + tokens.viewportPadding,\n paddingRight: insets.right + tokens.viewportPadding,\n paddingBottom: insets.bottom + tokens.viewportPadding,\n paddingLeft: insets.left + tokens.viewportPadding,\n },\n backdrop: {\n ...StyleSheet.absoluteFill,\n backgroundColor: tokens.overlayColor,\n opacity: tokens.overlayVisibleOpacity,\n },\n surfaceContainer: {\n width: \"100%\",\n alignItems: \"center\",\n },\n });\n}\n"],"mappings":"AA2DI,SACE,KADF;AA3DJ,SAAS,MAAM,WAAW,eAAe;AACzC,SAAS,aAAa,WAAW,kBAAkB;AACnD,OAAO,YAAY,wBAAwB;AAC3C,SAAS,yBAAyB;AAGlC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,EAAE,SAAS,aAAa,UAAU,OAAO,MAAM,IAAI,gBAAgB;AACzE,QAAM,SAAS,kBAAkB;AACjC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,QAAQ,MAAM,GAAG;AAAA,IAC9D;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,iBAAiB,OAAO,EAAE,SAAS,SAAS,MAAM,EAAE;AACzE,QAAM,eAAe,iBAAiB,OAAO;AAAA,IAC3C,WAAW;AAAA,MACT,EAAE,OAAO,OAAO,eAAe,IAAI,OAAO,eAAe,SAAS,MAAM;AAAA,IAC1E;AAAA,EACF,EAAE;AAEF,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,YAAY;AAAA,IACrC,CAAC,OAAO,WAAW,YAAY;AAAA,EACjC;AACA,QAAM,wBAAwB;AAAA,IAC5B,MAAM,CAAC,OAAO,kBAAkB,YAAY;AAAA,IAC5C,CAAC,OAAO,kBAAkB,YAAY;AAAA,EACxC;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,eAAe,YAAY;AAAA,MAC/B;AAAA,MACA,MAAM;AACJ,cAAM;AAEN,eAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,SAAO,UACL,qBAAC,SAAS,MAAT,EAAc,OAAO,gBACpB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,SAAS;AAAA,QACT,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACC,OAAO;AAAA,QACP,eAAe,cAAc,aAAa;AAAA,QAE1C,8BAAC,gBAAc,GAAG,OAAQ,UAAS;AAAA;AAAA,IACrC;AAAA,KACF,IACE;AACN,CAAC;AAED,SAAS,aAAa,OAAiB,EAAE,QAAQ,MAAM,GAAwB;AAC7E,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,GAAG,WAAW;AAAA,MACd,QAAQ,OAAO,aAAa;AAAA,MAC5B,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY,OAAO,MAAM,OAAO;AAAA,MAChC,cAAc,OAAO,QAAQ,OAAO;AAAA,MACpC,eAAe,OAAO,SAAS,OAAO;AAAA,MACtC,aAAa,OAAO,OAAO,OAAO;AAAA,IACpC;AAAA,IACA,UAAU;AAAA,MACR,GAAG,WAAW;AAAA,MACd,iBAAiB,OAAO;AAAA,MACxB,SAAS,OAAO;AAAA,IAClB;AAAA,IACA,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["ModalRoot"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme
|
|
1
|
+
{"version":3,"sources":["../../src/components/surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ModalSurfaceProps } from \"../types\";\nimport type { ModalSurfaceThemeProps } from \"../types/modal-theme.types\";\n\nexport const ModalSurface = memo(function ModalSurface({\n size = \"medium\",\n style,\n ...props\n}: ModalSurfaceProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(themedStyles, { size }, [size]);\n\n const rootStyle = useMemo(\n () => [styles.root, extractedStyleProps, style],\n [styles.root, extractedStyleProps, style],\n );\n\n return <View {...props} style={rootStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme, { size }: ModalSurfaceThemeProps) {\n const tokens = theme.components.modal;\n\n return StyleSheet.create({\n root: {\n width: \"100%\",\n maxWidth: tokens.sizes[size].maxWidth,\n padding: tokens.padding,\n gap: tokens.gap,\n backgroundColor: tokens.backgroundColor,\n borderColor: tokens.borderColor,\n borderWidth: tokens.borderWidth,\n borderRadius: tokens.borderRadius,\n },\n });\n}\n"],"mappings":"AAuBS;AAvBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAKxC,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,cAAc,EAAE,KAAK,GAAG,CAAC,IAAI,CAAC;AAE7D,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB,EAAE,KAAK,GAA2B;AACvE,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU,OAAO,MAAM,IAAI,EAAE;AAAA,MAC7B,SAAS,OAAO;AAAA,MAChB,KAAK,OAAO;AAAA,MACZ,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,cAAc,OAAO;AAAA,IACvB;AAAA,EACF,CAAC;AACH;","names":["ModalSurface"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/constants/modal-close.constants.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nexport const ModalCloseStyles = StyleSheet.create({\n close: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n});\n"],"mappings":"AAAA,SAAS,kBAAkB;AAEpB,MAAM,mBAAmB,WAAW,OAAO;AAAA,EAChD,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ComponentSize } from '@impulse-ui-native/theme';
|
|
2
|
+
|
|
3
|
+
interface ModalRootThemeProps {
|
|
4
|
+
insets: {
|
|
5
|
+
top: number;
|
|
6
|
+
right: number;
|
|
7
|
+
bottom: number;
|
|
8
|
+
left: number;
|
|
9
|
+
};
|
|
10
|
+
layer: number;
|
|
11
|
+
}
|
|
12
|
+
interface ModalSurfaceThemeProps {
|
|
13
|
+
size: ComponentSize;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export type { ModalRootThemeProps, ModalSurfaceThemeProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=modal-theme.types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/modal",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"description": "Compound modal dialogs with local and OverlayHost lifecycle support.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
],
|
|
28
28
|
"sideEffects": false,
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@impulse-ui-native/
|
|
31
|
-
"@impulse-ui-native/primitives": "
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/core": "
|
|
30
|
+
"@impulse-ui-native/icon": "8.0.0",
|
|
31
|
+
"@impulse-ui-native/primitives": "8.0.0",
|
|
32
|
+
"@impulse-ui-native/theme": "8.0.0",
|
|
33
|
+
"@impulse-ui-native/overlay": "8.0.0",
|
|
34
|
+
"@impulse-ui-native/core": "8.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~19.2.14",
|