@area2-ai/a2-demo-cipher-react 0.1.2 → 0.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.
- package/dist/index.cjs +79 -100
- package/dist/index.d.cts +1 -1
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +81 -102
- package/package.json +1 -2
package/dist/index.cjs
CHANGED
|
@@ -2,61 +2,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var react = require('react');
|
|
5
|
-
var a2CipherCore = require('@area2-ai/a2-cipher-core');
|
|
6
5
|
var reactDeviceDetect = require('react-device-detect');
|
|
7
6
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const AREA2_INITIAL_STATE = {};
|
|
11
|
-
const Area2Provider = ({ children })=>{
|
|
12
|
-
const [state] = react.useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
|
|
13
|
-
const keystrokeManagerRef = react.useRef();
|
|
14
|
-
const androidKeystrokeManagerRef = react.useRef();
|
|
15
|
-
const iosKeystrokeManagerRef = react.useRef();
|
|
16
|
-
const getKeystrokeManager = ()=>keystrokeManagerRef.current;
|
|
17
|
-
const getAndroidKeystrokeManager = ()=>androidKeystrokeManagerRef.current;
|
|
18
|
-
const getIosKeystrokeManager = ()=>iosKeystrokeManagerRef.current;
|
|
19
|
-
react.useEffect(()=>{
|
|
20
|
-
keystrokeManagerRef.current = new a2CipherCore.KeystrokeManager();
|
|
21
|
-
androidKeystrokeManagerRef.current = new a2CipherCore.AndroidKeystrokeManager();
|
|
22
|
-
iosKeystrokeManagerRef.current = new a2CipherCore.IosKeystrokeManager();
|
|
23
|
-
}, []);
|
|
24
|
-
return /*#__PURE__*/ jsxRuntime.jsx(Area2Context.Provider, {
|
|
25
|
-
value: {
|
|
26
|
-
...state,
|
|
27
|
-
getKeystrokeManager,
|
|
28
|
-
getAndroidKeystrokeManager,
|
|
29
|
-
getIosKeystrokeManager
|
|
30
|
-
},
|
|
31
|
-
children: children
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const area2Reducer = (state, action)=>{
|
|
36
|
-
switch(action.type){
|
|
37
|
-
case '[A2 Desktop] - Update text':
|
|
38
|
-
return {
|
|
39
|
-
...state,
|
|
40
|
-
desktopTextValue: action.payload.newValue
|
|
41
|
-
};
|
|
42
|
-
default:
|
|
43
|
-
return state;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const getBrowserInfo = ()=>reactDeviceDetect.browserName;
|
|
48
|
-
|
|
49
|
-
const getOsInfo = ()=>reactDeviceDetect.osName;
|
|
50
|
-
|
|
51
|
-
const getPlatform = ()=>{
|
|
52
|
-
if (reactDeviceDetect.isAndroid) return 'android';
|
|
53
|
-
if (reactDeviceDetect.isDesktop) return 'desktop';
|
|
54
|
-
return 'ios';
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
7
|
+
const formatDemoKeystrokeData = (isMobile)=>{
|
|
58
8
|
const base = {
|
|
59
|
-
session_id:
|
|
9
|
+
session_id: '4ed161b5-[* * *]',
|
|
60
10
|
temporal_kinematics: [
|
|
61
11
|
'* * *'
|
|
62
12
|
],
|
|
@@ -88,37 +38,34 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
88
38
|
/**
|
|
89
39
|
* Keystroke hook for android mobile browser
|
|
90
40
|
*/ const useMobileKeystrokeAndroid = ()=>{
|
|
91
|
-
const { getAndroidKeystrokeManager } =
|
|
41
|
+
// const { getAndroidKeystrokeManager } = useContext(Area2Context);
|
|
92
42
|
/**
|
|
93
43
|
* Handles the before input event.
|
|
94
44
|
* @param {string} newValue - The new value of the input before the input event.
|
|
95
45
|
* @param {string} inputValue - The current value of the input.
|
|
96
46
|
*/ const handleProcessOnBeforeInput = react.useCallback((newValue, inputValue)=>{
|
|
97
|
-
getAndroidKeystrokeManager().processBeforeInput(newValue, inputValue);
|
|
98
47
|
}, []);
|
|
99
48
|
/**
|
|
100
49
|
* Handles the paste event.
|
|
101
50
|
* @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
|
|
102
51
|
*/ const handleProcessPaste = react.useCallback((event)=>{
|
|
103
|
-
|
|
104
|
-
|
|
52
|
+
event.clipboardData.getData("text");
|
|
53
|
+
// getAndroidKeystrokeManager().processPaste(pastedText);
|
|
105
54
|
}, []);
|
|
106
55
|
/**
|
|
107
56
|
* Handles the key input event.
|
|
108
57
|
* @param {string} inputContent - The content of the key input.
|
|
109
58
|
*/ const handleProcessKeyInput = react.useCallback((inputContent)=>{
|
|
110
|
-
getAndroidKeystrokeManager().processKeyInput(inputContent);
|
|
111
59
|
}, []);
|
|
112
60
|
/**
|
|
113
61
|
* Handles the keydown event.
|
|
114
62
|
* @param {HTMLInputElement} target - The target input element.
|
|
115
63
|
*/ const handleProcessKeydown = react.useCallback((target)=>{
|
|
116
|
-
getAndroidKeystrokeManager().processKeydown(target);
|
|
117
64
|
}, []);
|
|
118
65
|
/**
|
|
119
66
|
* Handles the keyup event.
|
|
120
67
|
*/ const handleProcessKeyup = react.useCallback(()=>{
|
|
121
|
-
|
|
68
|
+
// getAndroidKeystrokeManager().processKeyup();
|
|
122
69
|
}, []);
|
|
123
70
|
/**
|
|
124
71
|
* Ends the typing session and returns the typing data.
|
|
@@ -137,14 +84,14 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
137
84
|
* Ends the demo typing session and returns the typing data.
|
|
138
85
|
* @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
|
|
139
86
|
*/ const handleEndDemoTypingSession = react.useCallback(()=>{
|
|
140
|
-
const typingData = getAndroidKeystrokeManager().endTypingSession();
|
|
141
|
-
getAndroidKeystrokeManager().resetTypingData();
|
|
142
|
-
if (!typingData.startUnixTime) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
146
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
147
|
-
return formatDemoKeystrokeData(
|
|
87
|
+
// const typingData = getAndroidKeystrokeManager().endTypingSession();
|
|
88
|
+
// getAndroidKeystrokeManager().resetTypingData();
|
|
89
|
+
// if (!typingData.startUnixTime) {
|
|
90
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
91
|
+
// return;
|
|
92
|
+
// }
|
|
93
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
94
|
+
return formatDemoKeystrokeData(true);
|
|
148
95
|
}, []);
|
|
149
96
|
return {
|
|
150
97
|
handleProcessOnBeforeInput,
|
|
@@ -159,19 +106,17 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
159
106
|
/**
|
|
160
107
|
* Keystroke hook for desktop platforms.
|
|
161
108
|
*/ const useDesktopKeystroke = ()=>{
|
|
162
|
-
const { getKeystrokeManager } =
|
|
163
|
-
const getIsTypingSessionActive = ()=>getKeystrokeManager().getIsTypingSessionActive;
|
|
109
|
+
// const { getKeystrokeManager } = useContext(Area2Context);
|
|
110
|
+
// const getIsTypingSessionActive = () => getKeystrokeManager().getIsTypingSessionActive;
|
|
164
111
|
/**
|
|
165
112
|
* Handles the keydown event.
|
|
166
113
|
* @param {string} key - The key pressed.
|
|
167
114
|
*/ const handleProcessKeydown = react.useCallback((key)=>{
|
|
168
|
-
getKeystrokeManager().processKeydown(key);
|
|
169
115
|
}, []);
|
|
170
116
|
/**
|
|
171
117
|
* Handles the keyup event.
|
|
172
118
|
* @param {string} key - The key released.
|
|
173
119
|
*/ const handleProcessKeyup = react.useCallback((key)=>{
|
|
174
|
-
getKeystrokeManager().processKeyup(key);
|
|
175
120
|
}, []);
|
|
176
121
|
/**
|
|
177
122
|
* Ends the typing session and returns the typing data.
|
|
@@ -190,19 +135,19 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
190
135
|
* Ends the demo typing session and returns the typing data.
|
|
191
136
|
* @returns {A2DemoCapturePayload | undefined} - The typing session data or undefined if no data.
|
|
192
137
|
*/ const handleEndDemoTypingSession = react.useCallback(()=>{
|
|
193
|
-
const typingData = getKeystrokeManager().endTypingSession();
|
|
194
|
-
getKeystrokeManager().resetTypingData();
|
|
195
|
-
if (!typingData.startUnixTime) {
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}
|
|
199
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
200
|
-
return formatDemoKeystrokeData(
|
|
138
|
+
// const typingData = getKeystrokeManager().endTypingSession();
|
|
139
|
+
// getKeystrokeManager().resetTypingData();
|
|
140
|
+
// if (!typingData.startUnixTime) {
|
|
141
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
142
|
+
// return;
|
|
143
|
+
// }
|
|
144
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
145
|
+
return formatDemoKeystrokeData(false);
|
|
201
146
|
}, []);
|
|
202
147
|
return {
|
|
203
148
|
handleProcessKeydown,
|
|
204
149
|
handleProcessKeyup,
|
|
205
|
-
getIsTypingSessionActive,
|
|
150
|
+
getIsTypingSessionActive: ()=>false,
|
|
206
151
|
handleEndTypingSession: handleEndDemoTypingSession
|
|
207
152
|
};
|
|
208
153
|
};
|
|
@@ -211,7 +156,7 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
211
156
|
* Keystroke for ios mobile browser
|
|
212
157
|
* @param {string} inputValue - The current value of the text input - Needed to detect auto-correct changes.
|
|
213
158
|
*/ const useMobileKeystrokeIOS = ()=>{
|
|
214
|
-
const { getIosKeystrokeManager } =
|
|
159
|
+
// const { getIosKeystrokeManager } = useContext(Area2Context);
|
|
215
160
|
//! Undefined behavior - Try to load via context - provider
|
|
216
161
|
/**
|
|
217
162
|
* Processes auto-correction based on the current input value.
|
|
@@ -221,22 +166,18 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
221
166
|
* Handles the before input event.
|
|
222
167
|
* @param {number} value - The length of the content before the input event.
|
|
223
168
|
*/ const handleProcessOnBeforeInput = react.useCallback((value)=>{
|
|
224
|
-
getIosKeystrokeManager().setPrevContentLength = value;
|
|
225
169
|
}, []);
|
|
226
170
|
/**
|
|
227
171
|
* Handles the paste event.
|
|
228
172
|
* @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
|
|
229
173
|
*/ const handleProcessPaste = react.useCallback((event)=>{
|
|
230
|
-
|
|
231
|
-
getIosKeystrokeManager().processPaste(pastedText);
|
|
174
|
+
event.clipboardData.getData("text");
|
|
232
175
|
}, []);
|
|
233
176
|
/**
|
|
234
177
|
* Checks for text prediction and processes it.
|
|
235
178
|
* @param {string} newValue - The new value of the text input.
|
|
236
179
|
* @param {string} inputValue - The current value of the text input.
|
|
237
180
|
*/ const checkForPrediction = react.useCallback((newValue, inputValue)=>{
|
|
238
|
-
const textSnapshot = inputValue; // Before it changes
|
|
239
|
-
getIosKeystrokeManager().processPrediction(newValue, textSnapshot);
|
|
240
181
|
}, []);
|
|
241
182
|
/**
|
|
242
183
|
* Handles the input change event
|
|
@@ -251,13 +192,11 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
251
192
|
* @param {string} keyPressed - The key that was pressed.
|
|
252
193
|
* @param {HTMLInputElement} target - The target input element.
|
|
253
194
|
*/ const handleProcessKeydown = react.useCallback((keyPressed, target)=>{
|
|
254
|
-
getIosKeystrokeManager().processKeydown(keyPressed, target);
|
|
255
195
|
}, []);
|
|
256
196
|
/**
|
|
257
197
|
* Handles the keyup event.
|
|
258
198
|
* @param {string} key - The key that was released.
|
|
259
199
|
*/ const handleProcessKeyup = react.useCallback((keyPressed)=>{
|
|
260
|
-
getIosKeystrokeManager().processKeyup(keyPressed);
|
|
261
200
|
}, []);
|
|
262
201
|
/**
|
|
263
202
|
* Ends the typing session and returns the typing data.
|
|
@@ -276,14 +215,14 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
276
215
|
* Ends the demo typing session and returns the typing data.
|
|
277
216
|
* @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
|
|
278
217
|
*/ const handleEndDemoTypingSession = react.useCallback(()=>{
|
|
279
|
-
const typingData = getIosKeystrokeManager().endTypingSession();
|
|
280
|
-
getIosKeystrokeManager().resetTypingData();
|
|
281
|
-
if (!typingData.startUnixTime) {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
}
|
|
285
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
286
|
-
return formatDemoKeystrokeData(
|
|
218
|
+
// const typingData = getIosKeystrokeManager().endTypingSession();
|
|
219
|
+
// getIosKeystrokeManager().resetTypingData();
|
|
220
|
+
// if (!typingData.startUnixTime) {
|
|
221
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
222
|
+
// return;
|
|
223
|
+
// }
|
|
224
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
225
|
+
return formatDemoKeystrokeData(true);
|
|
287
226
|
}, []);
|
|
288
227
|
return {
|
|
289
228
|
// processAutoCorrection,
|
|
@@ -296,6 +235,12 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
296
235
|
};
|
|
297
236
|
};
|
|
298
237
|
|
|
238
|
+
const getPlatform = ()=>{
|
|
239
|
+
if (reactDeviceDetect.isAndroid) return 'android';
|
|
240
|
+
if (reactDeviceDetect.isDesktop) return 'desktop';
|
|
241
|
+
return 'ios';
|
|
242
|
+
};
|
|
243
|
+
|
|
299
244
|
function useKeystrokeBuilder(target) {
|
|
300
245
|
const targetPlatform = target ?? getPlatform();
|
|
301
246
|
switch(targetPlatform){
|
|
@@ -366,7 +311,7 @@ function useKeystrokeBuilder(target) {
|
|
|
366
311
|
* @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
|
|
367
312
|
* @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press.
|
|
368
313
|
*/ const A2DesktopTextInput = ({ ref, onChange, handleEndSessionOnEnter, ...rest })=>{
|
|
369
|
-
const { handleProcessKeydown, handleProcessKeyup
|
|
314
|
+
const { handleProcessKeydown, handleProcessKeyup } = useDesktopKeystroke();
|
|
370
315
|
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
371
316
|
children: /*#__PURE__*/ jsxRuntime.jsx("input", {
|
|
372
317
|
ref: ref,
|
|
@@ -379,9 +324,7 @@ function useKeystrokeBuilder(target) {
|
|
|
379
324
|
if (key !== 'Enter') {
|
|
380
325
|
return;
|
|
381
326
|
}
|
|
382
|
-
if (!getIsTypingSessionActive()) {
|
|
383
|
-
return;
|
|
384
|
-
}
|
|
327
|
+
// if (!getIsTypingSessionActive()) { return }
|
|
385
328
|
handleEndSessionOnEnter?.(); //? Call parent's function if it exists
|
|
386
329
|
},
|
|
387
330
|
onChange: (event)=>{
|
|
@@ -419,6 +362,42 @@ function useKeystrokeBuilder(target) {
|
|
|
419
362
|
});
|
|
420
363
|
};
|
|
421
364
|
|
|
365
|
+
const Area2Context = /*#__PURE__*/ react.createContext({});
|
|
366
|
+
|
|
367
|
+
const AREA2_INITIAL_STATE = {};
|
|
368
|
+
const Area2Provider = ({ children })=>{
|
|
369
|
+
const [state] = react.useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
|
|
370
|
+
// const keystrokeManagerRef = useRef<KeystrokeManager>();
|
|
371
|
+
// const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();
|
|
372
|
+
// const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();
|
|
373
|
+
// const getKeystrokeManager = () => keystrokeManagerRef.current!;
|
|
374
|
+
// const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;
|
|
375
|
+
// const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;
|
|
376
|
+
// useEffect(() => {
|
|
377
|
+
// keystrokeManagerRef.current = new KeystrokeManager();
|
|
378
|
+
// androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();
|
|
379
|
+
// iosKeystrokeManagerRef.current = new IosKeystrokeManager();
|
|
380
|
+
// }, []);
|
|
381
|
+
return /*#__PURE__*/ jsxRuntime.jsx(Area2Context.Provider, {
|
|
382
|
+
value: {
|
|
383
|
+
...state
|
|
384
|
+
},
|
|
385
|
+
children: children
|
|
386
|
+
});
|
|
387
|
+
};
|
|
388
|
+
|
|
389
|
+
const area2Reducer = (state, action)=>{
|
|
390
|
+
switch(action.type){
|
|
391
|
+
case '[A2 Desktop] - Update text':
|
|
392
|
+
return {
|
|
393
|
+
...state,
|
|
394
|
+
desktopTextValue: action.payload.newValue
|
|
395
|
+
};
|
|
396
|
+
default:
|
|
397
|
+
return state;
|
|
398
|
+
}
|
|
399
|
+
};
|
|
400
|
+
|
|
422
401
|
exports.A2Textbox = A2Textbox;
|
|
423
402
|
exports.Area2Provider = Area2Provider;
|
|
424
403
|
exports.useCipherCapture = useKeystrokeBuilder;
|
package/dist/index.d.cts
CHANGED
|
@@ -70,5 +70,5 @@ declare function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTe
|
|
|
70
70
|
declare function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
|
|
71
71
|
|
|
72
72
|
export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };
|
|
73
|
-
export type { A2DemoCapturePayload, TargetPlatform };
|
|
73
|
+
export type { A2DemoCapturePayload as A2CapturePayload, TargetPlatform };
|
|
74
74
|
//# sourceMappingURL=index.d.cts.map
|
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n getIsTypingSessionActive: () => boolean;\n handleProcessKeydown: (key: string) => void;\n handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessKeydown: (target: HTMLInputElement) => void;\n handleProcessKeyInput: (inputContent: string) => void;\n handleProcessKeyup: () => void;\n handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n handleProcessKeyup: (keyPressed: string) => void;\n handleProcessOnBeforeInput: (value: number) => void;\n //! processAutoCorrection: (textInputValue: string) => void;\n}","import {\n
|
|
1
|
+
{"version":3,"file":"index.d.cts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n getIsTypingSessionActive: () => boolean;\n handleProcessKeydown: (key: string) => void;\n handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessKeydown: (target: HTMLInputElement) => void;\n handleProcessKeyInput: (inputContent: string) => void;\n handleProcessKeyup: () => void;\n handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n handleProcessKeyup: (keyPressed: string) => void;\n handleProcessOnBeforeInput: (value: number) => void;\n //! processAutoCorrection: (textInputValue: string) => void;\n}","// import {\n// IMobileKeystrokeCollection,\n// IKeystrokeCollection,\n// IBaseKeystrokeCollection\n// } from \"@area2-ai/a2-cipher-core\";\n\n// export interface A2CapturePayload\n// extends IBaseKeystrokeCollection,\n// Partial<Omit<IKeystrokeCollection, keyof IBaseKeystrokeCollection>>,\n// Partial<Omit<IMobileKeystrokeCollection, keyof IBaseKeystrokeCollection>> { }\n\nexport interface A2DemoCapturePayload {\n \"session_id\": string,\n \"temporal_kinematics\": string[],\n \"spatial_kinematics\": string[],\n \"type_kinematics\": string[],\n context?: {\n \"time\": string,\n \"weekday\": string,\n \"season\": string,\n \"timezone\": string\n },\n extra_metadata?: {\n \"OS\": string,\n \"browser\": string\n },\n device_context?: string,\n assist_signals?: string\n}","import React from 'react';\nimport { getPlatform } from '../utils';\n\nimport { A2AndroidTextInput } from './A2AndroidTextInput';\nimport { A2IosTextInput } from './A2IosTextInput';\nimport { A2DesktopTextInput } from './A2DesktopTextInput';\n\nimport type { TargetPlatform } from '../interfaces';\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.Ref<HTMLInputElement>;\n target?: TargetPlatform;\n handleEndSessionOnEnter?: Function;\n}\n\n/**\n * Component that renders a text input field and generates an A2CapturePayload data.\n * \n * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.\n * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.\n * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).\n */\nexport const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest }: Props) => {\n const targetPlatform = target ?? getPlatform();\n\n if (targetPlatform === 'android') {\n return (\n <A2AndroidTextInput {...rest} ref={ref} />\n )\n }\n\n if (targetPlatform === 'ios') {\n return (\n <A2IosTextInput {...rest} ref={ref} />\n )\n }\n\n return (\n <A2DesktopTextInput {...rest} ref={ref} handleEndSessionOnEnter={handleEndSessionOnEnter} />\n )\n}\n","import React, { useReducer } from 'react';\n// import {\n// KeystrokeManager,\n// AndroidKeystrokeManager,\n// IosKeystrokeManager\n// } from '@area2-ai/a2-cipher-core';\n\nimport { Area2Context, area2Reducer } from '.';\n\nexport interface Area2State { }\n\ninterface Props {\n children: React.ReactNode;\n}\n\nconst AREA2_INITIAL_STATE: Area2State = {}\n\nexport const Area2Provider = ({ children }: Props) => {\n\n const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]\n\n // const keystrokeManagerRef = useRef<KeystrokeManager>();\n // const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();\n // const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();\n\n // const getKeystrokeManager = () => keystrokeManagerRef.current!;\n // const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;\n // const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;\n\n // useEffect(() => {\n // keystrokeManagerRef.current = new KeystrokeManager();\n // androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();\n // iosKeystrokeManagerRef.current = new IosKeystrokeManager();\n // }, []);\n\n return (\n <Area2Context.Provider value={{\n ...state,\n // getKeystrokeManager,\n // getAndroidKeystrokeManager,\n // getIosKeystrokeManager\n }}>\n {children}\n </Area2Context.Provider>\n )\n}","import { getPlatform } from \"../utils\";\nimport type {\n TargetPlatform,\n IiOSKeystrokeHookTemplate,\n IAndroidKeystrokeHookTemplate,\n IDesktopKeystrokeHookTemplate,\n A2DemoCapturePayload\n} from \"../interfaces\";\n\nimport { useMobileKeystrokeAndroid } from \"./useKeystroke.android\";\nimport { useDesktopKeystroke } from \"./useKeystroke.desktop\";\nimport { useMobileKeystrokeIOS } from \"./useKeystroke.ios\";\n\nexport function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform) {\n\n const targetPlatform = target ?? getPlatform();\n\n switch (targetPlatform) {\n case 'android':\n return useMobileKeystrokeAndroid();\n case 'ios':\n return useMobileKeystrokeIOS();\n case 'desktop':\n default:\n return useDesktopKeystroke();\n }\n\n}"],"names":["Props"],"mappings":";;;AACO,KAAA,cAAA;AACA,UAAA,sBAAA;AACP;AACA;AACO,UAAA,4BAAA,YAAA,sBAAA;AACP,gCAAA,cAAA,CAAA,gBAAA;AACA;AACO,UAAA,6BAAA,YAAA,sBAAA;AACP;AACA;AACA;AACA;AACO,UAAA,6BAAA,YAAA,4BAAA;AACP,mCAAA,gBAAA;AACA;AACA;AACA;AACA;AACO,UAAA,yBAAA,YAAA,4BAAA;AACP,sCAAA,WAAA,CAAA,gBAAA;AACA,uDAAA,gBAAA;AACA;AACA;AACA;;ACxBO,UAAA,oBAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACfA,UAAAA,OAAA,SAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;AACA,UAAA,KAAA,CAAA,GAAA,CAAA,gBAAA;AACA,aAAA,cAAA;AACA,8BAAA,QAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,cAAA,SAAA,sDAAAA,OAAA,KAAuF,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACXzH,UAAA,KAAA;AACA,cAAA,KAAA,CAAA,SAAA;AACA;AACO,cAAA,aAAA,iBAAA,KAAA,KAAsD,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACLjF,iBAAA,mBAAA,iBAAA,yBAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,UAAA,cAAA,GAAA,yBAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -70,5 +70,5 @@ declare function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTe
|
|
|
70
70
|
declare function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;
|
|
71
71
|
|
|
72
72
|
export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };
|
|
73
|
-
export type { A2DemoCapturePayload, TargetPlatform };
|
|
73
|
+
export type { A2DemoCapturePayload as A2CapturePayload, TargetPlatform };
|
|
74
74
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n getIsTypingSessionActive: () => boolean;\n handleProcessKeydown: (key: string) => void;\n handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessKeydown: (target: HTMLInputElement) => void;\n handleProcessKeyInput: (inputContent: string) => void;\n handleProcessKeyup: () => void;\n handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n handleProcessKeyup: (keyPressed: string) => void;\n handleProcessOnBeforeInput: (value: number) => void;\n //! processAutoCorrection: (textInputValue: string) => void;\n}","import {\n
|
|
1
|
+
{"version":3,"file":"index.d.ts","sources":["../src/interfaces/IKeystrokeHookTemplate.ts","../src/interfaces/IA2CapturePayload.ts","../src/components/A2Textbox.tsx","../src/context/area2/Area2Provider.tsx","../src/hooks/useKeystrokeBuilder.ts"],"sourcesContent":["import { ChangeEvent, ClipboardEvent } from \"react\";\n\nexport type TargetPlatform = 'desktop' | 'ios' | 'android';\n\n//* Common interface for keystroke hook templates\nexport interface IKeystrokeHookTemplate<T> {\n handleEndTypingSession: () => T | undefined;\n}\n\n//* Common interface for mobile keystroke hook template\nexport interface IMobileKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n handleProcessPaste: (event: ClipboardEvent<HTMLInputElement>) => void;\n}\n\n//? Interface for desktop keystroke hook\nexport interface IDesktopKeystrokeHookTemplate<T> extends IKeystrokeHookTemplate<T> {\n getIsTypingSessionActive: () => boolean;\n handleProcessKeydown: (key: string) => void;\n handleProcessKeyup: (key: string) => void;\n}\n\n//? Interface for android keystroke hook\nexport interface IAndroidKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessKeydown: (target: HTMLInputElement) => void;\n handleProcessKeyInput: (inputContent: string) => void;\n handleProcessKeyup: () => void;\n handleProcessOnBeforeInput: (newValue: string, inputValue: string) => void;\n}\n\n//? Interface for iOS keystroke hook\nexport interface IiOSKeystrokeHookTemplate<T> extends IMobileKeystrokeHookTemplate<T> {\n handleProcessInputChange: (event: ChangeEvent<HTMLInputElement>, inputValue: string) => void;\n handleProcessKeydown: (keyPressed: string, target: HTMLInputElement) => void;\n handleProcessKeyup: (keyPressed: string) => void;\n handleProcessOnBeforeInput: (value: number) => void;\n //! processAutoCorrection: (textInputValue: string) => void;\n}","// import {\n// IMobileKeystrokeCollection,\n// IKeystrokeCollection,\n// IBaseKeystrokeCollection\n// } from \"@area2-ai/a2-cipher-core\";\n\n// export interface A2CapturePayload\n// extends IBaseKeystrokeCollection,\n// Partial<Omit<IKeystrokeCollection, keyof IBaseKeystrokeCollection>>,\n// Partial<Omit<IMobileKeystrokeCollection, keyof IBaseKeystrokeCollection>> { }\n\nexport interface A2DemoCapturePayload {\n \"session_id\": string,\n \"temporal_kinematics\": string[],\n \"spatial_kinematics\": string[],\n \"type_kinematics\": string[],\n context?: {\n \"time\": string,\n \"weekday\": string,\n \"season\": string,\n \"timezone\": string\n },\n extra_metadata?: {\n \"OS\": string,\n \"browser\": string\n },\n device_context?: string,\n assist_signals?: string\n}","import React from 'react';\nimport { getPlatform } from '../utils';\n\nimport { A2AndroidTextInput } from './A2AndroidTextInput';\nimport { A2IosTextInput } from './A2IosTextInput';\nimport { A2DesktopTextInput } from './A2DesktopTextInput';\n\nimport type { TargetPlatform } from '../interfaces';\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n ref?: React.Ref<HTMLInputElement>;\n target?: TargetPlatform;\n handleEndSessionOnEnter?: Function;\n}\n\n/**\n * Component that renders a text input field and generates an A2CapturePayload data.\n * \n * @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.\n * @param {TargetPlatform} [target] - Optional target platform ('ios', 'android', 'desktop'). If not provided, it will be auto-detected.\n * @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press (only for desktop).\n */\nexport const A2Textbox = ({ ref, target, handleEndSessionOnEnter, ...rest }: Props) => {\n const targetPlatform = target ?? getPlatform();\n\n if (targetPlatform === 'android') {\n return (\n <A2AndroidTextInput {...rest} ref={ref} />\n )\n }\n\n if (targetPlatform === 'ios') {\n return (\n <A2IosTextInput {...rest} ref={ref} />\n )\n }\n\n return (\n <A2DesktopTextInput {...rest} ref={ref} handleEndSessionOnEnter={handleEndSessionOnEnter} />\n )\n}\n","import React, { useReducer } from 'react';\n// import {\n// KeystrokeManager,\n// AndroidKeystrokeManager,\n// IosKeystrokeManager\n// } from '@area2-ai/a2-cipher-core';\n\nimport { Area2Context, area2Reducer } from '.';\n\nexport interface Area2State { }\n\ninterface Props {\n children: React.ReactNode;\n}\n\nconst AREA2_INITIAL_STATE: Area2State = {}\n\nexport const Area2Provider = ({ children }: Props) => {\n\n const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]\n\n // const keystrokeManagerRef = useRef<KeystrokeManager>();\n // const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();\n // const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();\n\n // const getKeystrokeManager = () => keystrokeManagerRef.current!;\n // const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;\n // const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;\n\n // useEffect(() => {\n // keystrokeManagerRef.current = new KeystrokeManager();\n // androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();\n // iosKeystrokeManagerRef.current = new IosKeystrokeManager();\n // }, []);\n\n return (\n <Area2Context.Provider value={{\n ...state,\n // getKeystrokeManager,\n // getAndroidKeystrokeManager,\n // getIosKeystrokeManager\n }}>\n {children}\n </Area2Context.Provider>\n )\n}","import { getPlatform } from \"../utils\";\nimport type {\n TargetPlatform,\n IiOSKeystrokeHookTemplate,\n IAndroidKeystrokeHookTemplate,\n IDesktopKeystrokeHookTemplate,\n A2DemoCapturePayload\n} from \"../interfaces\";\n\nimport { useMobileKeystrokeAndroid } from \"./useKeystroke.android\";\nimport { useDesktopKeystroke } from \"./useKeystroke.desktop\";\nimport { useMobileKeystrokeIOS } from \"./useKeystroke.ios\";\n\nexport function useKeystrokeBuilder(target: 'ios'): IiOSKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'android'): IAndroidKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target: 'desktop'): IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform): IiOSKeystrokeHookTemplate<A2DemoCapturePayload> | IAndroidKeystrokeHookTemplate<A2DemoCapturePayload> | IDesktopKeystrokeHookTemplate<A2DemoCapturePayload>;\nexport function useKeystrokeBuilder(target?: TargetPlatform) {\n\n const targetPlatform = target ?? getPlatform();\n\n switch (targetPlatform) {\n case 'android':\n return useMobileKeystrokeAndroid();\n case 'ios':\n return useMobileKeystrokeIOS();\n case 'desktop':\n default:\n return useDesktopKeystroke();\n }\n\n}"],"names":["Props"],"mappings":";;;AACO,KAAA,cAAA;AACA,UAAA,sBAAA;AACP;AACA;AACO,UAAA,4BAAA,YAAA,sBAAA;AACP,gCAAA,cAAA,CAAA,gBAAA;AACA;AACO,UAAA,6BAAA,YAAA,sBAAA;AACP;AACA;AACA;AACA;AACO,UAAA,6BAAA,YAAA,4BAAA;AACP,mCAAA,gBAAA;AACA;AACA;AACA;AACA;AACO,UAAA,yBAAA,YAAA,4BAAA;AACP,sCAAA,WAAA,CAAA,gBAAA;AACA,uDAAA,gBAAA;AACA;AACA;AACA;;ACxBO,UAAA,oBAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACfA,UAAAA,OAAA,SAAA,KAAA,CAAA,mBAAA,CAAA,gBAAA;AACA,UAAA,KAAA,CAAA,GAAA,CAAA,gBAAA;AACA,aAAA,cAAA;AACA,8BAAA,QAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,cAAA,SAAA,sDAAAA,OAAA,KAAuF,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACXzH,UAAA,KAAA;AACA,cAAA,KAAA,CAAA,SAAA;AACA;AACO,cAAA,aAAA,iBAAA,KAAA,KAAsD,iBAA2B,CAAA,GAAA,CAAA,OAAA;;ACLjF,iBAAA,mBAAA,iBAAA,yBAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,qBAAA,6BAAA,CAAA,oBAAA;AACA,iBAAA,mBAAA,UAAA,cAAA,GAAA,yBAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA,IAAA,6BAAA,CAAA,oBAAA;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -1,60 +1,10 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, useReducer
|
|
3
|
-
import {
|
|
4
|
-
import { browserName, osName, isAndroid, isDesktop } from 'react-device-detect';
|
|
2
|
+
import { useCallback, createContext, useReducer } from 'react';
|
|
3
|
+
import { isAndroid, isDesktop } from 'react-device-detect';
|
|
5
4
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
const AREA2_INITIAL_STATE = {};
|
|
9
|
-
const Area2Provider = ({ children })=>{
|
|
10
|
-
const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
|
|
11
|
-
const keystrokeManagerRef = useRef();
|
|
12
|
-
const androidKeystrokeManagerRef = useRef();
|
|
13
|
-
const iosKeystrokeManagerRef = useRef();
|
|
14
|
-
const getKeystrokeManager = ()=>keystrokeManagerRef.current;
|
|
15
|
-
const getAndroidKeystrokeManager = ()=>androidKeystrokeManagerRef.current;
|
|
16
|
-
const getIosKeystrokeManager = ()=>iosKeystrokeManagerRef.current;
|
|
17
|
-
useEffect(()=>{
|
|
18
|
-
keystrokeManagerRef.current = new KeystrokeManager();
|
|
19
|
-
androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();
|
|
20
|
-
iosKeystrokeManagerRef.current = new IosKeystrokeManager();
|
|
21
|
-
}, []);
|
|
22
|
-
return /*#__PURE__*/ jsx(Area2Context.Provider, {
|
|
23
|
-
value: {
|
|
24
|
-
...state,
|
|
25
|
-
getKeystrokeManager,
|
|
26
|
-
getAndroidKeystrokeManager,
|
|
27
|
-
getIosKeystrokeManager
|
|
28
|
-
},
|
|
29
|
-
children: children
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const area2Reducer = (state, action)=>{
|
|
34
|
-
switch(action.type){
|
|
35
|
-
case '[A2 Desktop] - Update text':
|
|
36
|
-
return {
|
|
37
|
-
...state,
|
|
38
|
-
desktopTextValue: action.payload.newValue
|
|
39
|
-
};
|
|
40
|
-
default:
|
|
41
|
-
return state;
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const getBrowserInfo = ()=>browserName;
|
|
46
|
-
|
|
47
|
-
const getOsInfo = ()=>osName;
|
|
48
|
-
|
|
49
|
-
const getPlatform = ()=>{
|
|
50
|
-
if (isAndroid) return 'android';
|
|
51
|
-
if (isDesktop) return 'desktop';
|
|
52
|
-
return 'ios';
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
5
|
+
const formatDemoKeystrokeData = (isMobile)=>{
|
|
56
6
|
const base = {
|
|
57
|
-
session_id:
|
|
7
|
+
session_id: '4ed161b5-[* * *]',
|
|
58
8
|
temporal_kinematics: [
|
|
59
9
|
'* * *'
|
|
60
10
|
],
|
|
@@ -86,37 +36,34 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
86
36
|
/**
|
|
87
37
|
* Keystroke hook for android mobile browser
|
|
88
38
|
*/ const useMobileKeystrokeAndroid = ()=>{
|
|
89
|
-
const { getAndroidKeystrokeManager } = useContext(Area2Context);
|
|
39
|
+
// const { getAndroidKeystrokeManager } = useContext(Area2Context);
|
|
90
40
|
/**
|
|
91
41
|
* Handles the before input event.
|
|
92
42
|
* @param {string} newValue - The new value of the input before the input event.
|
|
93
43
|
* @param {string} inputValue - The current value of the input.
|
|
94
44
|
*/ const handleProcessOnBeforeInput = useCallback((newValue, inputValue)=>{
|
|
95
|
-
getAndroidKeystrokeManager().processBeforeInput(newValue, inputValue);
|
|
96
45
|
}, []);
|
|
97
46
|
/**
|
|
98
47
|
* Handles the paste event.
|
|
99
48
|
* @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
|
|
100
49
|
*/ const handleProcessPaste = useCallback((event)=>{
|
|
101
|
-
|
|
102
|
-
|
|
50
|
+
event.clipboardData.getData("text");
|
|
51
|
+
// getAndroidKeystrokeManager().processPaste(pastedText);
|
|
103
52
|
}, []);
|
|
104
53
|
/**
|
|
105
54
|
* Handles the key input event.
|
|
106
55
|
* @param {string} inputContent - The content of the key input.
|
|
107
56
|
*/ const handleProcessKeyInput = useCallback((inputContent)=>{
|
|
108
|
-
getAndroidKeystrokeManager().processKeyInput(inputContent);
|
|
109
57
|
}, []);
|
|
110
58
|
/**
|
|
111
59
|
* Handles the keydown event.
|
|
112
60
|
* @param {HTMLInputElement} target - The target input element.
|
|
113
61
|
*/ const handleProcessKeydown = useCallback((target)=>{
|
|
114
|
-
getAndroidKeystrokeManager().processKeydown(target);
|
|
115
62
|
}, []);
|
|
116
63
|
/**
|
|
117
64
|
* Handles the keyup event.
|
|
118
65
|
*/ const handleProcessKeyup = useCallback(()=>{
|
|
119
|
-
|
|
66
|
+
// getAndroidKeystrokeManager().processKeyup();
|
|
120
67
|
}, []);
|
|
121
68
|
/**
|
|
122
69
|
* Ends the typing session and returns the typing data.
|
|
@@ -135,14 +82,14 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
135
82
|
* Ends the demo typing session and returns the typing data.
|
|
136
83
|
* @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
|
|
137
84
|
*/ const handleEndDemoTypingSession = useCallback(()=>{
|
|
138
|
-
const typingData = getAndroidKeystrokeManager().endTypingSession();
|
|
139
|
-
getAndroidKeystrokeManager().resetTypingData();
|
|
140
|
-
if (!typingData.startUnixTime) {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
145
|
-
return formatDemoKeystrokeData(
|
|
85
|
+
// const typingData = getAndroidKeystrokeManager().endTypingSession();
|
|
86
|
+
// getAndroidKeystrokeManager().resetTypingData();
|
|
87
|
+
// if (!typingData.startUnixTime) {
|
|
88
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
89
|
+
// return;
|
|
90
|
+
// }
|
|
91
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
92
|
+
return formatDemoKeystrokeData(true);
|
|
146
93
|
}, []);
|
|
147
94
|
return {
|
|
148
95
|
handleProcessOnBeforeInput,
|
|
@@ -157,19 +104,17 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
157
104
|
/**
|
|
158
105
|
* Keystroke hook for desktop platforms.
|
|
159
106
|
*/ const useDesktopKeystroke = ()=>{
|
|
160
|
-
const { getKeystrokeManager } = useContext(Area2Context);
|
|
161
|
-
const getIsTypingSessionActive = ()=>getKeystrokeManager().getIsTypingSessionActive;
|
|
107
|
+
// const { getKeystrokeManager } = useContext(Area2Context);
|
|
108
|
+
// const getIsTypingSessionActive = () => getKeystrokeManager().getIsTypingSessionActive;
|
|
162
109
|
/**
|
|
163
110
|
* Handles the keydown event.
|
|
164
111
|
* @param {string} key - The key pressed.
|
|
165
112
|
*/ const handleProcessKeydown = useCallback((key)=>{
|
|
166
|
-
getKeystrokeManager().processKeydown(key);
|
|
167
113
|
}, []);
|
|
168
114
|
/**
|
|
169
115
|
* Handles the keyup event.
|
|
170
116
|
* @param {string} key - The key released.
|
|
171
117
|
*/ const handleProcessKeyup = useCallback((key)=>{
|
|
172
|
-
getKeystrokeManager().processKeyup(key);
|
|
173
118
|
}, []);
|
|
174
119
|
/**
|
|
175
120
|
* Ends the typing session and returns the typing data.
|
|
@@ -188,19 +133,19 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
188
133
|
* Ends the demo typing session and returns the typing data.
|
|
189
134
|
* @returns {A2DemoCapturePayload | undefined} - The typing session data or undefined if no data.
|
|
190
135
|
*/ const handleEndDemoTypingSession = useCallback(()=>{
|
|
191
|
-
const typingData = getKeystrokeManager().endTypingSession();
|
|
192
|
-
getKeystrokeManager().resetTypingData();
|
|
193
|
-
if (!typingData.startUnixTime) {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
198
|
-
return formatDemoKeystrokeData(
|
|
136
|
+
// const typingData = getKeystrokeManager().endTypingSession();
|
|
137
|
+
// getKeystrokeManager().resetTypingData();
|
|
138
|
+
// if (!typingData.startUnixTime) {
|
|
139
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
140
|
+
// return;
|
|
141
|
+
// }
|
|
142
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
143
|
+
return formatDemoKeystrokeData(false);
|
|
199
144
|
}, []);
|
|
200
145
|
return {
|
|
201
146
|
handleProcessKeydown,
|
|
202
147
|
handleProcessKeyup,
|
|
203
|
-
getIsTypingSessionActive,
|
|
148
|
+
getIsTypingSessionActive: ()=>false,
|
|
204
149
|
handleEndTypingSession: handleEndDemoTypingSession
|
|
205
150
|
};
|
|
206
151
|
};
|
|
@@ -209,7 +154,7 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
209
154
|
* Keystroke for ios mobile browser
|
|
210
155
|
* @param {string} inputValue - The current value of the text input - Needed to detect auto-correct changes.
|
|
211
156
|
*/ const useMobileKeystrokeIOS = ()=>{
|
|
212
|
-
const { getIosKeystrokeManager } = useContext(Area2Context);
|
|
157
|
+
// const { getIosKeystrokeManager } = useContext(Area2Context);
|
|
213
158
|
//! Undefined behavior - Try to load via context - provider
|
|
214
159
|
/**
|
|
215
160
|
* Processes auto-correction based on the current input value.
|
|
@@ -219,22 +164,18 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
219
164
|
* Handles the before input event.
|
|
220
165
|
* @param {number} value - The length of the content before the input event.
|
|
221
166
|
*/ const handleProcessOnBeforeInput = useCallback((value)=>{
|
|
222
|
-
getIosKeystrokeManager().setPrevContentLength = value;
|
|
223
167
|
}, []);
|
|
224
168
|
/**
|
|
225
169
|
* Handles the paste event.
|
|
226
170
|
* @param {ClipboardEvent<HTMLInputElement>} event - The paste event.
|
|
227
171
|
*/ const handleProcessPaste = useCallback((event)=>{
|
|
228
|
-
|
|
229
|
-
getIosKeystrokeManager().processPaste(pastedText);
|
|
172
|
+
event.clipboardData.getData("text");
|
|
230
173
|
}, []);
|
|
231
174
|
/**
|
|
232
175
|
* Checks for text prediction and processes it.
|
|
233
176
|
* @param {string} newValue - The new value of the text input.
|
|
234
177
|
* @param {string} inputValue - The current value of the text input.
|
|
235
178
|
*/ const checkForPrediction = useCallback((newValue, inputValue)=>{
|
|
236
|
-
const textSnapshot = inputValue; // Before it changes
|
|
237
|
-
getIosKeystrokeManager().processPrediction(newValue, textSnapshot);
|
|
238
179
|
}, []);
|
|
239
180
|
/**
|
|
240
181
|
* Handles the input change event
|
|
@@ -249,13 +190,11 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
249
190
|
* @param {string} keyPressed - The key that was pressed.
|
|
250
191
|
* @param {HTMLInputElement} target - The target input element.
|
|
251
192
|
*/ const handleProcessKeydown = useCallback((keyPressed, target)=>{
|
|
252
|
-
getIosKeystrokeManager().processKeydown(keyPressed, target);
|
|
253
193
|
}, []);
|
|
254
194
|
/**
|
|
255
195
|
* Handles the keyup event.
|
|
256
196
|
* @param {string} key - The key that was released.
|
|
257
197
|
*/ const handleProcessKeyup = useCallback((keyPressed)=>{
|
|
258
|
-
getIosKeystrokeManager().processKeyup(keyPressed);
|
|
259
198
|
}, []);
|
|
260
199
|
/**
|
|
261
200
|
* Ends the typing session and returns the typing data.
|
|
@@ -274,14 +213,14 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
274
213
|
* Ends the demo typing session and returns the typing data.
|
|
275
214
|
* @returns {A2DemoCapturePayload | undefined} - The typing data or undefined if no data.
|
|
276
215
|
*/ const handleEndDemoTypingSession = useCallback(()=>{
|
|
277
|
-
const typingData = getIosKeystrokeManager().endTypingSession();
|
|
278
|
-
getIosKeystrokeManager().resetTypingData();
|
|
279
|
-
if (!typingData.startUnixTime) {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
}
|
|
283
|
-
typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
284
|
-
return formatDemoKeystrokeData(
|
|
216
|
+
// const typingData = getIosKeystrokeManager().endTypingSession();
|
|
217
|
+
// getIosKeystrokeManager().resetTypingData();
|
|
218
|
+
// if (!typingData.startUnixTime) {
|
|
219
|
+
// console.warn(`Empty typing data for session: ${typingData.sessionID}. Skipping...`);
|
|
220
|
+
// return;
|
|
221
|
+
// }
|
|
222
|
+
// typingData.appContext = `${getOsInfo()} - ${getBrowserInfo()}`;
|
|
223
|
+
return formatDemoKeystrokeData(true);
|
|
285
224
|
}, []);
|
|
286
225
|
return {
|
|
287
226
|
// processAutoCorrection,
|
|
@@ -294,6 +233,12 @@ const formatDemoKeystrokeData = (payload, isMobile)=>{
|
|
|
294
233
|
};
|
|
295
234
|
};
|
|
296
235
|
|
|
236
|
+
const getPlatform = ()=>{
|
|
237
|
+
if (isAndroid) return 'android';
|
|
238
|
+
if (isDesktop) return 'desktop';
|
|
239
|
+
return 'ios';
|
|
240
|
+
};
|
|
241
|
+
|
|
297
242
|
function useKeystrokeBuilder(target) {
|
|
298
243
|
const targetPlatform = target ?? getPlatform();
|
|
299
244
|
switch(targetPlatform){
|
|
@@ -364,7 +309,7 @@ function useKeystrokeBuilder(target) {
|
|
|
364
309
|
* @param {React.Ref<HTMLInputElement>} [ref] - Optional ref for the input element.
|
|
365
310
|
* @param {Function} [handleEndSessionOnEnter] - Optional function to handle ending the session on Enter key press.
|
|
366
311
|
*/ const A2DesktopTextInput = ({ ref, onChange, handleEndSessionOnEnter, ...rest })=>{
|
|
367
|
-
const { handleProcessKeydown, handleProcessKeyup
|
|
312
|
+
const { handleProcessKeydown, handleProcessKeyup } = useDesktopKeystroke();
|
|
368
313
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
369
314
|
children: /*#__PURE__*/ jsx("input", {
|
|
370
315
|
ref: ref,
|
|
@@ -377,9 +322,7 @@ function useKeystrokeBuilder(target) {
|
|
|
377
322
|
if (key !== 'Enter') {
|
|
378
323
|
return;
|
|
379
324
|
}
|
|
380
|
-
if (!getIsTypingSessionActive()) {
|
|
381
|
-
return;
|
|
382
|
-
}
|
|
325
|
+
// if (!getIsTypingSessionActive()) { return }
|
|
383
326
|
handleEndSessionOnEnter?.(); //? Call parent's function if it exists
|
|
384
327
|
},
|
|
385
328
|
onChange: (event)=>{
|
|
@@ -417,4 +360,40 @@ function useKeystrokeBuilder(target) {
|
|
|
417
360
|
});
|
|
418
361
|
};
|
|
419
362
|
|
|
363
|
+
const Area2Context = /*#__PURE__*/ createContext({});
|
|
364
|
+
|
|
365
|
+
const AREA2_INITIAL_STATE = {};
|
|
366
|
+
const Area2Provider = ({ children })=>{
|
|
367
|
+
const [state] = useReducer(area2Reducer, AREA2_INITIAL_STATE); //[state, dispatch]
|
|
368
|
+
// const keystrokeManagerRef = useRef<KeystrokeManager>();
|
|
369
|
+
// const androidKeystrokeManagerRef = useRef<AndroidKeystrokeManager>();
|
|
370
|
+
// const iosKeystrokeManagerRef = useRef<IosKeystrokeManager>();
|
|
371
|
+
// const getKeystrokeManager = () => keystrokeManagerRef.current!;
|
|
372
|
+
// const getAndroidKeystrokeManager = () => androidKeystrokeManagerRef.current!;
|
|
373
|
+
// const getIosKeystrokeManager = () => iosKeystrokeManagerRef.current!;
|
|
374
|
+
// useEffect(() => {
|
|
375
|
+
// keystrokeManagerRef.current = new KeystrokeManager();
|
|
376
|
+
// androidKeystrokeManagerRef.current = new AndroidKeystrokeManager();
|
|
377
|
+
// iosKeystrokeManagerRef.current = new IosKeystrokeManager();
|
|
378
|
+
// }, []);
|
|
379
|
+
return /*#__PURE__*/ jsx(Area2Context.Provider, {
|
|
380
|
+
value: {
|
|
381
|
+
...state
|
|
382
|
+
},
|
|
383
|
+
children: children
|
|
384
|
+
});
|
|
385
|
+
};
|
|
386
|
+
|
|
387
|
+
const area2Reducer = (state, action)=>{
|
|
388
|
+
switch(action.type){
|
|
389
|
+
case '[A2 Desktop] - Update text':
|
|
390
|
+
return {
|
|
391
|
+
...state,
|
|
392
|
+
desktopTextValue: action.payload.newValue
|
|
393
|
+
};
|
|
394
|
+
default:
|
|
395
|
+
return state;
|
|
396
|
+
}
|
|
397
|
+
};
|
|
398
|
+
|
|
420
399
|
export { A2Textbox, Area2Provider, useKeystrokeBuilder as useCipherCapture };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@area2-ai/a2-demo-cipher-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Area2 AI",
|
|
6
6
|
"description": "React demo component for Area2 cipher integration",
|
|
@@ -79,7 +79,6 @@
|
|
|
79
79
|
"vitest": "^4.0.17"
|
|
80
80
|
},
|
|
81
81
|
"dependencies": {
|
|
82
|
-
"@area2-ai/a2-cipher-core": "^2.1.0",
|
|
83
82
|
"react-device-detect": "^2.2.3"
|
|
84
83
|
}
|
|
85
84
|
}
|