@impulse-ui-native/modal 8.1.0 → 8.2.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.
Files changed (7) hide show
  1. package/README.md +5 -0
  2. package/dist/hooks/use-modal-lifecycle.hook.js +4 -3
  3. package/dist/hooks/use-modal-lifecycle.hook.js.map +1 -1
  4. package/package.json +7 -7
  5. package/dist/constants/modal.constants.d.mts +0 -4
  6. package/dist/constants/modal.constants.js +0 -7
  7. package/dist/constants/modal.constants.js.map +0 -1
package/README.md CHANGED
@@ -142,3 +142,8 @@ scroll, and keyboard avoidance is not built in.
142
142
 
143
143
  Provider uses the shared useOverlayLifecycle hook from the overlay package. Observe
144
144
  local status with onStatusChange(id, status), or hosted status with useOverlayStatus(id).
145
+
146
+ ## Theme motion
147
+
148
+ `components.modal.enterDuration` and `exitDuration` control the fade/scale
149
+ transition timing. Defaults remain 180 ms and 150 ms.
package/dist/hooks/use-modal-lifecycle.hook.js CHANGED
@@ -7,13 +7,14 @@ import {
7
7
  import { scheduleOnRN } from "react-native-worklets";
8
8
  import { useEventCallback } from "@impulse-ui-native/core";
9
9
  import { useOverlayLifecycle } from "@impulse-ui-native/overlay";
10
- import { EnterDuration, ExitDuration } from "../constants/modal.constants";
10
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
11
11
  function useModalLifecycle(props) {
12
+ const tokens = useComponentsTokens().modal;
12
13
  const progress = useSharedValue(0);
13
14
  const enter = useEventCallback(
14
15
  (transitionId, complete) => {
15
16
  progress.set(
16
- withTiming(1, { duration: EnterDuration }, (finished) => {
17
+ withTiming(1, { duration: tokens.enterDuration }, (finished) => {
17
18
  if (finished) {
18
19
  scheduleOnRN(complete, transitionId);
19
20
  }
@@ -24,7 +25,7 @@ function useModalLifecycle(props) {
24
25
  const exit = useEventCallback(
25
26
  (transitionId, complete) => {
26
27
  progress.set(
27
- withTiming(0, { duration: ExitDuration }, (finished) => {
28
+ withTiming(0, { duration: tokens.exitDuration }, (finished) => {
28
29
  if (finished) {
29
30
  scheduleOnRN(complete, transitionId);
30
31
  }
package/dist/hooks/use-modal-lifecycle.hook.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hooks/use-modal-lifecycle.hook.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport {\n cancelAnimation,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport type { OverlayTransitionHandler } from \"@impulse-ui-native/overlay\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { useOverlayLifecycle } from \"@impulse-ui-native/overlay\";\n\nimport type { ModalLifecycleProps } from \"../types\";\nimport { EnterDuration, ExitDuration } from \"../constants/modal.constants\";\n\nexport function useModalLifecycle(props: ModalLifecycleProps) {\n const progress = useSharedValue(0);\n\n const enter = useEventCallback<OverlayTransitionHandler>(\n (transitionId, complete) => {\n progress.set(\n withTiming(1, { duration: EnterDuration }, (finished) => {\n if (finished) {\n scheduleOnRN(complete, transitionId);\n }\n }),\n );\n },\n );\n const exit = useEventCallback<OverlayTransitionHandler>(\n (transitionId, complete) => {\n progress.set(\n withTiming(0, { duration: ExitDuration }, (finished) => {\n if (finished) {\n scheduleOnRN(complete, transitionId);\n }\n }),\n );\n },\n );\n\n const options = useMemo(\n () => ({ onEnter: enter, onExit: exit }),\n [enter, exit],\n );\n const lifecycle = useOverlayLifecycle(props, options);\n\n useEffect(() => () => cancelAnimation(progress), [progress]);\n\n return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);\n}\n"],"mappings":"AAAA,SAAS,WAAW,eAAe;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAGpC,SAAS,eAAe,oBAAoB;AAErC,SAAS,kBAAkB,OAA4B;AAC5D,QAAM,WAAW,eAAe,CAAC;AAEjC,QAAM,QAAQ;AAAA,IACZ,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,cAAc,GAAG,CAAC,aAAa;AACvD,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,QAAM,OAAO;AAAA,IACX,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,aAAa,GAAG,CAAC,aAAa;AACtD,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,SAAS,OAAO,QAAQ,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI;AAAA,EACd;AACA,QAAM,YAAY,oBAAoB,OAAO,OAAO;AAEpD,YAAU,MAAM,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE3D,SAAO,QAAQ,OAAO,EAAE,GAAG,WAAW,SAAS,IAAI,CAAC,WAAW,QAAQ,CAAC;AAC1E;","names":[]}
1
+ {"version":3,"sources":["../../src/hooks/use-modal-lifecycle.hook.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport {\n cancelAnimation,\n useSharedValue,\n withTiming,\n} from \"react-native-reanimated\";\nimport { scheduleOnRN } from \"react-native-worklets\";\n\nimport type { OverlayTransitionHandler } from \"@impulse-ui-native/overlay\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { useOverlayLifecycle } from \"@impulse-ui-native/overlay\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ModalLifecycleProps } from \"../types\";\n\nexport function useModalLifecycle(props: ModalLifecycleProps) {\n const tokens = useComponentsTokens().modal;\n const progress = useSharedValue(0);\n\n const enter = useEventCallback<OverlayTransitionHandler>(\n (transitionId, complete) => {\n progress.set(\n withTiming(1, { duration: tokens.enterDuration }, (finished) => {\n if (finished) {\n scheduleOnRN(complete, transitionId);\n }\n }),\n );\n },\n );\n const exit = useEventCallback<OverlayTransitionHandler>(\n (transitionId, complete) => {\n progress.set(\n withTiming(0, { duration: tokens.exitDuration }, (finished) => {\n if (finished) {\n scheduleOnRN(complete, transitionId);\n }\n }),\n );\n },\n );\n\n const options = useMemo(\n () => ({ onEnter: enter, onExit: exit }),\n [enter, exit],\n );\n const lifecycle = useOverlayLifecycle(props, options);\n\n useEffect(() => () => cancelAnimation(progress), [progress]);\n\n return useMemo(() => ({ ...lifecycle, progress }), [lifecycle, progress]);\n}\n"],"mappings":"AAAA,SAAS,WAAW,eAAe;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAI7B,SAAS,kBAAkB,OAA4B;AAC5D,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,WAAW,eAAe,CAAC;AAEjC,QAAM,QAAQ;AAAA,IACZ,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,OAAO,cAAc,GAAG,CAAC,aAAa;AAC9D,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,QAAM,OAAO;AAAA,IACX,CAAC,cAAc,aAAa;AAC1B,eAAS;AAAA,QACP,WAAW,GAAG,EAAE,UAAU,OAAO,aAAa,GAAG,CAAC,aAAa;AAC7D,cAAI,UAAU;AACZ,yBAAa,UAAU,YAAY;AAAA,UACrC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,SAAS,OAAO,QAAQ,KAAK;AAAA,IACtC,CAAC,OAAO,IAAI;AAAA,EACd;AACA,QAAM,YAAY,oBAAoB,OAAO,OAAO;AAEpD,YAAU,MAAM,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE3D,SAAO,QAAQ,OAAO,EAAE,GAAG,WAAW,SAAS,IAAI,CAAC,WAAW,QAAQ,CAAC;AAC1E;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/modal",
3
- "version": "8.1.0",
3
+ "version": "8.2.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/icon": "8.1.0",
31
- "@impulse-ui-native/theme": "8.1.0",
32
- "@impulse-ui-native/core": "8.1.0",
33
- "@impulse-ui-native/overlay": "8.1.0",
34
- "@impulse-ui-native/primitives": "8.1.0"
30
+ "@impulse-ui-native/icon": "8.2.0",
31
+ "@impulse-ui-native/theme": "8.2.0",
32
+ "@impulse-ui-native/primitives": "8.2.0",
33
+ "@impulse-ui-native/core": "8.2.0",
34
+ "@impulse-ui-native/overlay": "8.2.0"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/react": "~19.2.14",
@@ -43,8 +43,8 @@
43
43
  "react-native-reanimated": "4.5.1",
44
44
  "react-native-safe-area-context": "~5.7.0",
45
45
  "react-native-worklets": "0.10.1",
46
- "@impulse-ui-native/prettier-config": "1.0.0",
47
46
  "@impulse-ui-native/eslint-config": "1.0.0",
47
+ "@impulse-ui-native/prettier-config": "1.0.0",
48
48
  "@impulse-ui-native/tsconfig": "1.0.0"
49
49
  },
50
50
  "peerDependencies": {
package/dist/constants/modal.constants.d.mts DELETED
@@ -1,4 +0,0 @@
1
- declare const EnterDuration = 180;
2
- declare const ExitDuration = 150;
3
-
4
- export { EnterDuration, ExitDuration };
package/dist/constants/modal.constants.js DELETED
@@ -1,7 +0,0 @@
1
- const EnterDuration = 180;
2
- const ExitDuration = 150;
3
- export {
4
- EnterDuration,
5
- ExitDuration
6
- };
7
- //# sourceMappingURL=modal.constants.js.map
package/dist/constants/modal.constants.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/constants/modal.constants.ts"],"sourcesContent":["export const EnterDuration = 180;\nexport const ExitDuration = 150;\n"],"mappings":"AAAO,MAAM,gBAAgB;AACtB,MAAM,eAAe;","names":[]}