@seed-design/stackflow 0.1.0 → 0.1.3

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 (4) hide show
  1. package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs +6 -0
  2. package/lib/primitive/GlobalInteraction/useGlobalInteraction.js +6 -0
  3. package/package.json +3 -3
  4. package/src/primitive/GlobalInteraction/useGlobalInteraction.ts +7 -2
package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs CHANGED
@@ -70,6 +70,11 @@ function useGlobalInteraction() {
70
70
  const endSwipeBack = React.useCallback(
71
71
  (_) => {
72
72
  const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
73
+ if (swiped) {
74
+ stackRef.current?.style.setProperty("--swipe-back-target", "100%");
75
+ } else {
76
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
77
+ }
73
78
  setSwipeBackState("transitioning");
74
79
  onSwipeEnd?.({ swiped });
75
80
  },
@@ -83,6 +88,7 @@ function useGlobalInteraction() {
83
88
  displacementRatio: 0,
84
89
  velocity: 0
85
90
  });
91
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
86
92
  setSwipeBackState("idle");
87
93
  }, []);
88
94
  return React.useMemo(
package/lib/primitive/GlobalInteraction/useGlobalInteraction.js CHANGED
@@ -66,6 +66,11 @@ function useGlobalInteraction() {
66
66
  const endSwipeBack = useCallback(
67
67
  (_) => {
68
68
  const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
69
+ if (swiped) {
70
+ stackRef.current?.style.setProperty("--swipe-back-target", "100%");
71
+ } else {
72
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
73
+ }
69
74
  setSwipeBackState("transitioning");
70
75
  onSwipeEnd?.({ swiped });
71
76
  },
@@ -79,6 +84,7 @@ function useGlobalInteraction() {
79
84
  displacementRatio: 0,
80
85
  velocity: 0
81
86
  });
87
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
82
88
  setSwipeBackState("idle");
83
89
  }, []);
84
90
  return useMemo(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/stackflow",
3
- "version": "0.1.0",
3
+ "version": "0.1.3",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,7 +35,7 @@
35
35
  "clsx": "^2.1.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@seed-design/css": "0.1.0",
38
+ "@seed-design/css": "0.1.3",
39
39
  "@stackflow/core": "^1.2.0",
40
40
  "@stackflow/react": "^1.5.1",
41
41
  "@stackflow/react-ui-core": "^1.3.2",
@@ -47,7 +47,7 @@
47
47
  "vite-plugin-dts": "^4.5.3"
48
48
  },
49
49
  "peerDependencies": {
50
- "@seed-design/css": ">=0.1.0",
50
+ "@seed-design/css": ">=0.1.3",
51
51
  "@stackflow/core": ">=1.1.0",
52
52
  "@stackflow/react": ">=1.4.1",
53
53
  "@stackflow/react-ui-core": ">=1.3.2",
package/src/primitive/GlobalInteraction/useGlobalInteraction.ts CHANGED
@@ -119,9 +119,13 @@ export function useGlobalInteraction() {
119
119
  swipeBackContextRef.current.displacementRatio > displacementRatioThreshold ||
120
120
  swipeBackContextRef.current.velocity > velocityThreshold;
121
121
 
122
- // we intentionally do not reset context here, so that the displacement can be used for exit animation
123
- setSwipeBackState("transitioning");
122
+ if (swiped) {
123
+ stackRef.current?.style.setProperty("--swipe-back-target", "100%");
124
+ } else {
125
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
126
+ }
124
127
 
128
+ setSwipeBackState("transitioning");
125
129
  onSwipeEnd?.({ swiped });
126
130
  },
127
131
  [onSwipeEnd, displacementRatioThreshold, velocityThreshold],
@@ -135,6 +139,7 @@ export function useGlobalInteraction() {
135
139
  displacementRatio: 0,
136
140
  velocity: 0,
137
141
  });
142
+ stackRef.current?.style.setProperty("--swipe-back-target", "0");
138
143
  setSwipeBackState("idle");
139
144
  }, []);
140
145