@shopgate/engage 7.32.0-beta.10 → 7.32.0-beta.12
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/core/hooks/events/appEvents.d.ts +31 -46
- package/core/hooks/events/appEvents.d.ts.map +1 -0
- package/core/hooks/events/appEvents.js +26 -29
- package/core/hooks/events/index.d.ts +4 -4
- package/core/hooks/events/index.d.ts.map +1 -1
- package/core/hooks/events/useLongPress.d.ts +55 -58
- package/core/hooks/events/useLongPress.d.ts.map +1 -0
- package/core/hooks/events/useLongPress.js +23 -16
- package/core/hooks/events/usePressHandler.d.ts +32 -21
- package/core/hooks/events/usePressHandler.d.ts.map +1 -1
- package/core/hooks/events/usePressHandler.js +12 -10
- package/core/hooks/events/useScrollDirectionChange.d.ts +72 -61
- package/core/hooks/events/useScrollDirectionChange.d.ts.map +1 -0
- package/core/hooks/events/useScrollDirectionChange.js +36 -43
- package/development/action-creators/index.d.ts +3 -0
- package/development/action-creators/index.d.ts.map +1 -0
- package/development/action-creators/settings.d.ts +45 -0
- package/development/action-creators/settings.d.ts.map +1 -0
- package/development/action-creators/settings.js +21 -10
- package/development/action-creators/storage.d.ts +17 -0
- package/development/action-creators/storage.d.ts.map +1 -0
- package/development/action-creators/storage.js +7 -4
- package/development/components/ClientInformation/ClientInformation.d.ts +6 -0
- package/development/components/ClientInformation/ClientInformation.d.ts.map +1 -0
- package/development/components/ClientInformation/ClientInformation.js +7 -4
- package/development/components/ClientInformation/actions.d.ts +6 -0
- package/development/components/ClientInformation/actions.d.ts.map +1 -0
- package/development/components/ClientInformation/actions.js +1 -1
- package/development/components/ClientInformation/index.d.ts +2 -0
- package/development/components/ClientInformation/index.d.ts.map +1 -0
- package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts +16 -0
- package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts.map +1 -0
- package/development/components/DevelopmentSettings/DevelopmentSettings.js +41 -28
- package/development/components/DevelopmentSettings/index.d.ts +2 -0
- package/development/components/DevelopmentSettings/index.d.ts.map +1 -0
- package/development/components/DevelopmentTools/DevelopmentTools.d.ts +10 -0
- package/development/components/DevelopmentTools/DevelopmentTools.d.ts.map +1 -0
- package/development/components/DevelopmentTools/DevelopmentTools.js +8 -8
- package/development/components/DevelopmentTools/Shortcuts.d.ts +6 -0
- package/development/components/DevelopmentTools/Shortcuts.d.ts.map +1 -0
- package/development/components/DevelopmentTools/Shortcuts.js +0 -1
- package/development/components/DevelopmentTools/hooks.d.ts +8 -0
- package/development/components/DevelopmentTools/hooks.d.ts.map +1 -0
- package/development/components/DevelopmentTools/hooks.js +2 -3
- package/development/components/DevelopmentTools/index.d.ts +2 -0
- package/development/components/DevelopmentTools/index.d.ts.map +1 -0
- package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts +7 -0
- package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts.map +1 -0
- package/development/components/SimulatedInsets/SimulatedInsetBottom.js +1 -6
- package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts +7 -0
- package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts.map +1 -0
- package/development/components/SimulatedInsets/SimulatedInsetTop.js +2 -7
- package/development/components/SimulatedInsets/SimulatedInsets.d.ts +13 -0
- package/development/components/SimulatedInsets/SimulatedInsets.d.ts.map +1 -0
- package/development/components/SimulatedInsets/SimulatedInsets.js +2 -7
- package/development/components/SimulatedInsets/index.d.ts +2 -0
- package/development/components/SimulatedInsets/index.d.ts.map +1 -0
- package/development/components/SimulatedInsets/types.d.ts +15 -0
- package/development/components/SimulatedInsets/types.d.ts.map +1 -0
- package/development/components/SimulatedInsets/types.js +1 -0
- package/development/components/index.d.ts +3 -0
- package/development/components/index.d.ts.map +1 -0
- package/development/constants/actionTypes.d.ts +6 -0
- package/development/constants/actionTypes.d.ts.map +1 -0
- package/development/constants/actionTypes.js +2 -1
- package/development/constants/index.d.ts +2 -0
- package/development/constants/index.d.ts.map +1 -0
- package/development/reducers/index.d.ts +24 -0
- package/development/reducers/index.d.ts.map +1 -0
- package/development/reducers/settings.d.ts +17 -0
- package/development/reducers/settings.d.ts.map +1 -0
- package/development/reducers/settings.js +48 -35
- package/development/reducers/storage.d.ts +17 -0
- package/development/reducers/storage.d.ts.map +1 -0
- package/development/reducers/storage.js +24 -24
- package/development/selectors/index.d.ts +3 -0
- package/development/selectors/index.d.ts.map +1 -0
- package/development/selectors/settings.d.ts +52 -0
- package/development/selectors/settings.d.ts.map +1 -0
- package/development/selectors/settings.js +21 -11
- package/development/selectors/storage.d.ts +10 -0
- package/development/selectors/storage.d.ts.map +1 -0
- package/development/selectors/storage.js +6 -18
- package/development/streams/index.d.ts +2 -0
- package/development/streams/index.d.ts.map +1 -0
- package/development/streams/insets.d.ts +8 -0
- package/development/streams/insets.d.ts.map +1 -0
- package/development/streams/insets.js +1 -3
- package/development/subscriptions/index.d.ts +15 -0
- package/development/subscriptions/index.d.ts.map +1 -0
- package/development/subscriptions/index.js +6 -2
- package/development/types/development.d.ts +68 -0
- package/development/types/development.d.ts.map +1 -0
- package/development/types/development.js +1 -0
- package/development/types/index.d.ts +2 -0
- package/development/types/index.d.ts.map +1 -0
- package/development/types/index.js +1 -0
- package/package.json +7 -7
- package/page/components/Widgets/Widget.d.ts.map +1 -1
- package/page/components/Widgets/Widget.js +12 -15
- package/page/components/Widgets/WidgetContext.d.ts +3 -3
- package/page/components/Widgets/WidgetContext.d.ts.map +1 -1
- package/page/components/Widgets/WidgetProvider.d.ts +6 -2
- package/page/components/Widgets/WidgetProvider.d.ts.map +1 -1
- package/page/components/Widgets/WidgetProvider.js +3 -3
- package/page/components/Widgets/constants.d.ts +13 -0
- package/page/components/Widgets/constants.d.ts.map +1 -1
- package/page/components/Widgets/constants.js +21 -1
- package/page/components/Widgets/helpers.d.ts +19 -0
- package/page/components/Widgets/helpers.d.ts.map +1 -1
- package/page/components/Widgets/helpers.js +50 -0
- package/page/components/Widgets/types.d.ts +31 -5
- package/page/components/Widgets/types.d.ts.map +1 -1
- package/page/widget.config.schema.json +54 -0
- package/page/widgets/HeroBanner/config.json +6 -0
- package/page/widgets/Image/config.json +6 -0
- package/page/widgets/ImageRow/config.json +6 -0
- package/page/widgets/ImageSlider/config.json +6 -0
- package/page/widgets/ImageSlider/hooks.js +4 -2
- package/page/widgets/README.md +92 -0
- package/page/widgets/Video/config.json +6 -0
- package/settings/reducers/appSettings.d.ts.map +1 -1
- package/settings/reducers/appSettings.js +24 -1
- package/settings/selectors/appSettings.d.ts +8 -0
- package/settings/selectors/appSettings.d.ts.map +1 -1
- package/settings/selectors/appSettings.js +5 -0
- package/settings/types/appSettings.d.ts +35 -0
- package/settings/types/appSettings.d.ts.map +1 -1
- package/settings/types/appSettings.js +9 -0
- package/styles/theme/createDefaultThemeOptions/index.d.ts.map +1 -1
- package/styles/theme/createDefaultThemeOptions/index.js +5 -0
- package/styles/theme/providers/ThemeProvider.d.ts.map +1 -1
- package/styles/theme/providers/ThemeProvider.js +11 -4
|
@@ -2,82 +2,67 @@
|
|
|
2
2
|
* Additional options for app event hooks.
|
|
3
3
|
*/
|
|
4
4
|
export interface AppEventOptions {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
/**
|
|
6
|
+
* When false, no listener is registered.
|
|
7
|
+
* @default true
|
|
8
|
+
*/
|
|
9
|
+
enabled?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* When true, the callback is removed after first call.
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
once?: boolean;
|
|
15
15
|
}
|
|
16
|
-
|
|
17
16
|
/**
|
|
18
17
|
* Extended options for return-from-background hook.
|
|
19
18
|
*/
|
|
20
19
|
export interface ReturnFromBackgroundOptions extends AppEventOptions {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
/**
|
|
21
|
+
* If true, requires a new background event to re-arm before firing again.
|
|
22
|
+
* If false, remains armed until disabled or unmounted.
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
resetAfterFire?: boolean;
|
|
27
26
|
}
|
|
28
|
-
|
|
29
27
|
/**
|
|
30
28
|
* Registers a callback for a given event from the Shopgate app event bus.
|
|
31
29
|
*
|
|
32
30
|
* Automatically unsubscribes on unmount. Can optionally run only once.
|
|
33
|
-
*
|
|
34
31
|
* @param name The event name to subscribe to.
|
|
35
32
|
* @param callback The function to call when the event fires.
|
|
36
33
|
* @param options Additional options.
|
|
37
34
|
*/
|
|
38
|
-
export declare function useAppEvent(
|
|
39
|
-
name: string,
|
|
40
|
-
callback: () => void,
|
|
41
|
-
options?: AppEventOptions
|
|
42
|
-
): void;
|
|
43
|
-
|
|
35
|
+
export declare function useAppEvent(name: string, callback: () => void, options?: AppEventOptions): void;
|
|
44
36
|
/**
|
|
45
|
-
* Registers a callback that fires when the app will enter foreground
|
|
46
|
-
*
|
|
47
|
-
* Automatically unsubscribes on unmount.
|
|
37
|
+
* Registers a callback that fires when the app will enter foreground
|
|
38
|
+
* (`applicationWillEnterForeground`).
|
|
48
39
|
*
|
|
40
|
+
* Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
49
41
|
* @param callback The callback to run when entering foreground.
|
|
50
42
|
* @param options Additional options.
|
|
51
43
|
*/
|
|
52
|
-
export declare function useAppEventOnEnterForeground(
|
|
53
|
-
callback: () => void,
|
|
54
|
-
options?: AppEventOptions
|
|
55
|
-
): void;
|
|
56
|
-
|
|
44
|
+
export declare function useAppEventOnEnterForeground(callback: () => void, options?: AppEventOptions): void;
|
|
57
45
|
/**
|
|
58
|
-
* Registers a callback that fires when the app did enter background
|
|
59
|
-
*
|
|
60
|
-
* Automatically unsubscribes on unmount.
|
|
46
|
+
* Registers a callback that fires when the app did enter background
|
|
47
|
+
* (`applicationDidEnterBackground`).
|
|
61
48
|
*
|
|
49
|
+
* Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
62
50
|
* @param callback The callback to run when entering background.
|
|
63
51
|
* @param options Additional options.
|
|
64
52
|
*/
|
|
65
|
-
export declare function useAppEventOnDidEnterBackground(
|
|
66
|
-
callback: () => void,
|
|
67
|
-
options?: AppEventOptions
|
|
68
|
-
): void;
|
|
69
|
-
|
|
53
|
+
export declare function useAppEventOnDidEnterBackground(callback: () => void, options?: AppEventOptions): void;
|
|
70
54
|
/**
|
|
71
55
|
* Invokes a callback only after the app was first sent to background and then
|
|
72
|
-
* returns to the foreground
|
|
56
|
+
* returns to the foreground - i.e. a complete background to foreground cycle.
|
|
73
57
|
*
|
|
74
58
|
* Common use case: user leaves the app to open system settings and returns, so you
|
|
75
59
|
* can re-check permissions or refresh data.
|
|
76
60
|
*
|
|
61
|
+
* Internally, this subscribes to both background and foreground events:
|
|
62
|
+
* - Arms itself when entering background
|
|
63
|
+
* - Fires on next foreground if armed
|
|
77
64
|
* @param callback The callback to run after returning from background.
|
|
78
65
|
* @param options Additional options.
|
|
79
66
|
*/
|
|
80
|
-
export declare function useAppEventOnReturnFromBackground(
|
|
81
|
-
|
|
82
|
-
options?: ReturnFromBackgroundOptions
|
|
83
|
-
): void;
|
|
67
|
+
export declare function useAppEventOnReturnFromBackground(callback: () => void, options?: ReturnFromBackgroundOptions): void;
|
|
68
|
+
//# sourceMappingURL=appEvents.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"appEvents.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/appEvents.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkBD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,GAAE,eAAoB,QAiB5F;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,eAAe,QAE3F;AAED;;;;;;;GAOG;AACH,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,eAAe,QAE9F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iCAAiC,CAC/C,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,GAAE,2BAAgC,QAsB1C"}
|
|
@@ -2,15 +2,22 @@ import { useEffect, useRef } from 'react';
|
|
|
2
2
|
import { APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND } from '@shopgate/engage/core/constants';
|
|
3
3
|
import { event } from '@shopgate/engage/core/classes';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* Additional options for app event hooks.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Extended options for return-from-background hook.
|
|
11
|
+
*/
|
|
12
|
+
|
|
5
13
|
/**
|
|
6
14
|
* Returns a stable reference to the given callback, preserving the same function identity
|
|
7
15
|
* across renders, while still always calling the latest version of the callback.
|
|
8
16
|
*
|
|
9
17
|
* Useful when passing callbacks into event listeners or effects so they don't re-subscribe
|
|
10
18
|
* on every render but still access up-to-date props/state.
|
|
11
|
-
*
|
|
12
|
-
* @
|
|
13
|
-
* @returns {Function} A stable function reference that always invokes the latest callback.
|
|
19
|
+
* @param fn The callback function whose latest version should be retained.
|
|
20
|
+
* @returns A stable function reference that always invokes the latest callback.
|
|
14
21
|
*/
|
|
15
22
|
function useStableCallback(fn) {
|
|
16
23
|
const ref = useRef(fn);
|
|
@@ -18,16 +25,14 @@ function useStableCallback(fn) {
|
|
|
18
25
|
const stable = useRef((...args) => ref.current?.(...args));
|
|
19
26
|
return stable.current;
|
|
20
27
|
}
|
|
28
|
+
|
|
21
29
|
/**
|
|
22
30
|
* Registers a callback for a given event from the Shopgate app event bus.
|
|
23
31
|
*
|
|
24
32
|
* Automatically unsubscribes on unmount. Can optionally run only once.
|
|
25
|
-
*
|
|
26
|
-
* @param
|
|
27
|
-
* @param
|
|
28
|
-
* @param {Object} [options] Additional options.
|
|
29
|
-
* @param {boolean} [options.enabled=true] When false, no listener is registered.
|
|
30
|
-
* @param {boolean} [options.once=false] When true, the callback is removed after first call.
|
|
33
|
+
* @param name The event name to subscribe to.
|
|
34
|
+
* @param callback The function to call when the event fires.
|
|
35
|
+
* @param options Additional options.
|
|
31
36
|
*/
|
|
32
37
|
export function useAppEvent(name, callback, options = {}) {
|
|
33
38
|
const {
|
|
@@ -37,7 +42,10 @@ export function useAppEvent(name, callback, options = {}) {
|
|
|
37
42
|
const latest = useStableCallback(callback);
|
|
38
43
|
useEffect(() => {
|
|
39
44
|
if (!enabled) return undefined;
|
|
40
|
-
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Invokes the callback, and unsubscribes again when the event was only wanted once.
|
|
48
|
+
*/
|
|
41
49
|
const handler = () => {
|
|
42
50
|
latest();
|
|
43
51
|
if (once) event.removeCallback(name, handler);
|
|
@@ -52,11 +60,8 @@ export function useAppEvent(name, callback, options = {}) {
|
|
|
52
60
|
* (`applicationWillEnterForeground`).
|
|
53
61
|
*
|
|
54
62
|
* Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
55
|
-
*
|
|
56
|
-
* @param
|
|
57
|
-
* @param {Object} [options] Additional options.
|
|
58
|
-
* @param {boolean} [options.enabled=true] When false, the listener is not registered.
|
|
59
|
-
* @param {boolean} [options.once=false] Remove after first call.
|
|
63
|
+
* @param callback The callback to run when entering foreground.
|
|
64
|
+
* @param options Additional options.
|
|
60
65
|
*/
|
|
61
66
|
export function useAppEventOnEnterForeground(callback, options) {
|
|
62
67
|
useAppEvent(APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, callback, options);
|
|
@@ -65,12 +70,10 @@ export function useAppEventOnEnterForeground(callback, options) {
|
|
|
65
70
|
/**
|
|
66
71
|
* Registers a callback that fires when the app did enter background
|
|
67
72
|
* (`applicationDidEnterBackground`).
|
|
68
|
-
** Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
69
73
|
*
|
|
70
|
-
*
|
|
71
|
-
* @param
|
|
72
|
-
* @param
|
|
73
|
-
* @param {boolean} [options.once=false] Remove after first call.
|
|
74
|
+
* Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
|
|
75
|
+
* @param callback The callback to run when entering background.
|
|
76
|
+
* @param options Additional options.
|
|
74
77
|
*/
|
|
75
78
|
export function useAppEventOnDidEnterBackground(callback, options) {
|
|
76
79
|
useAppEvent(APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND, callback, options);
|
|
@@ -78,7 +81,7 @@ export function useAppEventOnDidEnterBackground(callback, options) {
|
|
|
78
81
|
|
|
79
82
|
/**
|
|
80
83
|
* Invokes a callback only after the app was first sent to background and then
|
|
81
|
-
* returns to the foreground
|
|
84
|
+
* returns to the foreground - i.e. a complete background to foreground cycle.
|
|
82
85
|
*
|
|
83
86
|
* Common use case: user leaves the app to open system settings and returns, so you
|
|
84
87
|
* can re-check permissions or refresh data.
|
|
@@ -86,14 +89,8 @@ export function useAppEventOnDidEnterBackground(callback, options) {
|
|
|
86
89
|
* Internally, this subscribes to both background and foreground events:
|
|
87
90
|
* - Arms itself when entering background
|
|
88
91
|
* - Fires on next foreground if armed
|
|
89
|
-
*
|
|
90
|
-
* @param
|
|
91
|
-
* @param {Object} [options] Additional options.
|
|
92
|
-
* @param {boolean} [options.enabled=true] When false, no listener behavior is active.
|
|
93
|
-
* @param {boolean} [options.once=false] When true, callback fires only for the first cycle.
|
|
94
|
-
* @param {boolean} [options.resetAfterFire=true]
|
|
95
|
-
* If true, requires a new background event to re-arm before firing again.
|
|
96
|
-
* If false, remains armed until disabled or unmounted.
|
|
92
|
+
* @param callback The callback to run after returning from background.
|
|
93
|
+
* @param options Additional options.
|
|
97
94
|
*/
|
|
98
95
|
export function useAppEventOnReturnFromBackground(callback, options = {}) {
|
|
99
96
|
const {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export { default as usePressHandler } from
|
|
3
|
-
export { default as useLongPress } from
|
|
4
|
-
export { default as useScrollDirectionChange } from
|
|
1
|
+
export * from './appEvents';
|
|
2
|
+
export { default as usePressHandler } from './usePressHandler';
|
|
3
|
+
export { default as useLongPress } from './useLongPress';
|
|
4
|
+
export { default as useScrollDirectionChange } from './useScrollDirectionChange';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -1,68 +1,65 @@
|
|
|
1
|
-
import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
|
|
2
|
-
|
|
1
|
+
import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The events a long press interaction can originate from. The handlers below are spread onto an
|
|
4
|
+
* element, so these are React's synthetic events rather than the DOM ones.
|
|
5
|
+
*/
|
|
6
|
+
export type LongPressEvent = ReactMouseEvent | ReactTouchEvent;
|
|
7
|
+
/**
|
|
8
|
+
* Event handlers to spread onto the element that should react to a long press.
|
|
9
|
+
*/
|
|
3
10
|
export interface LongPressHandlers {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Attach to `onContextMenu` event to prevent the native context menu.
|
|
31
|
-
*/
|
|
32
|
-
onContextMenu: (e: MouseEvent) => void;
|
|
11
|
+
/**
|
|
12
|
+
* Attach to `onMouseDown` event.
|
|
13
|
+
*/
|
|
14
|
+
onMouseDown: (e: LongPressEvent) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Attach to `onTouchStart` event.
|
|
17
|
+
*/
|
|
18
|
+
onTouchStart: (e: LongPressEvent) => void;
|
|
19
|
+
/**
|
|
20
|
+
* Attach to `onMouseUp` event.
|
|
21
|
+
*/
|
|
22
|
+
onMouseUp: (e: LongPressEvent) => void;
|
|
23
|
+
/**
|
|
24
|
+
* Attach to `onMouseLeave` event.
|
|
25
|
+
*/
|
|
26
|
+
onMouseLeave: (e: LongPressEvent) => void;
|
|
27
|
+
/**
|
|
28
|
+
* Attach to `onTouchEnd` event.
|
|
29
|
+
*/
|
|
30
|
+
onTouchEnd: (e: LongPressEvent) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Attach to `onContextMenu` event to prevent the native context menu.
|
|
33
|
+
*/
|
|
34
|
+
onContextMenu: (e: ReactMouseEvent) => void;
|
|
33
35
|
}
|
|
34
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Configuration and lifecycle callbacks for a long press interaction.
|
|
38
|
+
*/
|
|
35
39
|
export interface UseLongPressOptions {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
* Called when the press is cancelled before the threshold.
|
|
54
|
-
*/
|
|
55
|
-
onCancel?: (e: ReactMouseEvent | ReactTouchEvent) => void;
|
|
40
|
+
/**
|
|
41
|
+
* Duration in milliseconds to trigger long press.
|
|
42
|
+
* @default 1000
|
|
43
|
+
*/
|
|
44
|
+
threshold?: number;
|
|
45
|
+
/**
|
|
46
|
+
* Called when the press starts.
|
|
47
|
+
*/
|
|
48
|
+
onStart?: (e: LongPressEvent) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Called when the long press completes.
|
|
51
|
+
*/
|
|
52
|
+
onFinish?: (e: LongPressEvent) => void;
|
|
53
|
+
/**
|
|
54
|
+
* Called when the press is cancelled before the threshold.
|
|
55
|
+
*/
|
|
56
|
+
onCancel?: (e: LongPressEvent) => void;
|
|
56
57
|
}
|
|
57
|
-
|
|
58
58
|
/**
|
|
59
59
|
* Custom hook to handle long press interactions.
|
|
60
|
-
*
|
|
61
60
|
* @param callback Function to call on long press.
|
|
62
61
|
* @param options Configuration and lifecycle callbacks.
|
|
63
62
|
* @returns An object containing event handlers for mouse and touch events.
|
|
64
63
|
*/
|
|
65
|
-
export default function useLongPress(
|
|
66
|
-
|
|
67
|
-
options?: UseLongPressOptions
|
|
68
|
-
): LongPressHandlers;
|
|
64
|
+
export default function useLongPress(callback: (e: LongPressEvent) => void, options?: UseLongPressOptions): LongPressHandlers;
|
|
65
|
+
//# sourceMappingURL=useLongPress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLongPress.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/useLongPress.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,eAAe,CAAC;AAE/D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,UAAU,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxC;AAUD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,EACrC,OAAO,GAAE,mBAAwB,GAChC,iBAAiB,CA4CnB"}
|
|
@@ -1,32 +1,39 @@
|
|
|
1
|
-
// @ts-check
|
|
2
1
|
import { useRef, useCallback } from 'react';
|
|
3
2
|
|
|
4
|
-
/**
|
|
5
|
-
|
|
3
|
+
/**
|
|
4
|
+
* The events a long press interaction can originate from. The handlers below are spread onto an
|
|
5
|
+
* element, so these are React's synthetic events rather than the DOM ones.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Event handlers to spread onto the element that should react to a long press.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Configuration and lifecycle callbacks for a long press interaction.
|
|
14
|
+
*/
|
|
6
15
|
|
|
7
16
|
/**
|
|
8
17
|
* Prevents the default context menu from appearing on long press.
|
|
9
|
-
* @param
|
|
18
|
+
* @param e The event object.
|
|
10
19
|
*/
|
|
11
20
|
const preventContextMenu = e => {
|
|
12
21
|
e.preventDefault();
|
|
13
22
|
};
|
|
14
23
|
|
|
15
|
-
// eslint-disable-next-line valid-jsdoc
|
|
16
24
|
/**
|
|
17
25
|
* Custom hook to handle long press interactions.
|
|
18
|
-
*
|
|
19
|
-
* @param
|
|
20
|
-
* @
|
|
21
|
-
* @returns {LongPressHandlers} An object containing event handlers for mouse and touch events.
|
|
26
|
+
* @param callback Function to call on long press.
|
|
27
|
+
* @param options Configuration and lifecycle callbacks.
|
|
28
|
+
* @returns An object containing event handlers for mouse and touch events.
|
|
22
29
|
*/
|
|
23
|
-
export default function useLongPress(callback, {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
export default function useLongPress(callback, options = {}) {
|
|
31
|
+
const {
|
|
32
|
+
threshold = 1000,
|
|
33
|
+
onStart,
|
|
34
|
+
onFinish,
|
|
35
|
+
onCancel
|
|
36
|
+
} = options;
|
|
30
37
|
const timerRef = useRef(undefined);
|
|
31
38
|
const triggeredRef = useRef(false);
|
|
32
39
|
const start = useCallback(e => {
|
|
@@ -1,30 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* The events that can activate a pressable element.
|
|
4
|
+
*/
|
|
5
|
+
export type PressEvent = ReactMouseEvent | ReactKeyboardEvent;
|
|
6
|
+
/**
|
|
7
|
+
* Event handlers to spread onto the element that should react to a press.
|
|
8
|
+
*/
|
|
9
|
+
export interface PressHandlers {
|
|
3
10
|
/**
|
|
4
|
-
*
|
|
11
|
+
* Click event handler.
|
|
5
12
|
*/
|
|
6
|
-
onClick:
|
|
13
|
+
onClick: (e: ReactMouseEvent) => void;
|
|
7
14
|
/**
|
|
8
|
-
*
|
|
15
|
+
* Keydown handler for Enter/Space.
|
|
9
16
|
*/
|
|
10
|
-
onKeyDown:
|
|
11
|
-
}
|
|
17
|
+
onKeyDown: (e: ReactKeyboardEvent) => void;
|
|
18
|
+
}
|
|
12
19
|
/**
|
|
13
|
-
*
|
|
14
|
-
* @property {Function} onClick - Click event handler.
|
|
15
|
-
* @property {Function} onKeyDown - Keydown handler for Enter/Space.
|
|
20
|
+
* Optional configuration for the press handlers.
|
|
16
21
|
*/
|
|
22
|
+
export interface UsePressHandlerOptions {
|
|
23
|
+
/**
|
|
24
|
+
* Whether Space triggers the callback.
|
|
25
|
+
* @default true
|
|
26
|
+
*/
|
|
27
|
+
triggerOnSpace?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether Enter triggers the callback.
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
triggerOnEnter?: boolean;
|
|
33
|
+
}
|
|
17
34
|
/**
|
|
18
35
|
* Improves development for accessibility by simplifying registration of multiple
|
|
19
36
|
* listeners (click, Enter, Space) to invoke the a callback when an element is
|
|
20
37
|
* interacted with.
|
|
21
|
-
*
|
|
22
|
-
* @param
|
|
23
|
-
* @
|
|
24
|
-
* @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
|
|
25
|
-
* @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
|
|
26
|
-
* @returns {PressHandlers} handlers - Event handlers to spread onto an element
|
|
27
|
-
*
|
|
38
|
+
* @param onPress Callback to run when the element is interacted with.
|
|
39
|
+
* @param options Optional configuration.
|
|
40
|
+
* @returns Event handlers to spread onto an element.
|
|
28
41
|
* @example
|
|
29
42
|
* ```js
|
|
30
43
|
* function MyPressableButton({ onActivate }) {
|
|
@@ -46,8 +59,6 @@ export type PressHandlers = {
|
|
|
46
59
|
* }
|
|
47
60
|
* ```
|
|
48
61
|
*/
|
|
49
|
-
declare function usePressHandler(onPress:
|
|
50
|
-
|
|
51
|
-
triggerOnEnter?: boolean | undefined;
|
|
52
|
-
}): PressHandlers;
|
|
62
|
+
declare function usePressHandler(onPress: (e: PressEvent) => void, options?: UsePressHandlerOptions): PressHandlers;
|
|
63
|
+
export default usePressHandler;
|
|
53
64
|
//# sourceMappingURL=usePressHandler.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePressHandler.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/usePressHandler.
|
|
1
|
+
{"version":3,"file":"usePressHandler.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/usePressHandler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,eAAe,CACtB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EAChC,OAAO,GAAE,sBAA2B,GACnC,aAAa,CAoCf;AAED,eAAe,eAAe,CAAC"}
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
* The events that can activate a pressable element.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Event handlers to spread onto the element that should react to a press.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Optional configuration for the press handlers.
|
|
7
13
|
*/
|
|
8
14
|
|
|
9
15
|
/**
|
|
10
16
|
* Improves development for accessibility by simplifying registration of multiple
|
|
11
17
|
* listeners (click, Enter, Space) to invoke the a callback when an element is
|
|
12
18
|
* interacted with.
|
|
13
|
-
*
|
|
14
|
-
* @param
|
|
15
|
-
* @
|
|
16
|
-
* @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
|
|
17
|
-
* @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
|
|
18
|
-
* @returns {PressHandlers} handlers - Event handlers to spread onto an element
|
|
19
|
-
*
|
|
19
|
+
* @param onPress Callback to run when the element is interacted with.
|
|
20
|
+
* @param options Optional configuration.
|
|
21
|
+
* @returns Event handlers to spread onto an element.
|
|
20
22
|
* @example
|
|
21
23
|
* ```js
|
|
22
24
|
* function MyPressableButton({ onActivate }) {
|