@zuzjs/ui 0.9.6 → 0.9.8
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/cjs/comps/Calendar/index.d.ts +3 -0
- package/dist/cjs/comps/Calendar/index.js +109 -0
- package/dist/cjs/comps/Calendar/types.d.ts +6 -0
- package/dist/cjs/comps/Calendar/types.js +1 -0
- package/dist/cjs/comps/Cover/index.d.ts +3 -1
- package/dist/cjs/comps/Cover/index.js +3 -3
- package/dist/cjs/comps/Crumb/index.d.ts +1 -1
- package/dist/cjs/comps/DatePicker/index.d.ts +11 -0
- package/dist/cjs/comps/DatePicker/index.js +73 -0
- package/dist/cjs/comps/DatePicker/types.d.ts +6 -0
- package/dist/cjs/comps/DatePicker/types.js +1 -0
- package/dist/cjs/comps/Icon/index.d.ts +2 -0
- package/dist/cjs/comps/Icon/index.js +5 -2
- package/dist/cjs/comps/List/index.d.ts +1 -1
- package/dist/cjs/comps/Password/index.d.ts +1 -1
- package/dist/cjs/comps/Search/index.d.ts +4 -0
- package/dist/cjs/comps/Search/index.js +7 -3
- package/dist/cjs/comps/Search/types.d.ts +5 -0
- package/dist/cjs/comps/Select/index.d.ts +2 -0
- package/dist/cjs/comps/Select/index.js +5 -2
- package/dist/cjs/comps/Select/optionItem.d.ts +2 -1
- package/dist/cjs/comps/Select/optionItem.js +3 -2
- package/dist/cjs/comps/Select/types.d.ts +5 -1
- package/dist/cjs/comps/Spinner/index.d.ts +3 -1
- package/dist/cjs/comps/Spinner/index.js +11 -4
- package/dist/cjs/comps/Table/index.js +2 -2
- package/dist/cjs/comps/Table/row.js +2 -2
- package/dist/cjs/comps/Table/types.d.ts +2 -0
- package/dist/cjs/comps/TextArea/commands.d.ts +12 -0
- package/dist/cjs/comps/TextArea/commands.js +16 -0
- package/dist/cjs/comps/TextArea/index.d.ts +13 -6
- package/dist/cjs/comps/TextArea/index.js +88 -6
- package/dist/cjs/comps/TextArea/types.d.ts +21 -0
- package/dist/cjs/comps/TextArea/types.js +1 -0
- package/dist/cjs/comps/index.d.ts +5 -1
- package/dist/cjs/comps/index.js +3 -0
- package/dist/cjs/comps/svgicons.d.ts +1 -0
- package/dist/cjs/comps/svgicons.js +1 -0
- package/dist/cjs/funs/index.d.ts +5 -0
- package/dist/cjs/funs/index.js +42 -0
- package/dist/cjs/funs/stylesheet.js +4 -1
- package/dist/cjs/hooks/index.d.ts +2 -0
- package/dist/cjs/hooks/index.js +2 -0
- package/dist/cjs/hooks/useCommandActions.d.ts +29 -0
- package/dist/cjs/hooks/useCommandActions.js +104 -0
- package/dist/cjs/hooks/usePosition.d.ts +2 -1
- package/dist/cjs/hooks/usePushNotifications.d.ts +45 -0
- package/dist/cjs/hooks/usePushNotifications.js +166 -0
- package/dist/cjs/hooks/useSlider.d.ts +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/esm/comps/Calendar/index.d.ts +3 -0
- package/dist/esm/comps/Calendar/index.js +109 -0
- package/dist/esm/comps/Calendar/types.d.ts +6 -0
- package/dist/esm/comps/Calendar/types.js +1 -0
- package/dist/esm/comps/Cover/index.d.ts +3 -1
- package/dist/esm/comps/Cover/index.js +3 -3
- package/dist/esm/comps/Crumb/index.d.ts +1 -1
- package/dist/esm/comps/DatePicker/index.d.ts +11 -0
- package/dist/esm/comps/DatePicker/index.js +73 -0
- package/dist/esm/comps/DatePicker/types.d.ts +6 -0
- package/dist/esm/comps/DatePicker/types.js +1 -0
- package/dist/esm/comps/Icon/index.d.ts +2 -0
- package/dist/esm/comps/Icon/index.js +5 -2
- package/dist/esm/comps/List/index.d.ts +1 -1
- package/dist/esm/comps/Password/index.d.ts +1 -1
- package/dist/esm/comps/Search/index.d.ts +4 -0
- package/dist/esm/comps/Search/index.js +7 -3
- package/dist/esm/comps/Search/types.d.ts +5 -0
- package/dist/esm/comps/Select/index.d.ts +2 -0
- package/dist/esm/comps/Select/index.js +5 -2
- package/dist/esm/comps/Select/optionItem.d.ts +2 -1
- package/dist/esm/comps/Select/optionItem.js +3 -2
- package/dist/esm/comps/Select/types.d.ts +5 -1
- package/dist/esm/comps/Spinner/index.d.ts +3 -1
- package/dist/esm/comps/Spinner/index.js +11 -4
- package/dist/esm/comps/Table/index.js +2 -2
- package/dist/esm/comps/Table/row.js +2 -2
- package/dist/esm/comps/Table/types.d.ts +2 -0
- package/dist/esm/comps/TextArea/commands.d.ts +12 -0
- package/dist/esm/comps/TextArea/commands.js +16 -0
- package/dist/esm/comps/TextArea/index.d.ts +13 -6
- package/dist/esm/comps/TextArea/index.js +88 -6
- package/dist/esm/comps/TextArea/types.d.ts +21 -0
- package/dist/esm/comps/TextArea/types.js +1 -0
- package/dist/esm/comps/index.d.ts +5 -1
- package/dist/esm/comps/index.js +3 -0
- package/dist/esm/comps/svgicons.d.ts +1 -0
- package/dist/esm/comps/svgicons.js +1 -0
- package/dist/esm/funs/index.d.ts +5 -0
- package/dist/esm/funs/index.js +42 -0
- package/dist/esm/funs/stylesheet.js +4 -1
- package/dist/esm/hooks/index.d.ts +2 -0
- package/dist/esm/hooks/index.js +2 -0
- package/dist/esm/hooks/useCommandActions.d.ts +29 -0
- package/dist/esm/hooks/useCommandActions.js +104 -0
- package/dist/esm/hooks/usePosition.d.ts +2 -1
- package/dist/esm/hooks/usePushNotifications.d.ts +45 -0
- package/dist/esm/hooks/usePushNotifications.js +166 -0
- package/dist/esm/hooks/useSlider.d.ts +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -2
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from "react";
|
|
2
|
+
import { urlBase64ToUint8Array } from "../funs";
|
|
3
|
+
const usePushNotifications = (options) => {
|
|
4
|
+
const { vapidPublicKey, serviceWorkerPath = '/sw.js', requestPermissionOnMount = false, } = options;
|
|
5
|
+
const [permission, setPermission] = useState('default');
|
|
6
|
+
const [subscription, setSubscription] = useState(null);
|
|
7
|
+
const [subscriptionMeta, setSubscriptionMeta] = useState(null);
|
|
8
|
+
const [error, setError] = useState(null);
|
|
9
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
10
|
+
const [registration, setRegistration] = useState(null);
|
|
11
|
+
const [isSupported, setIsSupported] = useState(false);
|
|
12
|
+
// Register service worker
|
|
13
|
+
const registerServiceWorker = useCallback(async () => {
|
|
14
|
+
if (!isSupported)
|
|
15
|
+
return null;
|
|
16
|
+
try {
|
|
17
|
+
const reg = await navigator.serviceWorker.register(serviceWorkerPath, {
|
|
18
|
+
scope: '/',
|
|
19
|
+
updateViaCache: 'all',
|
|
20
|
+
});
|
|
21
|
+
setRegistration(reg);
|
|
22
|
+
return reg;
|
|
23
|
+
}
|
|
24
|
+
catch (err) {
|
|
25
|
+
console.error('Service Worker registration failed:', err);
|
|
26
|
+
setError('Failed to register service worker');
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
}, [serviceWorkerPath, isSupported]);
|
|
30
|
+
// Get current subscription
|
|
31
|
+
const getCurrentSubscription = useCallback(async (reg) => {
|
|
32
|
+
try {
|
|
33
|
+
const sub = await reg.pushManager.getSubscription();
|
|
34
|
+
setSubscription(sub);
|
|
35
|
+
if (sub) {
|
|
36
|
+
setSubscriptionMeta(sub.toJSON());
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
setSubscriptionMeta(null);
|
|
40
|
+
}
|
|
41
|
+
return sub;
|
|
42
|
+
}
|
|
43
|
+
catch (err) {
|
|
44
|
+
console.error('Failed to get subscription:', err);
|
|
45
|
+
setError('Failed to get subscription');
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
}, []);
|
|
49
|
+
// Subscribe to push
|
|
50
|
+
const subscribe = useCallback(async () => {
|
|
51
|
+
if (!isSupported || !registration) {
|
|
52
|
+
setError('Push not supported or service worker not registered');
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
setIsLoading(true);
|
|
56
|
+
setError(null);
|
|
57
|
+
try {
|
|
58
|
+
const permissionResult = await Notification.requestPermission();
|
|
59
|
+
setPermission(permissionResult);
|
|
60
|
+
if (permissionResult !== 'granted') {
|
|
61
|
+
setError('Permission not granted for notifications');
|
|
62
|
+
setIsLoading(false);
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
65
|
+
const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);
|
|
66
|
+
const pushSubscription = await registration.pushManager.subscribe({
|
|
67
|
+
userVisibleOnly: true,
|
|
68
|
+
applicationServerKey,
|
|
69
|
+
});
|
|
70
|
+
setSubscription(pushSubscription);
|
|
71
|
+
setSubscriptionMeta(pushSubscription.toJSON());
|
|
72
|
+
setIsLoading(false);
|
|
73
|
+
return pushSubscription;
|
|
74
|
+
}
|
|
75
|
+
catch (err) {
|
|
76
|
+
console.error('Subscription failed:', err);
|
|
77
|
+
setError(err.message || 'Failed to subscribe');
|
|
78
|
+
setIsLoading(false);
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
}, [isSupported, registration, vapidPublicKey]);
|
|
82
|
+
// Unsubscribe
|
|
83
|
+
const unsubscribe = useCallback(async () => {
|
|
84
|
+
if (!subscription)
|
|
85
|
+
return true;
|
|
86
|
+
try {
|
|
87
|
+
const result = await subscription.unsubscribe();
|
|
88
|
+
if (result) {
|
|
89
|
+
setSubscription(null);
|
|
90
|
+
setSubscriptionMeta(null);
|
|
91
|
+
}
|
|
92
|
+
return result;
|
|
93
|
+
}
|
|
94
|
+
catch (err) {
|
|
95
|
+
console.error('Failed to unsubscribe:', err);
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
}, [subscription]);
|
|
99
|
+
// Request permission only
|
|
100
|
+
const requestPermission = useCallback(async () => {
|
|
101
|
+
const result = await Notification.requestPermission();
|
|
102
|
+
setPermission(result);
|
|
103
|
+
return result;
|
|
104
|
+
}, []);
|
|
105
|
+
// Initialize
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
const _isSupported = 'PushManager' in window && 'serviceWorker' in navigator;
|
|
108
|
+
setIsSupported(_isSupported);
|
|
109
|
+
if (!_isSupported) {
|
|
110
|
+
setError('Push notifications not supported in this browser');
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
let isMounted = true;
|
|
114
|
+
const init = async () => {
|
|
115
|
+
const reg = await registerServiceWorker();
|
|
116
|
+
if (!reg || !isMounted)
|
|
117
|
+
return;
|
|
118
|
+
setPermission(Notification.permission);
|
|
119
|
+
await getCurrentSubscription(reg);
|
|
120
|
+
if (requestPermissionOnMount && Notification.permission === 'default') {
|
|
121
|
+
await requestPermission();
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
init();
|
|
125
|
+
return () => {
|
|
126
|
+
isMounted = false;
|
|
127
|
+
};
|
|
128
|
+
}, [
|
|
129
|
+
isSupported,
|
|
130
|
+
registerServiceWorker,
|
|
131
|
+
getCurrentSubscription,
|
|
132
|
+
requestPermissionOnMount,
|
|
133
|
+
requestPermission,
|
|
134
|
+
]);
|
|
135
|
+
// Listen for permission changes
|
|
136
|
+
useEffect(() => {
|
|
137
|
+
if (!('permissions' in navigator))
|
|
138
|
+
return;
|
|
139
|
+
let revoked = false;
|
|
140
|
+
const checkPermission = async () => {
|
|
141
|
+
if (revoked)
|
|
142
|
+
return;
|
|
143
|
+
const perm = await navigator.permissions.query({ name: 'notifications' });
|
|
144
|
+
perm.onchange = () => {
|
|
145
|
+
setPermission(Notification.permission);
|
|
146
|
+
if (Notification.permission === 'denied') {
|
|
147
|
+
revoked = true;
|
|
148
|
+
unsubscribe();
|
|
149
|
+
}
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
checkPermission();
|
|
153
|
+
}, [unsubscribe]);
|
|
154
|
+
return {
|
|
155
|
+
permission,
|
|
156
|
+
subscription,
|
|
157
|
+
subscriptionMeta,
|
|
158
|
+
isSupported,
|
|
159
|
+
subscribe,
|
|
160
|
+
unsubscribe,
|
|
161
|
+
requestPermission,
|
|
162
|
+
error,
|
|
163
|
+
isLoading,
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
export default usePushNotifications;
|